Merge pull request #2969 from dn55533/fix/2843-ic-pagination-bar-use-…

…all-option-when-there-are-fewer-items

2843 IcPaginationBar - include the "All" items per page option when there are fewer items than the available options

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", () => {

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}

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}

packages/canary-web-components/src/components/ic-pagination-bar/ic-pagination-bar.tsx

@@ -91,6 +91,10 @@ export class PaginationBar {
    * If `true`, the 'All' option will be hidden from the 'items per page' select input.
    */
   @Prop() hideAllFromItemsPerPage?: boolean = false;
+  @Watch("hideAllFromItemsPerPage")
+  watchHideAllFromItemsPerPageHandler(): void {
+    this.setPaginationBarContent();
+  }
 
   /**
    * The text which will be used in place of 'Item' on the pagination bar.
@@ -358,7 +362,7 @@ export class PaginationBar {
     this.icPageChange.emit({ value: this.activePage, fromItemsPerPage: true });
   };
 
-  private setPaginationBarContent = (): void => {
+  private setItemsPerPageOptions = () => {
     const clonedItemsPerPageOptions: {
       label: string;
       value: string;
@@ -379,16 +383,39 @@ export class PaginationBar {
             { label: "100", value: "100" },
             { label: "1000", value: "1000" },
           ]);
-    !this.hideAllFromItemsPerPage &&
-      displayedItemsPerPageOptions.push({
-        label: "All",
-        value: String(this.totalItems),
-      });
 
     this.displayedItemsPerPageOptions = displayedItemsPerPageOptions.filter(
       ({ value }) => this.totalItems >= Number(value)
     );
 
+    const currentItemsLength = this.displayedItemsPerPageOptions.length;
+
+    const addAllOption = () =>
+      this.displayedItemsPerPageOptions.push({
+        label: "All",
+        value: String(this.totalItems),
+      });
+
+    const lastItemsPerPageEqualsTotalItems = () =>
+      Number(
+        this.displayedItemsPerPageOptions[currentItemsLength - 1].value
+      ) === this.totalItems;
+
+    const relabelLastOptionToAll = () =>
+      (this.displayedItemsPerPageOptions[currentItemsLength - 1].label = "All");
+
+    if (currentItemsLength === 0) {
+      addAllOption();
+    } else if (lastItemsPerPageEqualsTotalItems()) {
+      relabelLastOptionToAll();
+    } else if (!this.hideAllFromItemsPerPage) {
+      addAllOption();
+    }
+  };
+
+  private setPaginationBarContent = (): void => {
+    this.setItemsPerPageOptions();
+
     let lastOptionValue = 0;
     const updated = this.displayedItemsPerPageOptions.some(({ value }) => {
       lastOptionValue = Number(value);