diff --git a/.changeset/popular-oranges-drop.md b/.changeset/popular-oranges-drop.md
new file mode 100644
index 00000000000..2b366bee463
--- /dev/null
+++ b/.changeset/popular-oranges-drop.md
@@ -0,0 +1,5 @@
+---
+'@shopify/polaris': minor
+---
+
+Updated IndexFilters to better support a configuration of only search and sort
diff --git a/polaris-react/src/components/IndexFilters/IndexFilters.stories.tsx b/polaris-react/src/components/IndexFilters/IndexFilters.stories.tsx
index ae9a6fcf962..84d685a9f8f 100644
--- a/polaris-react/src/components/IndexFilters/IndexFilters.stories.tsx
+++ b/polaris-react/src/components/IndexFilters/IndexFilters.stories.tsx
@@ -2324,3 +2324,152 @@ export function WithNoFilters() {
);
}
+
+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: (
+
+ #1020
+
+ ),
+ date: 'Jul 20 at 4:34pm',
+ customer: 'Jaydon Stanton',
+ total: '$969.44',
+ paymentStatus: Paid,
+ fulfillmentStatus: Unfulfilled,
+ },
+ {
+ id: '1019',
+ order: (
+
+ #1019
+
+ ),
+ date: 'Jul 20 at 3:46pm',
+ customer: 'Ruben Westerfelt',
+ total: '$701.19',
+ paymentStatus: Partially paid,
+ fulfillmentStatus: Unfulfilled,
+ },
+ {
+ id: '1018',
+ order: (
+
+ #1018
+
+ ),
+ date: 'Jul 20 at 3.44pm',
+ customer: 'Leo Carder',
+ total: '$798.24',
+ paymentStatus: Paid,
+ fulfillmentStatus: Unfulfilled,
+ },
+ ];
+ const resourceName = {
+ singular: 'order',
+ plural: 'orders',
+ };
+
+ const {selectedResources, allResourcesSelected, handleSelectionChange} =
+ useIndexResourceState(orders);
+
+ const rowMarkup = orders.map(
+ (
+ {id, order, date, customer, total, paymentStatus, fulfillmentStatus},
+ index,
+ ) => (
+
+
+
+ {order}
+
+
+ {date}
+ {customer}
+
+
+ {total}
+
+
+ {paymentStatus}
+ {fulfillmentStatus}
+
+ ),
+ );
+
+ return (
+
+ setQueryValue('')}
+ onSort={setSortSelected}
+ autoFocusSearchField={false}
+ tabs={[]}
+ filters={[]}
+ appliedFilters={[]}
+ onClearAll={() => {}}
+ mode={mode}
+ setMode={setMode}
+ hideFilters
+ filteringAccessibilityTooltip="Search (F)"
+ />
+
+ {rowMarkup}
+
+
+ );
+}
diff --git a/polaris-react/src/components/IndexFilters/IndexFilters.tsx b/polaris-react/src/components/IndexFilters/IndexFilters.tsx
index 4df0777be63..ef585daa1a3 100644
--- a/polaris-react/src/components/IndexFilters/IndexFilters.tsx
+++ b/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(
- () => (
-
- ),
+ () =>
+ enhancedCancelAction || enhancedPrimaryAction ? (
+
+ ) : null,
[enhancedPrimaryAction, enhancedCancelAction, disabled, viewNames],
);
diff --git a/polaris-react/src/components/IndexFilters/components/UpdateButtons/UpdateButtons.tsx b/polaris-react/src/components/IndexFilters/components/UpdateButtons/UpdateButtons.tsx
index c6b387a90ef..624a661656b 100644
--- a/polaris-react/src/components/IndexFilters/components/UpdateButtons/UpdateButtons.tsx
+++ b/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 ? (
- );
+ ) : null;
if (!primaryAction) {
return cancelButtonMarkup;
diff --git a/polaris-react/src/components/IndexFilters/tests/IndexFilters.test.tsx b/polaris-react/src/components/IndexFilters/tests/IndexFilters.test.tsx
index bf548ac2138..4210c22bd8c 100644
--- a/polaris-react/src/components/IndexFilters/tests/IndexFilters.test.tsx
+++ b/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();
});
});