[IndexFilters][SearchField] Make add as filter a button

Shopify · Aug 26, 2024 · ee2bb4b · ee2bb4b
1 parent bc348a9
commit ee2bb4b
Show file tree

Hide file tree

Showing 3 changed files with 44 additions and 7 deletions.
diff --git a/polaris-react/locales/en.json b/polaris-react/locales/en.json
@@ -179,13 +179,14 @@
     "IndexFilters": {
       "searchFilterTooltip": "Filter",
       "searchFilterTooltipWithShortcut": "Filter (F)",
-      "searchFilterAccessibilityLabel": "Filter results",
+      "searchFilterAccessibilityLabel": "Type a query to search the list, and keypress enter to add your query as a filter",
       "editSearchFilter": "Edit search filter",
       "SearchField": {
         "defaultPlaceholder": "Search",
         "action": {
           "addAsFilter": "add as filter",
-          "addToFilter": "add to filter"
+          "addToFilter": "add to filter",
+          "accessibilityLabel": "Add search query as a list filter"
         }
       },
       "sort": "Sort your results",

diff --git a/polaris-react/src/components/IndexFilters/components/SearchField/SearchField.module.css b/polaris-react/src/components/IndexFilters/components/SearchField/SearchField.module.css
@@ -0,0 +1,21 @@
+.AddAsFilterAction {
+  padding-block: var(--p-space-050);
+  background: none;
+  border: none;
+  color: unset;
+  cursor: pointer;
+  border-radius: var(--p-border-radius-100);
+
+  &:hover {
+    background-color: var(--p-color-bg-fill-transparent-hover);
+    color: var(--p-color-text-secondary);
+
+    svg {
+      fill: var(--p-color-icon-secondary-hover);
+    }
+  }
+
+  &:active {
+    background-color: var(--p-color-bg-fill-transparent-active);
+  }
+}
diff --git a/polaris-react/src/components/IndexFilters/components/SearchField/SearchField.tsx b/polaris-react/src/components/IndexFilters/components/SearchField/SearchField.tsx
@@ -7,6 +7,9 @@ import {TextField} from '../../../TextField';
 import {useBreakpoints} from '../../../../utilities/breakpoints';
 import {useI18n} from '../../../../utilities/i18n';
 import {InlineStack} from '../../../InlineStack';
+import {UnstyledButton} from '../../../UnstyledButton';
+
+import styles from './SearchField.module.css';
 
 export interface SearchFieldProps {
   focused?: boolean;
@@ -55,6 +58,10 @@ export function SearchField({
     if (event.key === 'Enter') onKeyDownEnter?.();
   }
 
+  function handleClick() {
+    onKeyDownEnter?.();
+  }
+
   function handleFocus() {
     onFocus?.();
     setFocused(true);
@@ -67,12 +74,20 @@ export function SearchField({
 
   const addAsFilterText =
     value && focused ? (
-      <InlineStack gap="200" blockAlign="center" align="end">
-        {i18n.translate('Polaris.IndexFilters.SearchField.action.addAsFilter')}
-        <Box borderRadius="100" background="bg-surface-tertiary-hover">
+      <UnstyledButton
+        onClick={handleClick}
+        className={styles.AddAsFilterAction}
+        accessibilityLabel={i18n.translate(
+          'Polaris.IndexFilters.SearchField.action.accessibilityLabel',
+        )}
+      >
+        <InlineStack gap="100" blockAlign="center" align="end">
+          {i18n.translate(
+            'Polaris.IndexFilters.SearchField.action.addAsFilter',
+          )}
           <Icon source={ReturnIcon} tone="inherit" />
-        </Box>
-      </InlineStack>
+        </InlineStack>
+      </UnstyledButton>
     ) : undefined;
 
   return (