feat(Pagination): add support for sizes (#9215)

* feat(Pagination): add support for sizes

* chore: update snapshots

* style(Pagination): square button for all sizes

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

Author: 3 people

packages/components/src/components/pagination/_pagination.scss

@@ -12,6 +12,7 @@ $css--helpers: true;
 @import '../../globals/scss/typography';
 @import '../../globals/scss/layout';
 @import '../../globals/scss/css--helpers';
+@import '../../globals/scss/vendor/@carbon/layout/scss/generated/size';
 @import '../../globals/scss/vendor/@carbon/elements/scss/import-once/import-once';
 @import '../select/select';
 @import '../text-input/text-input';
@@ -31,7 +32,7 @@ $css--helpers: true;
 
     display: flex;
     width: calc(100% - 1px);
-    min-height: rem(48px);
+    min-height: $size-md;
     align-items: center;
     justify-content: space-between;
     border-top: 1px solid $ui-03;
@@ -63,6 +64,14 @@ $css--helpers: true;
     }
   }
 
+  .#{$prefix}--pagination--sm {
+    min-height: $size-sm;
+  }
+
+  .#{$prefix}--pagination--lg {
+    min-height: $size-lg;
+  }
+
   .#{$prefix}--pagination .#{$prefix}--select {
     height: 100%;
     align-items: center;
@@ -78,8 +87,17 @@ $css--helpers: true;
 
     width: auto;
     min-width: auto;
-    height: rem(48px);
+    height: 100%;
     padding: 0 2.25rem 0 $spacing-05;
+    line-height: $size-md;
+  }
+
+  .#{$prefix}--pagination--sm .#{$prefix}--select-input {
+    line-height: $size-sm;
+  }
+
+  .#{$prefix}--pagination--lg .#{$prefix}--select-input {
+    line-height: $size-lg;
   }
 
   .#{$prefix}--pagination .#{$prefix}--select-input:hover {
@@ -106,7 +124,7 @@ $css--helpers: true;
   .#{$prefix}--pagination__left,
   .#{$prefix}--pagination__right {
     display: flex;
-    height: rem(48px);
+    height: 100%;
     align-items: center;
   }
 
@@ -153,8 +171,9 @@ $css--helpers: true;
     @include reset;
 
     display: flex;
-    width: $carbon--spacing-09;
-    height: 100%;
+    width: $size-md;
+    height: $size-md;
+    min-height: $size-sm;
     align-items: center;
     justify-content: center;
     border: none;
@@ -167,6 +186,20 @@ $css--helpers: true;
       background-color $duration--fast-02 motion(standard, productive);
   }
 
+  .#{$prefix}--pagination--sm .#{$prefix}--pagination__button,
+  .#{$prefix}--pagination--sm
+    .#{$prefix}--btn--ghost.#{$prefix}--pagination__button {
+    width: $size-sm;
+    height: $size-sm;
+  }
+
+  .#{$prefix}--pagination--lg .#{$prefix}--pagination__button,
+  .#{$prefix}--pagination--lg
+    .#{$prefix}--btn--ghost.#{$prefix}--pagination__button {
+    width: $size-lg;
+    height: $size-lg;
+  }
+
   .#{$prefix}--pagination__button:focus,
   .#{$prefix}--btn--ghost:focus.#{$prefix}--pagination__button {
     @include focus-outline('outline');

packages/react/__tests__/__snapshots__/PublicAPI-test.js.snap

@@ -4299,6 +4299,16 @@ Map {
       "pagesUnknown": Object {
         "type": "bool",
       },
+      "size": Object {
+        "args": Array [
+          Array [
+            "sm",
+            "md",
+            "lg",
+          ],
+        ],
+        "type": "oneOf",
+      },
       "totalItems": Object {
         "type": "number",
       },

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

@@ -13,13 +13,21 @@ import {
   array,
   boolean,
   number,
+  select,
   text,
 } from '@storybook/addon-knobs';
 import Pagination from '../Pagination';
 import mdx from './Pagination.mdx';
 
+const sizes = {
+  'Small  (sm)': 'sm',
+  'Medium (md) - default': undefined,
+  'Large  (lg)': 'lg',
+};
+
 const props = () => ({
   disabled: boolean('Disable page inputs (disabled)', false),
+  size: select('Size (size)', sizes, undefined) || undefined,
   page: number('The current page (page)', 1),
   totalItems: number('Total number of items (totalItems)', 103),
   pagesUnknown: boolean('Total number of items unknown (pagesUnknown)', false),

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

@@ -148,6 +148,11 @@ export default class Pagination extends Component {
      */
     pagesUnknown: PropTypes.bool,
 
+    /**
+     * Specify the size of the Pagination. Currently supports either `sm`, 'md' (default) or 'lg` as an option.
+     */
+    size: PropTypes.oneOf(['sm', 'md', 'lg']),
+
     /**
      * The total number of items.
      */
@@ -277,10 +282,13 @@ export default class Pagination extends Component {
       totalItems,
       onChange, // eslint-disable-line no-unused-vars
       page: pageNumber, // eslint-disable-line no-unused-vars
+      size,
       ...other
     } = this.props;
 
-    const classNames = classnames(`${prefix}--pagination`, className);
+    const classNames = classnames(`${prefix}--pagination`, className, {
+      [`${prefix}--pagination--${size}`]: size,
+    });
     const inputId = id || this.uniqueId;
     const { page: statePage, pageSize: statePageSize } = this.state;
     const totalPages = Math.max(Math.ceil(totalItems / statePageSize), 1);