Skip to content

Commit

Permalink
Tabs: Update docs with new props (#3539)
Browse files Browse the repository at this point in the history
* Update usage.mdx

Updating docs to reflect the new additions to the tab component.
• Updated v11 notification—took out part about composable component API now that we have props available
• Removed caption under Anatomy of line tabs image
• Removed cation under Anatomy of contained tabs image
• Removed caption under Tabs with icon image
• Removed cation under Secondary labels image

Closes carbon-design-system/carbon#13389

* Update src/pages/components/tabs/usage.mdx

Co-authored-by: Lauren Rice <43969356+laurenmrice@users.noreply.github.com>

* Update usage.mdx

updated grid alignment notification
• took out underscores
• rewrote copy

* Update usage.mdx

Updated styling for grid alignment notification

---------

Co-authored-by: Lauren Rice <43969356+laurenmrice@users.noreply.github.com>
Co-authored-by: Alison Joseph <alison.joseph@us.ibm.com>
  • Loading branch information
3 people authored May 15, 2023
1 parent 1ed2059 commit 634560a
Showing 1 changed file with 4 additions and 16 deletions.
20 changes: 4 additions & 16 deletions src/pages/components/tabs/usage.mdx
Original file line number Diff line number Diff line change
Expand Up @@ -18,11 +18,7 @@ between groups of information that appear within the same context.
<InlineNotification>

**v11 update:** The tab component variant names have changed. Default tabs has
become _Line tabs_ and Container tabs has become _Contained tabs_. The tabs
component has also been refactored and now includes a composable component API
which allows for additional style modifications like icons in tabs and secondary
labels. For v10 implementation guidance, go to
[v10 Tabs](https://v10.carbondesignsystem.com/components/tabs/usage/).
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/).

</InlineNotification>

Expand Down Expand Up @@ -172,7 +168,6 @@ are always at least two tabs and one is selected by default. Icons are optional.

</Column>
</Row>
<Caption>Note: The close icon button pattern is not a configurable prop, it is instead enabled through the composable component API. This requires additional styling and configuration.</Caption>

<Row>
<Column colSm={2} colMd={4} colLg={4}>
Expand Down Expand Up @@ -204,7 +199,6 @@ B. Indicator <br /> C. Icon

</Column>
</Row>
<Caption>Note: The optional secondary label and icon patterns are not configurable props, but are instead enabled through the composable component API. This requires additional styling and configuration.</Caption>

<Row>
<Column colSm={2} colMd={4} colLg={4}>
Expand Down Expand Up @@ -286,8 +280,9 @@ aligning the beginning and ending of the tab elements with content below the
tabs when possible.

<InlineNotification>
_Note: This is not currently implemented in the components, updates for
alignment to the grid are incoming!_

**Note:** Grid aligned tabs are not currently implemented in the components. Updates for grid alignment are incoming.

</InlineNotification>

<Row>
Expand Down Expand Up @@ -424,12 +419,6 @@ label.
</Column>
</Row>

<Caption>
Note: Tabs with an icon is an example of a pattern. It is not currently
implemented by default in the component, it is instead enabled through the
composable component API. This requires additional styling and configuration.
</Caption>

### Icon-only tabs

You may use icon-only tabs with both line and contained tabs. Icons must be
Expand Down Expand Up @@ -457,7 +446,6 @@ secondary labels with line tabs or auto-width contained tabs.

</Column>
</Row>
<Caption>Note: The secondary label is an example of a pattern. It is not currently implemented in the component.</Caption>

## Related

Expand Down

1 comment on commit 634560a

@vercel
Copy link

@vercel vercel bot commented on 634560a May 15, 2023

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Please sign in to comment.