diff --git a/.changeset/shaggy-items-smoke.md b/.changeset/shaggy-items-smoke.md new file mode 100644 index 00000000000..f1b919572d9 --- /dev/null +++ b/.changeset/shaggy-items-smoke.md @@ -0,0 +1,5 @@ +--- +'@shopify/polaris': minor +--- + +Added the `defaultPaginatedSelectAllText` prop to `IndexTable` to support customizing the label of the checkbox in the header that selects all rows across pages when the table `hasMoreItems` diff --git a/polaris-react/src/components/IndexProvider/IndexProvider.tsx b/polaris-react/src/components/IndexProvider/IndexProvider.tsx index f156dd8f563..2aac4092a60 100644 --- a/polaris-react/src/components/IndexProvider/IndexProvider.tsx +++ b/polaris-react/src/components/IndexProvider/IndexProvider.tsx @@ -19,6 +19,7 @@ export function IndexProvider({ hasMoreItems, condensed, selectable: isSelectableIndex = true, + paginatedSelectAllText: defaultPaginatedSelectAllText, }: IndexProviderProps) { const { paginatedSelectAllText, @@ -32,6 +33,7 @@ export function IndexProvider({ itemCount, hasMoreItems, resourceName: passedResourceName, + defaultPaginatedSelectAllText, }); const handleSelectionChange = useHandleBulkSelection({onSelectionChange}); diff --git a/polaris-react/src/components/IndexTable/IndexTable.stories.tsx b/polaris-react/src/components/IndexTable/IndexTable.stories.tsx index 1823695d249..15523dd830d 100644 --- a/polaris-react/src/components/IndexTable/IndexTable.stories.tsx +++ b/polaris-react/src/components/IndexTable/IndexTable.stories.tsx @@ -1483,6 +1483,7 @@ export function WithBulkActionsAndSelectionAcrossPages() { title: 'Amount spent', }, ]} + paginatedSelectAllText="Select everything in this store" > {rowMarkup} diff --git a/polaris-react/src/components/IndexTable/IndexTable.tsx b/polaris-react/src/components/IndexTable/IndexTable.tsx index 84a704a7381..cf7531dbe87 100644 --- a/polaris-react/src/components/IndexTable/IndexTable.tsx +++ b/polaris-react/src/components/IndexTable/IndexTable.tsx @@ -109,6 +109,7 @@ export interface IndexTableBaseProps { emptyState?: React.ReactNode; sort?: React.ReactNode; paginatedSelectAllActionText?: string; + paginatedSelectAllText?: string; lastColumnSticky?: boolean; selectable?: boolean; /** List of booleans, which maps to whether sorting is enabled or not for each column. Defaults to false for all columns. */ @@ -177,6 +178,7 @@ function IndexTableBase({ selectedItemsCount, condensed, } = useIndexValue(); + const handleSelectionChange = useIndexSelectionChange(); const i18n = useI18n(); @@ -1122,6 +1124,7 @@ export function IndexTable({ hasMoreItems, condensed, onSelectionChange, + paginatedSelectAllText, ...indexTableBaseProps }: IndexTableProps) { return ( @@ -1135,6 +1138,7 @@ export function IndexTable({ hasMoreItems={hasMoreItems} condensed={condensed} onSelectionChange={onSelectionChange} + paginatedSelectAllText={paginatedSelectAllText} > {children} diff --git a/polaris-react/src/components/IndexTable/tests/IndexTable.test.tsx b/polaris-react/src/components/IndexTable/tests/IndexTable.test.tsx index 11e70da0df6..925751c0b30 100644 --- a/polaris-react/src/components/IndexTable/tests/IndexTable.test.tsx +++ b/polaris-react/src/components/IndexTable/tests/IndexTable.test.tsx @@ -406,7 +406,7 @@ describe('', () => { ); }); - it('renders a custom select all string if present', () => { + it('renders a custom select all action string if present', () => { const onSelectionChangeSpy = jest.fn(); const customString = 'Foo bar baz'; const index = mountWithApp( @@ -426,6 +426,26 @@ describe('', () => { expect(index.find(BulkActions)).toContainReactText(customString); }); + it('renders a custom default select all string if present', () => { + const onSelectionChangeSpy = jest.fn(); + const customString = 'Foo bar baz'; + const index = mountWithApp( + + {mockTableItems.map(mockRenderRow)} + , + ); + expect(index.find(BulkActions)).toContainReactText(customString); + }); + it('does not need the bulkActions or promotedBulkActions props present to render the custom select all string', () => { const onSelectionChangeSpy = jest.fn(); const customString = 'Foo bar baz'; diff --git a/polaris-react/src/utilities/index-provider/hooks.ts b/polaris-react/src/utilities/index-provider/hooks.ts index 90d546b25ea..6068721371f 100644 --- a/polaris-react/src/utilities/index-provider/hooks.ts +++ b/polaris-react/src/utilities/index-provider/hooks.ts @@ -44,6 +44,7 @@ export function useBulkSelectionData({ itemCount, hasMoreItems, resourceName: passedResourceName, + defaultPaginatedSelectAllText, }: BulkSelectionDataOptions) { const i18n = useI18n(); @@ -90,6 +91,9 @@ export function useBulkSelectionData({ } if (selectedItemsCount === SELECT_ALL_ITEMS) { + if (defaultPaginatedSelectAllText) { + return defaultPaginatedSelectAllText; + } return i18n.translate('Polaris.IndexProvider.allItemsSelected', { itemsLength: itemCount, resourceNamePlural: resourceName.plural.toLocaleLowerCase(), diff --git a/polaris-react/src/utilities/index-provider/types.ts b/polaris-react/src/utilities/index-provider/types.ts index 093d847ed51..9a5c4e65b63 100644 --- a/polaris-react/src/utilities/index-provider/types.ts +++ b/polaris-react/src/utilities/index-provider/types.ts @@ -30,6 +30,7 @@ export interface IndexProviderProps { selection?: string | Range, position?: number, ): void; + paginatedSelectAllText?: string; } export type HandleSelectionChange = ( @@ -47,6 +48,7 @@ export interface BulkSelectionDataOptions { singular: string; plural: string; }; + defaultPaginatedSelectAllText?: string; } export interface HandleBulkSelectionOptions {