Tab Updates and enhancements

[kingtraceyj]

We are updating the usage docs to account for more use cases.

Improvement on existing tabs

1. Name change (Default tabs we are now calling line tabs and container tabs we are now calling contained tabs)
2. Updating default functionality (We are recommending line tabs use auto-spacing and contained tabs can use either auto-spacing or grid)

Adding modifiers

Line tabs

• Icon-only
• Label with icon

Contained tabs

• Icon-only
• Label with icon
• Label with secondary label
• Label with secondary label and icon

Adding in motion

• TBD - new issue will come for this

See below more more details.

Pieces delivered in v11:

• [Tabs]: Refactor to provide TabList, TabPanels, TabPanel #10086
• [Tabs]: Separate and rename container tabs to ContainedTabs, ContainedTab #9952
• [Tabs]: Update Tabs to have icon-only variant #9988
• [Tabs]: Add size prop to icon-only Tabs variant #9991
• [Tabs]: make auto-width the default for both line and contained tabs #10031
• [Tabs]: reimplement horizontal scrolling in /next version #10249
• Can/should LineTab(s) be separate components as well so Tabs can be a common primitive for both contained and line implementations?

Tasks

Beta Give feedback

1. Tabs: Remove max-width from Tab #11766
   component: tabs proposal: accepted role: dev 🤖 type: enhancement 💡 +4
   
2. Tabs: add support for presentational (descriptive) icons in Line/Contained Tabs #12844
   4 of 4
   component: tabs package: @carbon/react proposal: accepted role: dev 🤖 type: enhancement 💡 version: 11 +6
   
3. ContainedTabs: provide contained w/ secondary label tab layout helper/component #12843
   3 of 3
   component: tabs package: @carbon/react proposal: accepted role: dev 🤖 type: enhancement 💡 version: 11 +6
   
4. Tabs: add dismissable functionality to tab #12813
   0 of 2
   component: tabs role: dev 🤖 +2
   
5. Tabs: provide dismissable tabs with descriptive icon tab layout helper/component #12845
   component: tabs package: @carbon/react proposal: accepted role: dev 🤖 type: enhancement 💡 version: 11 +6
   
6. Tabs: update dev docs to reflect "line tabs" terms/naming instead of "default" #12846
   +0
7. Tabs: Explore supporting placement of contained tabs on the css grid #12848
   3 of 3
   component: tabs package: @carbon/react proposal: accepted role: dev 🤖 status: blocked 🙅‍♀️ type: enhancement 💡 version: 11 +7
   
8. Tabs: Aligning to the Grid design guidance #13351
   component: tabs role: design ✏️ type: enhancement 💡 +3
   
9. Tabs: Implement contained tabs on the css grid #13353
   component: tabs package: @carbon/react role: dev 🤖 type: enhancement 💡 +4
   
10. ContainedTabs Secondary Label: Update website docs #13389
    component: tabs role: dev 🤖 +2
    
11. Tabs: Update live demo carbon-website#2660
    area: component-demo component: tabs role: dev 🤖 type: bug 🐛 +4
    
12. Tabs: dismissable tabs design spec #13758
    component: tabs role: design ✏️ type: enhancement 💡 +3
    
13. [Figma] add dismissable tabs carbon-design-kit#682
    kit: figma role: design ✏️ type: enhancement 💡 +3
    
14. docs: update tabs with dismissable content carbon-website#3556
    component: tabs role: design ✏️ type: docs 📖 type: enhancement 💡 +4
    

[kingtraceyj]

Name update

In docs we will now refer to tabs as line tabs and container tabs as contained tabs. We're getting rid of the work default since we use it differently through our components.

Default functionality

We now recommend using auto-spacing for line tabs. Contained tabs can use both auto-spacing or the grid.

Line:

Contained:

New modifiers

Line tabs

Icon-only

With icon

Contained tabs

Contained with icon (auto-spaced and grid)

Contained with secondary label + icon

Contained - icon-only

[kingtraceyj]

one small update -- we will have 2 sizes for the icon-only line tabs. a medium/default one (40px) and a large one (48px)

[kingtraceyj]

here are better, hopefully more helpful specs:

[tay1orjones]

Contained with secondary label + icon

@carbon-design-system/design @kingtraceyj Something that came up when @abbeyhrt and I were beginning to look at implementing this today was a question around alignment and these secondary labels.

If only one tab is provided a secondary label, should the others have an empty secondary label taking up the same vertical space so that the text/icons remains aligned?

Or should the ones without secondary labels revert to the default middle alignment?

[aagonzales]

Talked to Mike in Slack, this is what we concluded for what's allowed with icons in tabs.

[tay1orjones]

I want to provide an update as to the delivery of this. This required quite a bit of unexpected restructuring/foundational work to achieve these design enhancements. @abbeyhrt has completed that work and it will be shipped in v11. It includes contained tabs, line tabs, icon only tabs, and has feature parity (overflow scrolling, etc) with the existing tabs in v10.

The remaining incomplete items do not require a breaking change. These improvements will be revisited post-v11.

• Default tabs with descriptive icon
• Dismissible tabs and the related accessibility concerns
• Dismissible tabs with descriptive icon
• ContainedTabs secondary label

[tay1orjones]

To be clear, with the new API in v11 there's nothing blocking the configuration of the above items. Consumers can place their own custom elements, markup, components, etc into Tabs.

The revisiting of the items listed above will be aimed at making it easier to configure these types of tabs correctly out of the box.

[laurenmrice]

@francinelucca Here is an updated spec of Contained tabs with a secondary label and icon.