fix(tabs): remove max-width #13247

francinelucca · 2023-02-27T22:38:56Z

Removes max-width property from Tabs and removes long label demos from storybook

Changelog

Changed

packages/react/src/components/Tabs/Tabs.stories.js: remove tabs stories long labels
packages/styles/scss/components/tabs/_tabs.scss: remove max-width

Testing / Reviewing

Override label text in deployment to make it a really long name, see no max-width limitations, compare to https://react.carbondesignsystem.com/?path=/story/components-tabs--default

netlify · 2023-02-27T22:43:32Z

✅ Deploy Preview for carbon-components-react ready!

Built without sensitive environment variables

Name	Link
🔨 Latest commit	`a23a004`
🔍 Latest deploy log	https://app.netlify.com/sites/carbon-components-react/deploys/640278808eea200008ae9f4c
😎 Deploy Preview	https://deploy-preview-13247--carbon-components-react.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.

To edit notification comments on pull requests, go to your Netlify site settings.

andreancardona

Not sure why percy was failing but code looks good!

netlify · 2023-02-28T19:32:33Z

✅ Deploy Preview for carbon-elements ready!

Name	Link
🔨 Latest commit	`a23a004`
🔍 Latest deploy log	https://app.netlify.com/sites/carbon-elements/deploys/640278804663f30007e1cd67
😎 Deploy Preview	https://deploy-preview-13247--carbon-elements.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.

To edit notification comments on pull requests, go to your Netlify site settings.

tay1orjones · 2023-03-01T17:32:15Z

As discussed today, maybe we could add a blurb to the storybook .mdx docs for tabs about the max-width. Why it was removed, and what steps users can take to provide a max-width to their tabs.

…ncinelucca/carbon into 11766-tabs-remove-max-width-from-tab

francinelucca · 2023-03-01T20:51:34Z

As discussed today, maybe we could add a blurb to the storybook .mdx docs for tabs about the max-width. Why it was removed, and what steps users can take to provide a max-width to their tabs.

Added! @tay1orjones @andreancardona can you re-rev? 🙏🏻

tay1orjones · 2023-03-03T15:19:07Z

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

+  - [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)


Thanks for running doctoc!

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

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

* refactor(Dropdown): ariaLabel to aria-label * fix(menu): fix arrow key navigation when onClose is called but not closed (#13195) * fix(menu): only clear registered items when root is closing * fix(menu): auto-cleanup registered items --------- Co-authored-by: kodiakhq[bot] <49736102+kodiakhq[bot]@users.noreply.github.com> * feat(theme): add $icon-interactive token (#13219) * feat(theme): add $icon-interactive token * Update packages/themes/src/tokens/v11TokenGroup.js Co-authored-by: Alison Joseph <alisonejoseph@Gmail.com> * Update packages/themes/src/tokens/__tests__/metadata-test.js Co-authored-by: Alison Joseph <alisonejoseph@Gmail.com> * Update packages/themes/src/tokens/__tests__/__snapshots__/v11-test.js.snap * Update packages/themes/src/tokens/__tests__/__snapshots__/v11-test.js.snap * chore(snapshot): update snapshots --------- Co-authored-by: Alison Joseph <alisonejoseph@Gmail.com> Co-authored-by: Francine Lucca <40550942+francinelucca@users.noreply.github.com> * feat(TextInput): add typescript types (#13142) * feat(TextInput): add typescript types * fix(Text Input): submcompnent workaround + add helperID prop * chore(format): format `Popover`, `Listbox` files (#13284) * chore(format): format Popover file * chore(format): format ListBox files * chore(format): update format command * chore(release): v11.24.0 (#13282) Co-authored-by: tay1orjones <tay1orjones@users.noreply.github.com> * fix(toggle): make props.labelText optional (#13196) * fix(toggle): make props.labelText optional * docs(toggle): add 'with accessible labels' story * test(toggle): update public api snapshot --------- Co-authored-by: kodiakhq[bot] <49736102+kodiakhq[bot]@users.noreply.github.com> * fix(ListBox): a11y - move filter tag as sibling of menu trigger, esc key improvements (#13173) * fix(MultiSelect): a11y - move filter tag as sibling of menu trigger * fix(Multiselect): remove tag from tab order * fix(FilterableMultiselect): remove clear, tag from tab order * fix(ComboBox): retain input value when menu is open and esc is pressed * fix(FilterableMultiSelect): a few more UX tweaks * style(MultiSelect): update styles to fix invalid issues when focused * style(FluidMultiselect): adjust focus styles when invalid * chore(log): remove console log --------- Co-authored-by: Andrea N. Cardona <cardona.n.andrea@gmail.com> * docs(style): add section on authoring inline styles (#13289) * docs(style): add section on authoring inline styles * docs(style): rephrase inline style docs * docs(style): typo --------- Co-authored-by: kodiakhq[bot] <49736102+kodiakhq[bot]@users.noreply.github.com> * refactor(ComboBox): ariaLabel to aria-label (#13273) * refactor(ComboBox): ariaLabel to aria-label * fix: formatting --------- Co-authored-by: kodiakhq[bot] <49736102+kodiakhq[bot]@users.noreply.github.com> Co-authored-by: Andrea N. Cardona <cardona.n.andrea@gmail.com> * 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> * fix(ListBox): Standardize `ListBox` menu open behavior (#13268) * style(MultiSelect): update styles to fix invalid issues when focused * style(FluidMultiselect): adjust focus styles when invalid * chore(log): remove console log * fix(ListBox): align open behaviors across ListBox components --------- Co-authored-by: Andrea N. Cardona <cardona.n.andrea@gmail.com> Co-authored-by: kodiakhq[bot] <49736102+kodiakhq[bot]@users.noreply.github.com> * Add Typescript annotations to Select, SelectItem and SelectItemGroup (#13235) * refactor(typescript): type annotations on Select* Add Typescript annotations to Select, SelectItem and SelectItemGroup. * fix(lint): removed unused imports Left SelectItem and SelectItemGroup in the imports after using them for testing. Removed. * fix(Select-test): update label to labelText Previously removed label as it was not a property of Select. On recommendation of maintainers reintroduced using labelText. * Apply suggestions from code review Co-authored-by: Andrea N. Cardona <cardona.n.andrea@gmail.com> * Follow up to change suggestions --------- Co-authored-by: Andrea N. Cardona <cardona.n.andrea@gmail.com> Co-authored-by: kodiakhq[bot] <49736102+kodiakhq[bot]@users.noreply.github.com> * refactor(FilterableMultiSelect): ariaLabel to aria-label (#13276) Co-authored-by: Andrea N. Cardona <cardona.n.andrea@gmail.com> Co-authored-by: kodiakhq[bot] <49736102+kodiakhq[bot]@users.noreply.github.com> Co-authored-by: TJ Egan <tw15egan@gmail.com> * fix(SkeletonText): prevent negative px width values (#13270) Co-authored-by: Alessandra Davila <adavila91@gmail.com> * feat(Popover): add `isTabTip` prop to `Popover` (#13283) * feat(tabTipPopover): add tabTip to Popover * feat(tabTipPopover): add tab-tip styles, story * test(Popover): add e2e tests * style(Popover): adjust storybook styles * fix(Popover): add new prop to proptypes * chore(snapshot): update snapshots * docs(Popover): add close on esc to story * docs(Popover): fix typo --------- Co-authored-by: kodiakhq[bot] <49736102+kodiakhq[bot]@users.noreply.github.com> * chore(deps): bump minimist in /packages/react/examples/react-router (#13254) Bumps [minimist](https://github.com/minimistjs/minimist) from 1.2.5 to 1.2.8. - [Release notes](https://github.com/minimistjs/minimist/releases) - [Changelog](https://github.com/minimistjs/minimist/blob/main/CHANGELOG.md) - [Commits](minimistjs/minimist@v1.2.5...v1.2.8) --- updated-dependencies: - dependency-name: minimist dependency-type: indirect ... Signed-off-by: dependabot[bot] <support@github.com> Co-authored-by: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com> Co-authored-by: TJ Egan <tw15egan@gmail.com> Co-authored-by: kodiakhq[bot] <49736102+kodiakhq[bot]@users.noreply.github.com> * refactor(StructuredList): ariaLabel to aria-label (#13261) * refactor(StructuredListWrapper): ariaLabel to aria-label * fix(StructuredList test): use 'aria-label' --------- Co-authored-by: kodiakhq[bot] <49736102+kodiakhq[bot]@users.noreply.github.com> * feat(DataTable): add rowIds to the sortRows extra params list (#13236) Co-authored-by: TJ Egan <tw15egan@gmail.com> Co-authored-by: kodiakhq[bot] <49736102+kodiakhq[bot]@users.noreply.github.com> * feat(typescript): add various typescript typings (#13234) * feat(TableToolbar): add typescript typings * feat(TableToolbarAction): add typescript typings * feat(TableToolbarContent): change to `tsx` * feat(TableToolbarMenu): add typescript typings * feat(OverflowMenuItem): add typescript typings * fix: format --------- Co-authored-by: Francine Lucca <40550942+francinelucca@users.noreply.github.com> Co-authored-by: Francine Lucca <francinelucca@hotmail.com> * fix(RadioTile): forward ref to input node (#13130) Forward ref to input node of RadioTile, such that it behaves the same as other form inputs. Co-authored-by: Francine Lucca <40550942+francinelucca@users.noreply.github.com> * feat: migration examples prefix selectors (#13264) * feat(ContentSwitcher): preliminary unstable refactor * feat: added prefix and id prefix examples * fix: delete content switcher directory * feat: update demos * Update examples/id-prefix/src/App.jsx Co-authored-by: Francine Lucca <40550942+francinelucca@users.noreply.github.com> * Update packages/react/src/components/IdPrefix/index.js * feat: added docs * fix: update context * fix: yarn install * fix: update context 2 * chore: update yarn packages * chore: udpate yarn carbon/react --------- Co-authored-by: Francine Lucca <40550942+francinelucca@users.noreply.github.com> Co-authored-by: kodiakhq[bot] <49736102+kodiakhq[bot]@users.noreply.github.com> * feat(DataTableSkeleton): 12513 - Add TS types for props (#13245) * feat(DataTableSkeleton): 12513 - Add TS types for props * fix: yarn run format --------- Co-authored-by: Francine Lucca <40550942+francinelucca@users.noreply.github.com> Co-authored-by: Francine Lucca <francinelucca@hotmail.com> * test(datatable): refactor to use RTL (#13294) * chore: wip * chore: wip * test(datatable): refactor to use RTL * chore: typo --------- Co-authored-by: kodiakhq[bot] <49736102+kodiakhq[bot]@users.noreply.github.com> * fix(modal): aria-label a11y bug (#13242) Co-authored-by: Francine Lucca <40550942+francinelucca@users.noreply.github.com> Co-authored-by: kodiakhq[bot] <49736102+kodiakhq[bot]@users.noreply.github.com> * test(HeaderSideNavItems): add tests (#13303) Co-authored-by: kodiakhq[bot] <49736102+kodiakhq[bot]@users.noreply.github.com> * docs(Storybook): update storybook config so actions display properly (#13302) * docs(Storybook): update storybook config so actions display properly * fix(DatePicker): change action names --------- Co-authored-by: kodiakhq[bot] <49736102+kodiakhq[bot]@users.noreply.github.com> * fix(tabs): deprecate light prop (#13262) Co-authored-by: Andrea N. Cardona <cardona.n.andrea@gmail.com> Co-authored-by: kodiakhq[bot] <49736102+kodiakhq[bot]@users.noreply.github.com> * fix(menu): focus first item when opened (#13277) Co-authored-by: kodiakhq[bot] <49736102+kodiakhq[bot]@users.noreply.github.com> * fix(CodeSnippet): a11y tabstop + attributes (#13310) * fix(CodeSnippet): a11y tabstop + attributes * fix(CSS): add Carbon CSS to focus outline * refactor(CodeSnippet): relocate parens * refactor(OverflowMenu): ariaLabel to aria-label (NEW) (#13280) * fix(CodeSnippet): a11y tabstop + attributes * fix(CSS): add Carbon CSS to focus outline * refactor(OverflowMenu): ariaLabel to aria-label NEW * Delete CodeSnippet.js error from a rebase/merge * Delete _code-snippet.scss error from rebase/merge * revert(missingFiles): they'll be ignored on merge --------- Co-authored-by: kodiakhq[bot] <49736102+kodiakhq[bot]@users.noreply.github.com> * chore(test): remove enzyme (#13316) * test(accordion): refactor from enzyme to RTL * chore(test): remove enzyme --------- Co-authored-by: kodiakhq[bot] <49736102+kodiakhq[bot]@users.noreply.github.com> * refactor(CodeSnippet): ariaLabel to aria-label (#13274) Co-authored-by: Taylor Jones <tay1orjones@users.noreply.github.com> * feat(TextArea): add warning state (#13293) * feat(TextArea): add warning state * chore: update snapshots * fix: textarea error bottom border and default value in story * chore: hide resize fluid textarea invalid and warn --------- Co-authored-by: Andrea N. Cardona <cardona.n.andrea@gmail.com> Co-authored-by: kodiakhq[bot] <49736102+kodiakhq[bot]@users.noreply.github.com> * refactor: convert TextAreaSkeleton to TypeScript (#13275) * refactor: convert TextAreaSkeleton to TypeScript * chore: remove unneeded omit * chore: remove unneeded omit --------- Co-authored-by: kodiakhq[bot] <49736102+kodiakhq[bot]@users.noreply.github.com> * fix(batchToolTips): make tooltips on batch visible (#13328) Co-authored-by: kodiakhq[bot] <49736102+kodiakhq[bot]@users.noreply.github.com> * refactor(Notification): ariaLabel to aria-label (#13281) * refactor(Notification): ariaLabel to aria-label * fix(Notification): rm stories default dupes * fix(InlineNotification): rm deprecated prop --------- Co-authored-by: Francine Lucca <40550942+francinelucca@users.noreply.github.com> Co-authored-by: kodiakhq[bot] <49736102+kodiakhq[bot]@users.noreply.github.com> * fix(format): tsx formatting --------- Signed-off-by: dependabot[bot] <support@github.com> Co-authored-by: Jan Hassel <jan.hassel@ibm.com> Co-authored-by: kodiakhq[bot] <49736102+kodiakhq[bot]@users.noreply.github.com> Co-authored-by: TJ Egan <tw15egan@gmail.com> Co-authored-by: Alison Joseph <alisonejoseph@Gmail.com> Co-authored-by: Francine Lucca <40550942+francinelucca@users.noreply.github.com> Co-authored-by: Bianca Sparxs <33003148+bianca-sparxs@users.noreply.github.com> Co-authored-by: carbon-automation[bot] <103539138+carbon-automation[bot]@users.noreply.github.com> Co-authored-by: tay1orjones <tay1orjones@users.noreply.github.com> Co-authored-by: Andrea N. Cardona <cardona.n.andrea@gmail.com> Co-authored-by: jpsorensen <93107699+jpsorensen@users.noreply.github.com> Co-authored-by: andrew <emyarod@users.noreply.github.com> Co-authored-by: Alessandra Davila <adavila91@gmail.com> Co-authored-by: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com> Co-authored-by: Chris Knabe <cknabe@us.ibm.com> Co-authored-by: GalvinGao <me@galvingao.com> Co-authored-by: Francine Lucca <francinelucca@hotmail.com> Co-authored-by: remolueoend <remolueoend@users.noreply.github.com> Co-authored-by: Alison Joseph <alison.joseph@us.ibm.com> Co-authored-by: Sierra Wetmore <107062203+sierrawetmore@users.noreply.github.com> Co-authored-by: Austin <aj_viens_deruisseau@yahoo.com>

fix(tabs): remove max-width

4a66605

francinelucca requested a review from a team as a code owner February 27, 2023 22:38

francinelucca requested review from tay1orjones and andreancardona February 27, 2023 22:38

Merge branch 'main' into 11766-tabs-remove-max-width-from-tab

4dbc328

andreancardona approved these changes Feb 28, 2023

View reviewed changes

Merge branch 'main' into 11766-tabs-remove-max-width-from-tab

a7cf0e3

tay1orjones added the status: visual review 🔍 label Feb 28, 2023

tay1orjones approved these changes Feb 28, 2023

View reviewed changes

tay1orjones added status: ready to merge 🎉 and removed status: visual review 🔍 labels Feb 28, 2023

francinelucca removed the status: ready to merge 🎉 label Mar 1, 2023

francinelucca added 3 commits March 1, 2023 15:48

docs(tabs): add max width guidance

05cb7af

Merge branch '11766-tabs-remove-max-width-from-tab' of github.com:fra…

89c294f

…ncinelucca/carbon into 11766-tabs-remove-max-width-from-tab

docs(tabs): format

bd83c89

francinelucca requested review from tay1orjones and andreancardona March 1, 2023 20:51

Merge branch 'main' into 11766-tabs-remove-max-width-from-tab

bda7945

francinelucca added the status: ready for review 👀 label Mar 2, 2023

tay1orjones approved these changes Mar 3, 2023

View reviewed changes

tay1orjones added the status: one more review 👀 label Mar 3, 2023

Merge branch 'main' into 11766-tabs-remove-max-width-from-tab

b96cec1

andreancardona approved these changes Mar 3, 2023

View reviewed changes

Merge branch 'main' into 11766-tabs-remove-max-width-from-tab

48dabfb

andreancardona removed status: ready for review 👀 status: one more review 👀 labels Mar 3, 2023

andreancardona added the status: ready to merge 🎉 label Mar 3, 2023

Merge branch 'main' into 11766-tabs-remove-max-width-from-tab

a23a004

kodiakhq bot merged commit 05d64ad into carbon-design-system:main Mar 3, 2023

francinelucca deleted the 11766-tabs-remove-max-width-from-tab branch March 3, 2023 23:45

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

fix(tabs): remove max-width #13247

fix(tabs): remove max-width #13247

francinelucca commented Feb 27, 2023

netlify bot commented Feb 27, 2023 •

edited

Loading

andreancardona left a comment

netlify bot commented Feb 28, 2023 •

edited

Loading

tay1orjones commented Mar 1, 2023

francinelucca commented Mar 1, 2023 •

edited

Loading

tay1orjones Mar 3, 2023

francinelucca Mar 3, 2023

tay1orjones Mar 3, 2023 •

edited

Loading

fix(tabs): remove max-width #13247

fix(tabs): remove max-width #13247

Conversation

francinelucca commented Feb 27, 2023

Changelog

Testing / Reviewing

netlify bot commented Feb 27, 2023 • edited Loading

✅ Deploy Preview for carbon-components-react ready!

andreancardona left a comment

Choose a reason for hiding this comment

netlify bot commented Feb 28, 2023 • edited Loading

✅ Deploy Preview for carbon-elements ready!

tay1orjones commented Mar 1, 2023

francinelucca commented Mar 1, 2023 • edited Loading

tay1orjones Mar 3, 2023

Choose a reason for hiding this comment

francinelucca Mar 3, 2023

Choose a reason for hiding this comment

tay1orjones Mar 3, 2023 • edited Loading

Choose a reason for hiding this comment

netlify bot commented Feb 27, 2023 •

edited

Loading

netlify bot commented Feb 28, 2023 •

edited

Loading

francinelucca commented Mar 1, 2023 •

edited

Loading

tay1orjones Mar 3, 2023 •

edited

Loading