@carbon/web-components 2.0.0-beta.3 → 2.0.0-beta.5

package/scss/components/code-snippet/code-snippet.scss

@@ -13,6 +13,7 @@ $css--plex: true !default;
 @use '@carbon/styles/scss/spacing' as *;
 @use '@carbon/styles/scss/motion' as *;
 @use '@carbon/styles/scss/utilities' as *;
+@use '@carbon/styles/scss/layer/layer-tokens';
 @use '@carbon/styles/scss/components/code-snippet/code-snippet' as *;
 @use '@carbon/styles/scss/components/copy-button/copy-button';
 
@@ -21,140 +22,123 @@ $css--plex: true !default;
 
 :host(#{$prefix}-code-snippet),
 :host(#{$prefix}-code-snippet-skeleton) {
-  @extend .#{$prefix}--snippet--single;
+  @extend .#{$prefix}--snippet;
 
-  outline: none;
+  @include layer-tokens.emit-layer-tokens(1);
 
-  &::after {
-    background-color: $layer-01;
-    background-image: none;
-    mask-image: linear-gradient(to right, transparent 0%, $layer-01 100%);
-    @media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {
-      background-color: transparent;
-      background-image: linear-gradient(to right, transparent, $layer-01);
-    }
+  .#{$prefix}--snippet-container {
+    @extend .#{$prefix}--snippet-container;
   }
+}
 
-  .#{$prefix}--snippet-button .#{$prefix}--btn--copy__feedback {
-    left: 50%;
-    right: auto;
-  }
+:host(#{$prefix}-code-snippet[disabled]) {
+  @extend .#{$prefix}--snippet--disabled;
+}
 
-  .#{$prefix}--snippet-container {
-    display: flex;
-    align-items: center;
-    overflow-x: auto;
-    position: relative;
-    height: 100%;
+:host(#{$prefix}-code-snippet[wrap-text]) {
+  pre {
+    white-space: pre-wrap;
+    word-wrap: break-word;
   }
+}
 
-  .#{$prefix}--snippet-btn--expand {
-    z-index: 1;
-    min-height: rem(40px);
-  }
+:host(#{$prefix}-code-snippet[hide-copy-button]) {
+  @extend .#{$prefix}--snippet--no-copy;
+}
+
+:host(#{$prefix}-code-snippet-skeleton[type='single']),
+:host(#{$prefix}-code-snippet[type='single']) {
+  @extend .#{$prefix}--snippet--single;
+}
 
+:host(#{$prefix}-code-snippet[type='single']) {
   pre {
     white-space: nowrap;
-    @include type-style('code-01');
+  }
 
-    padding-right: $spacing-03;
+  #{$prefix}-copy-button {
+    @extend .#{$prefix}--snippet, .#{$prefix}--popover-container;
+
+    code: {
+      overflow: hidden;
+    }
   }
 }
 
-// TODO: deprecate light color scheme
-// :host(#{$prefix}-code-snippet[color-scheme='light']) {
-//   background-color: $layer-02;
-
-//   button.#{$prefix}--btn.#{$prefix}--snippet-btn--expand {
-//     background-color: $layer-02;
-//   }
+#{$prefix}-copy {
+  code {
+    padding: 0 $spacing-03;
+    @include type-style('code-01');
+  }
+}
 
