From 149d34df357e21c31b729e57db699c1f02cdf78e Mon Sep 17 00:00:00 2001 From: Jan Hassel Date: Mon, 10 Jul 2023 09:30:36 +0200 Subject: [PATCH] feat(tabs): support contextual layout tokens (size & density) (#13951) * feat(tabs): support contextual layout tokens (size & density)) * style(tabs): adjust label vertical position --------- Co-authored-by: Francine Lucca <40550942+francinelucca@users.noreply.github.com> Co-authored-by: TJ Egan --- .../react/src/components/Tabs/Tabs.stories.js | 2 +- packages/react/src/components/Tabs/Tabs.tsx | 3 +- .../styles/scss/components/tabs/_tabs.scss | 55 ++++++++++--------- 3 files changed, 31 insertions(+), 29 deletions(-) diff --git a/packages/react/src/components/Tabs/Tabs.stories.js b/packages/react/src/components/Tabs/Tabs.stories.js index e7dbe552363e..2961586907c7 100644 --- a/packages/react/src/components/Tabs/Tabs.stories.js +++ b/packages/react/src/components/Tabs/Tabs.stories.js @@ -313,7 +313,7 @@ export const Icon20Only = () => ( export const IconOnly = () => ( - + diff --git a/packages/react/src/components/Tabs/Tabs.tsx b/packages/react/src/components/Tabs/Tabs.tsx index 2d4d18795b34..873f8aba7803 100644 --- a/packages/react/src/components/Tabs/Tabs.tsx +++ b/packages/react/src/components/Tabs/Tabs.tsx @@ -348,7 +348,8 @@ function TabList({ [`${prefix}--tabs--contained`]: contained, [`${prefix}--tabs--light`]: light, [`${prefix}--tabs__icon--default`]: iconSize === 'default', - [`${prefix}--tabs__icon--lg`]: iconSize === 'lg', + [`${prefix}--tabs__icon--lg`]: iconSize === 'lg', // TODO: V12 - Remove this class + [`${prefix}--layout--size-lg`]: iconSize === 'lg', [`${prefix}--tabs--tall`]: hasSecondaryLabelTabs, [`${prefix}--tabs--full-width`]: distributeWidth, }, diff --git a/packages/styles/scss/components/tabs/_tabs.scss b/packages/styles/scss/components/tabs/_tabs.scss index 67d4a4127c1a..9e894f1484be 100644 --- a/packages/styles/scss/components/tabs/_tabs.scss +++ b/packages/styles/scss/components/tabs/_tabs.scss @@ -31,27 +31,37 @@ @use '../../utilities/button-reset'; @use '../../utilities/high-contrast-mode' as *; @use '../../utilities/convert' as *; - -$icon-tab-size: custom-property.get-var('icon-tab-size', rem(40px)); +@use '../../utilities/layout'; /// Tabs styles /// @access public /// @group tabs @mixin tabs { + .#{$prefix}--tabs, + .#{$prefix}--tab-content { + @include layout.use('density', $default: 'normal'); + } + + .#{$prefix}--tabs.#{$prefix}--tabs--tall, + .#{$prefix}--tabs.#{$prefix}--tabs--contained.#{$prefix}--tabs--tall { + @include layout.use('size', $min: 'lg', $max: 'xl', $default: 'xl'); + } + .#{$prefix}--tabs { @include reset; @include type-style('body-compact-01'); + @include layout.use('size', $min: 'sm', $max: 'lg', $default: 'md'); position: relative; display: flex; width: 100%; height: auto; - min-height: rem(40px); - max-height: 4rem; + min-height: layout.size('height'); + max-height: custom-property.get-var('layout-size-height-xl'); color: $text-primary; &.#{$prefix}--tabs--contained { - min-height: rem(48px); + @include layout.use('size', $min: 'sm', $max: 'xl', $default: 'lg'); } .#{$prefix}--tab--list { @@ -241,6 +251,12 @@ $icon-tab-size: custom-property.get-var('icon-tab-size', rem(40px)); display: flex; } + &:not(.#{$prefix}--tabs--contained) + .#{$prefix}--tabs__nav-item-label-wrapper { + position: relative; + top: rem(1px); + } + //----------------------------- // Item //----------------------------- @@ -285,11 +301,6 @@ $icon-tab-size: custom-property.get-var('icon-tab-size', rem(40px)); .#{$prefix}--tabs__nav-item:not(.#{$prefix}--tabs__nav-item--disabled) .#{$prefix}--tabs__nav-item--icon .#{$prefix}--tabs__nav-item--close-icon { - padding: $spacing-05; - margin-top: -$spacing-03; - margin-right: -$spacing-05; - margin-left: -$spacing-05; - &:hover { background-color: inherit; } @@ -343,7 +354,7 @@ $icon-tab-size: custom-property.get-var('icon-tab-size', rem(40px)); } &.#{$prefix}--tabs--contained .#{$prefix}--tabs__nav-item--icon { - padding-left: $spacing-05; + padding-inline-start: layout.density('padding-inline'); } //----------------------------- @@ -355,9 +366,9 @@ $icon-tab-size: custom-property.get-var('icon-tab-size', rem(40px)); @include type-style('body-compact-01'); overflow: hidden; - padding: $spacing-04 $spacing-05 $spacing-03; border-bottom: $tab-underline-color; color: $text-secondary; + padding-inline: layout.density('padding-inline'); text-align: left; text-decoration: none; text-overflow: ellipsis; @@ -372,9 +383,8 @@ $icon-tab-size: custom-property.get-var('icon-tab-size', rem(40px)); } &.#{$prefix}--tabs--contained .#{$prefix}--tabs__nav-link { - height: rem(48px); - padding: $spacing-03 $spacing-05; border-bottom: 0; + padding-inline: layout.density('padding-inline'); } &.#{$prefix}--tabs--contained:not(.#{$prefix}--tabs--tall) @@ -389,11 +399,6 @@ $icon-tab-size: custom-property.get-var('icon-tab-size', rem(40px)); min-height: rem(16px); } - &.#{$prefix}--tabs--contained.#{$prefix}--tabs--tall - .#{$prefix}--tabs__nav-link { - height: rem(64px); - } - //----------------------------- // Icon Item //----------------------------- @@ -405,8 +410,8 @@ $icon-tab-size: custom-property.get-var('icon-tab-size', rem(40px)); .#{$prefix}--tabs__nav-item--icon-only, &.#{$prefix}--tabs--contained .#{$prefix}--tabs__nav-item--icon-only { display: flex; - width: $icon-tab-size; - height: $icon-tab-size; + width: layout.size('height'); + height: layout.size('height'); align-items: center; justify-content: center; padding: 0; @@ -416,10 +421,6 @@ $icon-tab-size: custom-property.get-var('icon-tab-size', rem(40px)); } } - &.#{$prefix}--tabs__icon--lg { - @include custom-property.declaration('icon-tab-size', rem(48px)); - } - //----------------------------- // Item Hover //----------------------------- @@ -558,7 +559,7 @@ $icon-tab-size: custom-property.get-var('icon-tab-size', rem(40px)); // Tab Content Container //----------------------------- .#{$prefix}--tab-content { - padding: $spacing-05; + padding: layout.density('padding-inline'); &:focus { @include focus-outline('outline'); @@ -589,7 +590,7 @@ $icon-tab-size: custom-property.get-var('icon-tab-size', rem(40px)); width: 10rem; height: 100%; align-items: center; - padding: 0 1rem; + padding: 0 layout.density('padding-inline'); } .#{$prefix}--tabs.#{$prefix}--skeleton .#{$prefix}--tabs__nav-link span {