feat: added xs size for pagination by riddhybansal · Pull Request #21695 · carbon-design-system/carbon

riddhybansal · 2026-03-02T14:31:11Z

Closes #21594

Added XS size for pagination component in react and webcomponents

Changelog

New

Added XS size for pagination component

Testing / Reviewing

Visit pagination
Set size prop to xs it should match as per the spec.

PR Checklist

As the author of this PR, before marking ready for review, confirm you:

Reviewed every line of the diff
Updated documentation and storybook examples
Wrote passing tests that cover this change
Addressed any impact on accessibility (a11y)
Tested for cross-browser consistency
Validated that this code is ready for review and status checks should pass

More details can be found in the pull request guide

netlify · 2026-03-02T14:36:02Z

✅ Deploy Preview for v11-carbon-web-components ready!

Name	Link
🔨 Latest commit	`17a43dc`
🔍 Latest deploy log	https://app.netlify.com/projects/v11-carbon-web-components/deploys/69f325eef21c070008d03355
😎 Deploy Preview	https://deploy-preview-21695--v11-carbon-web-components.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.
🤖 Make changes	Run an agent on this branch

To edit notification comments on pull requests, go to your Netlify project configuration.

netlify · 2026-03-02T14:36:03Z

✅ Deploy Preview for v11-carbon-react ready!

Built without sensitive environment variables

Name	Link
🔨 Latest commit	`17a43dc`
🔍 Latest deploy log	https://app.netlify.com/projects/v11-carbon-react/deploys/69f325ef5a766f0008675d47
😎 Deploy Preview	https://deploy-preview-21695--v11-carbon-react.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.
🤖 Make changes	Run an agent on this branch

To edit notification comments on pull requests, go to your Netlify project configuration.

codecov · 2026-03-02T15:07:22Z

Codecov Report

✅ All modified and coverable lines are covered by tests.
✅ Project coverage is 95.06%. Comparing base (cc54e3b) to head (17a43dc).
⚠️ Report is 2 commits behind head on main.

Additional details and impacted files

@@            Coverage Diff             @@
##             main   #21695      +/-   ##
==========================================
- Coverage   95.09%   95.06%   -0.03%     
==========================================
  Files         541      541              
  Lines       45235    45239       +4     
  Branches     6512     6512              
==========================================
- Hits        43015    43006       -9     
- Misses       2091     2104      +13     
  Partials      129      129

Flag	Coverage Δ
main-packages	`89.14% <ø> (ø)`
web-components	`97.87% <100.00%> (-0.01%)`	⬇️

Flags with carried forward coverage won't be shown. Click here to find out more.

☔ View full report in Codecov by Sentry.
📢 Have feedback on the report? Share it here.

🚀 New features to boost your workflow:

❄️ Test Analytics: Detect flaky tests, report on failures, and find test suite problems.
📦 JS Bundle Analysis: Save yourself from yourself by tracking and limiting bundle sizes in JS merges.

devadula-nandan

few comments

devadula-nandan · 2026-03-05T10:59:44Z

can you update the PR Checklist in the pr description?

alina-jacob

LGTM! 🚀

devadula-nandan · 2026-03-09T14:07:31Z

Hi @riddhybansal,
As per the epic

Dev: Implement in both React and Web Components as well as connecting to the Contextual layout tokens. Question for Dev: Figma Code Connect?

Looks like the goal is to adopt contextual layout tokens into mentioned components?
as per the discussions in todays round robin, we might as well look into bringing the contextual layout token support into WC if not yet explored.

Please feel free to review the scope and determine whether we need to revisitContextual layout tokens later. and update the epic.

riddhybansal · 2026-03-14T10:59:12Z

Marking as blocked since contextual layout tokens cannot be connected in Web Components since they have not been implemented yet.

riddhybansal · 2026-04-29T11:06:57Z

Hi @devadula-nandan @sangeethababu9223 this is ready to review with additon of contextual tokens.

sangeethababu9223

LGTM!

feat: added xs size for pagination

4f560b3

fix: added xs pagination for web-components

0f35fa9

riddhybansal marked this pull request as ready for review March 5, 2026 08:33

riddhybansal requested a review from a team as a code owner March 5, 2026 08:33

riddhybansal requested review from devadula-nandan and sangeethababu9223 March 5, 2026 08:33

Merge branch 'main' into pagination_xs_size

640ea15

riddhybansal deployed to @carbon/react storybook preview March 5, 2026 08:48 — with GitHub Actions View deployment

devadula-nandan reviewed Mar 5, 2026

View reviewed changes

Comment thread packages/web-components/src/components/pagination/pagination.scss Outdated

devadula-nandan reviewed Mar 5, 2026

View reviewed changes

Comment thread packages/web-components/src/components/select/select.scss Outdated

