Icon content switcher ☂️

[dianasanborn]

Tasks

Beta Give feedback

1. Icon content switcher: Create final v11 Design spec #12855
   proposal: accepted role: design ✏️ type: enhancement 💡 +3
   
2. Icon content switcher: add docs to website carbon-website#3504
   component: content-switcher role: design ✏️ type: docs 📖 +3
   
3. Icon content switcher: add to figma kit carbon-design-kit#606
   kit: figma role: design ✏️ status: help wanted 👐 type: enhancement 💡 +4
   
4. Icon content switcher: Make a POC #12811
   component: content-switcher role: dev 🤖 +2
   
5. Icon content switcher: add implementation #12461
   adopter: DSAG adopter: PAL package: @carbon/react proposal: accepted role: design ✏️ role: dev 🤖 type: enhancement 💡 version: 11 +8

Summary

Within AI Applications, we have an icon-only variant of the existing Carbon content switcher that is generic and can potentially live at the Carbon level. This is useful for situations when there is limited space.

Current guidance for the icon content switcher on the AI Applications PAL.

Available extra resources

We have an existing [react component] that is available today (style updates still need to be made (being tracked here), and we are also looking to have this available in Angular as well (tracked here)

Design specs:

[aagonzales]

Note: style should be updated to reflect new visuals specified in this issue: #6745

[dianasanborn]

Hi! 👋

Just wanted to provide an update on the AI Apps side —

We've updated our icon content switcher guidance to reflect the new Carbon content switcher styling, and we've also included the low-contrast variation that Noah Kawash-Barnes had worked with the Carbon team on contributing.

Similar to how tabs will support an icon-only version, I think this makes a lot of sense for Carbon's component to support as well for the content switcher. I'm happy to contribute our sketch assets and any guidance we have available to help move this forward!

• AI Apps icon content switcher guidance
• AI Apps icon content switcher sketch assets:
  sketch://add-library/cloud/6a99c9a7-3ece-4506-b1c7-cd19d3ded8a6: