fix(ui-patterns): responsive with_icon spacing (supabase#40841)

fsansalvadore · web-flow · commit dfecff7629c8 · 2025-11-27T15:38:10.000Z
diff --git a/apps/design-system/registry/default/example/page-layout-list.tsx b/apps/design-system/registry/default/example/page-layout-list.tsx
@@ -71,7 +71,7 @@ export default function PageLayoutList(): React.JSX.Element {
                   <Input
                     placeholder="Search for a function"
                     size="tiny"
-                    icon={<Search size={14} />}
+                    icon={<Search />}
                     className="w-full lg:w-52"
                   />
                 </div>
diff --git a/apps/studio/components/interfaces/Auth/OAuthApps/OAuthAppsList.tsx b/apps/studio/components/interfaces/Auth/OAuthApps/OAuthAppsList.tsx
@@ -165,7 +165,7 @@ export const OAuthAppsList = () => {
             <Input
               placeholder="Search oAuth apps"
               size="tiny"
-              icon={<Search size="14" />}
+              icon={<Search />}
               value={filterString}
               className="w-full lg:w-52"
               onChange={(e) => setFilterString(e.target.value)}
diff --git a/apps/studio/components/interfaces/Auth/Policies/PolicyEditorPanel/PolicyTemplates.tsx b/apps/studio/components/interfaces/Auth/Policies/PolicyEditorPanel/PolicyTemplates.tsx
@@ -59,7 +59,7 @@ export const PolicyTemplates = ({
       <Input
         size="small"
         id="template-search"
-        icon={<Search size={16} className="text-foreground-muted" />}
+        icon={<Search className="text-foreground-muted" />}
         placeholder="Search templates"
         value={search}
         onChange={(event) => setSearch(event.target.value)}
diff --git a/apps/studio/components/interfaces/Database/EnumeratedTypes/EnumeratedTypes.tsx b/apps/studio/components/interfaces/Database/EnumeratedTypes/EnumeratedTypes.tsx
@@ -90,7 +90,7 @@ export const EnumeratedTypes = () => {
             className="w-full lg:w-52"
             onChange={(e) => setSearch(e.target.value)}
             placeholder="Search for a type"
-            icon={<Search size={14} />}
+            icon={<Search />}
           />
         </div>
 
diff --git a/apps/studio/components/interfaces/Database/Extensions/Extensions.tsx b/apps/studio/components/interfaces/Database/Extensions/Extensions.tsx
@@ -69,7 +69,7 @@ export const Extensions = () => {
           value={filterString}
           onChange={(e) => setFilterString(e.target.value)}
           className="w-52"
-          icon={<Search size={14} />}
+          icon={<Search />}
         />
       </div>
 
diff --git a/apps/studio/components/interfaces/Database/Functions/FunctionsList/FunctionsList.tsx b/apps/studio/components/interfaces/Database/Functions/FunctionsList/FunctionsList.tsx
@@ -257,7 +257,7 @@ const FunctionsList = () => {
               <Input
                 placeholder="Search for a function"
                 size="tiny"
-                icon={<Search size={14} />}
+                icon={<Search />}
                 value={filterString}
                 className="w-full lg:w-52"
                 onChange={(e) => setFilterString(e.target.value)}
diff --git a/apps/studio/components/interfaces/Database/Hooks/HooksList/HooksList.tsx b/apps/studio/components/interfaces/Database/Hooks/HooksList/HooksList.tsx
@@ -58,7 +58,7 @@ export const HooksList = ({
         <Input
           placeholder="Search for a webhook"
           size="tiny"
-          icon={<Search size="14" />}
+          icon={<Search />}
           value={filterString}
           className="w-52"
           onChange={(e) => setFilterString(e.target.value)}
diff --git a/apps/studio/components/interfaces/Database/Indexes/Indexes.tsx b/apps/studio/components/interfaces/Database/Indexes/Indexes.tsx
@@ -148,7 +148,7 @@ const Indexes = () => {
               className="w-full lg:w-52"
               onChange={(e) => setSearch(e.target.value)}
               placeholder="Search for an index"
-              icon={<Search size={14} />}
+              icon={<Search />}
             />
 
             {!isSchemaLocked && (
diff --git a/apps/studio/components/interfaces/Database/Migrations/Migrations.tsx b/apps/studio/components/interfaces/Database/Migrations/Migrations.tsx
@@ -89,9 +89,8 @@ const Migrations = () => {
                   value={search}
                   className="w-full lg:w-52"
                   onChange={(e: any) => setSearch(e.target.value)}
-                  icon={<Search size="14" />}
+                  icon={<Search />}
                 />
-
                 <Card>
                   <Table>
                     <TableHeader>
diff --git a/apps/studio/components/interfaces/Database/Publications/PublicationsList.tsx b/apps/studio/components/interfaces/Database/Publications/PublicationsList.tsx
@@ -100,8 +100,8 @@ export const PublicationsList = () => {
           <div className="flex items-center">
             <Input
               size="tiny"
-              icon={<Search size={12} />}
-              className="w-48 pl-8"
+              icon={<Search />}
+              className="w-48"
               placeholder="Search for a publication"
               value={filterString}
               onChange={(e) => setFilterString(e.target.value)}
diff --git a/apps/studio/components/interfaces/Database/Publications/PublicationsTables.tsx b/apps/studio/components/interfaces/Database/Publications/PublicationsTables.tsx
@@ -69,8 +69,8 @@ export const PublicationsTables = () => {
                 placeholder="Search for a table"
                 value={filterString}
                 onChange={(e) => setFilterString(e.target.value)}
-                icon={<Search size={12} />}
-                className="w-48 pl-8"
+                icon={<Search />}
+                className="w-48"
               />
             </div>
           </div>
diff --git a/apps/studio/components/interfaces/Database/Replication/Destinations.tsx b/apps/studio/components/interfaces/Database/Replication/Destinations.tsx
@@ -14,7 +14,7 @@ import { useReplicationPipelinesQuery } from 'data/replication/pipelines-query'
 import { useReplicationSourcesQuery } from 'data/replication/sources-query'
 import { useSelectedOrganizationQuery } from 'hooks/misc/useSelectedOrganization'
 import { DOCS_URL } from 'lib/constants'
-import { Button, cn, Input_Shadcn_ } from 'ui'
+import { Button, cn, Input } from 'ui'
 import { GenericSkeletonLoader } from 'ui-patterns'
 import { DestinationPanel } from './DestinationPanel/DestinationPanel'
 import { DestinationRow } from './DestinationRow'
@@ -100,18 +100,14 @@ export const Destinations = () => {
       <div className="mb-4">
         <div className="flex items-center justify-between">
           <div className="flex items-center">
-            <div className="relative">
-              <Search
-                className="absolute left-3 top-1/2 transform -translate-y-1/2 text-foreground-lighter"
-                size={14}
-              />
-              <Input_Shadcn_
-                className="pl-9 h-7"
-                placeholder={'Filter destinations'}
-                value={filterString}
-                onChange={(e) => setFilterString(e.target.value)}
-              />
-            </div>
+            <Input
+              placeholder="Filter destinations"
+              size="tiny"
+              icon={<Search />}
+              value={filterString}
+              className="w-full lg:w-52"
+              onChange={(e) => setFilterString(e.target.value)}
+            />
           </div>
           <div className="flex items-center gap-x-2">
             {!!sourceId && (
diff --git a/apps/studio/components/interfaces/Database/Replication/ReplicationPipelineStatus/ReplicationPipelineStatus.tsx b/apps/studio/components/interfaces/Database/Replication/ReplicationPipelineStatus/ReplicationPipelineStatus.tsx
@@ -215,8 +215,8 @@ export const ReplicationPipelineStatus = () => {
               </Button>
             )}
             <Input
-              icon={<Search size={12} />}
-              className="pl-7 h-[26px] text-xs"
+              icon={<Search />}
+              className="text-xs"
               placeholder="Search for tables"
               value={searchString}
               disabled={isPipelineError}
@@ -228,7 +228,7 @@ export const ReplicationPipelineStatus = () => {
                         key="close"
                         className="mx-2 cursor-pointer text-foreground"
                         size={14}
-                        strokeWidth={2}
+                        strokeWidth={1.5}
                         onClick={() => setSearchString('')}
                       />,
                     ]
diff --git a/apps/studio/components/interfaces/Database/Roles/RolesList.tsx b/apps/studio/components/interfaces/Database/Roles/RolesList.tsx
@@ -84,7 +84,7 @@ export const RolesList = () => {
             size="tiny"
             className="w-52"
             placeholder="Search for a role"
-            icon={<Search size={12} />}
+            icon={<Search />}
             value={filterString}
             onChange={(event: any) => setFilterString(event.target.value)}
             actions={
diff --git a/apps/studio/components/interfaces/Database/Tables/ColumnList.tsx b/apps/studio/components/interfaces/Database/Tables/ColumnList.tsx
@@ -82,7 +82,7 @@ export const ColumnList = ({
             placeholder="Filter columns"
             value={filterString}
             onChange={(e: any) => setFilterString(e.target.value)}
-            icon={<Search size={12} />}
+            icon={<Search />}
           />
         </div>
         {!isSchemaLocked && isTableEntity && (
diff --git a/apps/studio/components/interfaces/Database/Tables/TableList.tsx b/apps/studio/components/interfaces/Database/Tables/TableList.tsx
@@ -280,7 +280,7 @@ export const TableList = ({
             placeholder="Search for a table"
             value={filterString}
             onChange={(e) => setFilterString(e.target.value)}
-            icon={<Search size={12} />}
+            icon={<Search />}
           />
 
           {!isSchemaLocked && (
diff --git a/apps/studio/components/interfaces/Database/Triggers/TriggersList/TriggersList.tsx b/apps/studio/components/interfaces/Database/Triggers/TriggersList/TriggersList.tsx
@@ -190,7 +190,7 @@ execute function function_name();`)
             <Input
               placeholder="Search for a trigger"
               size="tiny"
-              icon={<Search size="14" />}
+              icon={<Search />}
               value={filterString}
               className="w-full lg:w-52"
               onChange={(e) => setFilterString(e.target.value)}
diff --git a/apps/studio/components/interfaces/Functions/EdgeFunctionSecrets/EdgeFunctionSecrets.tsx b/apps/studio/components/interfaces/Functions/EdgeFunctionSecrets/EdgeFunctionSecrets.tsx
@@ -117,7 +117,7 @@ export const EdgeFunctionSecrets = () => {
                       placeholder="Search for a secret"
                       value={searchString}
                       onChange={(e: any) => setSearchString(e.target.value)}
-                      icon={<Search size={14} />}
+                      icon={<Search />}
                     />
                   </div>
 
diff --git a/apps/studio/components/interfaces/HomePageActions.tsx b/apps/studio/components/interfaces/HomePageActions.tsx
@@ -57,9 +57,9 @@ export const HomePageActions = ({
       <div className="flex items-center gap-2">
         <Input
           placeholder="Search for a project"
-          icon={<Search size={12} />}
+          icon={<Search />}
           size="tiny"
-          className="w-32 md:w-64 pl-8 [&>div>div>div>input]:!pl-7 [&>div>div>div>div]:!pl-2"
+          className="w-32 md:w-64"
           value={search}
           onChange={(event) => setSearch(event.target.value)}
           actions={[
diff --git a/apps/studio/components/interfaces/Integrations/CronJobs/CronJobsTab.tsx b/apps/studio/components/interfaces/Integrations/CronJobs/CronJobsTab.tsx
@@ -175,7 +175,7 @@ export const CronjobsTab = () => {
               size="tiny"
               className="w-52"
               placeholder="Search for a job"
-              icon={<Search size={14} />}
+              icon={<Search />}
               value={search ?? ''}
               onChange={(e) => setSearch(e.target.value)}
               onKeyDown={(e) => {
diff --git a/apps/studio/components/interfaces/Integrations/Queues/QueuesTab.tsx b/apps/studio/components/interfaces/Integrations/Queues/QueuesTab.tsx
@@ -63,7 +63,7 @@ export const QueuesTab = () => {
               size="tiny"
               className="w-52"
               placeholder="Search for a queue"
-              icon={<Search size={14} />}
+              icon={<Search />}
               value={search ?? ''}
               onChange={(e) => setSearch(e.target.value)}
               onKeyDown={(e) => {
diff --git a/apps/studio/components/interfaces/Integrations/Vault/Secrets/SecretsManagement.tsx b/apps/studio/components/interfaces/Integrations/Vault/Secrets/SecretsManagement.tsx
@@ -110,7 +110,7 @@ export const SecretsManagement = () => {
                 size="tiny"
                 className="w-52"
                 placeholder="Search by name or key ID"
-                icon={<Search size={14} />}
+                icon={<Search />}
                 value={searchValue ?? ''}
                 onChange={(e) => setSearchValue(e.target.value)}
                 actions={[
diff --git a/apps/studio/components/interfaces/Organization/TeamSettings/TeamSettings.tsx b/apps/studio/components/interfaces/Organization/TeamSettings/TeamSettings.tsx
@@ -40,7 +40,7 @@ export const TeamSettings = () => {
             <Input
               size="tiny"
               autoComplete="off"
-              icon={<Search size={12} />}
+              icon={<Search />}
               value={searchString}
               onChange={(e: any) => setSearchString(e.target.value)}
               name="email"
diff --git a/apps/studio/components/interfaces/QueryPerformance/QueryPerformanceFilterBar.tsx b/apps/studio/components/interfaces/QueryPerformance/QueryPerformanceFilterBar.tsx
@@ -79,7 +79,7 @@ export const QueryPerformanceFilterBar = ({
           <Input
             size="tiny"
             autoComplete="off"
-            icon={<Search size={12} />}
+            icon={<Search />}
             value={inputValue}
             onChange={(e: ChangeEvent<HTMLInputElement>) => setInputValue(e.target.value)}
             name="keyword"
diff --git a/apps/studio/components/interfaces/Storage/AnalyticsBuckets/index.tsx b/apps/studio/components/interfaces/Storage/AnalyticsBuckets/index.tsx
@@ -105,7 +105,7 @@ export const AnalyticsBuckets = () => {
                   placeholder="Search for a bucket"
                   value={filterString}
                   onChange={(e) => setFilterString(e.target.value)}
-                  icon={<Search size={12} />}
+                  icon={<Search />}
                 />
                 <CreateAnalyticsBucketModal buttonType="primary" buttonClassName="w-fit" />
               </div>
diff --git a/apps/studio/components/interfaces/Storage/FilesBuckets/index.tsx b/apps/studio/components/interfaces/Storage/FilesBuckets/index.tsx
@@ -100,7 +100,7 @@ export const FilesBuckets = () => {
                     placeholder="Search for a bucket"
                     value={filterString}
                     onChange={(e) => setFilterString(e.target.value)}
-                    icon={<Search size={12} />}
+                    icon={<Search />}
                   />
                   <DropdownMenu>
                     <DropdownMenuTrigger asChild>
diff --git a/apps/studio/components/interfaces/Storage/StorageExplorer/FileExplorerHeader.tsx b/apps/studio/components/interfaces/Storage/StorageExplorer/FileExplorerHeader.tsx
@@ -454,14 +454,14 @@ export const FileExplorerHeader = ({
               size="tiny"
               autoFocus
               className="w-52"
-              icon={<Search size={14} strokeWidth={2} />}
+              icon={<Search />}
               actions={[
-                <X
-                  key="close"
-                  className="mx-2 cursor-pointer text-foreground"
-                  size={14}
-                  strokeWidth={2}
+                <Button
+                  size="tiny"
+                  type="text"
+                  icon={<X />}
                   onClick={onCancelSearch}
+                  className="p-0 h-5 w-5"
                 />,
               ]}
               placeholder="Search for a file or folder"
@@ -471,7 +471,7 @@ export const FileExplorerHeader = ({
             />
           ) : (
             <Button
-              icon={<Search size={16} strokeWidth={2} />}
+              icon={<Search />}
               size="tiny"
               type="text"
               className="px-1"
diff --git a/apps/studio/components/interfaces/Storage/StoragePolicies/StoragePolicies.tsx b/apps/studio/components/interfaces/Storage/StoragePolicies/StoragePolicies.tsx
@@ -243,13 +243,13 @@ export const StoragePolicies = () => {
                   size="tiny"
                   placeholder="Filter buckets"
                   className="block"
-                  containerClassName="w-full lg:w-52 [&>div>svg]:-mt-0.5"
+                  containerClassName="w-full lg:w-52"
                   value={searchString || ''}
                   onChange={(e) => {
                     const str = e.target.value
                     setSearchString(str)
                   }}
-                  icon={<Search size={14} />}
+                  icon={<Search />}
                   actions={
                     searchString ? (
                       <Button
diff --git a/apps/studio/components/interfaces/Storage/VectorBuckets/VectorBucketDetails/index.tsx b/apps/studio/components/interfaces/Storage/VectorBuckets/VectorBucketDetails/index.tsx
@@ -137,7 +137,7 @@ export const VectorBucketDetails = () => {
                 placeholder="Search for a table"
                 value={filterString}
                 onChange={(e) => setFilterString(e.target.value)}
-                icon={<Search size={12} />}
+                icon={<Search />}
                 className="w-48"
               />
               <CreateVectorTableSheet bucketName={bucket?.vectorBucketName} />
diff --git a/apps/studio/components/interfaces/Storage/VectorBuckets/index.tsx b/apps/studio/components/interfaces/Storage/VectorBuckets/index.tsx
@@ -86,7 +86,7 @@ export const VectorsBuckets = () => {
                   placeholder="Search for a bucket"
                   value={filterString}
                   onChange={(e) => setFilterString(e.target.value)}
-                  icon={<Search size={12} />}
+                  icon={<Search />}
                 />
 
                 <CreateVectorBucketButton onClick={() => setVisible(true)} />
diff --git a/apps/studio/components/interfaces/Support/Success.tsx b/apps/studio/components/interfaces/Support/Success.tsx
@@ -68,7 +68,7 @@ export const Success = ({
             <Input
               value={searchValue}
               onChange={(e) => setSearchValue(e.target.value)}
-              icon={<Search size={16} strokeWidth={1.5} />}
+              icon={<Search />}
               actions={[
                 <Button
                   asChild
diff --git a/apps/studio/pages/organizations.tsx b/apps/studio/pages/organizations.tsx
@@ -75,8 +75,8 @@ const OrganizationsPage: NextPageWithLayout = () => {
             <Input
               size="tiny"
               placeholder="Search for an organization"
-              icon={<Search size={16} />}
-              className="w-full flex-1 md:w-64 [&>div>div>div>input]:!pl-7 [&>div>div>div>div]:!pl-2"
+              icon={<Search />}
+              className="w-full flex-1 md:w-64"
               value={search}
               onChange={(event) => setSearch(event.target.value)}
             />
diff --git a/apps/studio/pages/project/[ref]/auth/policies.tsx b/apps/studio/pages/project/[ref]/auth/policies.tsx
@@ -230,14 +230,13 @@ const AuthPoliciesPage: NextPageWithLayout = () => {
           <Input
             size="tiny"
             placeholder="Filter tables and policies"
-            className="block w-full lg:w-52"
-            containerClassName="[&>div>svg]:-mt-0.5"
+            className="w-full lg:w-52"
             value={searchString || ''}
             onChange={(e) => {
               const str = e.target.value
               setSearchString(str)
             }}
-            icon={<Search size={14} />}
+            icon={<Search />}
             actions={
               searchString ? (
                 <Button
diff --git a/apps/studio/pages/project/[ref]/functions/index.tsx b/apps/studio/pages/project/[ref]/functions/index.tsx
@@ -106,9 +106,9 @@ const EdgeFunctionsPage: NextPageWithLayout = () => {
                           <div className="relative">
                             <Input
                               placeholder="Search function names"
-                              icon={<Search size={12} />}
+                              icon={<Search />}
                               size="tiny"
-                              className="w-32 md:w-64 pl-8 [&>div>div>div>input]:!pl-7 [&>div>div>div>div]:!pl-2"
+                              className="w-32 md:w-64"
                               value={search}
                               onChange={(event) => setSearch(event.target.value)}
                               actions={[
diff --git a/packages/ui-patterns/src/DataInputs/Input.tsx b/packages/ui-patterns/src/DataInputs/Input.tsx
diff --git a/packages/ui-patterns/src/InnerSideMenu/index.tsx b/packages/ui-patterns/src/InnerSideMenu/index.tsx
diff --git a/packages/ui-patterns/src/form/Layout/InputIconContainer.tsx b/packages/ui-patterns/src/form/Layout/InputIconContainer.tsx
diff --git a/packages/ui/src/components/Input/Input.tsx b/packages/ui/src/components/Input/Input.tsx
diff --git a/packages/ui/src/components/InputNumber/InputNumber.tsx b/packages/ui/src/components/InputNumber/InputNumber.tsx
diff --git a/packages/ui/src/components/Listbox/Listbox2.tsx b/packages/ui/src/components/Listbox/Listbox2.tsx
diff --git a/packages/ui/src/components/Select/Select.tsx b/packages/ui/src/components/Select/Select.tsx
diff --git a/packages/ui/src/lib/theme/defaultTheme.ts b/packages/ui/src/lib/theme/defaultTheme.ts
