React|WC Parity: Content Switcher by guidari · Pull Request #18815 · carbon-design-system/carbon

guidari · 2025-03-12T13:44:24Z

Closes #18319

Added to new props to match the React Content Switcher.

Changelog

New

SelectionMode prop added with "manual" and "automatic" values.
SelectedIndex prop added to change the initial selectedIndex.

Changed

Added control to Default story
Change names from onSelect to onChange on storybook

Removed

Removed Playground story

Testing / Reviewing

Make sure there is no regression
New props should work like React.

netlify · 2025-03-12T13:51:35Z

✅ Deploy Preview for carbon-elements ready!

Name	Link
🔨 Latest commit	`87cdf31`
🔍 Latest deploy log	https://app.netlify.com/sites/carbon-elements/deploys/67d18fbac0cf5c00083b6c27
😎 Deploy Preview	https://deploy-preview-18815--carbon-elements.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 site configuration.

netlify · 2025-03-12T13:53:40Z

✅ Deploy Preview for v11-carbon-react ready!

Built without sensitive environment variables

Name	Link
🔨 Latest commit	`87cdf31`
🔍 Latest deploy log	https://app.netlify.com/sites/v11-carbon-react/deploys/67d18fba416bed000878f389
😎 Deploy Preview	https://deploy-preview-18815--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 site configuration.

netlify · 2025-03-12T13:59:12Z

✅ Deploy Preview for carbon-elements ready!

Name	Link
🔨 Latest commit	`02acb87`
🔍 Latest deploy log	https://app.netlify.com/sites/carbon-elements/deploys/67ea85879568a60008e3f144
😎 Deploy Preview	https://deploy-preview-18815--carbon-elements.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 site configuration.

netlify · 2025-03-12T14:01:10Z

✅ Deploy Preview for v11-carbon-react ready!

Name	Link
🔨 Latest commit	`abda6d7`
🔍 Latest deploy log	https://app.netlify.com/projects/v11-carbon-react/deploys/6871286aa783080008af36fe
😎 Deploy Preview	https://deploy-preview-18815--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.

ariellalgilmore · 2025-03-17T18:06:54Z

looks like a similar issue to before? make sure yarn build is successful even though storybook might be rendering properly locally

netlify · 2025-03-20T13:03:53Z

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

Name	Link
🔨 Latest commit	`abda6d7`
🔍 Latest deploy log	https://app.netlify.com/projects/v11-carbon-web-components/deploys/6871286acd909f0008a3b795
😎 Deploy Preview	https://deploy-preview-18815--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 · 2025-03-20T13:05:03Z

Codecov Report

All modified and coverable lines are covered by tests ✅

Project coverage is 84.88%. Comparing base (c5899b9) to head (02acb87).
Report is 398 commits behind head on main.

Additional details and impacted files

@@           Coverage Diff           @@
##             main   #18815   +/-   ##
=======================================
  Coverage   84.88%   84.88%           
=======================================
  Files         396      396           
  Lines       14512    14512           
  Branches     4770     4773    +3     
=======================================
  Hits        12319    12319           
  Misses       2044     2044           
  Partials      149      149

☔ 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.

ariellalgilmore · 2025-03-26T16:52:27Z

-  value: '',
+  value: 'all',
  size: null,
  disableSelection: false,


is the disableSelection needed? it's not in reacts story

Good question! I guess it is not needed, since there is no disableSelection in the .tsx file.
I'll remove that!

ariellalgilmore · 2025-03-26T16:54:08Z

+  /**
+   * Choose whether or not to automatically change selection on focus when left/right arrow pressed. Defaults to 'automatic'
+   */
+  @property()


Suggested change

@property()

@property({ attribute: 'selection-mode'})

and should we maybe a defs file with enums for the content switcher types?

I'm not sure about this one. Do we have any examples of what you are mentioning?

like this: https://github.com/carbon-design-system/carbon/blob/main/packages/web-components/src/components/accordion/defs.ts

laurenmrice

@guidari

Default story
I understand that these props: Children, className, and Value vary between WC and React because of the differences between them. But what about props: disableSelection and onBeforeSelect, I see those in WC and not in React so just wanted to clarify.

Icon Only story
The controls need to be added to this story like Reacts.

Icon Only With Layer
The controls need to be added to this story like Reacts.

…system#19740)

* fix(OverflowMenu): fix types Fix OverflowMenuProps to include properties that get passed through to IconButton, for example align, autoAlign, and tooltip. Relatedly, fix TableToolbarMenuProps to extend OverflowMenuProps. I also removed the aria-label as it's redundant with iconDescription. * chore(OverflowMenu): align is inherited from IconButtonProps PR carbon-design-system#19131 added align manually but I changed it to inherit from IconButtonProps (rather than repeating the definition). --------- Co-authored-by: Riddhi Bansal <41935566+riddhybansal@users.noreply.github.com>

