feat(PaginationNav): add size prop with sm and md variants (#17175

) * feat(PaginationNav): add `size` prop * feat(pagination): update layout styles for sizes * fix(pagination-nav): realign underline * docs(pagination-nav): mark potential deprecations * chore: update snapshot
carbon-design-system · Aug 23, 2024 · d5aaf60 · d5aaf60
1 parent 53b8b3a
commit d5aaf60
Show file tree

Hide file tree

Showing 4 changed files with 41 additions and 8 deletions.
diff --git a/packages/react/__tests__/__snapshots__/PublicAPI-test.js.snap b/packages/react/__tests__/__snapshots__/PublicAPI-test.js.snap
@@ -6110,6 +6110,16 @@ Map {
       "page": Object {
         "type": "number",
       },
+      "size": Object {
+        "args": Array [
+          Array [
+            "sm",
+            "md",
+            "lg",
+          ],
+        ],
+        "type": "oneOf",
+      },
       "totalItems": Object {
         "type": "number",
       },

diff --git a/packages/react/src/components/PaginationNav/PaginationNav.stories.js b/packages/react/src/components/PaginationNav/PaginationNav.stories.js
@@ -28,6 +28,7 @@ export const Playground = (args) => (
 );
 
 Playground.args = {
+  size: 'lg',
   loop: false,
   itemsShown: 10,
   page: 0,
@@ -36,6 +37,10 @@ Playground.args = {
 };
 
 Playground.argTypes = {
+  size: {
+    options: ['sm', 'md', 'lg'],
+    control: { type: 'select' },
+  },
   loop: {
     control: {
       type: 'boolean',

diff --git a/packages/react/src/components/PaginationNav/PaginationNav.tsx b/packages/react/src/components/PaginationNav/PaginationNav.tsx
@@ -311,6 +311,11 @@ interface PaginationNavProps
    */
   page?: number;
 
+  /**
+   * Specify the size of the PaginationNav.
+   */
+  size?: 'sm' | 'md' | 'lg';
+
   /**
    * The total number of items.
    */
@@ -327,6 +332,7 @@ const PaginationNav = React.forwardRef<HTMLElement, PaginationNavProps>(
       itemsShown = 10,
       page = 0,
       loop = false,
+      size = 'lg',
       translateWithId: t = translateWithId,
       ...rest
     },
@@ -428,7 +434,9 @@ const PaginationNav = React.forwardRef<HTMLElement, PaginationNavProps>(
       setIsOverFlowDisabled(disableOverflow);
     }, [disableOverflow]);
 
-    const classNames = classnames(`${prefix}--pagination-nav`, className);
+    const classNames = classnames(`${prefix}--pagination-nav`, className, {
+      [`${prefix}--layout--size-${size}`]: size,
+    });
 
     const backwardButtonDisabled = !loop && currentPage === 0;
     const forwardButtonDisabled = !loop && currentPage === totalItems - 1;
@@ -632,6 +640,11 @@ PaginationNav.propTypes = {
    */
   page: PropTypes.number,
 
+  /**
+   * Specify the size of the PaginationNav.
+   */
+  size: PropTypes.oneOf(['sm', 'md', 'lg']),
+
   /**
    * The total number of items.
    */

diff --git a/packages/styles/scss/components/pagination-nav/_pagination-nav.scss b/packages/styles/scss/components/pagination-nav/_pagination-nav.scss
@@ -15,6 +15,7 @@
 @use '../../utilities/button-reset';
 @use '../../utilities/focus-outline' as *;
 @use '../../utilities/high-contrast-mode' as *;
+@use '../../utilities/layout';
 @use '../../utilities/visually-hidden' as *;
 
 /// Pagination nav base styles
@@ -26,9 +27,9 @@
 /// @param {Color} $background-color-active [initial]
 /// @param {Number} $font-weight [400]
 /// @param {Number} $item-padding [0]
-/// @param {Number} $button-min-width [$spacing-09]
-/// @param {Value} $button-padding [1.0625rem $spacing-02]
-/// @param {Number} $button-direction-size [$spacing-09]
+/// @param {Number} $button-min-width [$spacing-09] TODO: remove in v12
+/// @param {Value} $button-padding [1.0625rem $spacing-02] TODO: remove in v12
+/// @param {Number} $button-direction-size [$spacing-09] TODO: remove in v12
 /// @param {Number} $select-icon-top-position [$spacing-05]
 /// @param {Number} $select-icon-left-position [$spacing-05]
 @mixin pagination-nav(
@@ -47,6 +48,8 @@
   .#{$prefix}--pagination-nav {
     @include reset;
     @include type-style('body-compact-01');
+    @include layout.use('size', $default: 'lg', $min: 'sm', $max: 'lg');
+    @include layout.use('density', $default: 'normal');
 
     line-height: 0;
   }
@@ -75,12 +78,13 @@
 
     position: relative;
     display: block;
-    padding: $button-padding;
+    // subtract 0.875rem to account for font-size 14px
+    padding: calc((layout.size('height') - 0.875rem) / 2) $spacing-02;
     border-radius: 0;
     color: $text-primary;
     font-weight: $font-weight;
     line-height: 1;
-    min-inline-size: $button-min-width;
+    min-inline-size: layout.size('height');
     outline: 0;
     text-align: center;
     text-decoration: none;
@@ -119,6 +123,7 @@
     }
   }
 
+  // TODO: remove in v12
   .#{$prefix}--pagination-nav__page--direction {
     display: flex;
     align-items: center;
@@ -134,7 +139,7 @@
 
   .#{$prefix}--pagination-nav__page--select {
     appearance: none;
-    max-block-size: $button-min-width;
+    max-block-size: layout.size('height');
     text-indent: calc(50% - 4.5px);
     // Override some Firefox user-agent styles
     @-moz-document url-prefix() {
@@ -160,7 +165,7 @@
 
   .#{$prefix}--pagination-nav__select-icon {
     position: absolute;
-    inset-block-start: calc(50% - #{$select-icon-top-position * 0.5});
+    inset-block-start: calc(50% - #{$select-icon-top-position * 0.25});
     inset-inline-start: calc(50% - #{$select-icon-top-position * 0.5});
     pointer-events: none;
   }