[ResourceList] Add headerContent prop for customizing header on ResourceList

.changeset/great-eyes-cheer.md

@@ -0,0 +1,5 @@
+---
+'@shopify/polaris': minor
+---
+
+Adding an oprtional headerContent prop to ResourceList

polaris-react/src/components/ResourceList/ResourceList.stories.tsx

@@ -453,6 +453,51 @@ export function WithTotalCount() {
   );
 }
 
+export function WithHeaderContent() {
+  return (
+    <Card>
+      <ResourceList
+        headerContent="Customer details shown below"
+        items={[
+          {
+            id: 105,
+            url: 'customers/341',
+            name: 'Mae Jemison',
+            location: 'Decatur, USA',
+          },
+          {
+            id: 205,
+            url: 'customers/256',
+            name: 'Ellen Ochoa',
+            location: 'Los Angeles, USA',
+          },
+        ]}
+        renderItem={(item) => {
+          const {id, url, name, location} = item;
+          const media = <Avatar customer size="medium" name={name} />;
+
+          return (
+            <ResourceItem
+              id={id}
+              url={url}
+              media={media}
+              accessibilityLabel={`View details for ${name}`}
+            >
+              <h3>
+                <Text variant="bodyMd" fontWeight="bold" as="span">
+                  {name}
+                </Text>
+              </h3>
+              <div>{location}</div>
+            </ResourceItem>
+          );
+        }}
+        showHeader
+      />
+    </Card>
+  );
+}
+
 export function WithSorting() {
   const [sortValue, setSortValue] = useState('DATE_MODIFIED_DESC');
 

polaris-react/src/components/ResourceList/ResourceList.tsx

@@ -105,6 +105,8 @@ export interface ResourceListProps<TItemType = any> {
   sortOptions?: SelectOption[];
   /** ReactNode to display instead of the sort control */
   alternateTool?: React.ReactNode;
+  /** Custom header text displayed above the list instead of the resource count. */
+  headerContent?: string;
   /** Callback when sort option is changed */
   onSortChange?(selected: string, id: string): void;
   /** Callback when selection is changed */
@@ -136,6 +138,7 @@ export const ResourceList: ResourceListType = function ResourceList<TItemType>({
   selectable,
   hasMoreItems,
   loading,
+  headerContent,
   showHeader,
   totalItemsCount,
   sortValue,
@@ -250,6 +253,8 @@ export const ResourceList: ResourceListType = function ResourceList<TItemType>({
         totalItemsCount,
         resource,
       });
+    } else if (headerContent) {
+      return headerContent;
     } else {
       return i18n.translate('Polaris.ResourceList.showing', {
         itemsCount,

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

@@ -260,6 +260,22 @@ describe('<ResourceList />', () => {
       expect(headerTitleWrapper).toContainReactText('Loading items');
     });
 
+    it('prints the headerContent when provided', () => {
+      const resourceList = mountWithApp(
+        <ResourceList
+          items={itemsNoID}
+          renderItem={renderItem}
+          headerContent="Customer data shown"
+          showHeader
+        />,
+      );
+
+      const headerTitleWrapper = resourceList.find('div', {
+        className: styles.HeaderTitleWrapper,
+      });
+      expect(headerTitleWrapper).toContainReactText('Customer data shown');
+    });
+
     it('prints number of items shown when totalItemsCount is not provided', () => {
       const resourceList = mountWithApp(
         <ResourceList