Skip to content

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

Open
maradwan26 wants to merge 23 commits intocarbon-design-system:mainfrom
maradwan26:wc-preview-dialog
Open

feat(cds-dialog): new preview component#21853
maradwan26 wants to merge 23 commits intocarbon-design-system:mainfrom
maradwan26:wc-preview-dialog

Conversation

@maradwan26
Copy link
Contributor

@maradwan26 maradwan26 commented Mar 17, 2026

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
Copy link

netlify bot commented Mar 17, 2026

Deploy Preview for v11-carbon-react ready!

Built without sensitive environment variables

Name Link
🔨 Latest commit d817faa
🔍 Latest deploy log https://app.netlify.com/projects/v11-carbon-react/deploys/69bb09be4b045100084e7f2a
😎 Deploy Preview https://deploy-preview-21853--v11-carbon-react.netlify.app
📱 Preview on mobile
Toggle QR Code...

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
Copy link

netlify bot commented Mar 17, 2026

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

Name Link
🔨 Latest commit d817faa
🔍 Latest deploy log https://app.netlify.com/projects/v11-carbon-web-components/deploys/69bb09be0f67ea0008ef963f
😎 Deploy Preview https://deploy-preview-21853--v11-carbon-web-components.netlify.app
📱 Preview on mobile
Toggle QR Code...

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
Copy link

codecov bot commented Mar 17, 2026

Codecov Report

❌ Patch coverage is 96.15385% with 1 line in your changes missing coverage. Please review.
✅ Project coverage is 94.39%. Comparing base (796bf1c) to head (d817faa).

Files with missing lines Patch % Lines
packages/react/src/components/Dialog/Dialog.tsx 94.11% 1 Missing ⚠️
Additional details and impacted files
@@            Coverage Diff             @@
##             main   #21853      +/-   ##
==========================================
- Coverage   94.39%   94.39%   -0.01%     
==========================================
  Files         536      536              
  Lines       43679    43682       +3     
  Branches     6278     6285       +7     
==========================================
+ Hits        41231    41233       +2     
- Misses       2309     2310       +1     
  Partials      139      139              
Flag Coverage Δ
main-packages 87.83% <94.11%> (-0.01%) ⬇️
web-components 97.80% <100.00%> (ø)

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 maradwan26 marked this pull request as ready for review March 17, 2026 21:12
@maradwan26 maradwan26 requested review from a team as code owners March 17, 2026 21:12
@maradwan26
Copy link
Contributor Author

maradwan26 commented Mar 18, 2026

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

@maradwan26 maradwan26 marked this pull request as draft March 18, 2026 14:35
@maradwan26 maradwan26 marked this pull request as ready for review March 18, 2026 18:14
@maradwan26 maradwan26 marked this pull request as draft March 18, 2026 18:22
@maradwan26 maradwan26 marked this pull request as ready for review March 18, 2026 19:01
@maradwan26 maradwan26 requested a review from adamalston March 18, 2026 19:02
@maradwan26 maradwan26 requested review from a team and anishapatroibm and removed request for a team March 18, 2026 19:10
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Projects

None yet

Development

Successfully merging this pull request may close these issues.

[preview__Dialog]: add controls args to every story Create preview_dialog component in @carbon/web-components

2 participants