-//   &:hover {
-//     background-color: $hover-ui-light;
-//   }
+:host(#{$prefix}-code-snippet-skeleton[type='multi']),
+:host(#{$prefix}-code-snippet[type='multi']) {
+  @extend .#{$prefix}--snippet--multi;
+}
 
-//   .#{$prefix}--snippet-button:hover,
-//   button.#{$prefix}--btn.#{$prefix}--snippet-btn--expand:hover {
-//     background-color: $hover-ui-light;
-//   }
-// }
+:host(#{$prefix}-code-snippet[type='multi']) {
+  .#{$prefix}--snippet-container {
+    padding: 0;
 
-:host(#{$prefix}-code-snippet[type='multi']),
-:host(#{$prefix}-code-snippet-skeleton[type='multi']) {
-  @extend .#{$prefix}--snippet--multi;
+    @extend .#{$prefix}--snippet--multi, .#{$prefix}--snippet-container;
+  }
 
-  height: auto;
+  pre {
+    margin: 0;
+    padding: 0 $spacing-08 $spacing-06 0;
+    overflow-x: auto;
+  }
 
-  &::after {
+  pre::after {
     position: absolute;
+    top: 0;
+    right: 0;
+    width: rem(16px);
+    height: 100%;
+    background-image: linear-gradient(to right, transparent, $layer);
     content: '';
-    left: 0;
-    top: auto;
-    bottom: rem(16px);
-    width: 100%;
-    height: rem(16px);
-    background-color: $layer-01;
-    background-image: none;
-    mask-image: linear-gradient(to bottom, transparent 0%, $layer-01 100%);
-    @media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {
-      background-color: transparent;
-      background-image: linear-gradient(to bottom, transparent, $layer-01);
-    }
   }
 
-  .#{$prefix}--snippet-container {
-    display: block;
-    overflow: hidden;
-    position: relative;
-    height: auto;
-    padding-bottom: 0;
-    max-height: rem(238px);
-    min-height: rem(56px);
-    transition: max-height $duration-moderate-01 motion(standard, productive);
-
-    pre {
-      overflow: hidden;
-      padding-bottom: rem(24px);
-      white-space: pre;
-      padding-right: 0;
-
-      &::after {
-        // Use top-level pseudo element instead because `<pre>` here is inside a scrolling container
-        content: none;
-      }
+  #{$prefix}-button {
+    .#{$prefix}--snippet__icon {
+      margin-left: $spacing-03;
+    }
 
-      code {
-        overflow: hidden;
+    &[disabled] {
+      .#{$prefix}--snippet-btn--text {
+        color: $text-disabled;
       }
     }
   }
 
-  .#{$prefix}-ce--snippet-container--expanded {
-    max-height: rem(1500px);
+  #{$prefix}-copy-button {
+    position: absolute;
+    top: 0.5rem;
+    right: 0.5rem;
+  }
+}
+
+:host(#{$prefix}-code-snippet[type='multi'][expanded-code]) {
+  .#{$prefix}--snippet-container {
+    padding-bottom: $spacing-05;
     transition: max-height $duration-moderate-01 motion(standard, productive);
+  }
 
-    pre {
-      overflow-x: auto;
+  #{$prefix}-button {
+    .#{$prefix}--snippet__icon {
+      transform: rotate(180deg);
+      transition: transform $transition-expansion;
     }
   }
 }
 
-:host(#{$prefix}-code-snippet[type='inline']) {
-  display: inline-flex;
-  width: auto;
-  height: auto;
-  min-width: auto;
-  max-width: auto;
-  padding: 0;
-
-  &::after {
-    content: none;
-  }
+:host(#{$prefix}-code-snippet-skeleton[type='single']) {
+  @extend .#{$prefix}--snippet--single, .#{$prefix}--skeleton;
+}
 
-  .#{$prefix}--btn--copy__feedback {
-    // Half of the diagonal line of `0.6rem` square
-    top: rem(6.7882px);
-  }
+:host(#{$prefix}-code-snippet-skeleton[type='multi']) {
+  @extend .#{$prefix}--snippet--multi, .#{$prefix}--skeleton;
 }
 
 :host(#{$prefix}-code-snippet-skeleton) {

package/scss/components/combo-box/combo-box.scss

@@ -11,6 +11,7 @@ $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/combo-box/combo-box';
 @use '@carbon/styles/scss/components/form';
 @use '@carbon/styles/scss/components/text-input/text-input';
@@ -19,6 +20,8 @@ $css--plex: true !default;
 :host(#{$prefix}-combo-box) {
   @extend :host(#{$prefix}-dropdown);
 
+  @include layer-tokens.emit-layer-tokens(1);
+
   outline: none;
 
   .#{$prefix}--assistive-text {
@@ -39,24 +42,24 @@ $css--plex: true !default;
     top: 100%;
     margin-top: 1px;
   }
+}
 
-  &[isClosable] {
-    .#{$prefix}--list-box__invalid-icon {
-      right: rem(66px) !important;
-    }
+:host(#{$prefix}-combo-box[isClosable]) {
+  .#{$prefix}--list-box__invalid-icon {
+    right: rem(66px) !important;
   }
+}
 
-  &[disabled],
-  &[read-only] {
-    .#{$prefix}--list-box__selection {
-      pointer-events: none;
-    }
+:host(#{$prefix}-combo-box[disabled]),
+:host(#{$prefix}-combo-box[read-only]) {
+  .#{$prefix}--list-box__selection {
+    pointer-events: none;
   }
+}
 
-  &[read-only] {
-    .#{$prefix}--list-box__selection svg {
-      fill: $icon-disabled;
-    }
+:host(#{$prefix}-combo-box[read-only]) {
+  .#{$prefix}--list-box__selection svg {
+    fill: $icon-disabled;
   }
 }
 
@@ -68,46 +71,46 @@ $css--plex: true !default;
   .#{$prefix}--list-box__menu-item__option {
     height: auto;
   }
+}
 
-  &[disabled] {
-    .#{$prefix}--list-box__menu-item__option {
-      color: $text-disabled;
-      text-decoration: none;
-    }
+:host(#{$prefix}-combo-box-item[disabled]) {
+  .#{$prefix}--list-box__menu-item__option {
+    color: $text-disabled;
+    text-decoration: none;
   }
