feat: Set up contextual tokens for web components by riddhybansal · Pull Request #21934 · carbon-design-system/carbon

riddhybansal · 2026-04-01T06:42:03Z

Closes #21740
Closes #21958

Set up initial support for contextual layout tokens in @carbon/web-components

Changelog

New

Added cds-layout component that sets layout context (size and density) for all descendant Carbon web components
Added cds-layout-constraint component for restricting size/density range of descendant components within composite components

Testing / Reviewing

Navigate to Components/Accordion → WithLayoutContext
- Verify accordion items render at different heights for sm vs lg layout context
Navigate to Components/Text Input → WithLayoutContext
- Verify text inputs render at different heights for sm vs lg layout context
Verify existing stories are unaffected — all components without cds-layout should render at their default sizes as before

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-04-01T06:45:07Z

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

Name	Link
🔨 Latest commit	`f9cabb1`
🔍 Latest deploy log	https://app.netlify.com/projects/v11-carbon-web-components/deploys/69ccbe3e2b90e700089b3216
😎 Deploy Preview	https://deploy-preview-21934--v11-carbon-web-components.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.

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

netlify · 2026-04-01T06:45:08Z

✅ Deploy Preview for v11-carbon-react ready!

Built without sensitive environment variables

Name	Link
🔨 Latest commit	`f9cabb1`
🔍 Latest deploy log	https://app.netlify.com/projects/v11-carbon-react/deploys/69ccbe3e5618640008aafe06
😎 Deploy Preview	https://deploy-preview-21934--v11-carbon-react.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.

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

netlify · 2026-04-01T06:48:17Z

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

Name	Link
🔨 Latest commit	`1b13833`
🔍 Latest deploy log	https://app.netlify.com/projects/v11-carbon-web-components/deploys/69d35829cf3d4e0008ee219a
😎 Deploy Preview	https://deploy-preview-21934--v11-carbon-web-components.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.

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

netlify · 2026-04-01T06:48:24Z

✅ Deploy Preview for v11-carbon-react ready!

Built without sensitive environment variables

Name	Link
🔨 Latest commit	`1b13833`
🔍 Latest deploy log	https://app.netlify.com/projects/v11-carbon-react/deploys/69d3582957d0ae00085b9e5c
😎 Deploy Preview	https://deploy-preview-21934--v11-carbon-react.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.

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

codecov · 2026-04-01T06:50:55Z

Codecov Report

✅ All modified and coverable lines are covered by tests.
✅ Project coverage is 94.89%. Comparing base (9dcfa83) to head (1b13833).
⚠️ Report is 6 commits behind head on main.

Additional details and impacted files

@@            Coverage Diff             @@
##             main   #21934      +/-   ##
==========================================
+ Coverage   94.88%   94.89%   +0.01%     
==========================================
  Files         535      537       +2     
  Lines       43631    43719      +88     
  Branches     6210     6182      -28     
==========================================
+ Hits        41398    41486      +88     
  Misses       2105     2105              
  Partials      128      128

