fix(react/pagination): render page number twice when pagesUnknown (#…

…12302)

* fix(react/pagination): change style of pageText when pagesUnknown is

According to #12252, when pagesUnknown is , pagination render page
number as same as selector which does not make sense to render this information twice.
So, I change page number (pageText) to page label in front of
the selector which makes more sense and make pagination looks cleaner.

BREAKING CHANGE: typeof pageText change from function to string.

* fix(react/pagination): render page number twice modified

* Update packages/react/src/components/Pagination/next/Pagination.js

Co-authored-by: Taylor Jones <tay1orjones@users.noreply.github.com>

* fix(react/pagination): resolve another conflict on /Pagination.js

* chore: fix deleted files

Co-authored-by: Taylor Jones <tay1orjones@users.noreply.github.com>
Co-authored-by: Taylor Jones <taylor.jones826@gmail.com>
Co-authored-by: TJ Egan <tw15egan@gmail.com>
Co-authored-by: kodiakhq[bot] <49736102+kodiakhq[bot]@users.noreply.github.com>

.all-contributorsrc

@@ -905,6 +905,16 @@
         "code"
       ]
     },
+    {
+      "login": "61130061",
+      "name": "Llam4u",
+      "avatar_url": "https://avatars.githubusercontent.com/u/54393468?v=4",
+      "profile": "https://61130061.github.io/llam4u-terminal/",
+      "contributions": [
+        "code",
+        "bug"
+      ]
+    },
     {
       "login": "torresga",
       "name": "G. Torres",

README.md

@@ -202,6 +202,7 @@ check out our [Contributing Guide](/.github/CONTRIBUTING.md) and our
   </tr>
   <tr>
     <td align="center"><a href="https://github.com/hannelevaltanen"><img src="https://avatars.githubusercontent.com/u/26527460?v=4?s=100" width="100px;" alt=""/><br /><sub><b>Hannele Valtanen</b></sub></a><br /><a href="https://github.com/carbon-design-system/carbon/commits?author=hannelevaltanen" title="Code">💻</a></td>
+    <td align="center"><a href="https://61130061.github.io/llam4u-terminal/"><img src="https://avatars.githubusercontent.com/u/54393468?v=4?s=100" width="100px;" alt=""/><br /><sub><b>Llam4u</b></sub></a><br /><a href="https://github.com/carbon-design-system/carbon/commits?author=61130061" title="Code">💻</a> <a href="https://github.com/carbon-design-system/carbon/issues?q=author%3A61130061" title="Bug reports">🐛</a></td>
     <td align="center"><a href="http://torresga.github.io/"><img src="https://avatars.githubusercontent.com/u/6892410?v=4?s=100" width="100px;" alt=""/><br /><sub><b>G. Torres</b></sub></a><br /><a href="https://github.com/carbon-design-system/carbon/commits?author=torresga" title="Code">💻</a></td>
     <td align="center"><a href="https://github.com/FionaDL"><img src="https://avatars.githubusercontent.com/u/28625558?v=4?s=100" width="100px;" alt=""/><br /><sub><b>Fiona</b></sub></a><br /><a href="https://github.com/carbon-design-system/carbon/commits?author=FionaDL" title="Code">💻</a></td>
     <td align="center"><a href="https://lewisdavanzo.com/"><img src="https://avatars.githubusercontent.com/u/70274722?v=4?s=100" width="100px;" alt=""/><br /><sub><b>kindoflew</b></sub></a><br /><a href="https://github.com/carbon-design-system/carbon/commits?author=kindoflew" title="Code">💻</a></td>

packages/react/src/components/Pagination/Pagination-test.js

@@ -187,6 +187,16 @@ describe('Pagination', () => {
       expect(screen.getByText(`página ${page}`)).toBeInTheDocument();
     });
 
+    it('should not include page count 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();
+    });
+
     it('should respect size prop', () => {
       const { container } = render(<Pagination size="sm" pageSizes={[10]} />);
 

packages/react/src/components/Pagination/Pagination.js

@@ -67,7 +67,7 @@ const Pagination = React.forwardRef(function Pagination(
     pageSize: controlledPageSize,
     pageSizeInputDisabled,
     pageSizes: controlledPageSizes,
-    pageText = (page) => `page ${page}`,
+    pageText = (page, pagesUnknown) => `page ${pagesUnknown ? '' : page}`,
     pagesUnknown = false,
     size = 'md',
     totalItems,
@@ -251,6 +251,14 @@ const Pagination = React.forwardRef(function Pagination(
         </span>
       </div>
       <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`}
@@ -262,9 +270,13 @@ const Pagination = React.forwardRef(function Pagination(
           disabled={pageInputDisabled || disabled}>
           {selectItems}
         </Select>
-        <span className={`${prefix}--pagination__text`}>
-          {pagesUnknown ? pageText(page) : pageRangeText(page, totalPages)}
-        </span>
+        {pagesUnknown ? null : (
+          <span className={`${prefix}--pagination__text`}>
+            {pagesUnknown
+              ? pageText(page, pagesUnknown)
+              : pageRangeText(page, totalPages)}
+          </span>
+        )}
         <div className={`${prefix}--pagination__control-buttons`}>
           <IconButton
             align="top"

packages/styles/scss/components/pagination/_pagination.scss

@@ -134,9 +134,7 @@
     border-right: 1px solid $border-subtle;
   }
 
-  .#{$prefix}--pagination
-    .#{$prefix}--select__page-number
-    .#{$prefix}--select-input {
+  .#{$prefix}--pagination__right {
     border-left: 1px solid $border-subtle;
   }
 
@@ -166,6 +164,16 @@
     margin-left: rem(1px);
   }
 
+  .#{$prefix}--pagination__right
+    .#{$prefix}--pagination__text.#{$prefix}--pagination__page-text {
+    margin-right: rem(1px);
+    margin-left: 1rem;
+  }
+
+  .#{$prefix}--pagination__right .#{$prefix}--pagination__text:empty {
+    margin: 0;
+  }
+
   .#{$prefix}--pagination__left {
     padding: 0 $spacing-05 0 0;