Skip to content

Commit 1634ed2

Browse files
riddhybansalriddhybansal
authored
feat: added xs size for pagination (#21695)
* feat: added xs size for pagination * fix: added xs pagination for web-components * fix: removed extra style * fix: updated snapshots * fix: added comment * fix: added sizes by contextual token * fix: xs size with contextual tokens in web components * fix: added todo comment
1 parent cc54e3b commit 1634ed2

8 files changed

Lines changed: 51 additions & 49 deletions

File tree

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

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -7831,6 +7831,7 @@ Map {
78317831
"size": {
78327832
"args": [
78337833
[
7834+
"xs",
78347835
"sm",
78357836
"md",
78367837
"lg",

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

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -30,7 +30,7 @@ export default {
3030
component: Pagination,
3131
argTypes: {
3232
size: {
33-
options: ['sm', 'md', 'lg'],
33+
options: ['xs', 'sm', 'md', 'lg'],
3434
control: { type: 'select' },
3535
},
3636
},
@@ -140,7 +140,7 @@ Default.argTypes = {
140140
},
141141
},
142142
size: {
143-
options: ['sm', 'md', 'lg'],
143+
options: ['xs', 'sm', 'md', 'lg'],
144144
control: { type: 'select' },
145145
},
146146
totalItems: {

‎packages/react/src/components/Pagination/Pagination.tsx‎

Lines changed: 4 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -134,7 +134,7 @@ export interface PaginationProps
134134
/**
135135
* Specify the size of the Pagination.
136136
*/
137-
size?: 'sm' | 'md' | 'lg';
137+
size?: 'xs' | 'sm' | 'md' | 'lg';
138138

139139
/**
140140
* The total number of items.
@@ -237,7 +237,8 @@ const Pagination = React.forwardRef(
237237

238238
const className = cx({
239239
[`${prefix}--pagination`]: true,
240-
[`${prefix}--pagination--${size}`]: size,
240+
[`${prefix}--pagination--${size}`]: size, // TODO: V12 - Remove this class
241+
[`${prefix}--layout--size-${size}`]: size,
241242
[customClassName]: !!customClassName,
242243
});
243244
const totalPages = totalItems
@@ -646,7 +647,7 @@ Pagination.propTypes = {
646647
/**
647648
* Specify the size of the Pagination.
648649
*/
649-
size: PropTypes.oneOf(['sm', 'md', 'lg']),
650+
size: PropTypes.oneOf(['xs', 'sm', 'md', 'lg']),
650651

651652
/**
652653
* The total number of items.

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

Lines changed: 29 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -411,6 +411,35 @@ describe('Pagination', () => {
411411
const { container } = render(<Pagination size="sm" pageSizes={[10]} />);
412412

413413
expect(container.firstChild).toHaveClass('cds--pagination--sm');
414+
expect(container.firstChild).toHaveClass('cds--layout--size-sm');
415+
});
416+
417+
it('should respect xs size prop', () => {
418+
const { container } = render(<Pagination size="xs" pageSizes={[10]} />);
419+
420+
expect(container.firstChild).toHaveClass('cds--pagination--xs');
421+
expect(container.firstChild).toHaveClass('cds--layout--size-xs');
422+
});
423+
424+
it('should respect sm size prop', () => {
425+
const { container } = render(<Pagination size="sm" pageSizes={[10]} />);
426+
427+
expect(container.firstChild).toHaveClass('cds--pagination--sm');
428+
expect(container.firstChild).toHaveClass('cds--layout--size-sm');
429+
});
430+
431+
it('should respect md size prop', () => {
432+
const { container } = render(<Pagination size="md" pageSizes={[10]} />);
433+
434+
expect(container.firstChild).toHaveClass('cds--pagination--md');
435+
expect(container.firstChild).toHaveClass('cds--layout--size-md');
436+
});
437+
438+
it('should respect lg size prop', () => {
439+
const { container } = render(<Pagination size="lg" pageSizes={[10]} />);
440+
441+
expect(container.firstChild).toHaveClass('cds--pagination--lg');
442+
expect(container.firstChild).toHaveClass('cds--layout--size-lg');
414443
});
415444

416445
it('should respect totalItems prop', () => {

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

Lines changed: 7 additions & 37 deletions
Original file line numberDiff line numberDiff line change
@@ -18,6 +18,7 @@
1818
@use '../../utilities/convert';
1919
@use '../../utilities/focus-outline' as *;
2020
@use '../../utilities/high-contrast-mode' as *;
21+
@use '../../utilities/layout';
2122

2223
/// Pagination styles
2324
/// @access public
@@ -30,6 +31,7 @@
3031
.#{$prefix}--pagination {
3132
@include component-reset.reset;
3233
@include type-style('body-compact-01');
34+
@include layout.use('size', $default: 'md', $min: 'xs', $max: 'lg');
3335

3436
display: flex;
3537
overflow: initial;
@@ -40,7 +42,7 @@
4042
container-name: pagination;
4143
container-type: inline-size;
4244
inline-size: calc(100% - 1px);
43-
min-block-size: convert.to-rem(40px);
45+
min-block-size: layout.size('height');
4446

4547
// 42rem = 'md' breakpoint
4648
@container pagination (min-width: 42rem) {
@@ -66,14 +68,6 @@
6668
}
6769
}
6870

69-
.#{$prefix}--pagination--sm {
70-
min-block-size: convert.to-rem(32px);
71-
}
72-
73-
.#{$prefix}--pagination--lg {
74-
min-block-size: convert.to-rem(48px);
75-
}
76-
7771
.#{$prefix}--pagination .#{$prefix}--select {
7872
align-items: center;
7973
block-size: 100%;
@@ -88,10 +82,8 @@
8882
@include type-style('body-compact-01');
8983

9084
block-size: 100%;
91-
9285
inline-size: auto;
93-
line-height: convert.to-rem(40px);
94-
86+
line-height: layout.size('height');
9587
min-inline-size: auto;
9688

9789
// Firefox-specific fix for three-digit numbers
@@ -109,14 +101,6 @@
109101
padding-inline: $spacing-05 2.25rem;
110102
}
111103

112-
.#{$prefix}--pagination--sm .#{$prefix}--select-input {
113-
line-height: convert.to-rem(32px);
114-
}
115-
116-
.#{$prefix}--pagination--lg .#{$prefix}--select-input {
117-
line-height: convert.to-rem(48px);
118-
}
119-
120104
.#{$prefix}--pagination .#{$prefix}--select-input:hover {
121105
background: $layer-hover;
122106
}
@@ -223,12 +207,12 @@
223207
border: none;
224208
margin: 0;
225209
background: none;
226-
block-size: convert.to-rem(40px);
210+
block-size: layout.size('height');
227211
border-inline-start: 1px solid $border-subtle;
228212
cursor: pointer;
229213
fill: $icon-primary;
230-
inline-size: convert.to-rem(40px);
231-
min-block-size: convert.to-rem(32px);
214+
inline-size: layout.size('height');
215+
min-block-size: convert.to-rem(24px);
232216
transition:
233217
outline $duration-fast-02 motion(standard, productive),
234218
background-color $duration-fast-02 motion(standard, productive);
@@ -244,20 +228,6 @@
244228
transform: rotate(0.5turn);
245229
}
246230

247-
.#{$prefix}--pagination--sm .#{$prefix}--pagination__button,
248-
.#{$prefix}--pagination--sm
249-
.#{$prefix}--btn--ghost.#{$prefix}--pagination__button {
250-
block-size: convert.to-rem(32px);
251-
inline-size: convert.to-rem(32px);
252-
}
253-
254-
.#{$prefix}--pagination--lg .#{$prefix}--pagination__button,
255-
.#{$prefix}--pagination--lg
256-
.#{$prefix}--btn--ghost.#{$prefix}--pagination__button {
257-
block-size: convert.to-rem(48px);
258-
inline-size: convert.to-rem(48px);
259-
}
260-
261231
.#{$prefix}--pagination__button:focus,
262232
.#{$prefix}--btn--ghost:focus.#{$prefix}--pagination__button {
263233
@include focus-outline('outline');

‎packages/web-components/src/components/pagination/defs.ts‎

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -9,6 +9,10 @@
99
* Pagination size.
1010
*/
1111
export enum PAGINATION_SIZE {
12+
/**
13+
* Extra small size.
14+
*/
15+
XS = 'xs',
1216
/**
1317
* Small size.
1418
*/

‎packages/web-components/src/components/pagination/pagination.scss‎

Lines changed: 3 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -14,9 +14,11 @@ $css--plex: true !default;
1414
@use '@carbon/styles/scss/breakpoint' as *;
1515
@use '@carbon/styles/scss/components/pagination' as *;
1616
@use '@carbon/styles/scss/utilities/visually-hidden' as *;
17+
@use '@carbon/styles/scss/layout' as *;
1718

1819
:host(#{$prefix}-pagination) {
1920
@extend .#{$prefix}--pagination;
21+
@include emit-layout-tokens();
2022

2123
position: relative;
2224
outline: none;
@@ -40,10 +42,4 @@ $css--plex: true !default;
4042
}
4143
}
4244

43-
:host(#{$prefix}-pagination[size='sm']) {
44-
@extend .#{$prefix}--pagination--sm;
45-
}
46-
47-
:host(#{$prefix}-pagination[size='lg']) {
48-
@extend .#{$prefix}--pagination--lg;
49-
}
45+
@include emit-layout-tokens-to-shadow-host('#{$prefix}-pagination');

‎packages/web-components/src/components/pagination/pagination.stories.ts‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -13,6 +13,7 @@ import { html } from 'lit';
1313
import { action } from 'storybook/actions';
1414

1515
const sizes = {
16+
[`Extra small size (${PAGINATION_SIZE.XS})`]: PAGINATION_SIZE.XS,
1617
[`Small size (${PAGINATION_SIZE.SMALL})`]: PAGINATION_SIZE.SMALL,
1718
[`Medium size (${PAGINATION_SIZE.MEDIUM})`]: PAGINATION_SIZE.MEDIUM,
1819
[`Large size (${PAGINATION_SIZE.LARGE})`]: PAGINATION_SIZE.LARGE,

0 commit comments

Comments
 (0)