+}
 
-  &[highlighted] {
-    @extend .#{$prefix}--list-box__menu-item--highlighted;
-  }
+:host(#{$prefix}-combo-box-item[highlighted]) {
+  @extend .#{$prefix}--list-box__menu-item--highlighted;
+}
 
-  &[selected] {
-    @extend .#{$prefix}--list-box__menu-item--active;
-    @extend .#{$prefix}--list-box__menu-item--highlighted;
+:host(#{$prefix}-combo-box-item[selected]) {
+  @extend .#{$prefix}--list-box__menu-item--active;
+  @extend .#{$prefix}--list-box__menu-item--highlighted;
 
-    .#{$prefix}--list-box__menu-item__option {
-      color: $text-primary;
-    }
+  .#{$prefix}--list-box__menu-item__option {
+    color: $text-primary;
+  }
 
-    .#{$prefix}--list-box__menu-item__selected-icon {
-      display: block;
-    }
+  .#{$prefix}--list-box__menu-item__selected-icon {
+    display: block;
   }
+}
 
-  &[size='sm'] {
-    height: $spacing-07;
+:host(#{$prefix}-combo-box-item[size='sm']) {
+  height: $spacing-07;
 
-    .#{$prefix}--list-box__menu-item__option {
-      padding-top: rem(7px);
-      padding-bottom: rem(7px);
-    }
+  .#{$prefix}--list-box__menu-item__option {
+    padding-top: rem(7px);
+    padding-bottom: rem(7px);
   }
+}
 
-  &[size='lg'] {
-    height: $spacing-09;
+:host(#{$prefix}-combo-box-item[size='lg']) {
+  height: $spacing-09;
 
-    .#{$prefix}--list-box__menu-item__option {
-      padding-top: rem(15px);
-      padding-bottom: rem(15px);
-    }
+  .#{$prefix}--list-box__menu-item__option {
+    padding-top: rem(15px);
+    padding-bottom: rem(15px);
   }
 }

package/scss/components/content-switcher/content-switcher.scss

@@ -10,6 +10,7 @@ $css--plex: true !default;
 @use '@carbon/styles/scss/config' as *;
 @use '@carbon/styles/scss/theme' as *;
 @use '@carbon/styles/scss/utilities/convert' as *;
+@use '@carbon/styles/scss/layer/layer-tokens';
 @use '@carbon/styles/scss/components/content-switcher/content-switcher' as *;
 
 // https://github.com/carbon-design-system/carbon/issues/11408
@@ -17,6 +18,12 @@ $css--plex: true !default;
 
 :host(#{$prefix}-content-switcher) {
   @extend .#{$prefix}--content-switcher;
+
+  @include layer-tokens.emit-layer-tokens(1);
+}
+
+:host(#{$prefix}-content-switcher[icon]) {
+  @extend .#{$prefix}--content-switcher--icon-only;
 }
 
 :host(#{$prefix}-content-switcher[size='sm']) {
@@ -65,6 +72,36 @@ $css--plex: true !default;
       border-bottom-color: $border-inverse;
     }
   }
+
+  &[icon] {
+    width: initial;
+
+    .#{$prefix}--content-switcher-btn {
+      padding-left: rem(11px);
+      padding-right: rem(11px);
+      height: rem(40px);
+    }
+
+    .#{$prefix}--content-switcher__label {
+      display: flex;
+      align-items: center;
+    }
+  }
+}
+
+:host(#{$prefix}-content-switcher-item)[icon] {
+  width: initial;
+
+  .#{$prefix}--content-switcher-btn {
+    padding-left: rem(11px);
+    padding-right: rem(11px);
+    height: rem(40px);
+  }
+
+  .#{$prefix}--content-switcher__label {
+    display: flex;
+    align-items: center;
+  }
 }
 
 :host(#{$prefix}-content-switcher-item[hide-divider])
@@ -81,10 +118,6 @@ $css--plex: true !default;
   &::before {
     content: none;
   }
-
-  &.#{$prefix}--content-switcher--selected {
-    border-left: none;
-  }
 }
 
 :host(#{$prefix}-content-switcher-item:last-of-type)
@@ -92,8 +125,4 @@ $css--plex: true !default;
   border-top-right-radius: rem(4px);
   border-bottom-right-radius: rem(4px);
   border-right: rem(1px) solid $border-inverse;
-
-  &.#{$prefix}--content-switcher--selected {
-    border-right: none;
-  }
 }

package/scss/components/copy-button/copy-button.scss

@@ -12,11 +12,19 @@ $css--plex: true !default;
 @use '@carbon/styles/scss/utilities' as *;
 @use '@carbon/styles/scss/utilities/keyframes' as *;
 @use '@carbon/styles/scss/motion' as *;
