fix(canary-react): Fix the All option of the items per page dropdown …

…in the IcPaginationBar when there are fewer items than available options include the all option when there are fewer items than the available options fix mi6#2843
dn55533 · Jan 6, 2025 · 449391c · 449391c
1 parent c7bbf0c
commit 449391c
Show file tree

Hide file tree

Showing 4 changed files with 32 additions and 0 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-pagination-bar.stories.mdx b/packages/canary-react/src/stories/ic-pagination-bar.stories.mdx
@@ -503,6 +503,7 @@ export const defaultArgs = {
   showGoToPageControl: false,
   totalItems: 100,
   type: "simple",
+  hideAllFromItemsPerPage: false
 };
 
 <Canvas withSource="none">
@@ -548,6 +549,7 @@ export const defaultArgs = {
           showGoToPageControl={args.showGoToPageControl}
           totalItems={args.totalItems}
           type={args.type}
+          hideAllFromItemsPerPage={args.hideAllFromItemsPerPage}
           onIcPageChange={updatePageNum}
         >
         </IcPaginationBar>