From 6230b7509a96f06436c787d8ba3a2507a4ff8925 Mon Sep 17 00:00:00 2001
From: Krithika Janakiraman <krithikajanakiraman@Krithikas-MacBook-Pro-2.local>
Date: Wed, 18 Jan 2023 13:36:51 -0500
Subject: [PATCH] adding headerContent prop for customizing header on
 ResourceList

adding changeset

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

Update polaris-react/src/components/ResourceList/ResourceList.tsx
---
 .changeset/great-eyes-cheer.md                |  5 +++
 .../ResourceList/ResourceList.stories.tsx     | 45 +++++++++++++++++++
 .../components/ResourceList/ResourceList.tsx  |  5 +++
 .../ResourceList/tests/ResourceList.test.tsx  | 16 +++++++
 4 files changed, 71 insertions(+)
 create mode 100644 .changeset/great-eyes-cheer.md

diff --git a/.changeset/great-eyes-cheer.md b/.changeset/great-eyes-cheer.md
new file mode 100644
index 00000000000..4233d1907e1
--- /dev/null
+++ b/.changeset/great-eyes-cheer.md
@@ -0,0 +1,5 @@
+---
+'@shopify/polaris': minor
+---
+
+Adding an oprtional headerContent prop to ResourceList
diff --git a/polaris-react/src/components/ResourceList/ResourceList.stories.tsx b/polaris-react/src/components/ResourceList/ResourceList.stories.tsx
index 679f461f211..43531b9475b 100644
--- a/polaris-react/src/components/ResourceList/ResourceList.stories.tsx
+++ b/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');
 
diff --git a/polaris-react/src/components/ResourceList/ResourceList.tsx b/polaris-react/src/components/ResourceList/ResourceList.tsx
index 5e6d5ccc8a8..356e10f2b69 100644
--- a/polaris-react/src/components/ResourceList/ResourceList.tsx
+++ b/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,
diff --git a/polaris-react/src/components/ResourceList/tests/ResourceList.test.tsx b/polaris-react/src/components/ResourceList/tests/ResourceList.test.tsx
index acd02362263..376e26886c8 100644
--- a/polaris-react/src/components/ResourceList/tests/ResourceList.test.tsx
+++ b/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