@carbon/styles 1.61.0-rc.0 → 1.61.0

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@carbon/styles",
   "description": "Styles for the Carbon Design System",
-  "version": "1.61.0-rc.0",
+  "version": "1.61.0",
   "license": "Apache-2.0",
   "repository": {
     "type": "git",
@@ -68,5 +68,5 @@
     "scss/**/*.css",
     "css/**/*.css"
   ],
-  "gitHead": "04d8d1c59329f12d94e4878e44d13c980eae68ac"
+  "gitHead": "4e8fc6f3f11f2946d6a4b7f3462be833a63115dc"
 }

package/scss/components/modal/_modal.scss

@@ -17,6 +17,7 @@
 @use '../../utilities/component-reset';
 @use '../../utilities/focus-outline' as *;
 @use '../../utilities/high-contrast-mode' as *;
+@use '../../utilities/update_fields_on_layer' as *;
 @use '../../utilities/z-index' as *;
 
 /// Modal styles
@@ -51,57 +52,7 @@
       }
     }
 
-    // Fluid inputs
-    .#{$prefix}--text-input--fluid .#{$prefix}--text-input,
-    .#{$prefix}--text-area--fluid .#{$prefix}--text-area__wrapper,
-    .#{$prefix}--text-area--fluid .#{$prefix}--text-area,
-    .#{$prefix}--search--fluid .#{$prefix}--search-input,
-    .#{$prefix}--select--fluid .#{$prefix}--select-input,
-    .#{$prefix}--text-area--fluid
-      .#{$prefix}--text-area__wrapper[data-invalid]
-      .#{$prefix}--text-area__divider
-      + .#{$prefix}--form-requirement,
-    .#{$prefix}--list-box__wrapper--fluid .#{$prefix}--list-box,
-    .#{$prefix}--list-box__wrapper--fluid.#{$prefix}--list-box__wrapper,
-    .#{$prefix}--number-input--fluid input[type='number'],
-    .#{$prefix}--number-input--fluid .#{$prefix}--number__control-btn::before,
-    .#{$prefix}--number-input--fluid .#{$prefix}--number__control-btn::after,
-    .#{$prefix}--date-picker--fluid
-      .c#{$prefix}ds--date-picker-input__wrapper
-      .#{$prefix}--date-picker__input {
-      background-color: $field-01;
-    }
-
-    // Override to align layer token with field
-    .#{$prefix}--list-box__wrapper--fluid .#{$prefix}--list-box__menu {
-      background-color: $layer-01;
-    }
-
-    .#{$prefix}--list-box__menu-item:hover {
-      background-color: $layer-hover-02;
-    }
-
-    .#{$prefix}--list-box__menu-item--active {
-      background-color: $layer-selected-02;
-    }
-
-    .#{$prefix}--list-box__menu-item--active:hover {
-      background-color: $layer-selected-hover-02;
-    }
-
-    .#{$prefix}--number-input--fluid
-      .#{$prefix}--number__control-btn:hover::before,
-    .#{$prefix}--number-input--fluid
-      .#{$prefix}--number__control-btn:hover::after {
-      background-color: $field-hover;
-    }
-
-    .#{$prefix}--number-input--fluid
-      .#{$prefix}--number__control-btn:focus::before,
-    .#{$prefix}--number-input--fluid
-      .#{$prefix}--number__control-btn:focus::after {
-      border-inline-start: 2px solid $focus;
-    }
+    @include update_fields_on_layer;
   }
 
   .#{$prefix}--modal.is-visible .#{$prefix}--modal-container {

package/scss/components/tabs/_tabs.scss

@@ -20,6 +20,7 @@
 @use '../../spacing' as *;
 @use '../../motion' as *;
 @use '../../layer' as *;
+@use '../../layer/layer-tokens';
 @use '../../utilities/focus-outline' as *;
 @use '../../utilities/rotate' as *;
 @use '../../utilities/box-shadow' as *;
@@ -32,6 +33,7 @@
 @use '../../utilities/high-contrast-mode' as *;
 @use '../../utilities/convert';
 @use '../../utilities/layout';
+@use '../../utilities/update_fields_on_layer' as *;
 
 /// Tabs styles
 /// @access public
@@ -59,6 +61,7 @@
     inline-size: 100%;
     max-block-size: custom-property.get-var('layout-size-height-xl');
     min-block-size: layout.size('height');
+    overflow-x: hidden;
 
     &.#{$prefix}--tabs--contained {
       @include layout.use('size', $min: 'sm', $max: 'xl', $default: 'lg');
