fix(canary-react): Set IcPaginationBar to the first page when the ite…

…ms per page changes fix mi6#2912
dn55533 · Jan 6, 2025 · 365d214 · 365d214
1 parent be7ab3b
commit 365d214
Show file tree

Hide file tree

Showing 3 changed files with 46 additions and 3 deletions.
diff --git a/packages/canary-react/src/component-tests/IcPaginationBar/IcPaginationBar.cy.tsx b/packages/canary-react/src/component-tests/IcPaginationBar/IcPaginationBar.cy.tsx
@@ -393,6 +393,49 @@ describe("IcPaginationBar end-to-end tests", () => {
       .should(HAVE_LENGTH, 1);
   });
 
+  it("should reset to the first page when the items per page is changed", () => {
+    mount(<PaginationBarItemsPerPage rangeLabelType="data" />);
+
+    cy.checkHydrated(PAGINATION_BAR);
+
+    cy.findShadowEl(PAGINATION_BAR, "ic-pagination")
+      .shadow()
+      .find("#next-page-button")
+      .click();
+
+    cy.findShadowEl(
+      PAGINATION_BAR,
+      "ic-typography.item-pagination-label"
+    ).should(HAVE_TEXT, "11 - 20 of 100 items");
+
+    cy.findShadowEl(PAGINATION_BAR, "ic-pagination")
+      .shadow()
+      .find("ic-pagination-item")
+      .shadow()
+      .find("ic-typography")
+      .should(HAVE_TEXT, "Page 2");
+
+    cy.findShadowEl(PAGINATION_BAR, "ic-select").click();
+
+    cy.findShadowEl(PAGINATION_BAR, "ic-select")
+      .shadow()
+      .find("li[role='option']")
+      .eq(1)
+      .click();
+
+    cy.findShadowEl(
+      PAGINATION_BAR,
+      "ic-typography.item-pagination-label"
+    ).should(HAVE_TEXT, "1 - 20 of 100 items");
+
+    cy.findShadowEl(PAGINATION_BAR, "ic-pagination")
+      .shadow()
+      .find("ic-pagination-item")
+      .shadow()
+      .find("ic-typography")
+      .should(HAVE_TEXT, "Page 1");
+  });
+
   it('should render the number of items instead of the page number when rangeLabelType is "data"', () => {
     mount(<PaginationBarItemsPerPage rangeLabelType="data" />);
 

diff --git a/packages/canary-react/src/stories/ic-data-table.stories.mdx b/packages/canary-react/src/stories/ic-data-table.stories.mdx
@@ -2281,7 +2281,7 @@ export const defaultArgs = {
           rangeLabelType: args.paginationRangeLabelType,
           type: args.paginationType,
           showItemsPerPageControl: args.paginationShowItemsPerPageControl,
-          showGoToPageControl: args.paginationShowGoToPageControl,          
+          showGoToPageControl: args.paginationShowGoToPageControl,
           appearance: args.paginationAppearance,
           alignment: args.paginationAlignment,
           pageLabel: args.paginationPageLabel,

diff --git a/packages/canary-react/src/stories/ic-pagination-bar.stories.mdx b/packages/canary-react/src/stories/ic-pagination-bar.stories.mdx
@@ -499,8 +499,8 @@ export const defaultArgs = {
   ],
   pageLabel: "Page",
   rangeLabelType: "page",
-  showItemsPerPageControl: false,
-  showGoToPageControl: false,
+  showItemsPerPageControl: true,
+  showGoToPageControl: true,
   totalItems: 100,
   type: "simple",
 };