[IndexFilters] Allow cancel button to be removed and auto-focus on Search field to be removed

.changeset/popular-oranges-drop.md

@@ -0,0 +1,5 @@
+---
+'@shopify/polaris': minor
+---
+
+Updated IndexFilters to better support a configuration of only search and sort

polaris-react/src/components/IndexFilters/IndexFilters.stories.tsx

@@ -2324,3 +2324,152 @@ export function WithNoFilters() {
     </Card>
   );
 }
+
+export function WithOnlySearchAndSort() {
+  const sleep = (ms: number) =>
+    new Promise((resolve) => setTimeout(resolve, ms));
+  const sortOptions: IndexFiltersProps['sortOptions'] = [
+    {label: 'Order', value: 'order asc', directionLabel: 'Ascending'},
+    {label: 'Order', value: 'order desc', directionLabel: 'Descending'},
+    {label: 'Customer', value: 'customer asc', directionLabel: 'A-Z'},
+    {label: 'Customer', value: 'customer desc', directionLabel: 'Z-A'},
+    {label: 'Date', value: 'date asc', directionLabel: 'A-Z'},
+    {label: 'Date', value: 'date desc', directionLabel: 'Z-A'},
+    {label: 'Total', value: 'total asc', directionLabel: 'Ascending'},
+    {label: 'Total', value: 'total desc', directionLabel: 'Descending'},
+  ];
+  const [sortSelected, setSortSelected] = useState(['order asc']);
+  const {mode, setMode} = useSetIndexFiltersMode(IndexFiltersMode.Filtering);
+  const onHandleCancel = () => {};
+
+  const onHandleSave = async () => {
+    await sleep(1);
+    return true;
+  };
+
+  const [queryValue, setQueryValue] = useState('');
+
+  const handleFiltersQueryChange = useCallback(
+    (value: string) => setQueryValue(value),
+    [],
+  );
+
+  const orders = [
+    {
+      id: '1020',
+      order: (
+        <Text as="span" variant="bodyMd" fontWeight="semibold">
+          #1020
+        </Text>
+      ),
+      date: 'Jul 20 at 4:34pm',
+      customer: 'Jaydon Stanton',
+      total: '$969.44',
+      paymentStatus: <Badge progress="complete">Paid</Badge>,
+      fulfillmentStatus: <Badge progress="incomplete">Unfulfilled</Badge>,
+    },
+    {
+      id: '1019',
+      order: (
+        <Text as="span" variant="bodyMd" fontWeight="semibold">
+          #1019
+        </Text>
+      ),
+      date: 'Jul 20 at 3:46pm',
+      customer: 'Ruben Westerfelt',
+      total: '$701.19',
+      paymentStatus: <Badge progress="partiallyComplete">Partially paid</Badge>,
+      fulfillmentStatus: <Badge progress="incomplete">Unfulfilled</Badge>,
+    },
+    {
+      id: '1018',
+      order: (
+        <Text as="span" variant="bodyMd" fontWeight="semibold">
+          #1018
+        </Text>
+      ),
+      date: 'Jul 20 at 3.44pm',
+      customer: 'Leo Carder',
+      total: '$798.24',
+      paymentStatus: <Badge progress="complete">Paid</Badge>,
+      fulfillmentStatus: <Badge progress="incomplete">Unfulfilled</Badge>,
+    },
+  ];
+  const resourceName = {
+    singular: 'order',
+    plural: 'orders',
+  };
+
+  const {selectedResources, allResourcesSelected, handleSelectionChange} =
+    useIndexResourceState(orders);
+
+  const rowMarkup = orders.map(
+    (
+      {id, order, date, customer, total, paymentStatus, fulfillmentStatus},
+      index,
+    ) => (
+      <IndexTable.Row
+        id={id}
+        key={id}
+        selected={selectedResources.includes(id)}
+        position={index}
+      >
+        <IndexTable.Cell>
+          <Text variant="bodyMd" fontWeight="bold" as="span">
+            {order}
+          </Text>
+        </IndexTable.Cell>
+        <IndexTable.Cell>{date}</IndexTable.Cell>
+        <IndexTable.Cell>{customer}</IndexTable.Cell>
+        <IndexTable.Cell>
+          <Text as="span" alignment="end" numeric>
+            {total}
+          </Text>
+        </IndexTable.Cell>
+        <IndexTable.Cell>{paymentStatus}</IndexTable.Cell>
+        <IndexTable.Cell>{fulfillmentStatus}</IndexTable.Cell>
+      </IndexTable.Row>
+    ),
+  );
+
+  return (
+    <Card padding="0">
+      <IndexFilters
+        sortOptions={sortOptions}
+        sortSelected={sortSelected}
+        queryValue={queryValue}
+        queryPlaceholder="Searching in all"
+        onQueryChange={handleFiltersQueryChange}
+        onQueryClear={() => setQueryValue('')}
+        onSort={setSortSelected}
+        autoFocusSearchField={false}
+        tabs={[]}
+        filters={[]}
+        appliedFilters={[]}
+        onClearAll={() => {}}
+        mode={mode}
+        setMode={setMode}
+        hideFilters
+        filteringAccessibilityTooltip="Search (F)"
+      />
+      <IndexTable
+        resourceName={resourceName}
+        itemCount={orders.length}
+        selectedItemsCount={
+          allResourcesSelected ? 'All' : selectedResources.length
+        }
+        onSelectionChange={handleSelectionChange}
+        headings={[
+          {title: 'Order'},
+          {title: 'Date'},
+          {title: 'Customer'},
+          {title: 'Total', alignment: 'end'},
+          {title: 'Payment status'},
+          {title: 'Fulfillment status'},
+        ]}
+      >
+        {rowMarkup}
+      </IndexTable>
+    </Card>
+  );
+}

