Skip to content

chore: add auto refactor script and run to replace with-layer template -> with-layers decorator#21726

Merged
devadula-nandan merged 14 commits into
carbon-design-system:mainfrom
devadula-nandan:refactor-alternate-storybook-layering-approach
Apr 1, 2026
Merged

chore: add auto refactor script and run to replace with-layer template -> with-layers decorator#21726
devadula-nandan merged 14 commits into
carbon-design-system:mainfrom
devadula-nandan:refactor-alternate-storybook-layering-approach

Conversation

@devadula-nandan

@devadula-nandan devadula-nandan commented Mar 6, 2026

Copy link
Copy Markdown
Contributor

closes #20095

Replaces the sb-template-layers custom element with a simpler withLayers Storybook decorator across 17 web component stories.

This also helps with isolating story code in code tab
Removes all the side effects and makes it simple, no observers attached on the story root.
fixes controls not shared among layers.
isolates component states so they wont effect other clones instances

BOB assist +1 on generating node refactoring script

Changelog

New

  • adds new with-layers.ts story decorator with no side effects/orchestration and achieving same results.

Removed

  • removes with-layer.ts web component story template

Testing / Reviewing

verify in web-components storybook all 17 layer stories work as expected.

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

netlify Bot commented Mar 6, 2026

Copy link
Copy Markdown

Deploy Preview for v11-carbon-react ready!

Built without sensitive environment variables

Name Link
🔨 Latest commit f36cf21
🔍 Latest deploy log https://app.netlify.com/projects/v11-carbon-react/deploys/69ab3938b5e491000858d3e3
😎 Deploy Preview https://deploy-preview-21726--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

netlify Bot commented Mar 6, 2026

Copy link
Copy Markdown

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

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

@netlify

netlify Bot commented Mar 6, 2026

Copy link
Copy Markdown

Deploy Preview for v11-carbon-react ready!

Name Link
🔨 Latest commit 9f88bcd
🔍 Latest deploy log https://app.netlify.com/projects/v11-carbon-react/deploys/69cbcf126977ae00087ff14c
😎 Deploy Preview https://deploy-preview-21726--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

netlify Bot commented Mar 6, 2026

Copy link
Copy Markdown

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

Name Link
🔨 Latest commit 9f88bcd
🔍 Latest deploy log https://app.netlify.com/projects/v11-carbon-web-components/deploys/69cbcf125f86c0000802a310
😎 Deploy Preview https://deploy-preview-21726--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

codecov Bot commented Mar 6, 2026

Copy link
Copy Markdown

Codecov Report

✅ All modified and coverable lines are covered by tests.
✅ Project coverage is 94.81%. Comparing base (ebd7f1e) to head (9f88bcd).
⚠️ Report is 3 commits behind head on main.

Additional details and impacted files
@@            Coverage Diff             @@
##             main   #21726      +/-   ##
==========================================
- Coverage   94.84%   94.81%   -0.03%     
==========================================
  Files         535      535              
  Lines       43636    43636              
  Branches     6259     6259              
==========================================
- Hits        41388    41375      -13     
- Misses       2115     2128      +13     
  Partials      133      133              
Flag Coverage Δ
main-packages 89.06% <ø> (ø)
web-components 97.80% <ø> (-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 devadula-nandan changed the title chore: add auto refactor script and run chore: add auto refactor script and run to update with layers Mar 9, 2026
@devadula-nandan devadula-nandan changed the title chore: add auto refactor script and run to update with layers chore: add auto refactor script and run to replace with-layers Mar 9, 2026
@devadula-nandan

Copy link
Copy Markdown
Contributor Author
Screen.Recording.2026-03-09.at.10.13.15.AM.mov

this also fixes this

@devadula-nandan

Copy link
Copy Markdown
Contributor Author
Screen.Recording.2026-03-09.at.10.15.00.AM.mov

fixes this too

@devadula-nandan

devadula-nandan commented Mar 9, 2026

Copy link
Copy Markdown
Contributor Author

isolates code

Screen.Recording.2026-03-09.at.10.16.57.AM.mov

@devadula-nandan

Copy link
Copy Markdown
Contributor Author

handles this too

Screen.Recording.2026-03-09.at.10.27.48.AM.mov

@devadula-nandan devadula-nandan changed the title chore: add auto refactor script and run to replace with-layers chore: add auto refactor script and run to replace with-layer template -> with-layers decorator Mar 9, 2026
@devadula-nandan

devadula-nandan commented Mar 10, 2026

Copy link
Copy Markdown
Contributor Author

opened contained list layering issue in a parity issue
#21738

@heloiselui heloiselui left a comment

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

LGTM!

@devadula-nandan devadula-nandan added this pull request to the merge queue Apr 1, 2026
Merged via the queue into carbon-design-system:main with commit da29e77 Apr 1, 2026
39 checks passed
@devadula-nandan devadula-nandan deleted the refactor-alternate-storybook-layering-approach branch April 1, 2026 16:27
MarianaAa01 pushed a commit to MarianaAa01/carbon that referenced this pull request May 29, 2026
…ate -> `with-layers` decorator (carbon-design-system#21726)

* chore: add auto refactor script and run

* chore: delete script file

* chore: remove old layer template

* chore: remove comment

* chore: update copyright date

* refactor: move styles to scss file

* revert: previous copyright years

---------

Co-authored-by: Heloise Lui <71858203+heloiselui@users.noreply.github.com>
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.

[Bug]: with-layer stories do not respond to controls beyond first layer

3 participants