Skip to content

fix(content-switcher): align web component with React for parity#19896

Merged
ariellalgilmore merged 22 commits into
carbon-design-system:mainfrom
heloiselui:wc-content-switcher
Aug 11, 2025
Merged

fix(content-switcher): align web component with React for parity#19896
ariellalgilmore merged 22 commits into
carbon-design-system:mainfrom
heloiselui:wc-content-switcher

Conversation

@heloiselui

@heloiselui heloiselui commented Jul 11, 2025

Copy link
Copy Markdown
Contributor

Closes #18319
Closes #19262
Closes Gui's PR #18815

Add React parity features to ContentSwitcher web component

Changelog

  • Added new stories demonstrating disabled items, low contrast, icon-only, and layered usage.
  • Added support for lowContrast mode and icon-only layouts in all sizes (sm, md, lg).
  • Updated event payload for cds-content-switcher-selected to include item, index, name, and text.
  • Added disabled support to cds-content-switcher-item.
  • Added selectedIndex and selectionMode properties to control item selection programmatically.

Changed

  • Refactored storybook argTypes and controls for consistency with other components.
  • Updated SCSS styles to reflect correct styles for disabled state (text, border, background).
  • Improved keyboard navigation and selection behavior when using selectionMode="manual".
  • Ensured parent cds-content-switcher reflects disabled if any child is disabled.
  • Fixed the corners of the disabled example in overview page.

Removed

  • Removed unused or outdated code (e.g., deprecated xl size).
  • Removed older examples that no longer reflect current design/system behavior.
  • Removed Playground example.

Testing / Reviewing

  • CI should pass.
  • In the WC Deploy Preview > Content Switcher stories:
    • Default
    • Icon Only
    • Icon Only with Layer
    • Low Contrast
    • Low Contrast Icon Only
    • WithLayer

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 Jul 11, 2025

Copy link
Copy Markdown

Deploy Preview for v11-carbon-react ready!

Name Link
🔨 Latest commit 0ad7250
🔍 Latest deploy log https://app.netlify.com/projects/v11-carbon-react/deploys/68966dd735dfb30008d8d1c7
😎 Deploy Preview https://deploy-preview-19896--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.

@github-project-automation github-project-automation Bot moved this to 🚦 In Review in Design System Jul 14, 2025
@heloiselui heloiselui moved this from 🚦 In Review to 🏗 In Progress in Design System Jul 14, 2025
@heloiselui heloiselui self-assigned this Jul 14, 2025
@netlify

netlify Bot commented Jul 28, 2025

Copy link
Copy Markdown

Deploy Preview for carbon-elements ready!

Name Link
🔨 Latest commit 0ad7250
🔍 Latest deploy log https://app.netlify.com/projects/carbon-elements/deploys/68966dd73a42440008820842
😎 Deploy Preview https://deploy-preview-19896--carbon-elements.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 Jul 28, 2025

Copy link
Copy Markdown

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

Name Link
🔨 Latest commit 0ad7250
🔍 Latest deploy log https://app.netlify.com/projects/v11-carbon-web-components/deploys/68966dd7ffbd680007e762e3
😎 Deploy Preview https://deploy-preview-19896--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 Jul 28, 2025

Copy link
Copy Markdown

Codecov Report

✅ All modified and coverable lines are covered by tests.
✅ Project coverage is 91.53%. Comparing base (30b4f87) to head (0ad7250).
⚠️ Report is 39 commits behind head on main.

Additional details and impacted files
@@            Coverage Diff             @@
##             main   #19896      +/-   ##
==========================================
+ Coverage   91.39%   91.53%   +0.13%     
==========================================
  Files         485      479       -6     
  Lines       31370    31151     -219     
  Branches     5430     5464      +34     
==========================================
- Hits        28670    28513     -157     
+ Misses       2547     2488      -59     
+ Partials      153      150       -3     
Flag Coverage Δ
main-packages 85.05% <ø> (+0.12%) ⬆️
web-components 97.10% <ø> (-0.06%) ⬇️

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.

@heloiselui heloiselui marked this pull request as ready for review August 5, 2025 10:56
@heloiselui heloiselui requested a review from a team as a code owner August 5, 2025 10:56
@heloiselui heloiselui requested a review from a team August 5, 2025 10:56
Comment thread packages/web-components/src/components/content-switcher/content-switcher.scss Outdated
Comment thread packages/web-components/src/components/content-switcher/content-switcher.ts Outdated
Comment thread packages/web-components/src/components/content-switcher/defs.ts

@tay1orjones tay1orjones left a comment

Copy link
Copy Markdown
Member

Choose a reason for hiding this comment

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

This is awesome! 💪 LGTM

@ariellalgilmore ariellalgilmore left a comment

Copy link
Copy Markdown
Member

Choose a reason for hiding this comment

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

few more updates, but almost there!!! thanks @heloiselui !

Comment thread packages/web-components/src/components/content-switcher/content-switcher.ts Outdated
Comment thread packages/web-components/src/components/content-switcher/content-switcher.mdx Outdated

@laurenmrice laurenmrice left a comment

Copy link
Copy Markdown
Member

Choose a reason for hiding this comment

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

This looks sooo good, great job @heloiselui !! ⭐️

I found a very small bug that is already happening in React and unrelated to this PR, so I made a separate issue for it.

@ariellalgilmore ariellalgilmore added this pull request to the merge queue Aug 11, 2025
Merged via the queue into carbon-design-system:main with commit 86e4af5 Aug 11, 2025
42 of 43 checks passed
@github-project-automation github-project-automation Bot moved this from 🚦 In Review to ✅ Done in Design System Aug 11, 2025
@heloiselui heloiselui deleted the wc-content-switcher branch August 11, 2025 14:47
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Projects

Status: ✅ Done

Development

Successfully merging this pull request may close these issues.

[Low contrast content switcher] WC Implementation React|WC Parity: Content Switcher

5 participants