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 (
+
+ {
+ const {id, url, name, location} = item;
+ const media = ;
+
+ return (
+
+
+
+ {name}
+
+
+ {location}
+
+ );
+ }}
+ showHeader
+ />
+
+ );
+}
+
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 {
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({
selectable,
hasMoreItems,
loading,
+ headerContent,
showHeader,
totalItemsCount,
sortValue,
@@ -250,6 +253,8 @@ export const ResourceList: ResourceListType = function ResourceList({
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('', () => {
expect(headerTitleWrapper).toContainReactText('Loading items');
});
+ it('prints the headerContent when provided', () => {
+ const resourceList = mountWithApp(
+ ,
+ );
+
+ 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(