feat(Pagination, PaginationNav): migrate v11 versions to use new Icon…

…Button (#10947) * feat: migrate pagination nav tooltip * feat: migrate v11 pagination tooltip * feat: migrate unstable pagination tooltip * fix: v11 pagination tooltip * chore: fix v11 pagination tests Co-authored-by: kodiakhq[bot] <49736102+kodiakhq[bot]@users.noreply.github.com>
carbon-design-system · Mar 21, 2022 · 0cac061 · 0cac061
1 parent 09d1a94
commit 0cac061
Show file tree

Hide file tree

Showing 4 changed files with 112 additions and 63 deletions.
diff --git a/packages/react/src/components/Pagination/experimental/Pagination.js b/packages/react/src/components/Pagination/experimental/Pagination.js
@@ -12,6 +12,8 @@ import { CaretRight16, CaretLeft16 } from '@carbon/icons-react';
 import Button from '../../Button';
 import Select from '../../Select';
 import SelectItem from '../../SelectItem';
+import { IconButton } from '../../IconButton';
+import * as FeatureFlags from '@carbon/feature-flags';
 import { usePrefix } from '../../../internal/usePrefix';
 
 function Pagination({
@@ -141,38 +143,75 @@ function Pagination({
               : pageRangeText(currentPage, totalPages)}
           </span>
         )}
-        <Button
-          className={classnames(
-            `${namespace}__button`,
-            `${namespace}__button--backward`,
-            {
-              [`${namespace}__button--no-index`]: backButtonDisabled,
-            }
-          )}
-          onClick={() => decrementPage()}
-          disabled={backButtonDisabled}
-          hasIconOnly
-          renderIcon={CaretLeft16}
-          tooltipAlignment="center"
-          tooltipPosition="top"
-          iconDescription={backwardText}
-        />
-        <Button
-          className={classnames(
-            `${namespace}__button`,
-            `${namespace}__button--forward`,
-            {
-              [`${namespace}__button--no-index`]: forwardButtonDisabled,
-            }
-          )}
-          onClick={() => incrementPage()}
-          disabled={forwardButtonDisabled}
-          hasIconOnly
-          renderIcon={CaretRight16}
-          tooltipAlignment="center"
-          tooltipPosition="top"
-          iconDescription={forwardText}
-        />
+        {FeatureFlags.enabled('enable-v11-release') ? (
+          <>
+            <IconButton
+              align="top"
+              disabled={backButtonDisabled}
+              kind="ghost"
+              className={classnames(
+                `${namespace}__button`,
+                `${namespace}__button--backward`,
+                {
+                  [`${namespace}__button--no-index`]: backButtonDisabled,
+                }
+              )}
+              label={backwardText}
+              onClick={() => decrementPage()}>
+              <CaretLeft16 />
+            </IconButton>
+            <IconButton
+              align="top-right"
+              disabled={forwardButtonDisabled}
+              kind="ghost"
+              className={classnames(
+                `${namespace}__button`,
+                `${namespace}__button--forward`,
+                {
+                  [`${namespace}__button--no-index`]: forwardButtonDisabled,
+                }
+              )}
+              label={forwardText}
+              onClick={() => incrementPage()}>
+              <CaretRight16 />
+            </IconButton>
+          </>
+        ) : (
+          <>
+            <Button
+              className={classnames(
+                `${namespace}__button`,
+                `${namespace}__button--backward`,
+                {
+                  [`${namespace}__button--no-index`]: backButtonDisabled,
+                }
+              )}
+              onClick={() => decrementPage()}
+              disabled={backButtonDisabled}
+              hasIconOnly
+              renderIcon={CaretLeft16}
+              tooltipAlignment="center"
+              tooltipPosition="top"
+              iconDescription={backwardText}
+            />
+            <Button
+              className={classnames(
+                `${namespace}__button`,
+                `${namespace}__button--forward`,
+                {
+                  [`${namespace}__button--no-index`]: forwardButtonDisabled,
+                }
+              )}
+              onClick={() => incrementPage()}
+              disabled={forwardButtonDisabled}
+              hasIconOnly
+              renderIcon={CaretRight16}
+              tooltipAlignment="center"
+              tooltipPosition="top"
+              iconDescription={forwardText}
+            />
+          </>
+        )}
       </div>
     </section>
   );

diff --git a/packages/react/src/components/Pagination/next/Pagination.js b/packages/react/src/components/Pagination/next/Pagination.js
@@ -9,12 +9,12 @@ import { CaretRight16, CaretLeft16 } from '@carbon/icons-react';
 import cx from 'classnames';
 import PropTypes from 'prop-types';
 import React, { useState } from 'react';
-import Button from '../../Button';
 import Select from '../../Select';
 import SelectItem from '../../SelectItem';
 import { equals } from '../../../tools/array';
 import { useFallbackId } from '../../../internal/useId';
 import { usePrefix } from '../../../internal/usePrefix';
+import { IconButton } from '../../IconButton';
 
 function mapPageSizesToObject(sizes) {
   return typeof sizes[0] === 'object' && sizes[0] !== null
@@ -245,28 +245,24 @@ const Pagination = React.forwardRef(function Pagination(
           {pagesUnknown ? pageText(page) : pageRangeText(page, totalPages)}
         </span>
         <div className={`${prefix}--pagination__control-buttons`}>
-          <Button
+          <IconButton
+            align="top"
+            disabled={backButtonDisabled}
             kind="ghost"
             className={backButtonClasses}
-            hasIconOnly
-            renderIcon={CaretLeft16}
-            iconDescription={backwardText}
-            tooltipAlignment="center"
-            tooltipPosition="top"
-            onClick={decrementPage}
-            disabled={backButtonDisabled}
-          />
-          <Button
+            label={backwardText}
+            onClick={decrementPage}>
+            <CaretLeft16 />
+          </IconButton>
+          <IconButton
+            align="top-right"
+            disabled={forwardButtonDisabled || isLastPage}
             kind="ghost"
             className={forwardButtonClasses}
-            hasIconOnly
-            renderIcon={CaretRight16}
-            iconDescription={forwardText}
-            tooltipAlignment="end"
-            tooltipPosition="top"
-            onClick={incrementPage}
-            disabled={forwardButtonDisabled || isLastPage}
-          />
+            label={forwardText}
+            onClick={incrementPage}>
+            <CaretRight16 />
+          </IconButton>
         </div>
       </div>
     </div>

diff --git a/packages/react/src/components/Pagination/next/__tests__/Pagination-test.js b/packages/react/src/components/Pagination/next/__tests__/Pagination-test.js
@@ -53,7 +53,7 @@ const selectPage = (wrapper, pageNumber) => {
  * @returns {void}
  */
 const incrementPage = (wrapper) => {
-  wrapper.find('[children="Next page"]').simulate('click');
+  wrapper.find('button.bx--pagination__button--forward').simulate('click');
 };
 
 /**
@@ -63,7 +63,7 @@ const incrementPage = (wrapper) => {
  * @returns {void}
  */
 const decrementPage = (wrapper) => {
-  wrapper.find('[children="Previous page"]').simulate('click');
+  wrapper.find('button.bx--pagination__button--backward').simulate('click');
 };
 
 /**
@@ -225,6 +225,7 @@ describe('Pagination', () => {
         const pager = mount(
           <Pagination pageSizes={[5, 10]} totalItems={50} onChange={handler} />
         );
+
         incrementPage(pager);
         expect(getCurrentPage(pager)).toBe(2);
         pager

diff --git a/packages/react/src/components/PaginationNav/PaginationNav.js b/packages/react/src/components/PaginationNav/PaginationNav.js
@@ -14,6 +14,8 @@ import {
   OverflowMenuHorizontal16,
 } from '@carbon/icons-react';
 import Button from '../Button';
+import { IconButton } from '../IconButton';
+import * as FeatureFlags from '@carbon/feature-flags';
 import { usePrefix } from '../../internal/usePrefix';
 
 const translationIds = {
@@ -74,16 +76,27 @@ function DirectionButton({ direction, label, disabled, onClick }) {
 
   return (
     <li className={`${prefix}--pagination-nav__list-item`}>
-      <Button
-        disabled={disabled}
-        renderIcon={icon}
-        kind="ghost"
-        hasIconOnly
-        iconDescription={label}
-        tooltipAlignment="center"
-        tooltipPosition="bottom"
-        onClick={onClick}
-      />
+      {FeatureFlags.enabled('enable-v11-release') ? (
+        <IconButton
+          align="bottom"
+          disabled={disabled}
+          kind="ghost"
+          label={label}
+          onClick={onClick}>
+          {direction === 'forward' ? <CaretRight16 /> : <CaretLeft16 />}
+        </IconButton>
+      ) : (
+        <Button
+          disabled={disabled}
+          renderIcon={icon}
+          kind="ghost"
+          hasIconOnly
+          iconDescription={label}
+          tooltipAlignment="center"
+          tooltipPosition="bottom"
+          onClick={onClick}
+        />
+      )}
     </li>
   );
 }