Bumps [brace-expansion](https://github.com/juliangruber/brace-expansion) from 1.1.11 to 1.1.12. - [Release notes](https://github.com/juliangruber/brace-expansion/releases) - [Commits](juliangruber/brace-expansion@1.1.11...v1.1.12) --- updated-dependencies: - dependency-name: brace-expansion dependency-version: 1.1.12 dependency-type: indirect ... Signed-off-by: dependabot[bot] <support@github.com> Co-authored-by: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com> Co-authored-by: kennylam <909118+kennylam@users.noreply.github.com>

…er (carbon-design-system#19649) * fix: tilegroup onchange type breaks type checking add generic type support for value and onchange handler. * docs: add contributor add michelepayne as contributor --------- Co-authored-by: kennylam <909118+kennylam@users.noreply.github.com>

carbon-design-system#19742) * fix(numberinput): update onChange value type to Number, ensure onBlur is called for steppers * fix(numberinput): ensure event loop is properly updated for type=text * docs(numberinput): new stepper logic --------- Co-authored-by: kennylam <909118+kennylam@users.noreply.github.com>

…#19744) * fix(pagination): fix the pagination loses focus * fix(pagination): adding suggestion code --------- Co-authored-by: Riddhi Bansal <41935566+riddhybansal@users.noreply.github.com> Co-authored-by: Heloise Lui <71858203+heloiselui@users.noreply.github.com>

* fix: numberInput W|C parity * feat: parity for numberInput

…ign-system#19795)

Co-authored-by: riddhybansal <41935566+riddhybansal@users.noreply.github.com>

* test: new multiselect test cases * test: new tests * test: added some more test cases * test: new tests for keyboard interactions * test: new test cases, again * chore: copywright * test: select all tests * test: removed snapshots folder

…system#19816) * fix: filterable multiselect tab issue * fix: removed test story

…-system#19780) * feat: add web-components unit test coverage to Codecov * fix: web-components coverage paths * fix: updates upload path * refactor: single upload point for all packages * fix: updates paths for W|C * fix: fixes coverage config * fix: path updated * refactor: test lines coverage * refactor: makes path filter broad * fix: lcov * fix: path fixed * fix: updated path to include es/ files * fix: updated path to include es/ files * fix: adds manual path transformation * fix: adds manual path transformation * fix: revert manual transform * chore: remove debug workflow

) * test: add test cases for WC layer componenet * fix: removes snapshot folder * chore: update 2023->2025

Co-authored-by: riddhybansal <41935566+riddhybansal@users.noreply.github.com>

…m#19826)

…ult (carbon-design-system#19788) * fix(storybook): removed playground stories * fix(storybook): adjust control descriptions --------- Co-authored-by: Heloise Lui <71858203+heloiselui@users.noreply.github.com> Co-authored-by: kennylam <909118+kennylam@users.noreply.github.com>

…design-system#19804) Bumps [github/codeql-action](https://github.com/github/codeql-action) from 3.29.0 to 3.29.1. - [Release notes](https://github.com/github/codeql-action/releases) - [Changelog](https://github.com/github/codeql-action/blob/main/CHANGELOG.md) - [Commits](github/codeql-action@ce28f5b...39edc49) --- updated-dependencies: - dependency-name: github/codeql-action dependency-version: 3.29.1 dependency-type: direct:production update-type: version-update:semver-patch ... Signed-off-by: dependabot[bot] <support@github.com> Co-authored-by: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com> Co-authored-by: Heloise Lui <71858203+heloiselui@users.noreply.github.com>

…n-system#19803) Bumps [chromaui/action](https://github.com/chromaui/action) from 13.0.0 to 13.0.1. - [Release notes](https://github.com/chromaui/action/releases) - [Commits](chromaui/action@3378c92...b584805) --- updated-dependencies: - dependency-name: chromaui/action dependency-version: 13.0.1 dependency-type: direct:production update-type: version-update:semver-patch ... Signed-off-by: dependabot[bot] <support@github.com> Co-authored-by: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com> Co-authored-by: Heloise Lui <71858203+heloiselui@users.noreply.github.com>

kennylam · 2025-07-11T15:49:26Z

Closing in favor of #19896

guidari requested a review from a team as a code owner March 12, 2025 13:44

guidari requested review from a team, ariellalgilmore, heloiselui and tay1orjones March 12, 2025 13:44

tay1orjones mentioned this pull request Mar 12, 2025

[Low contrast content switcher] React Implementation #17332

Closed

guidari added the status: ready for review 👀 label Mar 12, 2025

guidari requested review from a team and laurenmrice and removed request for a team March 13, 2025 13:34

ariellalgilmore reviewed Mar 13, 2025

View reviewed changes

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

guidari added the status: visual review 🔍 label Mar 13, 2025

tay1orjones approved these changes Mar 13, 2025

View reviewed changes

heloiselui approved these changes Mar 13, 2025

View reviewed changes

heloiselui added the status: failing CI 🙅‍♂️ label Mar 14, 2025

heloiselui self-requested a review March 18, 2025 16:23

guidari removed the status: failing CI 🙅‍♂️ label Mar 20, 2025

riddhybansal approved these changes Mar 22, 2025

View reviewed changes

guidari requested a review from ariellalgilmore March 26, 2025 14:09

ariellalgilmore reviewed Mar 26, 2025

View reviewed changes

laurenmrice requested changes Apr 2, 2025

View reviewed changes

tay1orjones assigned kennylam May 21, 2025

tay1orjones added this to Design System May 21, 2025

heloiselui and others added 21 commits July 11, 2025 15:50

fix(progress-bar): add support for High Contrast Mode (carbon-design-…

eeb3b70

…system#19740)

fix: numberInput W|C parity (carbon-design-system#19686)

1c0d89f

* fix: numberInput W|C parity * feat: parity for numberInput

test: added test cases for tile (carbon-design-system#19793)

9d8c6d2

fix(accordion): provide part attribute to the wrapper div (carbon-des…

765386b

…ign-system#19795)

chore(release): v11.86.0-rc.0 (carbon-design-system#19802)

27347e8

Co-authored-by: riddhybansal <41935566+riddhybansal@users.noreply.github.com>

fix: Filterable multiselect focus while tabbing issue (carbon-design-…

ed92299

…system#19816) * fix: filterable multiselect tab issue * fix: removed test story

test: add test cases for WC layer componenet (carbon-design-system#19824

6af725f

) * test: add test cases for WC layer componenet * fix: removes snapshot folder * chore: update 2023->2025

chore(release): v11.86.0 (carbon-design-system#19828)

513bcd4

Co-authored-by: riddhybansal <41935566+riddhybansal@users.noreply.github.com>

fix: migrate viewport definitions to storybook 9 (carbon-design-syste…

351cd15

…m#19826)

fix(textarea-input): console error bug (carbon-design-system#19833)

2074c23

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

abda6d7

heloiselui requested review from a team as code owners July 11, 2025 15:06

heloiselui requested a review from kennylam July 11, 2025 15:06

heloiselui marked this pull request as draft July 11, 2025 15:06

heloiselui mentioned this pull request Jul 11, 2025

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

Merged

4 tasks

kennylam closed this Jul 11, 2025

github-project-automation Bot moved this from ⏱ Backlog to ✅ Done in Design System Jul 11, 2025

Conversation

guidari commented Mar 12, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Changelog

Testing / Reviewing

Uh oh!

netlify Bot commented Mar 12, 2025

✅ Deploy Preview for carbon-elements ready!

Uh oh!

netlify Bot commented Mar 12, 2025

✅ Deploy Preview for v11-carbon-react ready!

Uh oh!

netlify Bot commented Mar 12, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

✅ Deploy Preview for carbon-elements ready!

Uh oh!

netlify Bot commented Mar 12, 2025 • 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!

Uh oh!

ariellalgilmore commented Mar 17, 2025

Uh oh!

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

Uh oh!

Codecov Report

Uh oh!

ariellalgilmore Mar 26, 2025

Choose a reason for hiding this comment

Uh oh!

guidari Mar 31, 2025

Choose a reason for hiding this comment

Uh oh!

ariellalgilmore Mar 26, 2025

Choose a reason for hiding this comment

Uh oh!

guidari Apr 1, 2025

Choose a reason for hiding this comment

Uh oh!

ariellalgilmore Apr 1, 2025

Choose a reason for hiding this comment

Uh oh!

laurenmrice left a comment

Choose a reason for hiding this comment

Uh oh!

kennylam commented Jul 11, 2025

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

20 participants

guidari commented Mar 12, 2025 •

edited

Loading

netlify Bot commented Mar 12, 2025 •

edited

Loading

netlify Bot commented Mar 12, 2025 •

edited

Loading

netlify Bot commented Mar 20, 2025 •

edited

Loading

codecov Bot commented Mar 20, 2025 •

edited

Loading