Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

fix(tabs): remove max-width #13247

Merged
merged 10 commits into from
Mar 3, 2023
Merged

fix(tabs): remove max-width #13247

Show file tree
Hide file tree
Changes from 8 commits
Commits
Show all changes
10 commits
Select commit Hold shift + click to select a range
4a66605
fix(tabs): remove max-width
francinelucca Feb 27, 2023
4dbc328
Merge branch 'main' into 11766-tabs-remove-max-width-from-tab
andreancardona Feb 28, 2023
a7cf0e3
Merge branch 'main' into 11766-tabs-remove-max-width-from-tab
andreancardona Feb 28, 2023
05cb7af
docs(tabs): add max width guidance
francinelucca Mar 1, 2023
89c294f
Merge branch '11766-tabs-remove-max-width-from-tab' of github.com:fra…
francinelucca Mar 1, 2023
bd83c89
docs(tabs): format
francinelucca Mar 1, 2023
bda7945
Merge branch 'main' into 11766-tabs-remove-max-width-from-tab
tw15egan Mar 2, 2023
b96cec1
Merge branch 'main' into 11766-tabs-remove-max-width-from-tab
francinelucca Mar 3, 2023
48dabfb
Merge branch 'main' into 11766-tabs-remove-max-width-from-tab
andreancardona Mar 3, 2023
a23a004
Merge branch 'main' into 11766-tabs-remove-max-width-from-tab
kodiakhq[bot] Mar 3, 2023
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
21 changes: 19 additions & 2 deletions packages/react/src/components/Tabs/Tabs.mdx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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)
Comment on lines +16 to +23
Copy link
Member

Choose a reason for hiding this comment

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

Thanks for running doctoc!

Copy link
Collaborator Author

Choose a reason for hiding this comment

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

there's an automated way to do this? 🤣 I wrote it hahahah

Copy link
Member

@tay1orjones tay1orjones Mar 3, 2023 •
edited
Loading

Choose a reason for hiding this comment

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

haha, yes! Run yarn doctoc in the root or yarn run doctoc in a package

- [Feedback](#feedback)

## Overview
Expand Down Expand Up @@ -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,
Expand Down
10 changes: 3 additions & 7 deletions packages/react/src/components/Tabs/Tabs.stories.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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>
Expand Down Expand Up @@ -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>
Expand Down Expand Up @@ -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>
Expand Down
1 change: 0 additions & 1 deletion packages/styles/scss/components/tabs/_tabs.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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;
Expand Down