@carbon/web-components 2.0.0-rc.1 → 2.0.0-rc.3

package/scss/components/search/search.scss

@@ -11,7 +11,6 @@ $css--plex: true !default;
 @use '@carbon/styles/scss/spacing' as *;
 @use '@carbon/styles/scss/theme' as *;
 @use '@carbon/styles/scss/utilities' as *;
-@use '@carbon/styles/scss/layer/layer-tokens';
 @use '@carbon/styles/scss/components/form';
 @use '@carbon/styles/scss/components/search' as *;
 
@@ -19,8 +18,6 @@ $css--plex: true !default;
 @include search;
 
 :host(#{$prefix}-search) {
-  @include layer-tokens.emit-layer-tokens(1);
-
   @extend .#{$prefix}--search;
 
   outline: none;
@@ -30,8 +27,36 @@ $css--plex: true !default;
   @extend .#{$prefix}--search--expandable;
 }
 
+:host(#{$prefix}-search[expandable][size='sm']) {
+  .#{$prefix}--search-magnifier {
+    width: $spacing-07;
+    height: $spacing-07;
+  }
+}
+
+:host(#{$prefix}-search[expandable][size='md']) {
+  .#{$prefix}--search-magnifier {
+    width: $spacing-08;
+    height: $spacing-08;
+  }
+}
+
+:host(#{$prefix}-search[expandable][size='lg']) {
+  .#{$prefix}--search-magnifier {
+    width: $spacing-09;
+    height: $spacing-09;
+  }
+}
+
 :host(#{$prefix}-search[expandable][expanded]) {
   @extend .#{$prefix}--search--expanded;
+
+  .#{$prefix}--search-input {
+    width: 100%;
+  }
+  .#{$prefix}--search-magnifier {
+    pointer-events: none;
+  }
 }
 
 :host(#{$prefix}-search[expandable][expanded][size='sm']) {
@@ -50,6 +75,11 @@ $css--plex: true !default;
   .#{$prefix}--search-input {
     padding: 0 $spacing-09;
   }
