Docs -- tabs extended v2

src/data/components.json

@@ -409,7 +409,7 @@
     "Tabs extended": {
       "url": "/components/tabs-extended",
       "designLink": "https://ibm.box.com/s/26zrugvym00408zhpp23gqwnudzmgdd1",
-      "description": "Tabs extended combines tabs and accordion to organize editorial content.",
+      "description": "Tabs extended leverages the Carbon tab with style updates to better organize editorial content.",
       "storybook": {
         "webcomponents": "https://www.ibm.com/standards/carbon/web-components/?path=/story/components-tabs-extended--default",
         "reactwrapper": "https://www.ibm.com/standards/carbon/web-components/react/?path=/story/components-tabs-extended--default"

src/pages/components/tabs-extended.mdx

@@ -1,6 +1,6 @@
 ---
 title: Tabs extended
-description: Tabs extended combines tabs and accordion to organize editorial content.
+description: Tabs extended leverages the Carbon tab with style updates to better organize editorial content.
 ---
 
 import ComponentDescription from 'components/ComponentDescription';
@@ -16,107 +16,124 @@ import ResourceLinks from 'components/ResourceLinks';
 <AnchorLinks>
   <AnchorLink>Overview</AnchorLink>
   <AnchorLink>Tabs extended</AnchorLink>
-  <AnchorLink>Tabs extended media</AnchorLink>
+  <AnchorLink>Tabs extended with media</AnchorLink>
+  <AnchorLink>Behaviors</AnchorLink>
   <AnchorLink>Feedback</AnchorLink>
 </AnchorLinks>
 
-## Overview
+<InlineNotification>
 
-Tabs are useful for displaying parallel pieces of content that share the same context. It has the additional benefit of reducing screen height, but should be used carefully because some information is hidden on load.
+**Breaking change:** Previously, tabs extended was a separate component in Carbon for IBM.com v1. In v2, tabs extended will use Carbon Design System's [tab](https://carbondesignsystem.com/components/tabs/usage/) directly with automatic style updates.
 
-Our Tabs extended component references the Carbon Design System's [tabs component](https://carbondesignsystem.com/components/tabs/usage/), and it is built with additional features to optimize for editorial content.
+</InlineNotification>
 
-## Tabs extended
+## Overview
 
-On desktop, Tabs extended renders as tabs. On mobile, the component renders as an accordion, making it easy to read and access each section while scrolling.
+Tabs extended displays parallel pieces of related content, allowing users to explore the displayed content of their choice. It also has the benefit of reducing the amount of scrolling the user may have to do on a given page, but should be used carefully because some information is hidden on load. If the information in a tab would be key to the page content, consider laying out the content using a different component.
 
-Tab labels wrap up to two lines before being truncated. Truncated labels are fully displayed in tooltips on hover and focus.
+The tabs extended component uses the Carbon Design System's [tabs](https://carbondesignsystem.com/components/tabs/usage/) component directly, and includes automatic style updates to optimize for editorial content.
 
 <Row>
 <Column colMd={8} colLg={8}>
 
-![Image of Tabs extended component on desktop](../../images/component/tabs-extended/components--tabs-extended-1.png)
+![Image of Tabs extended component on desktop. Tabs extended displays a set of options with different labels, with one option in semibold type to indicate that it is selected](../../images/component/tabs-extended/tabs-extended-overview-01.png)
 
-<Caption>Example of the tabs extended, on desktop</Caption>
+<Caption>Example of the tabs extended on desktop</Caption>
 
 </Column>
 </Row>
 
-On mobile, Tabs extended switches to an accordion for easier browsing.
+Like tabs, tabs extended will expand a given item horizontally to display the whole label without truncating. Keep this in mind as you write selection items for tabs extended, as overly long labels can push other options out of the initial view. Also consider translation lengthening the label.
 
-<Row>
-<Column colMd={6} colLg={4}>
+## Tabs extended
 
-![Image of Tabs extended component on `sm`](../../images/component/tabs-extended/components--tabs-extended-3.png)
+Tabs extended can nest other components inside its content area to display them based on the user's selection. We recommend nesting similar components in sequence, rather than varying the types of components displayed in a given tabs experience.
 
-<Caption>Example of the tabs extended, on mobile</Caption>
+<ResourceLinks name="Tabs extended" type="ui" multiComponent />
 
-</Column>
-</Row>
+### Content guidance for Tabs extended
 
-### Modifiers
+| Element                                                                                                                | Content type | Required | Instances | Character limit <br/>(English / translated) | Notes                                                                                         |
+| ---------------------------------------------------------------------------------------------------------------------- | ------------ | -------- | --------- | ------------------------------------------- | --------------------------------------------------------------------------------------------- |
+| Child container                                                                                                        | Component    | Yes      | Min 2     | –                                           | Container areas that child components and other content types can be passed into (1 per tab). |
+| <a href="https://www.carbondesignsystem.com/components/tabs/usage/" target="_blank" rel="noopener noreferrer">Tabs</a> | Component    | Yes      | 2–6       | –                                           |                                                                                               |
+| Tab item                                                                                                               | Text         | Yes      | –         | 25 / 35                                     |                                                                                               |
 
-#### Orientation
+For more information, see the [character count standards](https://www.ibm.com/standards/carbon/guidelines/content#character-count-standards).
+
+## Tabs extended with media
 
-Tabs orientation on desktop can be set to horizontal or vertical. When using the vertical orientation, the tabs are displayed stacked in one column. This allows for longer tab labels.
+Tabs extended with media is a prebuilt variant of tabs extended which provides an option where the tab panel is pre-populated with the [Content item row](/components/content-item-row) with media component to create an organized section for displaying content paired with media.
 
 <Row>
 <Column colMd={8} colLg={8}>
 
-![Image of Tabs extended component on `sm`](../../images/component/tabs-extended/components--tabs-extended-2.png)
+![Image of Tabs extended component on desktop. Tabs extended displays a set of options with different labels, with one option in semibold type to indicate that it is selected](../../images/component/tabs-extended/tabs-extended-with-media-01.png)
 
-<Caption>Example of the tabs extended using vertical orientation</Caption>
+<Caption>Example of the tabs extended on desktop</Caption>
 
 </Column>
 </Row>
 
-<ResourceLinks name="Tabs extended" type="ui" multiComponent />
+As with tabs extended, some content will be hidden until the user interacts with the component, so tabs extended with media should not be used for information that is considered critical.
 
-### Content guidance for Tabs extended
+<Row>
 
-| Element                                                                                                                | Content type | Required | Instances | Character limit <br/>(English / translated) | Notes                                                                                         |
-| ---------------------------------------------------------------------------------------------------------------------- | ------------ | -------- | --------- | ------------------------------------------- | --------------------------------------------------------------------------------------------- |
-| Child container                                                                                                        | Component    | Yes      | Min 2     | –                                           | Container areas that child components and other content types can be passed into (1 per tab). |
-| <a href="https://www.carbondesignsystem.com/components/tabs/usage/" target="_blank" rel="noopener noreferrer">Tabs</a> | Component    | Yes      | 2–6       | –                                           | Tab renders as an accordion for medium breakpoint and smaller.                                |
-| Tab item                                                                                                               | Text         | Yes      | –         | 25 / 35                                     | When using vertical orientation max character count = 40 / 55.                                |
+<Column colMd={6} colLg={6}>
 
-For more information, see the [character count standards](https://www.ibm.com/standards/carbon/guidelines/content#character-count-standards).
+![Tabs extended displaying content item row. The first item in tabs extended is selected, and the corresponding content is displayed](../../images/component/tabs-extended/tabs-extended-with-media-02.png)
 
-## Tabs extended with media
+<Caption>
+  Tabs extended with media displaying the first instance of content
+</Caption>
 
-Tabs extended with media provides an option where the tab panel is pre-populated with the [Content item row](/components/content-item-row) with media component to create an organized section for displaying content paired with media. Keep in mind that when using tabs, some content will be hidden until the user interacts with the component, so they should not be used for information that is considered critical.
+</Column>
 
-<Row>
-<Column colMd={8} colLg={8}>
+<Column colMd={6} colLg={6}>
 
-![Image of Tabs extended with media component](../../images/component/tabs-extended/components--tabs-extended-media-1.png)
+![Tabs extended displaying content item row. The second item in tabs extended is selected, and the corresponding content is displayed](../../images/component/tabs-extended/tabs-extended-with-media-03.png)
 
-<Caption>Example of the tabs extended media, on desktop</Caption>
+<Caption>
+  Tabs extended with media displaying the second instance of content
+</Caption>
 
 </Column>
+
 </Row>
 
-On mobile, Tabs extended media renders as an accordion for easier browsing.
+<ResourceLinks name="Tabs extended media" type="layout" multiComponent />
+
+### Content guidance for Tabs extended media
+
+| Element                                                                                   | Content type | Required | Instances | Character limit <br/>(English / translated) | Notes          |
+| ----------------------------------------------------------------------------------------- | ------------ | -------- | --------- | ------------------------------------------- | -------------- |
+| Tabs extended                                                                             | Component    | Yes      | 1         | –                                           |                |
+| [Content item row with media](../components/content-item-row#content-item-row-with-media) | Component    | Yes      | 1         | –                                           | Max 1 per tab. |
+
+## Behaviors
+
+### Overflow
+
+When the tabs extended options would be hidden due to the window becoming too small, overflow buttons will automatically appear on the sides of the component. These buttons allow users to navigate the entire tabs extended to see all options regardless of screen size. Note that this functionality occurs across all breakpoints, not just mobile.
 
 <Row>
-<Column colMd={4} colLg={4}>
 
-![Image of Tabs extended media component](../../images/component/tabs-extended/components--tabs-extended-media-2.png)
+<Column colMd={8} colLg={8}>
+
+![Tabs extended with an overflow on desktop, in which case an overflow button appears to indicate that there is more content out of view](../../images/component/tabs-extended/tabs-extended-behavior-01.png)
 
-<Caption>Example of the tabs extended media, on mobile</Caption>
+<Caption>Tabs extended with an overflow on desktop</Caption>
 
 </Column>
-</Row>
 
-<ResourceLinks name="Tabs extended media" type="layout" multiComponent />
+<Column colMd={4} colLg={4}>
 
-### Content guidance for Tabs extended media
+![Tabs extended with an overflow on mobile, in which case an overflow button appears to indicate that there is more content out of view](../../images/component/tabs-extended/tabs-extended-behavior-02.png)
 
-| Element                                                                                                                     | Content type | Required | Instances | Character limit <br/>(English / translated) | Notes          |
-| --------------------------------------------------------------------------------------------------------------------------- | ------------ | -------- | --------- | ------------------------------------------- | -------------- |
-| Tabs extended                                                                                                               | Component    | Yes      | 1         | –                                           |                |
-| [Content item row with media](https://www.ibm.com/standards/carbon/components/content-item-row#content-item-row-with-media) | Component    | Yes      | 1         | –                                           | Max 1 per tab. |
+<Caption>Tabs extended with an overflow on mobile</Caption>
 
-For more information, see the [character count standards](https://www.ibm.com/standards/carbon/guidelines/content#character-count-standards).
+</Column>
+
+</Row>
 
 <ComponentFooter name="Tabs extended" type="ui" />