fix(Pagination): handle unknown totalItems again (#16306)

* fix(Pagination): handle unknown totalItems again * fix(Pagination): simplify story * Update packages/styles/scss/components/pagination/_pagination.scss Co-authored-by: Taylor Jones <tay1orjones@users.noreply.github.com> --------- Co-authored-by: Taylor Jones <tay1orjones@users.noreply.github.com>
carbon-design-system · May 7, 2024 · eb5e10f · eb5e10f
1 parent 02588c6
commit eb5e10f
Show file tree

Hide file tree

Showing 4 changed files with 64 additions and 30 deletions.
diff --git a/packages/react/src/components/Pagination/Pagination-test.js b/packages/react/src/components/Pagination/Pagination-test.js
@@ -189,14 +189,13 @@ describe('Pagination', () => {
       expect(screen.getByText(`página ${page}`)).toBeInTheDocument();
     });
 
-    it('should not include page count when pagesUnknown', () => {
+    it('should include only current page when pagesUnknown', () => {
       const page = 1;
       render(
         <Pagination pageSizes={[10, 20]} page={page} pagesUnknown={true} />
       );
 
-      expect(screen.getByText(`page`)).toBeInTheDocument();
-      expect(screen.queryByText(`page ${page}`)).not.toBeInTheDocument();
+      expect(screen.queryByText(`page ${page}`)).toBeInTheDocument();
     });
 
     it('should respect size prop', () => {
@@ -211,5 +210,16 @@ describe('Pagination', () => {
 
       expect(screen.getByText(`1–10 of ${total} items`)).toBeInTheDocument();
     });
+    it('should allow totalItems undefined', () => {
+      render(<Pagination pagesUnknown={true} pageSizes={[10]} />);
+
+      expect(screen.getByText(`page 1`)).toBeInTheDocument();
+      expect(
+        document.querySelector('.cds--pagination__unknown-pages-text')
+      ).toBeInTheDocument();
+      expect(
+        document.querySelector('.cds--select__page-number')
+      ).not.toBeInTheDocument();
+    });
   });
 });
diff --git a/packages/react/src/components/Pagination/Pagination.stories.js b/packages/react/src/components/Pagination/Pagination.stories.js
@@ -73,6 +73,22 @@ export const PaginationWithCustomPageSizesLabel = (args) => {
 PaginationWithCustomPageSizesLabel.storyName =
   'Pagination with custom page sizes label';
 
+export const PaginationUnknownPages = (args) => {
+  return (
+    <div>
+      <Pagination
+        {...props()}
+        pagesUnknown={true}
+        totalItems={undefined}
+        page={1}
+        {...args}
+      />
+    </div>
+  );
+};
+
+PaginationUnknownPages.storyName = 'Unknown pages and items';
+
 export const Playground = (args) => <Pagination {...args} />;
 
 Playground.args = {

diff --git a/packages/react/src/components/Pagination/Pagination.tsx b/packages/react/src/components/Pagination/Pagination.tsx
@@ -185,10 +185,10 @@ const Pagination = React.forwardRef(function Pagination(
     pageSize: controlledPageSize,
     pageSizeInputDisabled,
     pageSizes: controlledPageSizes,
-    pageText = (page, pagesUnknown) => `page ${pagesUnknown ? '' : page}`,
+    pageText = (page) => `page ${page}`,
     pagesUnknown = false,
     size = 'md',
-    totalItems = 1,
+    totalItems,
     ...rest
   }: PaginationProps,
   ref: React.Ref<HTMLDivElement>
@@ -216,7 +216,9 @@ const Pagination = React.forwardRef(function Pagination(
     [`${prefix}--pagination--${size}`]: size,
     [customClassName]: !!customClassName,
   });
-  const totalPages = Math.max(Math.ceil(totalItems / pageSize), 1);
+  const totalPages = totalItems
+    ? Math.max(Math.ceil(totalItems / pageSize), 1)
+    : NaN;
   const backButtonDisabled = disabled || page === 1;
   const backButtonClasses = cx({
     [`${prefix}--pagination__button`]: true,
@@ -276,7 +278,11 @@ const Pagination = React.forwardRef(function Pagination(
 
   function handlePageInputChange(event) {
     const page = Number(event.target.value);
-    if (page > 0 && page <= Math.max(Math.ceil(totalItems / pageSize), 1)) {
+    if (
+      page > 0 &&
+      totalItems &&
+      page <= Math.max(Math.ceil(totalItems / pageSize), 1)
+    ) {
       setPage(page);
 
       if (onChange) {
@@ -359,7 +365,7 @@ const Pagination = React.forwardRef(function Pagination(
         </Select>
         <span
           className={`${prefix}--pagination__text ${prefix}--pagination__items-count`}>
-          {pagesUnknown
+          {pagesUnknown || !totalItems
             ? itemText(pageSize * (page - 1) + 1, page * pageSize)
             : itemRangeText(
                 Math.min(pageSize * (page - 1) + 1, totalItems),
@@ -371,29 +377,26 @@ const Pagination = React.forwardRef(function Pagination(
       <div className={`${prefix}--pagination__right`}>
         {pagesUnknown ? (
           <span
-            className={`${prefix}--pagination__text ${prefix}--pagination__page-text`}>
-            {pagesUnknown
-              ? pageText(page, pagesUnknown)
-              : pageRangeText(page, totalPages)}
-          </span>
-        ) : null}
-        <Select
-          id={`${prefix}-pagination-select-${inputId}-right`}
-          className={`${prefix}--select__page-number`}
-          labelText={`Page number, of ${totalPages} pages`}
-          inline
-          hideLabel
-          onChange={handlePageInputChange}
-          value={page}
-          disabled={pageInputDisabled || disabled}>
-          {selectItems}
-        </Select>
-        {pagesUnknown ? null : (
-          <span className={`${prefix}--pagination__text`}>
-            {pagesUnknown
-              ? pageText(page, pagesUnknown)
-              : pageRangeText(page, totalPages)}
+            className={`${prefix}--pagination__text ${prefix}--pagination__page-text ${prefix}--pagination__unknown-pages-text`}>
+            {pageText(page)}
           </span>
+        ) : (
+          <>
+            <Select
+              id={`${prefix}-pagination-select-${inputId}-right`}
+              className={`${prefix}--select__page-number`}
+              labelText={`Page number, of ${totalPages} pages`}
+              inline
+              hideLabel
+              onChange={handlePageInputChange}
+              value={page}
+              disabled={pageInputDisabled || disabled}>
+              {selectItems}
+            </Select>
+            <span className={`${prefix}--pagination__text`}>
+              {pageRangeText(page, totalPages)}
+            </span>
+          </>
         )}
         <div className={`${prefix}--pagination__control-buttons`}>
           <IconButton

diff --git a/packages/styles/scss/components/pagination/_pagination.scss b/packages/styles/scss/components/pagination/_pagination.scss
@@ -174,6 +174,11 @@
     margin-inline-start: 1rem;
   }
 
+  .#{$prefix}--pagination__right
+    .#{$prefix}--pagination__text.#{$prefix}--pagination__page-text.#{$prefix}--pagination__unknown-pages-text {
+    margin-inline-end: $spacing-05;
+  }
+
   .#{$prefix}--pagination__right .#{$prefix}--pagination__text:empty {
     margin: 0;
   }