fix(pagination): fix issues with pagination playground story (#10883)

* fix(pagination): fix issues with pagination playground story * fix(pagination): avoid division by 0
carbon-design-system · Aug 30, 2023 · 082b467 · 082b467
1 parent c29a30d
commit 082b467
Show file tree

Hide file tree

Showing 2 changed files with 12 additions and 5 deletions.
diff --git a/packages/carbon-web-components/src/components/pagination/pagination-story.ts b/packages/carbon-web-components/src/components/pagination/pagination-story.ts
@@ -80,6 +80,7 @@ export const Playground = (args) => {
     itemsPerPageText,
     page,
     pageInputDisabled,
+    pageSize,
     pageSizeInputDisabled,
     pagesUnknown,
     size,
@@ -91,8 +92,9 @@ export const Playground = (args) => {
       ?disabled=${disabled}
       forward-text=${forwardText}
       ?is-last-page=${isLastPage}
-      items-per-page=${itemsPerPageText}
+      items-per-page-text=${itemsPerPageText}
       page=${page}
+      page-size=${pageSize}
       ?page-input-disabled=${pageInputDisabled}
       ?page-size-input-disabled=${pageSizeInputDisabled}
       size=${size}
@@ -122,9 +124,8 @@ export default {
           'Explicitly state that the user is at the last page (is-last-page)',
           false
         ),
-        itemsPerPage: text('Items per page text', 'Items per page:'),
+        itemsPerPageText: text('Items per page text', 'Items per page:'),
         page: number('The current page', 1),
-
         pageSize: number('Number of rows per page (page-size)', 10),
         pageInputDisabled: boolean('Pages input disabled', false),
         pageSizeInputDisabled: boolean('Pages size input disabled', false),

diff --git a/packages/carbon-web-components/src/components/pagination/pagination.ts b/packages/carbon-web-components/src/components/pagination/pagination.ts
@@ -133,7 +133,10 @@ class CDSPagination extends FocusMixin(HostListenerMixin(LitElement)) {
 
     if (event.composedPath()[0] === this._pageSizeSelect) {
       this.pageSize = parseInt(value);
-      this.totalPages = Math.ceil(totalItems / pageSize);
+      // Default pageSize to effectively be 1 when we have a value of 0 to avoid
+      // division by 0.
+      this.totalPages =
+        pageSize > 0 ? Math.ceil(totalItems / pageSize) : totalItems;
       this.page = 1;
       this.start = 0;
     } else {
@@ -274,7 +277,10 @@ class CDSPagination extends FocusMixin(HostListenerMixin(LitElement)) {
         pageSize;
     }
     if (changedProperties.has('pageSize') || changedProperties.has('start')) {
-      this.totalPages = Math.ceil(totalItems / pageSize);
+      // Default pageSize to effectively be 1 when we have a value of 0 to avoid
+      // division by 0.
+      this.totalPages =
+        pageSize > 0 ? Math.ceil(totalItems / pageSize) : totalItems;
       (this.shadowRoot!.querySelector(selectorPagesSelect) as CDSSelect).value =
         this.page.toString();
     }