@carbon/web-components 2.0.0-beta.2 → 2.0.0-beta.4

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

@@ -21,140 +21,121 @@ $css--plex: true !default;
 
 :host(#{$prefix}-code-snippet),
 :host(#{$prefix}-code-snippet-skeleton) {
-  @extend .#{$prefix}--snippet--single;
-
-  outline: none;
+  @extend .#{$prefix}--snippet;
 
-  &::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');
+  }
+
+  #{$prefix}-copy-button {
+    @extend .#{$prefix}--snippet, .#{$prefix}--popover-container;
 
-    padding-right: $spacing-03;
+    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);
-    transition: max-height $duration-moderate-01 motion(standard, productive);
+  &[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;
+  #{$prefix}-copy-button {
+    position: absolute;
+    top: 0.5rem;
+    right: 0.5rem;
   }
+}
 
-  .#{$prefix}--btn--copy__feedback {
-    // Half of the diagonal line of `0.6rem` square
-    top: rem(6.7882px);
-  }
+:host(#{$prefix}-code-snippet-skeleton[type='single']) {
+  @extend .#{$prefix}--snippet--single, .#{$prefix}--skeleton;
+}
+
+:host(#{$prefix}-code-snippet-skeleton[type='multi']) {
+  @extend .#{$prefix}--snippet--multi, .#{$prefix}--skeleton;
 }
 
 :host(#{$prefix}-code-snippet-skeleton) {

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

@@ -12,8 +12,13 @@ $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/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;
@@ -34,3 +39,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;
+  }
 }