From cdac8f97ba5a8b557a46b0829ffb97fcac5968f6 Mon Sep 17 00:00:00 2001 From: Marc Thomas Date: Thu, 6 Apr 2023 10:59:47 +0100 Subject: [PATCH] chore: allow for no filters or search for index filters --- .changeset/chilled-jobs-fetch.md | 6 + .../components/AlphaFilters/AlphaFilters.tsx | 10 +- .../components/FilterPill/FilterPill.tsx | 4 + .../FilterPill/tests/FilterPill.test.tsx | 6 +- .../AlphaFilters/tests/AlphaFilters.test.tsx | 12 +- .../IndexFilters/IndexFilters.stories.tsx | 145 ++++++++++ .../components/IndexFilters/IndexFilters.tsx | 26 +- .../selection-and-input/index-filters.md | 3 + .../pages/examples/index-filters-default.tsx | 6 +- .../pages/examples/index-filters-disabled.tsx | 6 +- .../index-filters-with-filtering-mode.tsx | 6 +- .../index-filters-with-no-filters.tsx | 6 +- ...ndex-filters-with-no-search-or-filters.tsx | 251 ++++++++++++++++++ .../examples/index-filters-with-no-search.tsx | 6 +- .../index-filters-with-pinned-filters.tsx | 6 +- ...ensed-with-views-search-filter-sorting.tsx | 6 +- .../examples/index-table-with-filtering.tsx | 6 +- .../index-table-with-loading-state.tsx | 6 +- ...table-with-views-search-filter-sorting.tsx | 6 +- 19 files changed, 464 insertions(+), 59 deletions(-) create mode 100644 .changeset/chilled-jobs-fetch.md create mode 100644 polaris.shopify.com/pages/examples/index-filters-with-no-search-or-filters.tsx diff --git a/.changeset/chilled-jobs-fetch.md b/.changeset/chilled-jobs-fetch.md new file mode 100644 index 00000000000..a0481e041f4 --- /dev/null +++ b/.changeset/chilled-jobs-fetch.md @@ -0,0 +1,6 @@ +--- +'@shopify/polaris': minor +'polaris.shopify.com': minor +--- + +Updated `IndexFilters` to support hiding both filters and search field diff --git a/polaris-react/src/components/AlphaFilters/AlphaFilters.tsx b/polaris-react/src/components/AlphaFilters/AlphaFilters.tsx index 9b3e220a854..94b23988da8 100644 --- a/polaris-react/src/components/AlphaFilters/AlphaFilters.tsx +++ b/polaris-react/src/components/AlphaFilters/AlphaFilters.tsx @@ -129,8 +129,6 @@ export function AlphaFilters({ const [localPinnedFilters, setLocalPinnedFilters] = useState([]); const hasMounted = useRef(false); - const enabledFilters = filters.filter((filter) => !filter.disabled); - useEffect(() => { hasMounted.current = true; }); @@ -143,14 +141,14 @@ export function AlphaFilters({ }; const appliedFilterKeys = appliedFilters?.map(({key}) => key); - const pinnedFiltersFromPropsAndAppliedFilters = enabledFilters.filter( + const pinnedFiltersFromPropsAndAppliedFilters = filters.filter( ({pinned, key}) => (Boolean(pinned) || appliedFilterKeys?.includes(key)) && // Filters that are pinned in local state display at the end of our list !localPinnedFilters.find((filterKey) => filterKey === key), ); const pinnedFiltersFromLocalState = localPinnedFilters - .map((key) => enabledFilters.find((filter) => filter.key === key)) + .map((key) => filters.find((filter) => filter.key === key)) .reduce( (acc, filter) => (filter ? [...acc, filter] : acc), [], @@ -161,7 +159,7 @@ export function AlphaFilters({ ...pinnedFiltersFromLocalState, ]; - const additionalFilters = enabledFilters + const additionalFilters = filters .filter((filter) => !pinnedFilters.find(({key}) => key === filter.key)) .map((filter) => ({ content: filter.label, @@ -204,7 +202,7 @@ export function AlphaFilters({ onClearAll?.(); }; - const shouldShowAddButton = enabledFilters.some((filter) => !filter.pinned); + const shouldShowAddButton = filters.some((filter) => !filter.pinned); const additionalContent = useMemo(() => { return ( diff --git a/polaris-react/src/components/AlphaFilters/components/FilterPill/FilterPill.tsx b/polaris-react/src/components/AlphaFilters/components/FilterPill/FilterPill.tsx index 4d0cb167c8c..699bd894c36 100644 --- a/polaris-react/src/components/AlphaFilters/components/FilterPill/FilterPill.tsx +++ b/polaris-react/src/components/AlphaFilters/components/FilterPill/FilterPill.tsx @@ -162,6 +162,10 @@ export function FilterPill({ ); + if (disabled) { + return null; + } + return (
', () => { }); }); - it('will pass the disabled prop to the activator', () => { + it('will return null if disabled', () => { const wrapper = mountWithApp(); - expect(wrapper).toContainReactComponent(UnstyledButton, { - disabled: true, - }); + expect(wrapper!.domNode).toBeNull(); }); it('will invoked the onClick prop when clicked, if present', () => { diff --git a/polaris-react/src/components/AlphaFilters/tests/AlphaFilters.test.tsx b/polaris-react/src/components/AlphaFilters/tests/AlphaFilters.test.tsx index feb3151db2a..89cfdc205eb 100644 --- a/polaris-react/src/components/AlphaFilters/tests/AlphaFilters.test.tsx +++ b/polaris-react/src/components/AlphaFilters/tests/AlphaFilters.test.tsx @@ -140,7 +140,7 @@ describe('', () => { }); }); - it('will not render a disabled filter', () => { + it('will not render a disabled filter if pinned', () => { const scrollSpy = jest.fn(); HTMLElement.prototype.scroll = scrollSpy; const filters = [ @@ -148,7 +148,7 @@ describe('', () => { { key: 'disabled', label: 'Disabled', - pinned: false, + pinned: true, disabled: true, filter:
Filter
, }, @@ -158,6 +158,8 @@ describe('', () => { , ); + expect(wrapper).toContainReactComponentTimes(FilterPill, 2); + wrapper.act(() => { wrapper .find('button', { @@ -173,10 +175,6 @@ describe('', () => { ], }); - expect(wrapper).not.toContainReactComponent(ActionList, { - items: expect.arrayContaining([ - expect.objectContaining({content: 'Disabled'}), - ]), - }); + expect(wrapper.findAll(FilterPill)[1].domNode).toBeNull(); }); }); diff --git a/polaris-react/src/components/IndexFilters/IndexFilters.stories.tsx b/polaris-react/src/components/IndexFilters/IndexFilters.stories.tsx index 8ffaa64d263..8e5997d83b7 100644 --- a/polaris-react/src/components/IndexFilters/IndexFilters.stories.tsx +++ b/polaris-react/src/components/IndexFilters/IndexFilters.stories.tsx @@ -948,3 +948,148 @@ export function Disabled() { } } } + +export function WithQueryFieldAndFiltersHidden() { + const sleep = (ms: number) => + new Promise((resolve) => setTimeout(resolve, ms)); + const [itemStrings, setItemStrings] = useState([ + 'All', + 'Unpaid', + 'Open', + 'Closed', + 'Local delivery', + 'Local pickup', + ]); + const deleteView = (index: number) => { + const newItemStrings = [...itemStrings]; + newItemStrings.splice(index, 1); + setItemStrings(newItemStrings); + setSelected(0); + }; + + const duplicateView = async (name: string) => { + setItemStrings([...itemStrings, name]); + setSelected(itemStrings.length); + await sleep(1); + return true; + }; + + const tabs: AlphaTabProps[] = itemStrings.map((item, index) => ({ + content: item, + index, + onAction: () => {}, + id: `${item}-${index}`, + isLocked: index === 0, + actions: + index === 0 + ? [] + : [ + { + type: 'rename', + onAction: () => {}, + onPrimaryAction: async (value: string) => { + const newItemsStrings = tabs.map((item, idx) => { + if (idx === index) { + return value; + } + return item.content; + }); + await sleep(1); + setItemStrings(newItemsStrings); + return true; + }, + }, + { + type: 'duplicate', + onPrimaryAction: async (name) => { + await sleep(1); + duplicateView(name); + return true; + }, + }, + { + type: 'edit', + }, + { + type: 'delete', + onPrimaryAction: async (id: string) => { + await sleep(1); + deleteView(index); + return true; + }, + }, + ], + })); + const [selected, setSelected] = useState(0); + const onCreateNewView = async (value: string) => { + await sleep(500); + setItemStrings([...itemStrings, value]); + setSelected(itemStrings.length); + return true; + }; + 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(); + const onHandleCancel = () => {}; + + const onHandleSave = async () => { + await sleep(1); + return true; + }; + + const primaryAction: IndexFiltersProps['primaryAction'] = + selected === 0 + ? { + type: 'save-as', + onAction: onCreateNewView, + disabled: false, + loading: false, + } + : { + type: 'save', + onAction: onHandleSave, + disabled: false, + loading: false, + }; + + return ( + + {}} + onQueryClear={() => {}} + onSort={setSortSelected} + primaryAction={primaryAction} + cancelAction={{ + onAction: onHandleCancel, + disabled: false, + loading: false, + }} + tabs={tabs} + selected={selected} + onSelect={setSelected} + canCreateNewView + onCreateNewView={onCreateNewView} + filters={[]} + onClearAll={() => {}} + mode={mode} + setMode={setMode} + hideQueryField + hideFilters + /> + + + ); +} diff --git a/polaris-react/src/components/IndexFilters/IndexFilters.tsx b/polaris-react/src/components/IndexFilters/IndexFilters.tsx index 0bfc9d12ab6..4d937fbd3f5 100644 --- a/polaris-react/src/components/IndexFilters/IndexFilters.tsx +++ b/polaris-react/src/components/IndexFilters/IndexFilters.tsx @@ -363,18 +363,20 @@ export function IndexFilters({ {isLoading && !mdDown && } {mode === IndexFiltersMode.Default ? ( <> - + {hideFilters && hideQueryField ? null : ( + + )} {sortMarkup} ) : null} diff --git a/polaris.shopify.com/content/components/selection-and-input/index-filters.md b/polaris.shopify.com/content/components/selection-and-input/index-filters.md index 2b066d2fca2..10d79fb40a9 100644 --- a/polaris.shopify.com/content/components/selection-and-input/index-filters.md +++ b/polaris.shopify.com/content/components/selection-and-input/index-filters.md @@ -26,6 +26,9 @@ examples: - fileName: index-filters-with-no-filters.tsx title: With no filters description: An IndexFilters component with only view management, search, and sorting. + - fileName: index-filters-with-no-search-or-filters.tsx + title: With no search or filters + description: An IndexFilters component with only view management and sorting. --- Merchants use filters to: diff --git a/polaris.shopify.com/pages/examples/index-filters-default.tsx b/polaris.shopify.com/pages/examples/index-filters-default.tsx index 12094899468..b21b5d1674d 100644 --- a/polaris.shopify.com/pages/examples/index-filters-default.tsx +++ b/polaris.shopify.com/pages/examples/index-filters-default.tsx @@ -52,7 +52,7 @@ function IndexFiltersDefault() { { type: 'rename', onAction: () => {}, - onPrimaryAction: async (value: string) => { + onPrimaryAction: async (value: string): Promise => { const newItemsStrings = tabs.map((item, idx) => { if (idx === index) { return value; @@ -66,9 +66,9 @@ function IndexFiltersDefault() { }, { type: 'duplicate', - onPrimaryAction: async (name) => { + onPrimaryAction: async (value: string): Promise => { await sleep(1); - duplicateView(name); + duplicateView(value); return true; }, }, diff --git a/polaris.shopify.com/pages/examples/index-filters-disabled.tsx b/polaris.shopify.com/pages/examples/index-filters-disabled.tsx index c5f10944657..2e7710b347d 100644 --- a/polaris.shopify.com/pages/examples/index-filters-disabled.tsx +++ b/polaris.shopify.com/pages/examples/index-filters-disabled.tsx @@ -52,7 +52,7 @@ function IndexFiltersDisabled() { { type: 'rename', onAction: () => {}, - onPrimaryAction: async (value: string) => { + onPrimaryAction: async (value: string): Promise => { const newItemsStrings = tabs.map((item, idx) => { if (idx === index) { return value; @@ -66,9 +66,9 @@ function IndexFiltersDisabled() { }, { type: 'duplicate', - onPrimaryAction: async (name) => { + onPrimaryAction: async (value: string): Promise => { await sleep(1); - duplicateView(name); + duplicateView(value); return true; }, }, diff --git a/polaris.shopify.com/pages/examples/index-filters-with-filtering-mode.tsx b/polaris.shopify.com/pages/examples/index-filters-with-filtering-mode.tsx index 0d70ca10a3e..2680744b5e6 100644 --- a/polaris.shopify.com/pages/examples/index-filters-with-filtering-mode.tsx +++ b/polaris.shopify.com/pages/examples/index-filters-with-filtering-mode.tsx @@ -53,7 +53,7 @@ function IndexFiltersWithFilteringMode() { { type: 'rename', onAction: () => {}, - onPrimaryAction: async (value: string) => { + onPrimaryAction: async (value: string): Promise => { const newItemsStrings = tabs.map((item, idx) => { if (idx === index) { return value; @@ -67,9 +67,9 @@ function IndexFiltersWithFilteringMode() { }, { type: 'duplicate', - onPrimaryAction: async (name) => { + onPrimaryAction: async (value: string): Promise => { await sleep(1); - duplicateView(name); + duplicateView(value); return true; }, }, diff --git a/polaris.shopify.com/pages/examples/index-filters-with-no-filters.tsx b/polaris.shopify.com/pages/examples/index-filters-with-no-filters.tsx index 351c6702c50..b69097bab12 100644 --- a/polaris.shopify.com/pages/examples/index-filters-with-no-filters.tsx +++ b/polaris.shopify.com/pages/examples/index-filters-with-no-filters.tsx @@ -49,7 +49,7 @@ function IndexFiltersWithNoFiltersExample() { { type: 'rename', onAction: () => {}, - onPrimaryAction: async (value: string) => { + onPrimaryAction: async (value: string): Promise => { const newItemsStrings = tabs.map((item, idx) => { if (idx === index) { return value; @@ -63,9 +63,9 @@ function IndexFiltersWithNoFiltersExample() { }, { type: 'duplicate', - onPrimaryAction: async (name) => { + onPrimaryAction: async (value: string): Promise => { await sleep(1); - duplicateView(name); + duplicateView(value); return true; }, }, diff --git a/polaris.shopify.com/pages/examples/index-filters-with-no-search-or-filters.tsx b/polaris.shopify.com/pages/examples/index-filters-with-no-search-or-filters.tsx new file mode 100644 index 00000000000..f4c17d7ce4a --- /dev/null +++ b/polaris.shopify.com/pages/examples/index-filters-with-no-search-or-filters.tsx @@ -0,0 +1,251 @@ +import { + IndexTable, + LegacyCard, + IndexFilters, + useSetIndexFiltersMode, + useIndexResourceState, + Text, + Badge, +} from '@shopify/polaris'; +import type {IndexFiltersProps, AlphaTabProps} from '@shopify/polaris'; +import {useState} from 'react'; +import {withPolarisExample} from '../../src/components/PolarisExampleWrapper'; + +function IndexFiltersWithNoSearchOrFiltersExample() { + const sleep = (ms: number) => + new Promise((resolve) => setTimeout(resolve, ms)); + const [itemStrings, setItemStrings] = useState([ + 'All', + 'Unpaid', + 'Open', + 'Closed', + 'Local delivery', + 'Local pickup', + ]); + const deleteView = (index: number) => { + const newItemStrings = [...itemStrings]; + newItemStrings.splice(index, 1); + setItemStrings(newItemStrings); + setSelected(0); + }; + + const duplicateView = async (name: string) => { + setItemStrings([...itemStrings, name]); + setSelected(itemStrings.length); + await sleep(1); + return true; + }; + + const tabs: AlphaTabProps[] = itemStrings.map((item, index) => ({ + content: item, + index, + onAction: () => {}, + id: `${item}-${index}`, + isLocked: index === 0, + actions: + index === 0 + ? [] + : [ + { + type: 'rename', + onAction: () => {}, + onPrimaryAction: async (value: string): Promise => { + const newItemsStrings = tabs.map((item, idx) => { + if (idx === index) { + return value; + } + return item.content; + }); + await sleep(1); + setItemStrings(newItemsStrings); + return true; + }, + }, + { + type: 'duplicate', + onPrimaryAction: async (value: string): Promise => { + await sleep(1); + duplicateView(value); + return true; + }, + }, + { + type: 'edit', + }, + { + type: 'delete', + onPrimaryAction: async () => { + await sleep(1); + deleteView(index); + return true; + }, + }, + ], + })); + const [selected, setSelected] = useState(0); + const onCreateNewView = async (value: string) => { + await sleep(500); + setItemStrings([...itemStrings, value]); + setSelected(itemStrings.length); + return true; + }; + 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(); + const onHandleCancel = () => {}; + + const onHandleSave = async () => { + await sleep(1); + return true; + }; + + const primaryAction: IndexFiltersProps['primaryAction'] = + selected === 0 + ? { + type: 'save-as', + onAction: onCreateNewView, + disabled: false, + loading: false, + } + : { + type: 'save', + onAction: onHandleSave, + disabled: false, + loading: false, + }; + + 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 ( + + {}} + onQueryClear={() => {}} + onSort={setSortSelected} + primaryAction={primaryAction} + cancelAction={{ + onAction: onHandleCancel, + disabled: false, + loading: false, + }} + tabs={tabs} + selected={selected} + onSelect={setSelected} + canCreateNewView + onCreateNewView={onCreateNewView} + filters={[]} + appliedFilters={[]} + onClearAll={() => {}} + mode={mode} + setMode={setMode} + hideFilters + hideQueryField + /> + + {rowMarkup} + + + ); +} + +export default withPolarisExample(IndexFiltersWithNoSearchOrFiltersExample); diff --git a/polaris.shopify.com/pages/examples/index-filters-with-no-search.tsx b/polaris.shopify.com/pages/examples/index-filters-with-no-search.tsx index abc896d21fb..6e52bfc9ead 100644 --- a/polaris.shopify.com/pages/examples/index-filters-with-no-search.tsx +++ b/polaris.shopify.com/pages/examples/index-filters-with-no-search.tsx @@ -52,7 +52,7 @@ function IndexFiltersDefault() { { type: 'rename', onAction: () => {}, - onPrimaryAction: async (value: string) => { + onPrimaryAction: async (value: string): Promise => { const newItemsStrings = tabs.map((item, idx) => { if (idx === index) { return value; @@ -66,9 +66,9 @@ function IndexFiltersDefault() { }, { type: 'duplicate', - onPrimaryAction: async (name) => { + onPrimaryAction: async (value: string): Promise => { await sleep(1); - duplicateView(name); + duplicateView(value); return true; }, }, diff --git a/polaris.shopify.com/pages/examples/index-filters-with-pinned-filters.tsx b/polaris.shopify.com/pages/examples/index-filters-with-pinned-filters.tsx index aad20098752..90721800bd7 100644 --- a/polaris.shopify.com/pages/examples/index-filters-with-pinned-filters.tsx +++ b/polaris.shopify.com/pages/examples/index-filters-with-pinned-filters.tsx @@ -52,7 +52,7 @@ function IndexFiltersWithPinnedFilters() { { type: 'rename', onAction: () => {}, - onPrimaryAction: async (value: string) => { + onPrimaryAction: async (value: string): Promise => { const newItemsStrings = tabs.map((item, idx) => { if (idx === index) { return value; @@ -66,9 +66,9 @@ function IndexFiltersWithPinnedFilters() { }, { type: 'duplicate', - onPrimaryAction: async (name) => { + onPrimaryAction: async (value: string): Promise => { await sleep(1); - duplicateView(name); + duplicateView(value); return true; }, }, diff --git a/polaris.shopify.com/pages/examples/index-table-condensed-with-views-search-filter-sorting.tsx b/polaris.shopify.com/pages/examples/index-table-condensed-with-views-search-filter-sorting.tsx index 4f76980f4b7..a41c2793b67 100644 --- a/polaris.shopify.com/pages/examples/index-table-condensed-with-views-search-filter-sorting.tsx +++ b/polaris.shopify.com/pages/examples/index-table-condensed-with-views-search-filter-sorting.tsx @@ -54,7 +54,7 @@ function IndexTableWithViewsSearchFilterSorting() { { type: 'rename', onAction: () => {}, - onPrimaryAction: async (value: string) => { + onPrimaryAction: async (value: string): Promise => { const newItemsStrings = tabs.map((item, idx) => { if (idx === index) { return value; @@ -68,9 +68,9 @@ function IndexTableWithViewsSearchFilterSorting() { }, { type: 'duplicate', - onPrimaryAction: async (name) => { + onPrimaryAction: async (value: string): Promise => { await sleep(1); - duplicateView(name); + duplicateView(value); return true; }, }, diff --git a/polaris.shopify.com/pages/examples/index-table-with-filtering.tsx b/polaris.shopify.com/pages/examples/index-table-with-filtering.tsx index e5318c51449..013976ec483 100644 --- a/polaris.shopify.com/pages/examples/index-table-with-filtering.tsx +++ b/polaris.shopify.com/pages/examples/index-table-with-filtering.tsx @@ -53,7 +53,7 @@ function IndexTableWithFilteringExample() { { type: 'rename', onAction: () => {}, - onPrimaryAction: async (value: string) => { + onPrimaryAction: async (value: string): Promise => { const newItemsStrings = tabs.map((item, idx) => { if (idx === index) { return value; @@ -67,9 +67,9 @@ function IndexTableWithFilteringExample() { }, { type: 'duplicate', - onPrimaryAction: async (name) => { + onPrimaryAction: async (value: string): Promise => { await sleep(1); - duplicateView(name); + duplicateView(value); return true; }, }, diff --git a/polaris.shopify.com/pages/examples/index-table-with-loading-state.tsx b/polaris.shopify.com/pages/examples/index-table-with-loading-state.tsx index 2d689056a88..018ac2a92b3 100644 --- a/polaris.shopify.com/pages/examples/index-table-with-loading-state.tsx +++ b/polaris.shopify.com/pages/examples/index-table-with-loading-state.tsx @@ -52,7 +52,7 @@ function IndexTableWithLoadingExample() { { type: 'rename', onAction: () => {}, - onPrimaryAction: async (value: string) => { + onPrimaryAction: async (value: string): Promise => { const newItemsStrings = tabs.map((item, idx) => { if (idx === index) { return value; @@ -66,9 +66,9 @@ function IndexTableWithLoadingExample() { }, { type: 'duplicate', - onPrimaryAction: async (name) => { + onPrimaryAction: async (value: string): Promise => { await sleep(1); - duplicateView(name); + duplicateView(value); return true; }, }, diff --git a/polaris.shopify.com/pages/examples/index-table-with-views-search-filter-sorting.tsx b/polaris.shopify.com/pages/examples/index-table-with-views-search-filter-sorting.tsx index 0084fe4b8c2..7ada910691d 100644 --- a/polaris.shopify.com/pages/examples/index-table-with-views-search-filter-sorting.tsx +++ b/polaris.shopify.com/pages/examples/index-table-with-views-search-filter-sorting.tsx @@ -52,7 +52,7 @@ function IndexTableWithViewsSearchFilterSorting() { { type: 'rename', onAction: () => {}, - onPrimaryAction: async (value: string) => { + onPrimaryAction: async (value: string): Promise => { const newItemsStrings = tabs.map((item, idx) => { if (idx === index) { return value; @@ -66,9 +66,9 @@ function IndexTableWithViewsSearchFilterSorting() { }, { type: 'duplicate', - onPrimaryAction: async (name) => { + onPrimaryAction: async (value: string): Promise => { await sleep(1); - duplicateView(name); + duplicateView(value); return true; }, },