+@use '@carbon/styles/scss/layer/layer-tokens';
+@use '@carbon/styles/scss/components/button';
+@use '@carbon/styles/scss/components/tooltip';
+@use '@carbon/styles/scss/components/code-snippet/code-snippet' as *;
 @use '@carbon/styles/scss/components/copy-button/index';
 
+@include code-snippet;
+
 :host(#{$prefix}-copy-button) {
   display: inline-flex;
   outline: none;
+
+  @include layer-tokens.emit-layer-tokens(1);
 }
 
 .#{$prefix}--snippet__icon {
@@ -34,3 +42,15 @@ $css--plex: true !default;
 .#{$prefix}--copy-btn--animating.#{$prefix}--copy-btn--fade-in {
   animation: $duration-fast-02 motion(standard, productive) show-feedback;
 }
+
+// code snippet disabled overrides
+.#{$prefix}--snippet--disabled,
+.#{$prefix}--snippet--disabled
+  .#{$prefix}--btn.#{$prefix}--snippet-btn--expand {
+  background-color: $layer !important; /* stylelint-disable-line declaration-no-important */
+  color: $text-disabled !important; /* stylelint-disable-line declaration-no-important */
+
+  ::slotted([slot='icon']) {
+    fill: $text-disabled !important; /* stylelint-disable-line declaration-no-important */
+  }
+}

package/scss/components/data-table/_table-action.scss

@@ -20,6 +20,9 @@
 
 :host(#{$prefix}-table-toolbar) {
   @extend .#{$prefix}--table-toolbar;
+
+  display: table-caption;
+  z-index: 1;
 }
 
 :host(#{$prefix}-table-toolbar-content) {
@@ -28,28 +31,12 @@
   clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);
 
   ::slotted(#{$prefix}-overflow-menu) {
-    @include button-reset;
-
     display: flex;
     cursor: pointer;
-    height: $spacing-04;
-    width: $spacing-04;
-    padding: $spacing-05;
+    height: $spacing-09;
+    width: $spacing-09;
     transition: background-color $duration-fast-02 motion(entrance, productive);
   }
-
-  ::slotted(#{$prefix}-overflow-menu:hover) {
-    background-color: $background-hover;
-  }
-
-  ::slotted(#{$prefix}-overflow-menu[disabled]:hover) {
-    background-color: transparent;
-  }
-
-  .#{$prefix}--search .#{$prefix}--search-input {
-    // For tool bar animation with (esp.) persistent search box
-    background-color: transparent;
-  }
 }
 
 :host(#{$prefix}-table-toolbar-content[has-batch-actions]) {
@@ -71,25 +58,47 @@
     height: 100%;
 
     .#{$prefix}--search-magnifier {
-      height: $spacing-04;
-      width: $spacing-04;
-      padding: $spacing-05;
       left: 0;
       cursor: pointer;
       pointer-events: all;
       transition: background $duration-fast-02 motion(entrance, productive);
+
+      &-icon {
+        height: auto;
+        width: auto;
+      }
     }
 
-    .#{$prefix}--search-close {
-      height: $spacing-04;
-      width: $spacing-04;
+    .#{$prefix}--search-input {
+      border-bottom: 0;
+    }
 
+    .#{$prefix}--search-close {
       &::before {
-        top: 2px;
-        height: calc(100% - 4px);
+        width: 0;
         background-color: $background-hover;
       }
+
+      :hover {
+        background-color: none;
+      }
     }
+
+    :hover {
+      background-color: none;
+    }
+  }
+
+  svg {
+    left: 0;
+  }
+}
+
+:host(#{$prefix}-table-toolbar-search[size='xs']),
+:host(#{$prefix}-table-toolbar-search[size='sm']) {
+  svg {
+    left: $spacing-03;
+    padding: 0;
   }
 }
 
@@ -99,16 +108,25 @@
   flex: auto;
 }
 
-:host(#{$prefix}-table-toolbar-search[persistent]) {
-  @extend .#{$prefix}--toolbar-search-container-persistent;
+:host(#{$prefix}-table-toolbar-search[size='xs'][expanded]),
+:host(#{$prefix}-table-toolbar-search[size='sm'][expanded]) {
+  svg {
+    left: $spacing-05;
+  }
+}
+
+:host(#{$prefix}-table-toolbar-search[persistent]:hover),
+:host(#{$prefix}-table-toolbar-search[persistent]:hover) {
+  .#{$prefix}--search-input {
+    background-color: $field-hover;
+  }
 }
 
 :host(#{$prefix}-table-batch-actions) {
   @extend .#{$prefix}--batch-actions;
-
   box-sizing: border-box;
-}
 
-:host(#{$prefix}-table-batch-actions[active]) {
-  @extend .#{$prefix}--batch-actions--active;
+  &[active] {
+    @extend .#{$prefix}--batch-actions--active;
+  }
 }