fix: removed extra style

9650409

riddhybansal deployed to @carbon/react storybook preview March 5, 2026 11:08 — with GitHub Actions View deployment

fix: updated snapshots

3ffcf4d

riddhybansal requested a review from a team as a code owner March 5, 2026 11:30

riddhybansal requested a review from alisonjoseph March 5, 2026 11:30

Merge branch 'main' into pagination_xs_size

3ece4df

riddhybansal deployed to @carbon/react storybook preview March 5, 2026 11:42 — with GitHub Actions View deployment

devadula-nandan approved these changes Mar 9, 2026

View reviewed changes

alina-jacob approved these changes Mar 9, 2026

View reviewed changes

devadula-nandan self-requested a review March 9, 2026 12:44

adamalston reviewed Mar 9, 2026

View reviewed changes

Comment thread packages/styles/scss/components/pagination/_pagination.scss Outdated

Comment thread packages/react/src/components/Pagination/Pagination.tsx

Comment thread packages/web-components/src/components/pagination/defs.ts

riddhybansal added the status: blocked 🙅‍♀️ label Mar 14, 2026

alisonjoseph removed their request for review March 17, 2026 17:49

riddhybansal removed the status: blocked 🙅‍♀️ label Apr 8, 2026

riddhybansal self-assigned this Apr 8, 2026

riddhybansal added this to Design System Apr 8, 2026

github-project-automation Bot moved this to 🚦 In Review in Design System Apr 8, 2026

riddhybansal moved this from 🚦 In Review to ⏱ Backlog in Design System Apr 8, 2026

devadula-nandan added status: WIP 👩‍💻 and removed status: WIP 👩‍💻 labels Apr 24, 2026

riddhybansal moved this from ⏱ Backlog to 🏗 In Progress in Design System Apr 28, 2026

riddhybansal and others added 2 commits April 29, 2026 15:10

Merge branch 'main' into pagination_xs_size

c59f27a

fix: added comment

aec0ed5

riddhybansal deployed to @carbon/react storybook preview April 29, 2026 09:54 — with GitHub Actions View deployment

riddhybansal and others added 3 commits April 29, 2026 16:05

fix: added sizes by contextual token

ec5a26e

Merge branch 'main' into pagination_xs_size

fec4e48

fix: xs size with contextual tokens in web components

5959806

riddhybansal deployed to @carbon/react storybook preview April 29, 2026 11:17 — with GitHub Actions View deployment

riddhybansal moved this from 🏗 In Progress to 🚦 In Review in Design System Apr 29, 2026

devadula-nandan approved these changes Apr 30, 2026

View reviewed changes

Comment thread packages/react/src/components/Pagination/Pagination.tsx Outdated

sangeethababu9223 approved these changes Apr 30, 2026

View reviewed changes

riddhybansal and others added 2 commits April 30, 2026 15:19

fix: added todo comment

ff11b8e

Merge branch 'main' into pagination_xs_size

17a43dc

riddhybansal enabled auto-merge April 30, 2026 09:50

riddhybansal deployed to @carbon/react storybook preview April 30, 2026 10:05 — with GitHub Actions View deployment

riddhybansal added this pull request to the merge queue Apr 30, 2026

Merged via the queue into carbon-design-system:main with commit 1634ed2 Apr 30, 2026
38 checks passed

riddhybansal deleted the pagination_xs_size branch April 30, 2026 10:51

github-project-automation Bot moved this from 🚦 In Review to ✅ Done in Design System Apr 30, 2026

Conversation

riddhybansal commented Mar 2, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Changelog

Testing / Reviewing

PR Checklist

Uh oh!

netlify Bot commented Mar 2, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

✅ Deploy Preview for v11-carbon-web-components ready!

Uh oh!

netlify Bot commented Mar 2, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

✅ Deploy Preview for v11-carbon-react ready!

Uh oh!

codecov Bot commented Mar 2, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Codecov Report

Uh oh!

Uh oh!

devadula-nandan left a comment

Choose a reason for hiding this comment

Uh oh!

Uh oh!

devadula-nandan commented Mar 5, 2026

Uh oh!

alina-jacob left a comment

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Uh oh!

Uh oh!

devadula-nandan commented Mar 9, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

riddhybansal commented Mar 14, 2026

Uh oh!

riddhybansal commented Apr 29, 2026

Uh oh!

Uh oh!

sangeethababu9223 left a comment

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

5 participants

riddhybansal commented Mar 2, 2026 •

edited

Loading

netlify Bot commented Mar 2, 2026 •

edited

Loading

netlify Bot commented Mar 2, 2026 •

edited

Loading

codecov Bot commented Mar 2, 2026 •

edited

Loading

devadula-nandan commented Mar 9, 2026 •

edited

Loading