@@ -77,6 +80,42 @@
       }
     }
 
+    &.#{$prefix}--tabs--vertical {
+      background: $layer;
+      box-shadow: inset -1px 0 $border-subtle;
+      grid-column: span 2;
+      max-block-size: none;
+
+      @include breakpoint(lg) {
+        grid-column: span 4;
+      }
+
+      .#{$prefix}--tab--list {
+        flex-direction: column;
+        inline-size: 100%;
+        overflow-x: visible;
+        overflow-y: auto;
+      }
+
+      .#{$prefix}--tab--list-gradient_bottom {
+        position: absolute;
+        background: linear-gradient(to bottom, transparent, $layer);
+        block-size: $spacing-10;
+        inset-block-end: 0;
+        inset-inline: 0;
+        pointer-events: none;
+      }
+
+      .#{$prefix}--tab--list-gradient_top {
+        position: absolute;
+        background: linear-gradient(to top, transparent, $layer);
+        block-size: $spacing-10;
+        inset-block-start: 0;
+        inset-inline: 0;
+        pointer-events: none;
+      }
+    }
+
     .#{$prefix}--tabs__nav {
       @include component-reset.reset;
 
@@ -283,7 +322,18 @@
       margin-inline-start: 0;
     }
 
-    &.#{$prefix}--tabs--contained
+    &.#{$prefix}--tabs--vertical .#{$prefix}--tabs__nav-item {
+      flex: none;
+      background-color: $layer-01;
+      block-size: $spacing-10;
+      border-block-end: 1px solid $border-subtle;
+      border-inline-end: 1px solid $border-subtle;
+      box-shadow: inset 3px 0 0 0 $border-subtle;
+      inline-size: 100%;
+      margin-inline-start: 0;
+    }
+
+    &.#{$prefix}--tabs--contained:not(.#{$prefix}--tabs--vertical)
       .#{$prefix}--tabs__nav-item--selected
       + div
       + .#{$prefix}--tabs__nav-item {
@@ -432,7 +482,8 @@
       }
     }
 
-    &.#{$prefix}--tabs--contained .#{$prefix}--tabs__nav-link {
+    &.#{$prefix}--tabs--contained:not(.#{$prefix}--tabs--vertical)
+      .#{$prefix}--tabs__nav-link {
       border-block-end: 0;
       padding-inline: layout.density('padding-inline');
     }
@@ -449,6 +500,11 @@
       min-block-size: convert.to-rem(16px);
     }
 
+    &.#{$prefix}--tabs--vertical:not(.#{$prefix}--tabs--tall)
+      .#{$prefix}--tabs__nav-item-label {
+      line-height: var(--cds-body-compact-01-line-height);
+    }
+
     //-----------------------------
     // Icon Item
     //-----------------------------
@@ -492,6 +548,16 @@
       color: $text-primary;
     }
 
+    &.#{$prefix}--tabs--vertical
+      .#{$prefix}--tabs__nav-item:not(
+        .#{$prefix}--tabs__nav-item--selected
+      ):not(.#{$prefix}--tabs__nav-item--disabled):not(
+        .#{$prefix}--tabs__nav-item--hover-off
+      ):hover {
+      background-color: $layer-hover;
+      box-shadow: inset 3px 0 0 0 $border-strong;
+    }
+
     //-----------------------------
     // Item Selected
     //-----------------------------
@@ -512,6 +578,13 @@
       box-shadow: inset 0 2px 0 0 $border-interactive;
     }
 
+    &.#{$prefix}--tabs--vertical
+      .#{$prefix}--tabs__nav-item.#{$prefix}--tabs__nav-item--selected {
+      border-inline: none;
+      // Draws the border without affecting the inner-content
+      box-shadow: inset 3px 0 0 0 $border-interactive;
+    }
+
     &.#{$prefix}--tabs--contained .#{$prefix}--tabs__nav-item--selected,
     .#{$prefix}--tabs__nav-item--selected,
     .#{$prefix}--tabs__nav-item--selected:focus
@@ -572,6 +645,14 @@
       background-color: button.$button-disabled;
     }
 
+    &.#{$prefix}--tabs--vertical
+      .#{$prefix}--tabs__nav-item.#{$prefix}--tabs__nav-item--disabled,
+    &.#{$prefix}--tabs--vertical
+      .#{$prefix}--tabs__nav-item.#{$prefix}--tabs__nav-item--disabled:hover {
+      background-color: $layer;
+      border-block-end: 1px solid $border-subtle;
+    }
+
     .#{$prefix}--tabs__nav-item--disabled:focus,
     .#{$prefix}--tabs__nav-item--disabled:active {
       border-block-end: $tab-underline-disabled;
