Fix for the plural resource name when totalItemsCount is greater than…

… 1 (#2301)
Shopify · Oct 18, 2019 · 4b01c38 · 4b01c38
1 parent 82e068c
commit 4b01c38
Show file tree

Hide file tree

Showing 3 changed files with 19 additions and 1 deletion.
diff --git a/UNRELEASED.md b/UNRELEASED.md
@@ -20,6 +20,7 @@ Use [the changelog guidelines](https://git.io/polaris-changelog-guidelines) to f
 - Fixed `PositionedOverlay` incorrectly calculating `Topbar.UserMenu` `Popover` width ([#1692](https://github.com/Shopify/polaris-react/pull/1692))
 - Fixed `recolor-icon` Sass mixin to properly scope `$secondary-color` to the child `svg` ([#2298](https://github.com/Shopify/polaris-react/pull/2298))
 - Fixed a regression with the positioning of the `Popover` component ([#2305](https://github.com/Shopify/polaris-react/pull/2305))
+- Fixed an issue with the `ResourceList` component where the plural resource name was not used for `totalItemsCount` ([#2299](https://github.com/Shopify/polaris-react/issues/2299))
 - Fixed Stack Item proportion when shrinking ([#2319](https://github.com/Shopify/polaris-react/pull/2319))
 - Fixed animation of `Collapsible` with children having margins ([#1980](https://github.com/Shopify/polaris-react/pull/1980))
 

diff --git a/src/components/ResourceList/ResourceList.tsx b/src/components/ResourceList/ResourceList.tsx
@@ -184,7 +184,8 @@ class ResourceList extends React.Component<CombinedProps, State> {
 
     const itemsCount = items.length;
     const resource =
-      itemsCount === 1 && !loading
+      !loading &&
+      ((!totalItemsCount && itemsCount === 1) || totalItemsCount === 1)
         ? resourceName.singular
         : resourceName.plural;
 

diff --git a/src/components/ResourceList/tests/ResourceList.test.tsx b/src/components/ResourceList/tests/ResourceList.test.tsx
@@ -244,6 +244,22 @@ describe('<ResourceList />', () => {
         'Showing 2 of 5 products',
       );
     });
+
+    it('prints number of items shown of totalItemsCount plural when totalItemsCount is provided and items is one resource', () => {
+      const resourceList = mountWithAppProvider(
+        <ResourceList
+          items={singleItemNoID}
+          renderItem={renderItem}
+          resourceName={{singular: 'product', plural: 'products'}}
+          showHeader
+          totalItemsCount={5}
+        />,
+      );
+
+      expect(findByTestID(resourceList, 'headerTitleWrapper').text()).toBe(
+        'Showing 1 of 5 products',
+      );
+    });
   });
 
   describe('bulkActionsAccessibilityLabel', () => {