feat(tabs): support contextual layout tokens (size & density) (carbon…

…-design-system#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]>
tw15egan · 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 {