fix(tabs): remove max-width (#13247)

* fix(tabs): remove max-width

* docs(tabs): add max width guidance

* docs(tabs): format

---------

Co-authored-by: Andrea N. Cardona <cardona.n.andrea@gmail.com>
Co-authored-by: TJ Egan <tw15egan@gmail.com>
Co-authored-by: kodiakhq[bot] <49736102+kodiakhq[bot]@users.noreply.github.com>

Author: 4 people

packages/react/src/components/Tabs/Tabs.mdx

@@ -13,9 +13,14 @@ import { Tabs, TabList, Tab, TabPanels, TabPanel } from './Tabs';
 
 - [Overview](#overview)
   - [Line Tabs](#line-tabs)
-  - [Container Tabs](#container-tabs)
+  - [Contained Tabs](#contained-tabs)
+  - [Icon Tabs](#icon-tabs)
 - [Component API](#component-api)
-  - [Tab `renderContent`](#tab-rendercontent)
+  - [Tab - render content on click](#tab---render-content-on-click)
+- [V11](#v11)
+  - [Tabs composition](#tabs-composition)
+  - [Various updates](#various-updates)
+  - [Max width](#max-width)
 - [Feedback](#feedback)
 
 ## Overview
@@ -144,6 +149,18 @@ minor tweaks in naming or implementation.
 - Because `renderButton` is no longer needed, the associated `tabIndex` prop has
   also been deprecated.
 
+### Max width
+
+In V11, tabs no longer have a max-width property set. Which means a tab title
+can span as wide as long it's title is. To override this behavior, you may use
+some style rules:
+
+```css
+.cds--tabs__nav-link {
+  max-width: 10rem;
+}
+```
+
 ## Feedback
 
 Help us improve this component by providing feedback, asking questions on Slack,

packages/react/src/components/Tabs/Tabs.stories.js

@@ -44,7 +44,7 @@ export const Default = () => (
       <Tab>Tab Label 1</Tab>
       <Tab>Tab Label 2</Tab>
       <Tab disabled>Tab Label 3</Tab>
-      <Tab>Tab Label 4 with a very long long label</Tab>
+      <Tab>Tab Label 4</Tab>
     </TabList>
     <TabPanels>
       <TabPanel>Tab Panel 1</TabPanel>
@@ -77,9 +77,7 @@ export const Manual = () => (
       <Tab>Tab Label 1</Tab>
       <Tab>Tab Label 2</Tab>
       <Tab disabled>Tab Label 3</Tab>
-      <Tab title="Tab Label 4 with a very long long label">
-        Tab Label 4 with a very long long label
-      </Tab>
+      <Tab title="Tab Label 4">Tab Label 4</Tab>
       <Tab>Tab Label 5</Tab>
     </TabList>
     <TabPanels>
@@ -156,9 +154,7 @@ export const Contained = () => (
       <Tab>Tab Label 1</Tab>
       <Tab>Tab Label 2</Tab>
       <Tab disabled>Tab Label 3</Tab>
-      <Tab title="Tab Label 4 with a very long long title">
-        Tab Label 4 with a very long long title
-      </Tab>
+      <Tab title="Tab Label 4">Tab Label 4</Tab>
       <Tab>Tab Label 5</Tab>
     </TabList>
     <TabPanels>

packages/styles/scss/components/tabs/_tabs.scss

@@ -279,7 +279,6 @@ $icon-tab-size: custom-property.get-var('icon-tab-size', rem(40px));
       }
 
       overflow: hidden;
-      max-width: 10rem;
       padding: $spacing-04 $spacing-05 $spacing-03;
       border-bottom: $tab-underline-color;
       color: $text-secondary;