@@ -600,7 +681,8 @@
       border-block-end-color: $border-subtle;
     }
 
-    &.#{$prefix}--tabs--contained .#{$prefix}--tabs__nav-item--disabled {
+    &.#{$prefix}--tabs--contained:not(.#{$prefix}--tabs--vertical)
+      .#{$prefix}--tabs__nav-item--disabled {
       border-block-end: none;
       color: $text-on-color-disabled;
     }
@@ -618,6 +700,21 @@
 
   .#{$prefix}--tabs--contained ~ .#{$prefix}--tab-content {
     background: $layer;
+
+    > * {
+      @include layer-tokens.emit-layer-tokens(2);
+    }
+  }
+
+  .#{$prefix}--tabs--vertical ~ .#{$prefix}--tab-content {
+    @include update_fields_on_layer;
+
+    grid-column: 3/-1;
+    overflow-y: auto;
+
+    @include breakpoint(lg) {
+      grid-column: 5/-1;
+    }
   }
 
   .#{$prefix}--tab-content--interactive {
@@ -690,3 +787,16 @@
     }
   }
 }
+
+.#{$prefix}--tabs.#{$prefix}--tabs--vertical {
+  .#{$prefix}--tabs__nav-link {
+    .#{$prefix}--tabs__nav-item-label {
+      display: -webkit-box;
+      overflow: hidden;
+      -webkit-box-orient: vertical;
+      -webkit-line-clamp: 2;
+      text-overflow: ellipsis;
+      white-space: normal;
+    }
+  }
+}

package/scss/utilities/_update_fields_on_layer.scss

@@ -0,0 +1,66 @@
+//
+// Copyright IBM Corp. 2021
+//
+// This source code is licensed under the Apache-2.0 license found in the
+// LICENSE file in the root directory of this source tree.
+//
+
+@use '../config' as *;
+@use '../theme' as *;
+
+/// Update tokens when fields are placed on `layer`
+/// @access public
+/// @group utilities
+@mixin update_fields_on_layer {
+  // Fluid inputs
+  .#{$prefix}--text-input--fluid .#{$prefix}--text-input,
+  .#{$prefix}--text-area--fluid .#{$prefix}--text-area__wrapper,
+  .#{$prefix}--text-area--fluid .#{$prefix}--text-area,
+  .#{$prefix}--search--fluid .#{$prefix}--search-input,
+  .#{$prefix}--select--fluid .#{$prefix}--select-input,
+  .#{$prefix}--text-area--fluid
+    .#{$prefix}--text-area__wrapper[data-invalid]
+    .#{$prefix}--text-area__divider
+    + .#{$prefix}--form-requirement,
+  .#{$prefix}--list-box__wrapper--fluid .#{$prefix}--list-box,
+  .#{$prefix}--list-box__wrapper--fluid.#{$prefix}--list-box__wrapper,
+  .#{$prefix}--number-input--fluid input[type='number'],
+  .#{$prefix}--number-input--fluid .#{$prefix}--number__control-btn::before,
+  .#{$prefix}--number-input--fluid .#{$prefix}--number__control-btn::after,
+  .#{$prefix}--date-picker--fluid
+    .c#{$prefix}ds--date-picker-input__wrapper
+    .#{$prefix}--date-picker__input {
+    background-color: $field-01;
+  }
+
+  // Override to align layer token with field
+  .#{$prefix}--list-box__wrapper--fluid .#{$prefix}--list-box__menu {
+    background-color: $layer-01;
+  }
+
+  .#{$prefix}--list-box__menu-item:hover {
+    background-color: $layer-hover-02;
+  }
+
+  .#{$prefix}--list-box__menu-item--active {
+    background-color: $layer-selected-02;
+  }
+
+  .#{$prefix}--list-box__menu-item--active:hover {
+    background-color: $layer-selected-hover-02;
+  }
+
+  .#{$prefix}--number-input--fluid
+    .#{$prefix}--number__control-btn:hover::before,
+  .#{$prefix}--number-input--fluid
+    .#{$prefix}--number__control-btn:hover::after {
+    background-color: $field-hover;
+  }
+
+  .#{$prefix}--number-input--fluid
+    .#{$prefix}--number__control-btn:focus::before,
+  .#{$prefix}--number-input--fluid
+    .#{$prefix}--number__control-btn:focus::after {
+    border-inline-start: 2px solid $focus;
+  }
+}