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

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

@@ -5,8 +5,6 @@
 // LICENSE file in the root directory of this source tree.
 //
 
-// TODO: consider consolidating size classes with css vars
-
 //
 // "xs" table size variant
 //
@@ -16,11 +14,22 @@
   height: $spacing-06;
 }
 
+:host(#{$prefix}-table-header-row[size='xs']),
 :host(#{$prefix}-table-row[size='xs']) {
-  ::slotted(#{$prefix}-table-cell),
-  ::slotted(#{$prefix}-table-cell-skeleton) {
+  ::slotted(#{$prefix}-table-header-cell) {
+    height: $spacing-06;
+  }
+
+  ::slotted(#{$prefix}-table-cell) {
     padding-top: rem(2px);
     padding-bottom: rem(2px);
+    padding-left: $spacing-05;
+  }
+
+  .#{$prefix}--table-expand {
+    padding-top: 0;
+    padding-bottom: 0;
+    height: $spacing-06;
   }
 }
 
@@ -33,11 +42,25 @@
   height: $spacing-07;
 }
 
+:host(#{$prefix}-table-header-row[size='sm']),
 :host(#{$prefix}-table-row[size='sm']) {
-  ::slotted(#{$prefix}-table-cell),
-  ::slotted(#{$prefix}-table-cell-skeleton) {
+  ::slotted(#{$prefix}-table-header-cell) {
+    height: $spacing-07;
+  }
+
+  ::slotted(#{$prefix}-table-cell) {
     padding-top: rem(7px);
     padding-bottom: rem(6px);
+    padding-left: $spacing-05;
+  }
+
+  .#{$prefix}--table-expand {
+    padding-top: 0;
+    padding-bottom: 0;
+  }
+
+  ::slotted(#{$prefix}-overflow-menu) {
+    height: $spacing-07;
   }
 }
 
@@ -50,11 +73,24 @@
   height: $spacing-08;
 }
 
-:host(#{$prefix}-table-row[size='md']) {
-  ::slotted(#{$prefix}-table-cell),
-  ::slotted(#{$prefix}-table-cell-skeleton) {
-    padding-top: rem(4px);
-    padding-bottom: rem(4px);
+:host(#{$prefix}-table-row[size='md']),
+:host(#{$prefix}-table-header-row[size='md']) {
+  ::slotted(#{$prefix}-table-header-cell) {
+    height: $spacing-08;
+  }
+  ::slotted(#{$prefix}-table-cell) {
+    padding-top: rem(7px);
+    padding-left: $spacing-05;
+    padding-bottom: rem(6px);
+  }
+
+  .#{$prefix}--table-expand {
+    padding-top: $spacing-02;
+    padding-bottom: $spacing-02;
+  }
+
+  ::slotted(#{$prefix}-overflow-menu) {
+    height: $spacing-08;
   }
 }
 
@@ -67,13 +103,6 @@
   height: $spacing-09;
 }
 
-:host(#{$prefix}-table-row[size='lg']) {
-  ::slotted(#{$prefix}-table-cell),
-  ::slotted(#{$prefix}-table-cell-skeleton) {
-    padding-top: rem(16px);
-  }
-}
-
 //
 // "xl" table size variant
 //
@@ -83,9 +112,122 @@
   height: $spacing-10;
 }
 
+:host(#{$prefix}-table-header-row[size='xl']) {
+  ::slotted(#{$prefix}-table-header-cell) {
+    vertical-align: top;
+    padding-top: $spacing-05;
+  }
+}
+
+:host(#{$prefix}-table-header-row[size='xl']),
 :host(#{$prefix}-table-row[size='xl']) {
-  ::slotted(#{$prefix}-table-cell),
-  ::slotted(#{$prefix}-table-cell-skeleton) {
+  ::slotted(#{$prefix}-table-cell) {
     padding-top: rem(16px);
   }
+
+  .#{$prefix}--table-expand {
+    padding-bottom: 1.375rem;
+  }
+
+  .#{$prefix}--table-expand,
+  .#{$prefix}--table-column-checkbox {
+    vertical-align: top;
+    padding-top: rem(10px);
+  }
+
+  &[radio] {
+    .#{$prefix}--table-column-checkbox {
+      padding-top: $spacing-05;
+    }
+  }
+}
+
+:host(#{$prefix}-table-expanded-row[size='xl'][expanded]) {
+  td {
+    padding-top: $spacing-05;
+    padding-right: $spacing-05;
+    padding-bottom: $spacing-03;
+  }
+}
+
+// Small persistent toolbar
+:host(#{$prefix}-table-toolbar[size='xs']),
+:host(#{$prefix}-table-toolbar-content[size='xs']) {
+  &,
+  ::slotted(#{$prefix}-table-toolbar-search),
+  ::slotted(#{$prefix}-overflow-menu),
+  ::slotted(#{$prefix}-button) {
+    min-height: $spacing-07;
+    height: $spacing-07;
+  }
+  ::slotted(#{$prefix}-table-toolbar-search),
+  ::slotted(#{$prefix}-overflow-menu) {
+    width: 2rem;
+  }
+}
+
+:host(#{$prefix}-table-toolbar[size='sm']),
+:host(#{$prefix}-table-toolbar-content[size='sm']) {
+  &,
+  ::slotted(#{$prefix}-table-toolbar-search),
+  ::slotted(#{$prefix}-overflow-menu),
+  ::slotted(#{$prefix}-button) {
+    min-height: $spacing-07;
+    height: $spacing-07;
+  }
+
+  ::slotted(#{$prefix}-table-toolbar-search),
+  ::slotted(#{$prefix}-overflow-menu) {
+    width: 2rem;
+  }
+}
+
+//
+// "selection" and "expandable" sizes
+//
+:host(#{$prefix}-table-header-row[selection-name][expandable]),
+:host(#{$prefix}-table-row[selection-name][expandable]) {
+  ::slotted(#{$prefix}-table-header-cell),
+  ::slotted(#{$prefix}-table-cell) {
+    padding-left: $spacing-03;
+  }
+}
+
+:host(#{$prefix}-table-header-row[selection-name][expandable][size='xs']),
+:host(#{$prefix}-table-row[selection-name][expandable][size='xs']) {
+  .#{$prefix}--table-column-checkbox {
+    padding: 0 rem(6px);
+  }
+}
+
+:host(#{$prefix}-table-header-row[selection-name][expandable][size='sm']),
+:host(#{$prefix}-table-row[selection-name][expandable][size='sm']),
+:host(#{$prefix}-table-header-row[selection-name][expandable][size='md']),
+:host(#{$prefix}-table-row[selection-name][expandable][size='md']) {
+  .#{$prefix}--table-column-checkbox {
+    padding: rem(3px) rem(6px);
+  }
+}
+
+:host(#{$prefix}-table-header-row[selection-name][expandable][size='xl']) {
+  .#{$prefix}--table-column-checkbox {
+    padding-left: rem(6px);
+    padding-right: rem(6px);
+  }
+}
+
+//
+// table cell size for overflow menu
+//
+:host(#{$prefix}-table-cell[size='xs']),
+:host(#{$prefix}-table-cell[size='sm']) {
+  ::slotted(#{$prefix}-overflow-menu) {
+    height: calc(100% + 1px);
+  }
+}
+
+:host(#{$prefix}-table-cell[size='md']) {
+  ::slotted(#{$prefix}-overflow-menu) {
+    height: $spacing-08;
+  }
 }

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

@@ -9,21 +9,6 @@
 @use '@carbon/styles/scss/spacing' as *;
 @use '@carbon/styles/scss/components/data-table/sort';
 
-:host(#{$prefix}-table-header-row[size='compact'])
-  ::slotted(#{$prefix}-table-header-cell[sort-direction]) {
-  height: rem(24px);
-}
-
-:host(#{$prefix}-table-header-row[size='short'])
-  ::slotted(#{$prefix}-table-header-cell[sort-direction]) {
-  height: rem(32px);
-}
-
-:host(#{$prefix}-table-header-row[size='tall'])
-  ::slotted(#{$prefix}-table-header-cell[sort-direction]) {
-  height: rem(64px);
-}
-
 // Padding of header cell for sorting
 //
 // Let sort button rather than the cell define the padding
@@ -36,17 +21,16 @@
   padding-right: 0;
 }
 
-:host(#{$prefix}-table-header-cell[sort-direction]) .#{$prefix}--table-sort {
-  height: 100%;
-  padding-left: $spacing-04;
-  padding-right: $spacing-04;
-}
-
 :host(#{$prefix}-table-header-cell[sort-direction]:first-of-type)
   .#{$prefix}--table-sort {
   padding-left: $spacing-05;
 }
 
+:host(#{$prefix}-table-header-cell[sort-direction][expandable][selection-name])
+  .#{$prefix}--table-sort {
+  padding-left: 0;
+}
+
 //
 // Sort icon style
 //

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

@@ -7,18 +7,20 @@
 
 $css--plex: true !default;
 
+@use '@carbon/styles/scss/breakpoint' as *;
 @use '@carbon/styles/scss/config' as *;
 @use '@carbon/styles/scss/type' as *;
 @use '@carbon/styles/scss/theme' as *;
 @use '@carbon/styles/scss/spacing' as *;
+@use '@carbon/styles/scss/layer/layer-tokens';
 @use '@carbon/styles/scss/motion' as *;
 @use '@carbon/styles/scss/utilities/convert' as *;
 @use '@carbon/styles/scss/components/checkbox';
 
 @use '@carbon/styles/scss/components/data-table' as *;
+@use '@carbon/styles/scss/components/link' as *;
+
 @use '@carbon/styles/scss/components/data-table/expandable';
-// TODO: deprecate
-// @use '@carbon/styles/scss/components/data-table/data-table-inline-edit';
 @use '@carbon/styles/scss/components/data-table/skeleton';
 
 // TODO: deprecate @import
@@ -28,4 +30,3 @@ $css--plex: true !default;
 @import 'table-sizes';
 @import 'table-selection';
 @import 'table-sort';
-@import 'table-skeleton';

package/scss/components/form-group/form-group.scss

@@ -0,0 +1,23 @@
+//
+// Copyright IBM Corp. 2020, 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.
+//
+
+@use '@carbon/styles/scss/config' as *;
+@use '@carbon/styles/scss/type' as *;
+@use '@carbon/styles/scss/spacing' as *;
+@use '@carbon/styles/scss/theme' as *;
+@use '@carbon/styles/scss/components/form/index' as *;
+
+:host(#{$prefix}-form-group) fieldset {
+  @extend .#{$prefix}--fieldset;
+
+  padding: 0;
+  border: 0;
+  margin: 0;
+  font: inherit;
+  font-size: 100%;
+  vertical-align: baseline;
+}

package/scss/components/modal/modal.scss

@@ -10,83 +10,27 @@
 @use '@carbon/styles/scss/motion' as *;
 @use '@carbon/styles/scss/spacing' as *;
 @use '@carbon/styles/scss/breakpoint' as *;
+@use '@carbon/styles/scss/layer' as *;
+@use '@carbon/styles/scss/type' as *;
 @use '@carbon/styles/scss/utilities/convert' as *;
-@use '@carbon/styles/scss/components/modal';
+@use '@carbon/styles/scss/components/modal' as *;
 @use '@carbon/styles/scss/components/button' as *;
 
 :host(#{$prefix}-modal) {
-  // `@extend .#{$prefix}--modal` seems to cause `&.is-visible` style to be brought into `:host(#{$prefix}-modal)` with ShadyCSS
-  position: fixed;
-  top: 0;
-  bottom: 0;
-  width: 100vw;
-  height: 100vh;
-  z-index: z('modal');
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  content: '';
-  background-color: $overlay;
-  opacity: 0;
-  visibility: hidden;
-  transition: background-color $duration-slow-02 motion(exit, expressive),
-    opacity $duration-moderate-02 motion(exit, expressive),
-    z-index $duration-slow-02 motion(exit, expressive),
-    visibility $duration-moderate-02 motion(exit, expressive);
-
-  .#{$prefix}--text-input,
-  .#{$prefix}--select-input {
-    background-color: $field-02;
-  }
-
-  .#{$prefix}--modal-container {
-    @include breakpoint(md) {
-      ::slotted(#{$prefix}-modal-header),
-      ::slotted(#{$prefix}-modal-body) {
-        padding-right: 20%;
-      }
-    }
-  }
-
-  .#{$prefix}--modal-container--xs,
-  .#{$prefix}--modal-container--sm,
-  .#{$prefix}--modal-container--xl {
-    ::slotted(#{$prefix}-modal-header) {
-      padding-right: $spacing-09;
-    }
+  @extend .#{$prefix}--modal;
 
+  &[full-width] {
     ::slotted(#{$prefix}-modal-body) {
-      padding-right: $spacing-05;
+      margin: 0;
+      padding: 0;
     }
   }
 
-  .#{$prefix}--modal-container--sm {
-    @include breakpoint(xlg) {
-      ::slotted(#{$prefix}-modal-header),
-      ::slotted(#{$prefix}-modal-body) {
-        padding-right: 20%;
-      }
-    }
-  }
-
-  .#{$prefix}--modal-container--lg {
-    @include breakpoint(md) {
-      ::slotted(#{$prefix}-modal-header),
-      ::slotted(#{$prefix}-modal-body) {
-        padding-right: 20%;
-      }
-    }
+  &[open] {
+    @extend .#{$prefix}--modal, .is-visible;
   }
 }
 
-:host(#{$prefix}-modal[open]) {
-  @extend .#{$prefix}--modal, .is-visible;
-
-  // TODO: look into if following two lines are necessary after v11 upgrade
-  opacity: 1;
-  visibility: inherit;
-}
-
 :host(#{$prefix}-modal-header) {
   @extend .#{$prefix}--modal-header;
 }
@@ -110,17 +54,67 @@
 
 :host(#{$prefix}-modal-body) {
   @extend .#{$prefix}--modal-content;
+  @extend .#{$prefix}--layer-two;
+
+  ::slotted(#{$prefix}-form-item) {
+    margin-bottom: $spacing-05;
+  }
+
+  ::slotted(#{$prefix}-select:last-of-type) {
+    padding-bottom: 0;
+  }
+
+  ::slotted(*:last-child) {
+    padding-bottom: $spacing-07;
+  }
+}
+
+:host(#{$prefix}-modal-body-content) {
+  @include type-style('body-01');
+
+  display: block;
+  padding-right: calc(20% - #{$spacing-07});
+
+  &[description] {
+    margin-bottom: $spacing-05;
+  }
 }
 
 :host(#{$prefix}-modal-footer) {
-  .#{$prefix}--modal-footer--three-button {
-    ::slotted(#{$prefix}-button),
+  @extend .#{$prefix}--modal-footer;
+
+  &[has-three-buttons] {
+    @extend .#{$prefix}--modal-footer--three-button;
+
     ::slotted(#{$prefix}-modal-footer-button) {
       flex: 0 1 25%;
     }
   }
 }
 
+:host(#{$prefix}-modal-footer-button) {
+  &,
+  &:first-of-type {
+    .#{$prefix}--btn {
+      box-shadow: inherit;
+
+      &:focus {
+        box-shadow: inset 0 0 0 $button-outline-width $focus,
+          inset 0 0 0 $button-border-width $background;
+      }
+    }
+  }
+
+  .#{$prefix}--btn {
+    width: 100%;
+    max-width: none;
+
+    padding-top: rem(16px);
+    padding-bottom: rem(32px);
+    box-shadow: rem(-1px) 0 0 0 $button-separator;
+  }
+}
+
 :host(#{$prefix}-modal-footer) ::slotted(#{$prefix}-button),
 :host(#{$prefix}-modal-footer-button) {
   flex: 0 1 50%;
@@ -130,23 +124,3 @@
   margin: 0;
   padding-bottom: $spacing-07;
 }
-
-:host(#{$prefix}-modal-footer-button) .#{$prefix}--btn {
-  padding-top: rem(16px);
-  padding-bottom: rem(32px);
-  box-shadow: rem(-1px) 0 0 0 $button-separator;
-}
-
-:host(#{$prefix}-modal-footer-button:first-of-type) .#{$prefix}--btn {
-  box-shadow: inherit;
-}
-
-:host(#{$prefix}-modal-footer-button) {
-  &,
-  &:first-of-type {
-    .#{$prefix}--btn:focus {
-      box-shadow: inset 0 0 0 $button-outline-width $focus,
-        inset 0 0 0 $button-border-width $background;
-    }
-  }
-}

package/scss/components/multi-select/multi-select.scss

@@ -9,7 +9,10 @@ $css--plex: true !default;
 
 @use '@carbon/styles/scss/config' as *;
 @use '@carbon/styles/scss/theme' as *;
-@use '@carbon/styles/scss/components/multiselect/multiselect';
+@use '@carbon/styles/scss/spacing' as *;
+@use '@carbon/styles/scss/utilities' as *;
+@use '@carbon/styles/scss/components/list-box/list-box';
+@use '@carbon/styles/scss/components/multiselect/index';
 @use '@carbon/styles/scss/components/form';
 @use '@carbon/styles/scss/components/checkbox';
 @use '@carbon/styles/scss/components/tag';
@@ -47,10 +50,44 @@ $css--plex: true !default;
       outline-offset: -2px;
     }
   }
-}
 
-:host(#{$prefix}-multi-select[type='inline']) {
-  @extend .#{$prefix}--list-box__wrapper--inline;
+  &[direction='top'] {
+    @extend .#{$prefix}--list-box--up;
+
+    .#{$prefix}--list-box__menu {
+      top: auto;
+    }
+  }
+
+  &[invalid] {
+    .#{$prefix}--list-box__field {
+      outline: none;
+    }
+
+    .#{$prefix}--form__helper-text {
+      color: $text-error;
+    }
+  }
+
+  &[type='inline'] {
+    @extend .#{$prefix}--list-box__wrapper--inline;
+
+    .#{$prefix}--form__helper-text {
+      grid-column: 2;
+    }
+  }
+
+  &[type='inline'][warn] .#{$prefix}--list-box__field {
+    padding-right: rem(56px);
+  }
+
+  .#{$prefix}--tag--disabled {
+    @extend .#{$prefix}--tag--disabled;
+  }
+
+  .#{$prefix}--list-box__field:focus {
+    @extend .#{$prefix}--multi-select--filterable--input-focused;
+  }
 }
 
 :host(#{$prefix}-multi-select-item) {
@@ -58,18 +95,17 @@ $css--plex: true !default;
 
   display: block;
 
-  .#{$prefix}--checkbox {
-    &:checked ~ .#{$prefix}--checkbox-label-text {
-      color: $text-primary;
-    }
-
-    &:focus + .#{$prefix}--checkbox-label::before {
-      box-shadow: none;
-    }
+  .#{$prefix}--checkbox-label {
+    display: inline-block;
+    overflow: hidden;
+    width: 100%;
+    padding-left: rem(28px);
+    text-overflow: ellipsis;
+    white-space: nowrap;
   }
 
   .#{$prefix}--list-box__menu-item__option {
-    height: 100%;
+    box-sizing: border-box;
 
     .#{$prefix}--checkbox-wrapper {
       width: 100%;
@@ -79,7 +115,6 @@ $css--plex: true !default;
     }
 
     > .#{$prefix}--form-item {
-      margin: 0;
       flex-direction: row;
     }
   }
@@ -90,18 +125,18 @@ $css--plex: true !default;
 }
 
 :host(#{$prefix}-multi-select-item[size='sm']) {
-  height: rem(32px);
-
+  height: fit-content;
   .#{$prefix}--list-box__menu-item__option {
+    height: $spacing-07;
     padding-top: rem(7px);
     padding-bottom: rem(7px);
   }
 }
 
-:host(#{$prefix}-multi-select-item[size='xl']) {
-  height: rem(48px);
-
+:host(#{$prefix}-multi-select-item[size='lg']) {
+  height: fit-content;
   .#{$prefix}--list-box__menu-item__option {
+    height: $spacing-09;
     padding-top: rem(15px);
     padding-bottom: rem(15px);
   }

package/scss/components/overflow-menu/overflow-menu.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/spacing' as *;
+@use '@carbon/styles/scss/utilities/convert' as *;
 @use '@carbon/styles/scss/components/overflow-menu/overflow-menu' as *;
 
 // https://github.com/carbon-design-system/carbon/issues/11408
@@ -50,11 +51,10 @@ $css--plex: true !default;
   background-color: $layer-01;
   transition: none;
   box-shadow: 0 2px 6px 0 rgba(0, 0, 0, 0.3);
-}
 
-:host(#{$prefix}-overflow-menu[color-scheme='light'][open]),
-:host(#{$prefix}-breadcrumb-overflow-menu[color-scheme='light'][open]) {
-  background-color: $layer-02;
+  :hover {
+    background-color: $layer;
+  }
 }
 
 :host(#{$prefix}-overflow-menu-body) {
@@ -70,12 +70,12 @@ $css--plex: true !default;
   @extend .#{$prefix}--overflow-menu-options--open;
 }
 
-:host(#{$prefix}-overflow-menu-body[color-scheme='light']) {
-  background-color: $layer-02;
+:host(#{$prefix}-overflow-menu-body[size='sm']) {
+  @extend .#{$prefix}--overflow-menu-options--sm;
+}
 
-  &::after {
-    background-color: $layer-02;
-  }
+:host(#{$prefix}-overflow-menu-body[size='lg']) {
+  @extend .#{$prefix}--overflow-menu-options--lg;
 }
 
 :host(#{$prefix}-overflow-menu-item) {
@@ -84,6 +84,14 @@ $css--plex: true !default;
   outline: none;
 }
 
+:host(#{$prefix}-overflow-menu-item[size='sm']) {
+  height: $spacing-07;
+}
+
+:host(#{$prefix}-overflow-menu-item[size='lg']) {
+  height: $spacing-09;
+}
+
 :host(#{$prefix}-overflow-menu-item[danger]) {
   @extend .#{$prefix}--overflow-menu-options__option--danger;
 }
@@ -91,3 +99,7 @@ $css--plex: true !default;
 :host(#{$prefix}-overflow-menu-item[disabled]) {
   @extend .#{$prefix}--overflow-menu-options__option--disabled;
 }
+
+:host(#{$prefix}-overflow-menu-item[divider]) {
+  @extend .#{$prefix}--overflow-menu--divider;
+}