polaris-react/src/components/IndexFilters/IndexFilters.tsx

@@ -75,7 +75,7 @@ export interface IndexFiltersProps
   /** The primary action to display  */
   primaryAction?: IndexFiltersPrimaryAction;
   /** The cancel action to display */
-  cancelAction: IndexFiltersCancelAction;
+  cancelAction?: IndexFiltersCancelAction;
   /** Optional callback invoked when a merchant begins to edit a view */
   onEditStart?: (mode: ActionableIndexFiltersMode) => void;
   /** The current mode of the IndexFilters component. Used to determine which view to show */
@@ -104,6 +104,8 @@ export interface IndexFiltersProps
   disableKeyboardShortcuts?: boolean;
   /** Whether to display the edit columns button with the other default mode filter actions */
   showEditColumnsButton?: boolean;
+  /** Whether or not to auto-focus the search field when it renders */
+  autoFocusSearchField?: boolean;
 }
 
 export function IndexFilters({
@@ -143,6 +145,7 @@ export function IndexFilters({
   closeOnChildOverlayClick,
   disableKeyboardShortcuts,
   showEditColumnsButton,
+  autoFocusSearchField = true,
 }: IndexFiltersProps) {
   const i18n = useI18n();
   const {mdDown} = useBreakpoints();
@@ -152,10 +155,10 @@ export function IndexFilters({
     value: filtersFocused,
     setFalse: setFiltersUnFocused,
     setTrue: setFiltersFocused,
-  } = useToggle(mode === IndexFiltersMode.Filtering);
+  } = useToggle(mode === IndexFiltersMode.Filtering && autoFocusSearchField);
 
   const handleModeChange = (newMode: IndexFiltersMode) => {
-    if (newMode === IndexFiltersMode.Filtering) {
+    if (newMode === IndexFiltersMode.Filtering && autoFocusSearchField) {
       setFiltersFocused();
     } else {
       setFiltersUnFocused();
@@ -219,7 +222,7 @@ export function IndexFilters({
   const onExecutedPrimaryAction = useExecutedCallback(primaryAction?.onAction);
 
   const onExecutedCancelAction = useCallback(() => {
-    cancelAction.onAction?.();
+    cancelAction?.onAction?.();
     setMode(IndexFiltersMode.Default);
   }, [cancelAction, setMode]);
 
@@ -233,10 +236,12 @@ export function IndexFilters({
   }, [onExecutedPrimaryAction, primaryAction]);
 
   const enhancedCancelAction = useMemo(() => {
-    return {
-      ...cancelAction,
-      onAction: onExecutedCancelAction,
-    };
+    return cancelAction
+      ? {
+          ...cancelAction,
+          onAction: onExecutedCancelAction,
+        }
+      : undefined;
   }, [cancelAction, onExecutedCancelAction]);
 
   const beginEdit = useCallback(
@@ -248,14 +253,15 @@ export function IndexFilters({
   );
 
   const updateButtonsMarkup = useMemo(
-    () => (
-      <UpdateButtons
-        primaryAction={enhancedPrimaryAction}
-        cancelAction={enhancedCancelAction}
-        viewNames={viewNames}
-        disabled={disabled}
-      />
-    ),
+    () =>
+      enhancedCancelAction || enhancedPrimaryAction ? (
+        <UpdateButtons
+          primaryAction={enhancedPrimaryAction}
+          cancelAction={enhancedCancelAction}
+          viewNames={viewNames}
+          disabled={disabled}
+        />
+      ) : null,
     [enhancedPrimaryAction, enhancedCancelAction, disabled, viewNames],
   );
 

polaris-react/src/components/IndexFilters/components/UpdateButtons/UpdateButtons.tsx

@@ -21,7 +21,7 @@ interface UpdateIndexFiltersPrimaryAction
 
 export interface UpdateButtonsProps {
   primaryAction?: UpdateIndexFiltersPrimaryAction;
-  cancelAction: IndexFiltersCancelAction;
+  cancelAction?: IndexFiltersCancelAction;
   viewNames: string[];
   disabled?: boolean;
 }
@@ -102,7 +102,7 @@ export function UpdateButtons({
     primaryAction?.loading ||
     savedViewName.length > MAX_VIEW_NAME_LENGTH;
 
-  const cancelButtonMarkup = (
+  const cancelButtonMarkup = cancelAction ? (
     <Button
       variant="tertiary"
       size="micro"
@@ -111,7 +111,7 @@ export function UpdateButtons({
     >
       {i18n.translate('Polaris.IndexFilters.UpdateButtons.cancel')}
     </Button>
-  );
+  ) : null;
 
   if (!primaryAction) {
     return cancelButtonMarkup;

polaris-react/src/components/IndexFilters/tests/IndexFilters.test.tsx

@@ -283,7 +283,7 @@ describe('IndexFilters', () => {
         }),
       );
 
-      expect(defaultProps.cancelAction.onAction).not.toHaveBeenCalled();
+      expect(defaultProps.cancelAction!.onAction).not.toHaveBeenCalled();
     });
 
     it('does call the cancelAction.onAction method when in Filtering mode', () => {
@@ -297,7 +297,7 @@ describe('IndexFilters', () => {
         }),
       );
 
-      expect(defaultProps.cancelAction.onAction).toHaveBeenCalled();
+      expect(defaultProps.cancelAction!.onAction).toHaveBeenCalled();
     });
 
     it('does call the cancelAction.onAction method when in EditingColumns mode', () => {
@@ -314,7 +314,7 @@ describe('IndexFilters', () => {
         }),
       );
 
-      expect(defaultProps.cancelAction.onAction).toHaveBeenCalled();
+      expect(defaultProps.cancelAction!.onAction).toHaveBeenCalled();
     });
   });
 
@@ -365,7 +365,7 @@ describe('IndexFilters', () => {
         }),
       );
 
-      expect(defaultProps.cancelAction.onAction).not.toHaveBeenCalled();
+      expect(defaultProps.cancelAction!.onAction).not.toHaveBeenCalled();
     });
 
     it('does not call the cancelAction.onAction method when pressing escape in EditingColumns mode', () => {
@@ -383,7 +383,7 @@ describe('IndexFilters', () => {
         }),
       );
 
-      expect(defaultProps.cancelAction.onAction).not.toHaveBeenCalled();
+      expect(defaultProps.cancelAction!.onAction).not.toHaveBeenCalled();
     });
   });