fix(canary-react): show the All option of the IcPaginationBar items p…

…er page dropdown Show the All option of the items per page dropdown in the IcPaginationBar when there are fewer items than available options fix mi6#2843
dn55533 · Jan 8, 2025 · 2f02de6 · 2f02de6
1 parent 7d62cef
commit 2f02de6
Show file tree

Hide file tree

Showing 5 changed files with 51 additions and 17 deletions.
diff --git a/...onBar.cy.tsx-hide-all-option-still-visible-due-to-matching-item-upper-bound.png b/...onBar.cy.tsx-hide-all-option-still-visible-due-to-matching-item-upper-bound.png
diff --git a/...f-screenshots/baseline/IcPaginationBar.cy.tsx-hide-all-option-still-visible.png b/...f-screenshots/baseline/IcPaginationBar.cy.tsx-hide-all-option-still-visible.png
diff --git a/packages/canary-react/src/component-tests/IcPaginationBar/IcPaginationBar.cy.tsx b/packages/canary-react/src/component-tests/IcPaginationBar/IcPaginationBar.cy.tsx
@@ -590,6 +590,36 @@ describe("IcPaginationBar visual regression and a11y tests", () => {
       testThreshold: setThresholdBasedOnEnv(DEFAULT_TEST_THRESHOLD),
     });
   });
+
+  it("should render with 'All' visible from items per page dropdown when there are fewer items than the available options", () => {
+    mount(<PaginationBarItemsPerPage totalItems={5} hideAllFromItemsPerPage />);
+
+    cy.checkHydrated(PAGINATION_BAR);
+
+    cy.findShadowEl(PAGINATION_BAR, ".items-per-page-input").click();
+
+    cy.checkA11yWithWait();
+    cy.compareSnapshot({
+      name: "hide-all-option-still-visible",
+      testThreshold: setThresholdBasedOnEnv(DEFAULT_TEST_THRESHOLD),
+    });
+  });
+
+  it("should render with 'All' visible in the items per page dropdown when the number of items matches the upper bound of the lowest available option", () => {
+    mount(
+      <PaginationBarItemsPerPage totalItems={20} hideAllFromItemsPerPage />
+    );
+
+    cy.checkHydrated(PAGINATION_BAR);
+
+    cy.findShadowEl(PAGINATION_BAR, ".items-per-page-input").click();
+
+    cy.checkA11yWithWait();
+    cy.compareSnapshot({
+      name: "hide-all-option-still-visible-due-to-matching-item-upper-bound",
+      testThreshold: setThresholdBasedOnEnv(DEFAULT_TEST_THRESHOLD),
+    });
+  });
 });
 
 describe("IcPaginationBar visual regression tests in high contrast mode", () => {

diff --git a/packages/canary-react/src/stories/ic-data-table.stories.mdx b/packages/canary-react/src/stories/ic-data-table.stories.mdx
@@ -2213,20 +2213,21 @@ export const defaultArgs = {
   loadingProgress: 50, 
   loadingShowBackground: false,
   minimumLoadingDisplayDuration: 1000,
+  paginationAlignment: "right",
+  paginationAppearance: "default",
+  paginationHideAllFromItemsPerPage: false,
+  paginationHideRangeLabel: false,
+  paginationItemLabel: "Item",
   paginationItemsPerPageOptions: [
     { label: "5", value: "5" },
-    { label: "10", value: "10" },
-    { label: "15", value: "15" },
+     { label: "10", value: "10" },
+     { label: "15", value: "15" },
   ],
+  paginationPageLabel: "Page",
   paginationRangeLabelType: "page",
-  paginationType: "simple",
-  paginationShowItemsPerPageControl: true,
   paginationShowGoToPageControl: true,
-  paginationAlignment: "right",
-  paginationAppearance: "default",
-  paginationItemLabel: "Item",
-  paginationPageLabel: "Page",
-  paginationHideRangeLabel: false,
+  paginationShowItemsPerPageControl: true,
+  paginationType: "simple",
   showPagination: true,
   sortable: false,
   sortOrders: ["unsorted", "ascending", "descending"],
@@ -2336,16 +2337,17 @@ export const defaultArgs = {
         }}
         minimumLoadingDisplayDuration={args.minimumLoadingDisplayDuration}
         paginationBarOptions={{
+          alignment: args.paginationAlignment,
+          appearance: args.paginationAppearance,
+          hideAllFromItemsPerPage: args.paginationHideAllFromItemsPerPage,
+          hideRangeLabel: args.paginationHideRangeLabel,
+          itemLabel: args.paginationItemLabel,
           itemsPerPageOptions: args.paginationItemsPerPageOptions,
+          pageLabel: args.paginationPageLabel,
           rangeLabelType: args.paginationRangeLabelType,
-          type: args.paginationType,
+          showGoToPageControl: args.paginationShowGoToPageControl,
           showItemsPerPageControl: args.paginationShowItemsPerPageControl,
-          showGoToPageControl: args.paginationShowGoToPageControl,          
-          appearance: args.paginationAppearance,
-          alignment: args.paginationAlignment,
-          pageLabel: args.paginationPageLabel,
-          itemLabel: args.paginationItemLabel,
-          hideRangeLabel: args.paginationHideRangeLabel
+          type: args.paginationType
         }}
         showPagination={args.showPagination}
         sortable={args.sortable}

diff --git a/packages/canary-react/src/stories/ic-pagination-bar.stories.mdx b/packages/canary-react/src/stories/ic-pagination-bar.stories.mdx
@@ -490,6 +490,7 @@ export const defaultArgs = {
   alignment: "right",
   appearance: "default",
   currentPage: 1,
+  hideAllFromItemsPerPage: false,
   hideRangeLabel: false,
   itemLabel: "Item",
   itemsPerPageOptions: [
@@ -502,7 +503,7 @@ export const defaultArgs = {
   showItemsPerPageControl: false,
   showGoToPageControl: false,
   totalItems: 100,
-  type: "simple",
+  type: "simple" 
 };
 
 <Canvas withSource="none">
@@ -539,6 +540,7 @@ export const defaultArgs = {
           alignment={args.alignment}
           appearance={args.appearance}
           currentPage={args.currentPage}
+          hideAllFromItemsPerPage={args.hideAllFromItemsPerPage}
           hideRangeLabel={args.hideRangeLabel}
           itemLabel={args.itemLabel}
           itemsPerPageOptions={args.itemsPerPageOptions}