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 <[email protected]> Co-authored-by: TJ Egan <[email protected]>
carbon-design-system · Jul 10, 2023 · 149d34d · 149d34d
1 parent fae184d
commit 149d34d
Show file tree

Hide file tree

Showing 3 changed files with 31 additions and 29 deletions.
diff --git 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 = () => (
  <Tabs>
- <TabList iconSize="default" aria-label="List of tabs">
+ <TabList aria-label="List of tabs">
  <IconTab label="Monster" disabled>
  <Monster aria-label="Monster" />
  </IconTab>

diff --git 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
@@ -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 {