feat(cds-dialog): new preview component by maradwan26 · Pull Request #21853 · carbon-design-system/carbon

maradwan26 · 2026-03-17T18:52:20Z

Closes #20539
Closes #20973

Adds new preview component cds-dialog to Carbon Web Components, matching its React counterpart preview__Dialog.

Changelog

New

Added cds-dialog, cds-dialog-title, cds-dialog-footer, etc. and respective logic, styles, and stories
- I kept the attribute prevent-close-on-click-outside since it's also in modal as I figured users would expect to find it here too
Exported as preview__CDSDialog, preview__CDSDialogTitle, etc. from the central index.ts
Synced React and WC stories and fixed some broken controls in React with aria-label and aria-labelledby

Changed

Made private methods protected in modal.ts to allow for overriding
Added new selectors in button.scss to support cds-dialog-footer-button
React:
- Updated how Dialog handles scrolling content to use a resizeObserver and also remove the gradient when the container is small via cds--dialog-scroll-content--no-fade. This matches the implementation in Modal and ComposedModal
- Deprecated ariaLabel, ariaLabelledBy, and ariaDescribedBy in favour of aria-label, aria-labelledby, and aria-describedby respectively
- Fixed accessibility violation Element with "region" role does not have a label

Testing / Reviewing

Go to Preview/Dialog
Stories, functionalities, styles, etc. should match React

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

netlify · 2026-03-17T18:56:39Z

✅ Deploy Preview for v11-carbon-react ready!

Built without sensitive environment variables

Name	Link
🔨 Latest commit	`301c70e`
🔍 Latest deploy log	https://app.netlify.com/projects/v11-carbon-react/deploys/69d698f6ff75780008e46083
😎 Deploy Preview	https://deploy-preview-21853--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-03-17T18:57:03Z

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

Name	Link
🔨 Latest commit	`301c70e`
🔍 Latest deploy log	https://app.netlify.com/projects/v11-carbon-web-components/deploys/69d698f6b8bbcd0008bf98d1
😎 Deploy Preview	https://deploy-preview-21853--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.

codecov · 2026-03-17T19:00:14Z

Codecov Report

❌ Patch coverage is 95.87629% with 4 lines in your changes missing coverage. Please review.
✅ Project coverage is 94.90%. Comparing base (13f2327) to head (301c70e).
⚠️ Report is 1 commits behind head on main.

Files with missing lines	Patch %	Lines
.../web-components/src/components/modal/modal-body.ts	92.10%	3 Missing ⚠️
...kages/web-components/src/components/modal/modal.ts	91.66%	1 Missing ⚠️

Additional details and impacted files

@@            Coverage Diff             @@
##             main   #21853      +/-   ##
==========================================
- Coverage   94.93%   94.90%   -0.03%     
==========================================
  Files         541      541              
  Lines       45192    45250      +58     
  Branches     6372     6331      -41     
==========================================
+ Hits        42903    42946      +43     
- Misses       2157     2172      +15     
  Partials      132      132

