diff --git a/src/pages/components/tabs/images/tab-style-20.png b/src/pages/components/tabs/images/tab-style-20.png new file mode 100644 index 00000000000..ac15abe25db Binary files /dev/null and b/src/pages/components/tabs/images/tab-style-20.png differ diff --git a/src/pages/components/tabs/images/tab-style-21.png b/src/pages/components/tabs/images/tab-style-21.png new file mode 100644 index 00000000000..1df24713a4f Binary files /dev/null and b/src/pages/components/tabs/images/tab-style-21.png differ diff --git a/src/pages/components/tabs/images/tab-style-22.png b/src/pages/components/tabs/images/tab-style-22.png new file mode 100644 index 00000000000..1bceac382bd Binary files /dev/null and b/src/pages/components/tabs/images/tab-style-22.png differ diff --git a/src/pages/components/tabs/images/tab-style-4.png b/src/pages/components/tabs/images/tab-style-4.png index e7959314aaa..27fa944b743 100644 Binary files a/src/pages/components/tabs/images/tab-style-4.png and b/src/pages/components/tabs/images/tab-style-4.png differ diff --git a/src/pages/components/tabs/images/tab-style-5.png b/src/pages/components/tabs/images/tab-style-5.png index 77ee4b64dcb..15afe1560f9 100644 Binary files a/src/pages/components/tabs/images/tab-style-5.png and b/src/pages/components/tabs/images/tab-style-5.png differ diff --git a/src/pages/components/tabs/images/tab-usage-10.png b/src/pages/components/tabs/images/tab-usage-10.png index 1f676eceb2e..8467c5cf919 100644 Binary files a/src/pages/components/tabs/images/tab-usage-10.png and b/src/pages/components/tabs/images/tab-usage-10.png differ diff --git a/src/pages/components/tabs/images/tab-usage-20.png b/src/pages/components/tabs/images/tab-usage-20.png new file mode 100644 index 00000000000..e5ac0375eb8 Binary files /dev/null and b/src/pages/components/tabs/images/tab-usage-20.png differ diff --git a/src/pages/components/tabs/images/tab-usage-21.png b/src/pages/components/tabs/images/tab-usage-21.png new file mode 100644 index 00000000000..fa8b94e79c2 Binary files /dev/null and b/src/pages/components/tabs/images/tab-usage-21.png differ diff --git a/src/pages/components/tabs/images/tab-usage-3.png b/src/pages/components/tabs/images/tab-usage-3.png index aa20312787b..db3c99e6e0f 100644 Binary files a/src/pages/components/tabs/images/tab-usage-3.png and b/src/pages/components/tabs/images/tab-usage-3.png differ diff --git a/src/pages/components/tabs/images/tab-usage-4.png b/src/pages/components/tabs/images/tab-usage-4.png index 1616e14e28d..7350aecd25c 100644 Binary files a/src/pages/components/tabs/images/tab-usage-4.png and b/src/pages/components/tabs/images/tab-usage-4.png differ diff --git a/src/pages/components/tabs/images/tab-usage-5.png b/src/pages/components/tabs/images/tab-usage-5.png index e78541c5ac6..eb1bf810250 100644 Binary files a/src/pages/components/tabs/images/tab-usage-5.png and b/src/pages/components/tabs/images/tab-usage-5.png differ diff --git a/src/pages/components/tabs/style.mdx b/src/pages/components/tabs/style.mdx index 22dca01aca7..e1f1c0c6851 100755 --- a/src/pages/components/tabs/style.mdx +++ b/src/pages/components/tabs/style.mdx @@ -184,16 +184,18 @@ structure, and size. ### Contained tab color -| Type | Element | Property | Color token | -| ---------- | ------- | ---------------- | --------------------- | -| Unselected | Tab | background-color | `$layer-accent` \* | -| | | border-right | `$border-strong` \* | -| | Label | text-color | `$text-secondary` | -| | Icon | svg | `$icon-secondary` | -| Selected | Tab | background-color | `$layer` \* | -| | | border-top | `$border-interactive` | -| | Label | text-color | `$text-primary` | -| | Icon | svg | `$icon-primary` | +| Type | Element | Property | Color token | +| ---------- | --------------- | ---------------- | --------------------- | +| Unselected | Tab | background-color | `$layer-accent` \* | +| | | border-right | `$border-strong` \* | +| | Label | text-color | `$text-secondary` | +| | Secondary label | text-color | `$text-secondary` | +| | Icon | svg | `$icon-secondary` | +| Selected | Tab | background-color | `$layer` \* | +| | | border-top | `$border-interactive` | +| | Label | text-color | `$text-primary` | +| | Secondary label | text-color | `$text-primary` | +| | Icon | svg | `$icon-primary` | * Denotes a contextual color token that will change values based on the layer @@ -216,15 +218,17 @@ structure, and size.
-| State | Element | Property | Color token | -| -------- | ------- | ---------------- | ------------------------- | -| Hover | Tab | background-color | `$layer-accent-hover` \* | -| | Label | text-color | `$text-primary` | -| | Icon | svg | `$icon-primary` | -| Focus | Tab | border | `$focus` | -| Disabled | Label | text-color | `$text-on-color-disabled` | -| | Icon | svg | `$icon-on-color-disabled` | -| | Tab | background-color | `$button-disabled` | +| State | Element | Property | Color token | +| -------- | --------------- | ---------------- | ------------------------- | +| Hover | Tab | background-color | `$layer-accent-hover` \* | +| | Label | text-color | `$text-primary` | +| | Secondary label | text-color | `$text-primary` | +| | Icon | svg | `$icon-primary` | +| Focus | Tab | border | `$focus` | +| Disabled | Label | text-color | `$text-on-color-disabled` | +| | Secondary label | text-color | `$text-on-color-disabled` | +| | Icon | svg | `$icon-on-color-disabled` | +| | Tab | background-color | `$button-disabled` | * Denotes a contextual color token that will change values based on the layer @@ -359,6 +363,65 @@ tabs.](images/tab-style-12.png) contained tabs. +### Vertical tab color + +| Type | Element | Property | Color token | +| ---------- | ------------------- | ---------------------------------------- | ------------------------ | +| Unselected | Tab | background-color | `$layer` \* | +| | | border-bottom, border-right, border-left | `$border-subtle` \* | +| | Label | text-color | `$text-secondary` | +| | Extended background | background-color | `$layer` \* | +| | | border-right | `$border-subtle` \* | +| Selected | Tab | background-color | `$layer` \* | +| | | border-bottom | `$border-subtle` \* | +| | | border-left | `$border-interactive` \* | +| | Label | text-color | `$text-primary` | +| tab panel | background | background-color | `$layer` \* | + + + * Denotes a contextual color token that will change values based on the layer + it is placed on. + + + + + +![Examples of selected and unselected vertical tabs.](images/tab-style-20.png) + + + + +Examples of selected and unselected vertical tabs. + +#### Vertical tab interactive state color + +
+ +| State | Element | Property | Color token | +| -------- | ----------------- | ---------------- | ------------------------- | +| Hover | Label | text-color | `$text-primary` | +| | Tab | background-color | `$layer-hover` \* | +| Focus | Tab: unselected | border | `$focus` | +| | Label: unselected | text-color | `$text-secondary` | +| | Tab: selected | border | `$focus` | +| | Label: selected | text-color | `$text-primary` | +| Disabled | Label | text-color | `$text-on-color-disabled` | + + + + +![Examples of hover, unselected focus, selected focus, and disabled states for vertical tabs.](images/tab-style-21.png) + + + + + + Examples of hover, unselected focus, selected focus, and disabled states for + vertical tabs. + + +
+ ## Typography Tab labels should be set in sentence case, and should not exceed three words. @@ -367,6 +430,7 @@ Tab labels should be set in sentence case, and should not exceed three words. | ----------------- | ------------------ | -------------- | --------------------- | | Label: unselected | 14 / 0.875 | Regular / 400 | `$body-compact-01` | | Label: selected | 14 / 0.875 | SemiBold / 600 | `$heading-compact-01` | +| Secondary label | 12 / 0.75 | Regular / 400 | `$label-01` | ## Structure @@ -518,6 +582,28 @@ Tab labels should be set in sentence case, and should not exceed three words. icons (top) and with icons (bottom)| px / rem +### Verical tab structure + +| Element | Property | px / rem | Spacing token | +| ------------------- | --------------------------- | -------- | ------------- | +| Tab | height | 64 / 4 | – | +| | border-left | 3 px | – | +| Tab: unselected | border-bottom, border-right | 1 px | – | +| Tab: selected | border-bottom | 1 px | – | +| Label | padding-left, padding-right | 16 / 1 | `$spacing-05` | +| Extended background | border-right | 1 px | – | + +
+ +![Structure and spacing measurements for vertical tabs in px and rem](images/tab-style-22.png) + +
+ + + Structure and spacing measurements for vertical tabs without overflow (left) + and with overflow (right) | px / rem + + ## Feedback Help us improve this component by providing feedback, asking questions, and diff --git a/src/pages/components/tabs/usage.mdx b/src/pages/components/tabs/usage.mdx index 277a0b3eb64..46dfa6617aa 100755 --- a/src/pages/components/tabs/usage.mdx +++ b/src/pages/components/tabs/usage.mdx @@ -16,16 +16,6 @@ between groups of information that appear within the same context. - - -**v11 update:** The tab component variant names have changed. Default tabs has -become _Line tabs_ and Container tabs has become _Contained tabs_. The updated -tabs component has new modifiers that allow for icons and secondary labels. For -v10 implementation guidance, go to -[v10 Tabs](https://v10.carbondesignsystem.com/components/tabs/usage/). - - - Live demo @@ -35,6 +25,7 @@ v10 implementation guidance, go to Universal behaviors Line tabs Contained tabs +Vertical tabs Modifiers Related References @@ -142,16 +133,20 @@ complete a task. | ---------------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | | [Line](#line-tabs) | A standalone tab that can also be nested within components. It is commonly used within components or for content using the entire page for layout, not connected to any other components. | | [Contained](#contained-tabs) | An emphasized tab that is commonly used for defined content areas.  | +| [Vertical](#Vertical-tabs) | A tablist with a vertical orientation to browse through content.  | -![Examples of line tabs (top) and contained tabs (bottom)](images/tab-usage-3.png) +![Examples of line tabs (top), contained tabs (middle), and vertical tabs (bottom)](images/tab-usage-3.png) -Examples of line tabs (top) and contained tabs (bottom) + + Examples of line tabs (top), contained tabs (middle), and vertical tabs + (bottom) + ## Formatting @@ -175,18 +170,18 @@ optional. #### 1. Line tabs -A. Label
B. Indicator
C. Scroll button +A. Label
C. Indicator
D. Scroll button #### 3. Line tabs with icon -A. Label
D. Icon
G. Tab panel +A. Label
C. Indicator
E. Icon
F. Tab panel #### 2. Icon-only line tabs -B. Indicator
D. Icon +C. Indicator
E. Icon @@ -206,23 +201,38 @@ B. Indicator
D. Icon #### 1. Contained tabs -A. Label
B. Indicator
C. Scroll button +A. Label
C. Indicator
D. Scroll button #### 3. Contained tabs with icon and secondary label -A. Label
B. Indicator
D. Icon (optional)
E. Container
-F. Secondary label (optional)
G. Tab panel +A. Label
B. Secondary label (optional)
C. Indicator
E. Icon +(optional)
F. Tab panel #### 2. Icon-only contained tabs -B. Indicator
D. Icon
E. Container +C. Indicator
E. Icon +### Anatomy of vertical tabs + + + + +![Anatomy of vertical tabs](images/tab-usage-20.png) + + + + +#### Vertical tabs + +A. Label
C. Indicator
F. Tab panel
G. Tablist extended +background + ### Alignment Much like @@ -231,7 +241,9 @@ alignment of tabs depends on where they appear and whether or not they're contained within another component. As a general rule, the first label for both line tabs and contained tabs align with the grid and the text below. If tabs are within another component, such as a card, follow the grid that you are using -inside the component and align the label with text in the component. +inside the component and align the label with text in the component. Vertical +tab labels also align with the grid, so all labels in a tablist will align on +the same grid column. @@ -248,9 +260,9 @@ inside the component and align the label with text in the component. #### Auto-width -With both line tabs and contained tabs, auto-width is the default behavior. Each -tab will be a different size depending on the label's character count but will -have consistent padding on each side of the label. The first label, selected by +With line tabs and contained tabs, auto-width is the default behavior. Each tab +will be a different size depending on the label's character count but will have +consistent padding on each side of the label. The first label, selected by default, should align to the grid. Where the tabs end will vary and may not end on the grid. If needed, you may also use a line to help balance tabs with other components on the page. @@ -268,7 +280,7 @@ components on the page. #### Aligning to grid columns Instead of using the default auto-width behavior, contained tabs also have the -option to align to the grid. As a group, the tabs span a set of columns with +option to align to the grid. As a group, the tablist spans a set of columns with each tab being equal in size. The first tab’s label should align to the first column you are using with the last tab in the group always ending at a column’s edge. The tabs in between will flow accordingly and may or may not align to the @@ -280,6 +292,18 @@ to drive visual rhythm by spacing content in multiples of two columns and aligning the beginning and ending of the tab elements with content below the tabs when possible. +Use grid aligned contained tabs when: + +- When there are 4 tabs or less +- When the tablist can fit on the 2x grid easily without crowding labels +- Labels are short and concise +- When there are other elements on the page that can align to the tablist + +Depending on breakpoints, vertical tabs align to grid columns spanning 4 or 2 +columns of the 16-column grid and connect to a tab panel that can be 8 or 12 +columns wide. See [vertical tabs](#Vertical-tabs) for more information on +breakpoints and responsiveness. + **Note:** Grid aligned tabs are not currently implemented in the components. @@ -323,7 +347,9 @@ tab to the edge of the content area. #### Labels - Use short tab labels that are clear and specific. Labels should be one to two - words, as these are easier to scan. + words, as these are easier to scan. Vertical tabs allow for more characters + within a tab, but stay as concise as possible to avoid truncation and allow + space for labels in various languages. - Text labels should clearly communicate the view users will see and the content contained in the view. @@ -332,6 +358,28 @@ tab to the edge of the content area. - Contained tabs can have secondary labels to add clarity or assist the user in choosing the right selection. +### Overflow content + +Line and tab labels do not need truncation since these types of tabs allow for +horizontal scrolling. The tabs themselves can grow and shrink accordingly. +However, when a label is too long within a vertical tab, the label overflows to +two lines and then truncates with an ellipsis. By mouse, the full title is +disclosed in a browser tooltip on hover. By keyboard, the full title is +disclosed on focus in a tooltip. + + + + +![Overflow content within vertical tabs](images/tab-usage-10.png) + + + + + + On hover, full title is disclosed in a browser tooltip (left) and on focus, + full title is disclosed in Carbon tooltip (right) + + ### Further guidance For further content guidance, see Carbon's @@ -362,8 +410,8 @@ the [Style tab](https://carbondesignsystem.com/components/tabs/style). ### Scrollable When your page requires more tabs that can fit or needs to adapt to a new -browser size, tabs should become scrollable. Left and right arrows appear to -help navigate the user through tabs that might be off-page. +browser size, line and contained tabs should become scrollable. Left and right +arrows appear to help navigate the user through tabs that might be off-page. @@ -447,11 +495,41 @@ complicated, especially within smaller areas. -![Examples of tabs with icons](images/tab-usage-14.png) +![Examples of contained tabs](images/tab-usage-14.png) + + + + +## Vertical tabs + +Vertical tabs are left and vertically-aligned tabs that allow a user to scan +through information from top to bottom. This vertical orientation is good for +quickly browsing and accessing information, such as a +[get started](https://pages.github.ibm.com/cdai-design/pal/patterns/onboarding/orientation/usage#get-started) +pattern. Do not use vertical tabs in place of +[navigation](https://carbondesignsystem.com/components/UI-shell-left-panel/usage/). + +The tab panel should stay the same height as tabs switch so content outside the +tabs stays in a consistent place. The vertical tablist and panel height should +be determined by the tab that has the most content. To avoid excessive scrolling +within the tab panel, do not overload it with too much content. If more space is +needed than the tab panel allows, consider using line or contained tabs that +allow for full page layouts. Both the tablist and the tab panels are always on +the same layer. At extra large and large breakpoints, vertical tablist spans 4 +columns of the 16-column grid. At the medium breakpoint, the vertical tablist +spans 2 columns. At the small breakpoint, the vertical tablist uses scrolling +contained tabs. + + + + +![Example of vertical tabs in a get started pattern](images/tab-usage-21.png) +Example of Vertical tabs in a get started pattern + ## Modifiers ### Tabs with icons @@ -490,7 +568,7 @@ and focus to add clarity. ### Secondary labels Contained tabs that align with the grid allow for a secondary label. Do not use -secondary labels with line tabs or auto-width contained tabs. +secondary labels with line tabs, auto-width contained tabs, or vertical tabs. @@ -505,9 +583,9 @@ secondary labels with line tabs or auto-width contained tabs. ### Dismissible tabs Dismissible tabs allow users to close tabs providing a focused and relevant -experience. Users can add or remove tabs as needed, accommodating future content -additions or modifications without drastically changing the overall layout or -structure. +experience. Users can add or remove contained or line tabs as needed, +accommodating future content additions or modifications without drastically +changing the overall layout or structure.