From ebb80d6aaaf636c8583385662e6569cb891c9d67 Mon Sep 17 00:00:00 2001 From: Jan Hassel Date: Wed, 7 Jun 2023 16:30:40 +0200 Subject: [PATCH 1/2] feat(tabs): support contextual layout tokens (size & density)) --- packages/react/src/components/Tabs/Tabs.js | 3 +- .../react/src/components/Tabs/Tabs.stories.js | 2 +- .../scss/components/button/_mixins.scss | 5 +- .../styles/scss/components/tabs/_tabs.scss | 49 +++++++++---------- 4 files changed, 28 insertions(+), 31 deletions(-) diff --git a/packages/react/src/components/Tabs/Tabs.js b/packages/react/src/components/Tabs/Tabs.js index 7e11117bf0e7..0ffbf4945541 100644 --- a/packages/react/src/components/Tabs/Tabs.js +++ b/packages/react/src/components/Tabs/Tabs.js @@ -184,7 +184,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, }); diff --git a/packages/react/src/components/Tabs/Tabs.stories.js b/packages/react/src/components/Tabs/Tabs.stories.js index 362f4119916e..0e3025a32345 100644 --- a/packages/react/src/components/Tabs/Tabs.stories.js +++ b/packages/react/src/components/Tabs/Tabs.stories.js @@ -312,7 +312,7 @@ export const Icon20Only = () => ( export const IconOnly = () => ( - + diff --git a/packages/styles/scss/components/button/_mixins.scss b/packages/styles/scss/components/button/_mixins.scss index d67334557156..1c5ec165467d 100644 --- a/packages/styles/scss/components/button/_mixins.scss +++ b/packages/styles/scss/components/button/_mixins.scss @@ -21,10 +21,11 @@ $button-focus-color: custom-property.get-var('button-focus-color', $focus); @mixin button-base { // https://caniuse.com/mdn-css_types_length_lh - --temp-1lh: (var(--#{$prefix}-body-compact-01-line-height) * 1em); + --temp-1lh: (#{custom-property.get-var('body-compact-01-line-height')} * 1em); // -1px to compensate for border width --temp-padding-block-max: calc( - (var(--#{$prefix}-layout-size-height-lg) - var(--temp-1lh)) / 2 - #{rem(1px)} + (#{custom-property.get-var('layout-size-height-lg')} - var(--temp-1lh)) / 2 - + #{rem(1px)} ); @include component-reset.reset; diff --git a/packages/styles/scss/components/tabs/_tabs.scss b/packages/styles/scss/components/tabs/_tabs.scss index cf2e27ffefb9..7440f270fe4a 100644 --- a/packages/styles/scss/components/tabs/_tabs.scss +++ b/packages/styles/scss/components/tabs/_tabs.scss @@ -29,27 +29,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 { @@ -281,11 +291,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; } @@ -339,7 +344,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'); } //----------------------------- @@ -351,9 +356,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; @@ -368,9 +373,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) @@ -385,11 +389,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 //----------------------------- @@ -401,8 +400,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; @@ -412,10 +411,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 //----------------------------- @@ -554,7 +549,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'); @@ -585,7 +580,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 { From 5600f309bef4b537a448896c46e9a2e96ddd99f4 Mon Sep 17 00:00:00 2001 From: Jan Hassel Date: Fri, 9 Jun 2023 10:21:21 +0200 Subject: [PATCH 2/2] style(tabs): adjust label vertical position --- packages/styles/scss/components/tabs/_tabs.scss | 6 ++++++ 1 file changed, 6 insertions(+) diff --git a/packages/styles/scss/components/tabs/_tabs.scss b/packages/styles/scss/components/tabs/_tabs.scss index 7440f270fe4a..ac0f57d8c4c8 100644 --- a/packages/styles/scss/components/tabs/_tabs.scss +++ b/packages/styles/scss/components/tabs/_tabs.scss @@ -247,6 +247,12 @@ display: flex; } + &:not(.#{$prefix}--tabs--contained) + .#{$prefix}--tabs__nav-item-label-wrapper { + position: relative; + top: rem(1px); + } + //----------------------------- // Item //-----------------------------