+
+  ::slotted(.#{$prefix}--search-magnifier) {
+    width: rem(48px);
+    height: rem(48px);
+  }
 }
 
 :host(#{$prefix}-search[disabled]) {

package/scss/components/select/select.scss

@@ -10,12 +10,9 @@ $css--plex: true !default;
 @use '@carbon/styles/scss/config' as *;
 @use '@carbon/styles/scss/spacing' as *;
 @use '@carbon/styles/scss/theme' as *;
-@use '@carbon/styles/scss/layer/layer-tokens';
 @use '@carbon/styles/scss/components/select';
 
 :host(#{$prefix}-select) {
-  @include layer-tokens.emit-layer-tokens(1);
-
   @extend .#{$prefix}--select;
 
   outline: none;

package/scss/components/slider/slider.scss

@@ -9,13 +9,12 @@ $css--plex: true !default;
 
 @use '@carbon/styles/scss/config' as *;
 @use '@carbon/styles/scss/theme' as *;
-@use '@carbon/styles/scss/layer/layer-tokens';
 @use '@carbon/styles/scss/components/slider';
+@use '../../globals/mixins/temp-layout' as *;
 
 :host(#{$prefix}-slider) {
-  @include layer-tokens.emit-layer-tokens(1);
-
   outline: none;
+  @include emit-layout-tokens();
 
   .#{$prefix}--slider {
     transform: rotate(0) #{'/*rtl:rotate(180deg)*/'};

package/scss/components/structured-list/structured-list.scss

@@ -12,16 +12,11 @@ $css--plex: true !default;
 @use '@carbon/styles/scss/spacing' as *;
 @use '@carbon/styles/scss/utilities' as *;
 @use '@carbon/styles/scss/theme' as *;
-@use '@carbon/styles/scss/layer/layer-tokens';
 @use '@carbon/styles/scss/components/structured-list/structured-list' as *;
 
 // https://github.com/carbon-design-system/carbon/issues/11408
 @include structured-list;
 
-:host(#{$prefix}-structured-list) {
-  @include layer-tokens.emit-layer-tokens(1);
-}
-
 .#{$prefix}--structured-list ::slotted(#{$prefix}-structured-list-head) {
   @extend .#{$prefix}--structured-list-thead;
 }

package/scss/components/tag/tag.scss

@@ -10,17 +10,23 @@ $css--plex: true !default;
 @use '@carbon/styles/scss/config' as *;
 @use '@carbon/styles/scss/utilities' as *;
 @use '@carbon/styles/scss/breakpoint' as *;
-@use '@carbon/styles/scss/layer/layer-tokens';
 @use '@carbon/styles/scss/components/tag/index' as *;
+@use '../../globals/mixins/temp-layout' as *;
 
 :host(#{$prefix}-tag) {
-  @include layer-tokens.emit-layer-tokens(1);
-
   @extend .#{$prefix}--tag;
+  @extend .#{$prefix}--layout--size-md;
+
+  @include emit-layout-tokens();
+  // tag overrides layout tokens
+  --cds-layout-size-height-xs: 1.125rem;
+  --cds-layout-size-height-sm: 1.125rem;
+  --cds-layout-size-height-md: 1.5rem;
 }
 
 :host(#{$prefix}-tag[size='sm']) {
   @extend .#{$prefix}--tag--sm;
+  @extend .#{$prefix}--layout--size-sm;
 
   .#{$prefix}--tag__close-icon {
     width: rem(18px);
@@ -30,8 +36,7 @@ $css--plex: true !default;
 }
 
 :host(#{$prefix}-tag[type='red']) {
-  // @extend .#{$prefix}--tag--red;
-  background-color: #{$tag-background-red};
+  @extend .#{$prefix}--tag--red;
 }
 
 :host(#{$prefix}-tag[type='magenta']) {

package/scss/components/text-input/text-input.scss

@@ -10,11 +10,11 @@ $css--plex: true !default;
 @use '@carbon/styles/scss/config' as *;
 @use '@carbon/styles/scss/spacing' as *;
 @use '@carbon/styles/scss/utilities' as *;
-@use '@carbon/styles/scss/layer/layer-tokens';
 @use '@carbon/styles/scss/components/text-input/index';
+@use '../../globals/mixins/temp-layout' as *;
 
 :host(#{$prefix}-text-input) {
-  @include layer-tokens.emit-layer-tokens(1);
+  @include emit-layout-tokens();
 
   // the base text-input class has a 100% so we need to propagate it up to the host element
   width: 100%;

package/scss/components/textarea/textarea.scss

@@ -7,12 +7,9 @@
 
 $css--plex: true !default;
 @use '@carbon/styles/scss/config' as *;
-@use '@carbon/styles/scss/layer/layer-tokens';
 @use '@carbon/styles/scss/components/text-area/index';
 
 :host(#{$prefix}-textarea) {
-  @include layer-tokens.emit-layer-tokens(1);
-
   outline: none;
 }
 

package/scss/components/tile/tile.scss

@@ -15,12 +15,11 @@ $css--plex: true !default;
 @use '@carbon/styles/scss/components/link/index' as *;
 @use '@carbon/styles/scss/components/form/index' as *;
 @use '@carbon/styles/scss/theme' as *;
-@use '@carbon/styles/scss/layer/layer-tokens';
+@use '../../globals/mixins/temp-layout' as *;
 
 :host(#{$prefix}-tile) {
   @extend .#{$prefix}--tile;
-
-  @include layer-tokens.emit-layer-tokens(1);
+  @include emit-layout-tokens();
 
   ::slotted(.#{$prefix}--link) {
     @extend .#{$prefix}--link;
@@ -38,7 +37,7 @@ $css--plex: true !default;
 }
 
 :host(#{$prefix}-clickable-tile) {
-  @include layer-tokens.emit-layer-tokens(1);
+  @include emit-layout-tokens();
 
   display: grid;
   outline: none;
@@ -71,7 +70,7 @@ $css--plex: true !default;
 }
 
 :host(#{$prefix}-radio-tile) {
-  @include layer-tokens.emit-layer-tokens(1);
+  @include emit-layout-tokens();
 
   display: block;
   outline: none;
@@ -80,7 +79,7 @@ $css--plex: true !default;
 }
 
 :host(#{$prefix}-selectable-tile) {
-  @include layer-tokens.emit-layer-tokens(1);
+  @include emit-layout-tokens();
 
   display: content;
   outline: none;
@@ -100,10 +99,9 @@ $css--plex: true !default;
 }
 
 :host(#{$prefix}-expandable-tile) {
-  @include layer-tokens.emit-layer-tokens(1);
-
   @extend .#{$prefix}--tile;
   @extend .#{$prefix}--tile--expandable;
+  @include emit-layout-tokens();
 
   ::slotted(#{$prefix}-tile-above-the-fold-content) {
     @extend .#{$prefix}--tile-content__above-the-fold;
@@ -125,6 +123,7 @@ $css--plex: true !default;
   ::slotted(#{$prefix}-tile-below-the-fold-content) {
     opacity: 1;
     transition: $duration-fast-02 motion(standard, productive);
+    visibility: visible;
   }
 }
 

package/scss/components/tooltip/tooltip.scss

@@ -14,7 +14,7 @@
 
 // For some reason `#{prefix}-tooltip` doesn't work here, will need to investigate
 
-:host(cds-tooltip[data-table]) {
+:host(#{$prefix}-tooltip[data-table]) {
   display: contents;
 
   &:hover {
@@ -24,14 +24,14 @@
   }
 }
 
-:host(cds-tooltip[data-table][size='xs']),
-:host(cds-tooltip[data-table][size='sm']) {
+:host(#{$prefix}-tooltip[data-table][size='xs']),
+:host(#{$prefix}-tooltip[data-table][size='sm']) {
   ::slotted(button) {
     height: calc(100% + 1px) !important;
   }
 }
 
-:host(cds-tooltip[toolbar-action]) {
+:host(#{$prefix}-tooltip[toolbar-action]) {
   ::slotted(button) {
     outline: none !important;
   }

package/scss/components/ui-shell/header.scss

@@ -11,18 +11,20 @@ $css--plex: true !default;
 @use '@carbon/styles/scss/breakpoint' as *;
 @use '@carbon/styles/scss/spacing' as *;
 @use '@carbon/styles/scss/theme' as *;
+@use '@carbon/styles/scss/utilities' as *;
 @use '@carbon/styles/scss/components/button';
 @use '@carbon/styles/scss/components/popover/index';
 @use '@carbon/styles/scss/components/tooltip';
 @use '@carbon/styles/scss/components/ui-shell/header';
 @use '@carbon/styles/scss/components/ui-shell/header-panel';
 @use '@carbon/styles/scss/components/ui-shell/switcher';
-@use '@carbon/styles/scss/layer/layer-tokens';
 
 :host(#{$prefix}-header) {
   @extend .#{$prefix}--header;
 
-  @include layer-tokens.emit-layer-tokens(1);
+  ::slotted(.#{$prefix}--header__global) {
+    @extend .#{$prefix}--header__global;
+  }
 }
 
 :host(#{$prefix}-header-nav) {
@@ -93,6 +95,10 @@ $css--plex: true !default;
   &:hover ::slotted(svg) {
     fill: $icon-primary;
   }
+
+  .#{$prefix}--popover {
+    z-index: 8001;
+  }
 }
 
 :host(#{$prefix}-header-nav-item),
@@ -134,7 +140,7 @@ $css--plex: true !default;
   @extend .#{$prefix}--header-panel;
 }
 
-:host(#{$prefix}-header-panel) {
+:host(#{$prefix}-header-panel[expanded]) {
   @extend .#{$prefix}--header-panel--expanded;
 }
 
@@ -150,6 +156,10 @@ $css--plex: true !default;
   }
 }
 
+:host(#{$prefix}-switcher-item:nth-child(1)) {
+  margin-top: $spacing-05;
+}
+
 :host(#{$prefix}-switcher-divider) {
   @extend .#{$prefix}--switcher__item--divider;
 }

package/scss/components/ui-shell/side-nav.scss

@@ -12,11 +12,6 @@ $css--plex: true !default;
 @use '@carbon/styles/scss/spacing' as *;
 @use '@carbon/styles/scss/theme' as *;
 @use '@carbon/styles/scss/components/ui-shell/side-nav';
-@use '@carbon/styles/scss/layer/layer-tokens';
-
-:host(#{$prefix}-side-nav) {
-  @include layer-tokens.emit-layer-tokens(1);
-}
 
 :host(#{$prefix}-side-nav[expanded]) ::slotted(#{$prefix}-side-nav-items) {
   overflow-y: auto;

package/scss/globals/mixins/temp-layout.scss

@@ -0,0 +1,36 @@
+/**
+ * Copyright IBM Corp. 2016, 2023
+ *
+ * This source code is licensed under the Apache-2.0 license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+// TODO: remove this file once https://github.com/carbon-design-system/carbon/pull/14336 is in
+@use '@carbon/styles/scss/layout' as *;
+@use '@carbon/styles/scss/utilities/custom-property';
+
+@mixin emit-layout-tokens {
+  @each $group, $properties in $layout-tokens {
+    @each $property, $steps in $properties {
+      @each $step, $value in $steps {
+        @include custom-property.declaration(
+          'layout-#{$group}-#{$property}-#{$step}',
+          $value
+        );
+      }
+
+      // CSS max() doesn't accept '0' as a value without a unit
+      // stylelint-disable length-zero-no-unit
+      @include custom-property.declaration(
+        'layout-#{$group}-#{$property}-min',
+        0px
+      );
+      // stylelint-enable length-zero-no-unit
+
+      @include custom-property.declaration(
+        'layout-#{$group}-#{$property}-max',
+        999999999px
+      );
+    }
+  }
+}