[IndexTable] Add custom paginated select all text

.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`

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});
 

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}
       </IndexTable>

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}
       >
         <IndexTableBase {...indexTableBaseProps}>{children}</IndexTableBase>
       </IndexProvider>

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

@@ -406,7 +406,7 @@ describe('<IndexTable>', () => {
       );
     });
 
-    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('<IndexTable>', () => {
       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(
+        <IndexTable
+          {...defaultProps}
+          selectable
+          hasMoreItems
+          selectedItemsCount="All"
+          itemCount={2}
+          promotedBulkActions={[{content: 'promoted action'}]}
+          onSelectionChange={onSelectionChangeSpy}
+          paginatedSelectAllText={customString}
+        >
+          {mockTableItems.map(mockRenderRow)}
+        </IndexTable>,
+      );
+      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';

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(),

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 {