Flag	Coverage Δ
main-packages	`89.16% <100.00%> (+<0.01%)`	⬆️
web-components	`97.70% <93.93%> (-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.

maradwan26 · 2026-03-18T14:35:26Z

~~Converting to draft for now to fix avt tests failing.~~
Fixed ✅

heloiselui

LGTM!

* feat(dialog): new wc preview component * fix: footer elements selector * fix: align stories * fix(react): update scrolling content handling * chore: export as preview * fix: formatting * fix: remove legacy test * fix: deprecate ariaLabel * docs: sync react and wc stories * chore: update snapshots * chore: cleanup and formatting * chore: cleanup * fix: esc key handling and selector override * test: update tests * fix: ts * fix: a11y * refactor: remove uneccesary aria-label prop * chore: cleanup * chore: cleanup aria-labelledby * docs: dialog markdown cdn * refactor: extend class * fix: prevent close on esc for non-modal dialog * test: label handling * Update packages/react/src/components/Dialog/Dialog.tsx Co-authored-by: Adam Alston <aalston9@gmail.com> * fix: derive body label from custom id * refactor: types, set labels on render * fix(a11y): apply proper labelling and role on scroll container * refactor: aria-labelledby title fallback * chore: cleanup * fix(esc): add !open guard * fix(body): scope userDefinedTabindex guard to tabindex only * docs: add see preview reference * chore: remove preview prefix from export --------- Co-authored-by: Adam Alston <aalston9@gmail.com> Co-authored-by: Heloise Lui <71858203+heloiselui@users.noreply.github.com>

maradwan26 added 6 commits March 17, 2026 13:50

feat(dialog): new wc preview component

90bb8fe

fix: footer elements selector

de30f21

fix: align stories

92e9bd1

fix(react): update scrolling content handling

8469779

chore: export as preview

ffa15c7

fix: formatting

cbca83f

maradwan26 added 4 commits March 17, 2026 15:20

fix: remove legacy test

03f20b7

fix: deprecate ariaLabel

9e8e2c6

docs: sync react and wc stories

c9c3e85

chore: update snapshots

e10b4a6

maradwan26 marked this pull request as ready for review March 17, 2026 21:12

maradwan26 requested review from a team as code owners March 17, 2026 21:12

maradwan26 requested review from kennylam and tay1orjones March 17, 2026 21:12

maradwan26 added the status: visual review 🔍 label Mar 17, 2026

Merge branch 'main' into wc-preview-dialog

6892e0a

maradwan26 deployed to @carbon/react storybook preview March 17, 2026 21:40 — with GitHub Actions View deployment

adamalston reviewed Mar 18, 2026

View reviewed changes

maradwan26 marked this pull request as draft March 18, 2026 14:35

maradwan26 added 6 commits March 18, 2026 10:54

chore: cleanup and formatting

daceecd

chore: cleanup

730918f

fix: esc key handling and selector override

168f76d

test: update tests

ee99dc9

fix: ts

7b620a4

fix: a11y

768bc93

maradwan26 deployed to @carbon/react storybook preview March 30, 2026 17:11 — with GitHub Actions View deployment

fix(body): scope userDefinedTabindex guard to tabindex only

1547f92

maradwan26 deployed to @carbon/react storybook preview March 30, 2026 17:25 — with GitHub Actions View deployment

maradwan26 requested a review from adamalston March 30, 2026 18:20

heloiselui reviewed Apr 2, 2026

View reviewed changes

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

heloiselui approved these changes Apr 2, 2026

View reviewed changes

heloiselui mentioned this pull request Apr 2, 2026

feat(dialog): add border #21947

Merged

4 tasks

Merge branch 'main' into wc-preview-dialog

6ff8f64

maradwan26 deployed to @carbon/react storybook preview April 7, 2026 14:17 — with GitHub Actions View deployment

adamalston approved these changes Apr 7, 2026

View reviewed changes

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

maradwan26 added status: ready to merge 🎉 DO NOT MERGE and removed status: one more review 👀 status: ready to merge 🎉 labels Apr 8, 2026

Merge branch 'main' into wc-preview-dialog

a773d40

maradwan26 deployed to @carbon/react storybook preview April 8, 2026 17:38 — with GitHub Actions View deployment

maradwan26 added 2 commits April 8, 2026 13:51

docs: add see preview reference

212a694

chore: remove preview prefix from export

301c70e

maradwan26 added status: ready to merge 🎉 and removed DO NOT MERGE labels Apr 8, 2026

maradwan26 enabled auto-merge April 8, 2026 17:54

maradwan26 deployed to @carbon/react storybook preview April 8, 2026 18:05 — with GitHub Actions View deployment

maradwan26 added this pull request to the merge queue Apr 8, 2026

github-merge-queue Bot removed this pull request from the merge queue due to failed status checks Apr 8, 2026

maradwan26 added this pull request to the merge queue Apr 8, 2026

Merged via the queue into carbon-design-system:main with commit 7988f34 Apr 8, 2026
39 checks passed

maradwan26 deleted the wc-preview-dialog branch April 8, 2026 20:16

maradwan26 mentioned this pull request Jun 1, 2026

fix(ComposedModal-a11y): label body when scrollable #22353

Merged

5 tasks

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

feat(cds-dialog): new preview component#21853

feat(cds-dialog): new preview component#21853
maradwan26 merged 38 commits into
carbon-design-system:mainfrom
maradwan26:wc-preview-dialog

maradwan26 commented Mar 17, 2026 •

edited

Loading

Uh oh!

netlify Bot commented Mar 17, 2026 •

edited

Loading

Uh oh!

netlify Bot commented Mar 17, 2026 •

edited

Loading

Uh oh!

codecov Bot commented Mar 17, 2026 •

edited

Loading

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

maradwan26 commented Mar 18, 2026 •

edited

Loading

Uh oh!

Uh oh!

heloiselui left a comment

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

4 participants

Conversation

maradwan26 commented Mar 17, 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 17, 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!

netlify Bot commented Mar 17, 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!

codecov Bot commented Mar 17, 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!

Uh oh!

Uh oh!

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

Uh oh!

Uh oh!

Uh oh!

heloiselui left a comment

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

4 participants

maradwan26 commented Mar 17, 2026 •

edited

Loading

netlify Bot commented Mar 17, 2026 •

edited

Loading

netlify Bot commented Mar 17, 2026 •

edited

Loading

codecov Bot commented Mar 17, 2026 •

edited

Loading

maradwan26 commented Mar 18, 2026 •

edited

Loading