Merge pull request #2983 from dn55533/fix/2639-icpaginationbar-range-…

…label-not-updating 2639 - Set IcPaginationBar to the first page when the "Items per page" changes
mi6 · Jan 9, 2025 · f67c504 · f67c504
2 parents c4c58fc + 666442a
commit f67c504
Show file tree

Hide file tree

Showing 11 changed files with 268 additions and 64 deletions.
diff --git a/packages/canary-docs/docs.json b/packages/canary-docs/docs.json
@@ -3697,6 +3697,28 @@
           "optional": true,
           "required": false
         },
+        {
+          "name": "setToFirstPageOnPaginationChange",
+          "type": "boolean",
+          "complexType": {
+            "original": "boolean",
+            "resolved": "boolean",
+            "references": {}
+          },
+          "mutable": false,
+          "attr": "set-to-first-page-on-pagination-change",
+          "reflectToAttr": false,
+          "docs": "If `true`, the pagination bar is set to the first page when the 'items per page' changes",
+          "docsTags": [],
+          "default": "false",
+          "values": [
+            {
+              "type": "boolean"
+            }
+          ],
+          "optional": true,
+          "required": false
+        },
         {
           "name": "showGoToPageControl",
           "type": "boolean",

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,97 @@ describe("IcPaginationBar end-to-end tests", () => {
       .should(HAVE_LENGTH, 1);
   });
 
+  it("should reset to the first page when the setToFirstPageOnPaginationChange prop is set and the items per page is changed", () => {
+    mount(
+      <PaginationBarItemsPerPage
+        rangeLabelType="data"
+        setToFirstPageOnPaginationChange
+      />
+    );
+
+    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 remain on the current page when the setToFirstPageOnPaginationChange prop is unset and 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, "21 - 40 of 100 items");
+
+    cy.findShadowEl(PAGINATION_BAR, "ic-pagination")
+      .shadow()
+      .find("ic-pagination-item")
+      .shadow()
+      .find("ic-typography")
+      .should(HAVE_TEXT, "Page 2");
+  });
+
   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
@@ -1877,23 +1877,6 @@ const DataTable = () => {
 export default DataTable;
 ```
 
-export const defaultPaginationBarArgs = {
-  itemsPerPageOptions: [
-    { label: "5", value: "5" },
-    { label: "10", value: "10" },
-    { label: "15", value: "15" },
-  ],
-  rangeLabelType: "page",
-  type: "simple",
-  showItemsPerPageControl: true,
-  showGoToPageControl: true,
-  alignment: "right",
-  appearance: "default",
-  itemLabel: "Item",
-  pageLabel: "Page",
-  hideRangeLabel: false
-};
-
 ### Slotted pagination bar
 
 There may be scenarios when using `IcDataTable` when pagination and data fetching is done using a backend API.
@@ -2220,11 +2203,12 @@ export const defaultArgs = {
   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",
+  paginationSetToFirstPageOnPaginationChange: false,
   paginationShowGoToPageControl: true,
   paginationShowItemsPerPageControl: true,
   paginationType: "simple",
@@ -2345,6 +2329,7 @@ export const defaultArgs = {
           itemsPerPageOptions: args.paginationItemsPerPageOptions,
           pageLabel: args.paginationPageLabel,
           rangeLabelType: args.paginationRangeLabelType,
+          setToFirstPageOnPaginationChange: args.paginationSetToFirstPageOnPaginationChange,
           showGoToPageControl: args.paginationShowGoToPageControl,
           showItemsPerPageControl: args.paginationShowItemsPerPageControl,
           type: args.paginationType

diff --git a/packages/canary-react/src/stories/ic-pagination-bar.stories.mdx b/packages/canary-react/src/stories/ic-pagination-bar.stories.mdx
@@ -482,6 +482,43 @@ const PaginationBar = () => (
 export default PaginationBar;
 ```
 
+### Set to first page when items per page changes
+
+If you have a predefined list of items you want in the itemsPerPage select, the 'All' option can be hidden by setting `hide-all-from-items-per-page` to `true`.
+
+<Canvas withSource="none">
+  <Story name="Set to first page when items per page changes">
+    <div style={{
+      height: '150px'
+    }}>
+        <IcPaginationBar
+          totalItems="100"
+          showItemsPerPageControl
+          showGoToPageControl
+          setToFirstPageOnPaginationChange
+        />
+    </div>
+  </Story>
+</Canvas>
+
+#### Set to first page when items per page changes code example
+
+```jsx
+import * as React from "react";
+import { IcPaginationBar } from '@ukic/canary-react';
+
+const PaginationBar = () => (
+    <IcPaginationBar
+      totalItems="100"
+      showItemsPerPageControl
+      showGoToPageControl
+      setToFirstPageOnPaginationChange
+    />
+);
+
+export default PaginationBar;
+```
+
 ### Playground
 
 Go to the <IcLink href="/?path=/story/react-components-pagination-bar--playground">separate page for the playground example</IcLink> to view the prop controls.
@@ -500,8 +537,9 @@ export const defaultArgs = {
   ],
   pageLabel: "Page",
   rangeLabelType: "page",
-  showItemsPerPageControl: false,
-  showGoToPageControl: false,
+  setToFirstPageOnPaginationChange: false,
+  showItemsPerPageControl: true,
+  showGoToPageControl: true,
   totalItems: 100,
   type: "simple" 
 };
@@ -546,6 +584,7 @@ export const defaultArgs = {
           itemsPerPageOptions={args.itemsPerPageOptions}
           pageLabel={args.pageLabel}
           rangeLabelType={args.rangeLabelType}
+          setToFirstPageOnPaginationChange={args.setToFirstPageOnPaginationChange}
           showItemsPerPageControl={args.showItemsPerPageControl}
           showGoToPageControl={args.showGoToPageControl}
           totalItems={args.totalItems}

diff --git a/packages/canary-web-components/src/components.d.ts b/packages/canary-web-components/src/components.d.ts
@@ -543,6 +543,10 @@ export namespace Components {
           * Whether total number of items and current item range or total number of pages and current page is displayed.
          */
         "rangeLabelType"?: IcPaginationLabelTypes;
+        /**
+          * If `true`, the pagination bar is set to the first page when the 'items per page' changes
+         */
+        "setToFirstPageOnPaginationChange"?: boolean;
         /**
           * If `true`, the 'go to page' control should be displayed.
          */
@@ -1540,6 +1544,10 @@ declare namespace LocalJSX {
           * Whether total number of items and current item range or total number of pages and current page is displayed.
          */
         "rangeLabelType"?: IcPaginationLabelTypes;
+        /**
+          * If `true`, the pagination bar is set to the first page when the 'items per page' changes
+         */
+        "setToFirstPageOnPaginationChange"?: boolean;
         /**
           * If `true`, the 'go to page' control should be displayed.
          */

diff --git a/packages/canary-web-components/src/components/ic-data-table/ic-data-table.tsx b/packages/canary-web-components/src/components/ic-data-table/ic-data-table.tsx
@@ -238,6 +238,7 @@ export class DataTable {
     pageLabel: "Page",
     hideRangeLabel: false,
     hideAllFromItemsPerPage: false,
+    setToFirstPageOnPaginationChange: false,
   };
 
   /**
@@ -1979,6 +1980,9 @@ export class DataTable {
                   hideAllFromItemsPerPage={
                     paginationBarOptions.hideAllFromItemsPerPage
                   }
+                  setToFirstPageOnPaginationChange={
+                    paginationBarOptions.setToFirstPageOnPaginationChange
+                  }
                 ></ic-pagination-bar>
               )}
             </div>