From 72a63f8464ccd4aee1c554aeb50e38af696ccdbd Mon Sep 17 00:00:00 2001 From: emyarod Date: Fri, 16 Jul 2021 12:31:22 -0500 Subject: [PATCH 1/3] feat(Pagination): add support for sizes --- .../components/pagination/_pagination.scss | 39 +++++++++++++++++-- .../components/Pagination/Pagination-story.js | 8 ++++ .../src/components/Pagination/Pagination.js | 10 ++++- 3 files changed, 52 insertions(+), 5 deletions(-) diff --git a/packages/components/src/components/pagination/_pagination.scss b/packages/components/src/components/pagination/_pagination.scss index ad19d18edcfe..91cf0e2a3bab 100644 --- a/packages/components/src/components/pagination/_pagination.scss +++ b/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; } @@ -154,7 +172,8 @@ $css--helpers: true; display: flex; width: $carbon--spacing-09; - height: 100%; + height: $size-md; + min-height: $size-sm; align-items: center; justify-content: center; border: none; @@ -167,6 +186,18 @@ $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 { + height: $size-sm; + } + + .#{$prefix}--pagination--lg .#{$prefix}--pagination__button, + .#{$prefix}--pagination--lg + .#{$prefix}--btn--ghost.#{$prefix}--pagination__button { + height: $size-lg; + } + .#{$prefix}--pagination__button:focus, .#{$prefix}--btn--ghost:focus.#{$prefix}--pagination__button { @include focus-outline('outline'); diff --git a/packages/react/src/components/Pagination/Pagination-story.js b/packages/react/src/components/Pagination/Pagination-story.js index 3b6fe50aff10..34f7508a6e67 100644 --- a/packages/react/src/components/Pagination/Pagination-story.js +++ b/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), diff --git a/packages/react/src/components/Pagination/Pagination.js b/packages/react/src/components/Pagination/Pagination.js index 6e64e7962055..2767dc0c1caf 100644 --- a/packages/react/src/components/Pagination/Pagination.js +++ b/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); From acda18b64ae2f9882b9c03638e7e44c4f6757d27 Mon Sep 17 00:00:00 2001 From: emyarod Date: Fri, 16 Jul 2021 12:33:41 -0500 Subject: [PATCH 2/3] chore: update snapshots --- .../__tests__/__snapshots__/PublicAPI-test.js.snap | 10 ++++++++++ 1 file changed, 10 insertions(+) diff --git a/packages/react/__tests__/__snapshots__/PublicAPI-test.js.snap b/packages/react/__tests__/__snapshots__/PublicAPI-test.js.snap index 5cff6abca646..acc233710d8b 100644 --- a/packages/react/__tests__/__snapshots__/PublicAPI-test.js.snap +++ b/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", }, From 3b80370beb242d02036007797e0f124489f7e643 Mon Sep 17 00:00:00 2001 From: TJ Egan Date: Tue, 3 Aug 2021 16:50:10 -0400 Subject: [PATCH 3/3] style(Pagination): square button for all sizes --- .../components/src/components/pagination/_pagination.scss | 4 +++- 1 file changed, 3 insertions(+), 1 deletion(-) diff --git a/packages/components/src/components/pagination/_pagination.scss b/packages/components/src/components/pagination/_pagination.scss index 91cf0e2a3bab..7d5243d13db6 100644 --- a/packages/components/src/components/pagination/_pagination.scss +++ b/packages/components/src/components/pagination/_pagination.scss @@ -171,7 +171,7 @@ $css--helpers: true; @include reset; display: flex; - width: $carbon--spacing-09; + width: $size-md; height: $size-md; min-height: $size-sm; align-items: center; @@ -189,12 +189,14 @@ $css--helpers: true; .#{$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; }