Flag	Coverage Δ
main-packages	`89.15% <ø> (ø)`
web-components	`97.83% <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.

Co-authored-by: Taylor Jones <tay1orjones@users.noreply.github.com>

riddhybansal · 2026-04-02T12:17:57Z

The layout context system is set up and working in this PR — cds-accordion is a great example of a component that already responds correctly since it reads --cds-layout-size-height-context directly. However components like cds-button, cds-tag, and cds-text-input hardcode a default size which overrides the layout context cascade — this needs to be addressed systematically across all components in a follow-up issue to avoid unintended regressions.

tay1orjones · 2026-04-06T15:15:47Z

this needs to be addressed systematically across all components in a follow-up issue to avoid unintended regressions

@riddhybansal Could you open an issue for this, if needed, and link it here?

maradwan26

LGTM! Tested locally with an implementation for Search too and works 🚀

riddhybansal · 2026-04-07T06:55:01Z

Here is the follow up issue to track the systematic onboarding of all components to the layout context system.

carbon-automation · 2026-04-08T11:50:21Z

Hey there! v11.105.0 was just released that references this issue/PR.

…em#21934) * feat: set up contextual tokens for web components * Update packages/web-components/src/components/layout/layout.ts Co-authored-by: Taylor Jones <tay1orjones@users.noreply.github.com> * feat: added test cases * feat: added globals in dev mode * fix: cleanup * fix: copywright * fix: docs * feat: added test cases for layout styles --------- Co-authored-by: Taylor Jones <tay1orjones@users.noreply.github.com>

feat: set up contextual tokens for web components

f9cabb1

riddhybansal requested a review from a team as a code owner April 1, 2026 06:42

riddhybansal requested review from heloiselui and sangeethababu9223 April 1, 2026 06:42

riddhybansal added the status: WIP 👩‍💻 label Apr 1, 2026

Merge branch 'main' into contextual_tokens_webcomponents

fdc3077

riddhybansal deployed to @carbon/react storybook preview April 1, 2026 06:53 — with GitHub Actions View deployment

maradwan26 self-requested a review April 1, 2026 18:12

tay1orjones requested changes Apr 1, 2026

View reviewed changes

Comment thread packages/web-components/src/components/layout/layout.ts

Comment thread packages/web-components/src/index.ts

Comment thread packages/web-components/src/components/accordion/accordion.stories.ts

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

riddhybansal and others added 4 commits April 2, 2026 12:20

Update packages/web-components/src/components/layout/layout.ts

b340301

Co-authored-by: Taylor Jones <tay1orjones@users.noreply.github.com>

feat: added test cases

262f611

feat: added globals in dev mode

061a147

fix: cleanup

71b161a

riddhybansal force-pushed the contextual_tokens_webcomponents branch from 7bbd235 to 71b161a Compare April 2, 2026 11:09

riddhybansal and others added 2 commits April 2, 2026 16:40

Merge branch 'main' into contextual_tokens_webcomponents

94372a0

fix: copywright

a97a54c

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

fix: docs

0ee7298

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

riddhybansal removed the status: WIP 👩‍💻 label Apr 2, 2026

riddhybansal requested a review from tay1orjones April 2, 2026 14:02

riddhybansal and others added 2 commits April 6, 2026 12:13

feat: added test cases for layout styles

65f825d

Merge branch 'main' into contextual_tokens_webcomponents

1b13833

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

tay1orjones approved these changes Apr 6, 2026

View reviewed changes

maradwan26 approved these changes Apr 6, 2026

View reviewed changes

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

Merged via the queue into carbon-design-system:main with commit 9bd16c5 Apr 7, 2026
39 checks passed

riddhybansal deleted the contextual_tokens_webcomponents branch April 7, 2026 07:26

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

feat: Set up contextual tokens for web components#21934

feat: Set up contextual tokens for web components#21934
riddhybansal merged 11 commits into
carbon-design-system:mainfrom
riddhybansal:contextual_tokens_webcomponents

riddhybansal commented Apr 1, 2026 •

edited

Loading

Uh oh!

netlify Bot commented Apr 1, 2026

Uh oh!

netlify Bot commented Apr 1, 2026

Uh oh!

netlify Bot commented Apr 1, 2026 •

edited

Loading

Uh oh!

netlify Bot commented Apr 1, 2026 •

edited

Loading

Uh oh!

codecov Bot commented Apr 1, 2026 •

edited

Loading

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

riddhybansal commented Apr 2, 2026

Uh oh!

tay1orjones commented Apr 6, 2026

Uh oh!

maradwan26 left a comment

Uh oh!

riddhybansal commented Apr 7, 2026

Uh oh!

Uh oh!

carbon-automation Bot commented Apr 8, 2026

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

4 participants

Conversation

riddhybansal commented Apr 1, 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 Apr 1, 2026

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

Uh oh!

netlify Bot commented Apr 1, 2026

✅ Deploy Preview for v11-carbon-react ready!

Uh oh!

netlify Bot commented Apr 1, 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 Apr 1, 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 Apr 1, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Codecov Report

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

riddhybansal commented Apr 2, 2026

Uh oh!

tay1orjones commented Apr 6, 2026

Uh oh!

maradwan26 left a comment

Choose a reason for hiding this comment

Uh oh!

riddhybansal commented Apr 7, 2026

Uh oh!

Uh oh!

carbon-automation Bot commented Apr 8, 2026

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

4 participants

riddhybansal commented Apr 1, 2026 •

edited

Loading

netlify Bot commented Apr 1, 2026 •

edited

Loading

netlify Bot commented Apr 1, 2026 •

edited

Loading

codecov Bot commented Apr 1, 2026 •

edited

Loading