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 {