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

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

@@ -10,6 +10,8 @@
 //
 
 :host(#{$prefix}-table) {
+  @include layer-tokens.emit-layer-tokens(1);
+
   @extend .#{$prefix}--data-table;
 
   display: table;
@@ -30,18 +32,69 @@
   }
 }
 
+:host(#{$prefix}-table[use-static-width]) {
+  width: auto;
+}
+
+:host(#{$prefix}-table[sticky-header]) {
+  ::slotted(#{$prefix}-table-head),
+  ::slotted(#{$prefix}-table-body) {
+    display: flex;
+    flex-direction: column;
+    will-change: transform;
+  }
+
+  .#{$prefix}--data-table-content {
+    display: block;
+    overflow-y: scroll;
+  }
+}
+
+:host(#{$prefix}-table[with-header]) {
+  .#{$prefix}--data-table-header {
+    display: table-caption;
+  }
+}
+
+:host(#{$prefix}-table-head[sticky-header]) {
+  position: sticky;
+  z-index: 1;
+  top: 0;
+  width: 100%;
+  will-change: transform;
+
+  ::slotted(#{$prefix}-table-header-row) {
+    display: flex;
+    width: 100%;
+  }
+}
+
+:host(#{$prefix}-table-header-cell[sort-direction]) {
+  height: $spacing-09;
+  position: relative;
+}
+
+:host(#{$prefix}-table-header-cell[sticky-header]) {
+  width: 100%;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+
+  border-bottom: 1px solid $layer-active;
+}
+
+:host(#{$prefix}-table-header-cell[sticky-header]:not([is-sortable])) {
+  padding-top: rem(14px);
+}
+
 //
 // Common style for table cell and table header cell
 //
 
 :host(#{$prefix}-table-header-row) ::slotted(#{$prefix}-table-header-cell),
-:host(#{$prefix}-table-header-row)
-  ::slotted(#{$prefix}-table-header-cell-skeleton),
 :host(#{$prefix}-table-header-row) .#{$prefix}--table-column-checkbox,
 :host(#{$prefix}-table-header-expand-row)
   ::slotted(#{$prefix}-table-header-cell),
-:host(#{$prefix}-table-header-expand-row)
-  ::slotted(#{$prefix}-table-header-cell-skeleton),
 :host(#{$prefix}-table-header-expand-row) .#{$prefix}--table-expand,
 :host(#{$prefix}-table-header-expand-row) .#{$prefix}--table-column-checkbox,
 :host(#{$prefix}-table-row) ::slotted(#{$prefix}-table-cell),
@@ -67,9 +120,7 @@
 //
 // Table header cell
 //
-
-:host(#{$prefix}-table-header-row),
-:host(#{$prefix}-table-header-expand-row) {
+:host(#{$prefix}-table-header-row) {
   outline: none;
 
   ::slotted(#{$prefix}-table-header-cell),
@@ -81,29 +132,62 @@
     outline: none;
   }
 
-  ::slotted(#{$prefix}-table-header-cell:last-of-type),
-  ::slotted(#{$prefix}-table-header-cell-skeleton:last-of-type) {
-    position: relative;
-    width: auto;
-  }
-
   ::slotted(#{$prefix}-table-header-cell),
-  ::slotted(#{$prefix}-table-header-cell-skeleton),
   .#{$prefix}--table-expand,
   .#{$prefix}--table-column-checkbox {
-    padding-left: $spacing-04;
-    padding-right: $spacing-04;
+    padding-left: $spacing-05;
+    padding-right: $spacing-05;
+    text-align: left;
     vertical-align: middle;
   }
-}
 
-:host(#{$prefix}-table-header-row) {
   ::slotted(#{$prefix}-table-header-cell:first-of-type),
   ::slotted(#{$prefix}-table-header-cell-skeleton:first-of-type) {
     padding-left: $spacing-05;
   }
 }
 
+:host(#{$prefix}-table-header-row:not([batch-expansion])) {
+  .#{$prefix}--table-expand__button {
+    display: none;
+  }
+}
+
+:host(#{$prefix}-table-header-row[selection-name]) {
+  .#{$prefix}--table-expand {
+    display: table-cell;
+  }
+}
+
+:host(#{$prefix}-table-header-row[sticky-header]) {
+  #{$prefix}-checkbox {
+    margin: 0;
+    padding-top: $spacing-04;
+    border-bottom: 1px solid $layer-active;
+  }
+}
+
+:host(#{$prefix}-table-header-row[expandable]),
+:host(#{$prefix}-table-row[expandable]),
+:host(#{$prefix}-table-header-row[selection-name]),
+:host(#{$prefix}-table-row[selection-name]) {
+  .#{$prefix}--table-expand {
+    height: $spacing-07;
+    width: $spacing-07;
+
+    padding: $spacing-03;
+    padding-right: 0;
+  }
+}
+
+:host(#{$prefix}-table-header-row[expanded]),
+:host(#{$prefix}-table-row[expanded]) {
+  transition: transform $duration-moderate-01 motion(standard, productive);
+  .#{$prefix}--table-expand__svg {
+    transform: rotate(270deg);
+  }
+}
+
 //
 // Table row
 //
@@ -119,10 +203,55 @@
   }
 }
 
+:host(#{$prefix}-table-body[sticky-header]) {
+  ::slotted(#{$prefix}-table-row),
+  ::slotted(#{$prefix}-table-expand-row) {
+    display: flex;
+  }
+}
+
 //
 // Table cell
 //
 
+:host(#{$prefix}-table-cell) {
+  border-top: 1px solid $layer-01;
+  border-bottom: 1px solid $border-subtle;
+  padding: 0 $spacing-05;
+
+  ::slotted(#{$prefix}-overflow-menu:hover) {
+    background-color: none;
+  }
+}
+
+:host(#{$prefix}-table-cell[overflow-menu-on-hover]) {
+  ::slotted(*) {
+    opacity: 0;
+  }
+}
+
+:host(#{$prefix}-table-cell-content) {
+  @include type-style('label-01');
+  display: block;
+}
+
+:host(#{$prefix}-table-row[sticky-header]),
+:host(#{$prefix}-table-expand-row[sticky-header]) {
+  ::slotted(#{$prefix}-table-cell),
+  ::slotted(#{$prefix}-table-cell-skeleton) {
+    width: 100%;
+    padding-top: rem(14px);
+  }
+}
+
+:host(#{$prefix}-table-row[size='xl']),
+:host(#{$prefix}-table-expand-row[size='xl']) {
+  ::slotted(#{$prefix}-table-cell),
+  ::slotted(#{$prefix}-table-cell-skeleton) {
+    vertical-align: top;
+  }
+}
+
 :host(#{$prefix}-table-row),
 :host(#{$prefix}-table-expand-row) {
   ::slotted(#{$prefix}-table-cell),
@@ -130,10 +259,6 @@
   .#{$prefix}--table-expand,
   .#{$prefix}--table-column-checkbox {
     color: $text-secondary;
-    border-top: 1px solid $layer-01;
-    border-bottom: 1px solid $border-subtle-01;
-    padding: rem(14px) $spacing-04;
-    padding-bottom: rem(13px);
     vertical-align: middle;
   }
 }
@@ -150,27 +275,103 @@
   }
 }
 
-:host(#{$prefix}-table-row[even]) {
+:host(#{$prefix}-table-row[expandable]),
+:host(#{$prefix}-table-row[selection-name]) {
+  .#{$prefix}--table-expand {
+    display: table-cell;
+    border-top: 1px solid $layer-01;
+    border-bottom: 1px solid $border-subtle;
+    padding-right: 0;
+    transition: transform $duration-moderate-01 motion(standard, productive);
+  }
+}
+
+:host(#{$prefix}-table-row[expandable][expanded]),
+:host(#{$prefix}-table-row[selection-name][expanded]) {
+  .#{$prefix}--table-expand__svg {
+    transform: rotate(270deg);
+  }
+}
+
+:host(#{$prefix}-table-row[expandable][expanded]),
+:host(#{$prefix}-table-row[selection-name][expandable][expanded]),
+:host(#{$prefix}-table-row[expandable][expanded][highlighted]),
+:host(#{$prefix}-table-row[selection-name][expandable][expanded][highlighted])
+  :host(#{$prefix}-table-row[expandable][expanded]:hover),
+:host(#{$prefix}-table-row[selection-name][expandable][expanded]:hover) {
+  .#{$prefix}--table-expand {
+    border-bottom-color: transparent;
+  }
+}
+
+:host(#{$prefix}-table-row[expandable][expanded][selected]),
+:host(#{$prefix}-table-row[selection-name][expandable][expanded][selected]) {
+  ::slotted(#{$prefix}-table-cell),
+  .#{$prefix}--table-expand,
+  .#{$prefix}--table-column-checkbox {
+    background-color: $layer-selected;
+
+    border-top-color: $layer-active;
+    border-bottom-color: $border-subtle;
+  }
+}
+
+:host(#{$prefix}-table-row[expandable][expanded][selected][highlighted]),
+:host(
+    #{$prefix}-table-row[selection-name][expandable][expanded][selected][highlighted]
+  ),
+:host(#{$prefix}-table-row[expandable][expanded][selected]:hover),
+:host(
+    #{$prefix}-table-row[selection-name][expandable][expanded][selected]:hover
+  ) {
+  ::slotted(#{$prefix}-table-cell),
+  .#{$prefix}--table-expand,
+  .#{$prefix}--table-column-checkbox {
+    background-color: $layer-selected-hover;
+  }
+}
+
+:host(#{$prefix}-table-row[expandable][selected]),
+:host(#{$prefix}-table-row[selection-name][expandable][selected]) {
+  ::slotted(#{$prefix}-table-cell),
+  .#{$prefix}--table-expand,
+  .#{$prefix}--table-column-checkbox {
+    border-bottom-color: $border-subtle;
+  }
+}
+
+:host(#{$prefix}-table-row[expandable][highlighted]),
+:host(#{$prefix}-table-row[selection-name][expandable][highlighted]),
+:host(#{$prefix}-table-row[expandable]:hover),
+:host(#{$prefix}-table-row[selection-name][expandable]:hover) {
+  ::slotted(#{$prefix}-table-cell),
+  .#{$prefix}--table-expand,
+  .#{$prefix}--table-column-checkbox {
+    border-bottom-color: $border-subtle;
+  }
+}
+
+:host(#{$prefix}-table-row[odd]) {
+  .#{$prefix}--table-expand,
+  .#{$prefix}--table-column-checkbox,
   ::slotted(#{$prefix}-table-cell),
   ::slotted(#{$prefix}-table-cell-skeleton) {
     border-bottom: 1px solid $layer-01;
   }
 }
 
-:host(#{$prefix}-table-row[odd]) {
+:host(#{$prefix}-table-row[even]) {
+  .#{$prefix}--table-expand,
+  .#{$prefix}--table-column-checkbox,
   ::slotted(#{$prefix}-table-cell),
   ::slotted(#{$prefix}-table-cell-skeleton) {
     background-color: $layer-accent-01;
     border-bottom: 1px solid $layer-accent-01;
     border-top: 1px solid $layer-accent-01;
-
-    // TODO: confirm if this token is deprecated
-    // background-color: $data-table-zebra-color;
-    // border-bottom: 1px solid $data-table-zebra-color;
-    // border-top: 1px solid $data-table-zebra-color;
   }
 }
 
+:host(#{$prefix}-table-row[highlighted]),
 :host(#{$prefix}-table-row:hover),
 :host(#{$prefix}-table-expand-row:hover) {
   ::slotted(#{$prefix}-table-cell),
@@ -184,8 +385,11 @@
   }
 }
 
+:host(#{$prefix}-table-row[highlighted]),
 :host(#{$prefix}-table-row[even]:hover),
 :host(#{$prefix}-table-row[odd]:hover) {
+  .#{$prefix}--table-expand,
+  .#{$prefix}--table-column-checkbox,
   ::slotted(#{$prefix}-table-cell),
   ::slotted(#{$prefix}-table-cell-skeleton) {
     background-color: $background-hover;
@@ -193,3 +397,23 @@
     border-top: 1px solid $layer-hover-01;
   }
 }
+
+:host(#{$prefix}-table-header-title) {
+  @extend .#{$prefix}--data-table-header__title;
+
+  display: block;
+}
+
+:host(#{$prefix}-table-header-description) {
+  @extend .#{$prefix}--data-table-header__description;
+
+  display: block;
+
+  @include breakpoint(md) {
+    max-width: 50ch;
+  }
+
+  @include breakpoint(lg) {
+    max-width: 80ch;
+  }
+}

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

@@ -5,59 +5,52 @@
 // LICENSE file in the root directory of this source tree.
 //
 
-:host(#{$prefix}-table-expand-row),
-:host(#{$prefix}-table-header-expand-row) {
-  .#{$prefix}--table-expand {
-    display: table-cell;
-    width: 2.5rem;
-    height: 3rem;
-    vertical-align: middle;
-    padding: 0;
-    border-bottom: 1px solid $border-subtle-01;
-    transition: transform $duration-moderate-01 motion(standard, productive);
-  }
-
-  &[expanded] .#{$prefix}--table-expand {
-    border-bottom: 1px solid transparent;
-
-    .#{$prefix}--table-expand__svg {
-      transform: rotate(270deg);
-    }
-  }
-}
-
 :host(#{$prefix}-table-expanded-row) {
   display: table-row;
-  transition: height $duration-moderate-02 motion(standard),
-    background-color $duration-fast-02 motion(standard);
+  height: 0;
+  transition: height $duration-moderate-01 motion(standard);
 
-  &[expanded] {
-    height: $spacing-09;
+  ::slotted(*) {
+    color: $text-secondary;
   }
 
   td {
-    padding-left: $spacing-10;
+    border-bottom-color: $border-subtle;
     vertical-align: middle;
     transition: all $duration-fast-02 motion(standard, productive);
+    padding: 0;
+    padding-left: $spacing-10;
 
     .#{$prefix}--child-row-inner-container {
       overflow: hidden;
       height: 0;
     }
   }
+}
 
-  &[expanded] td {
-    border-bottom: 1px solid $border-subtle-01;
-    padding-top: rem(14px);
-    padding-bottom: rem(13px);
+:host(#{$prefix}-table-expanded-row[expanded]) {
+  height: $spacing-09;
+
+  td {
+    border-bottom: 1px solid $border-subtle;
     height: auto;
 
     .#{$prefix}--child-row-inner-container {
       height: auto;
     }
   }
+}
+
+:host(#{$prefix}-table-expanded-row:hover),
+:host(#{$prefix}-table-expanded-row[selected]),
+:host(#{$prefix}-table-expanded-row[highlighted]) {
+  background-color: $background-hover;
 
-  &[highlighted] {
-    background-color: $background-hover;
+  ::slotted(*) {
+    color: $text-primary;
   }
 }
+
+:host(#{$prefix}-table-expanded-row[selected][highlighted]) {
+  background-color: $layer-selected;
+}

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

@@ -8,36 +8,46 @@
 //
 // Selection check box
 //
+:host(#{$prefix}-table-header-row) {
+  .#{$prefix}--table-column-checkbox {
+    border-top: none;
+    border-bottom: none;
 
-:host(#{$prefix}-table-header-row) .#{$prefix}--table-column-checkbox {
-  position: relative;
-  background-color: $border-subtle-01;
-  // 16px padding left + 8px padding right + 20px checkbox width
-  width: rem(44px);
-  transition: background-color $duration-fast-01 motion(entrance, productive);
-}
-
-:host(#{$prefix}-table-row) .#{$prefix}--table-column-checkbox {
-  .#{$prefix}--checkbox-label {
     padding-left: $spacing-05;
+    padding-right: $spacing-02;
+    transition: background-color $duration-fast-01 motion(entrance, productive);
+
+    .#{$prefix}--checkbox-label {
+      width: 20px;
+    }
   }
 }
 
-:host(#{$prefix}-table-header-row) .#{$prefix}--table-column-checkbox:hover {
-  // Highlight "select all" columns like sorting column
-  background-color: $data-table-column-hover;
-}
+:host(#{$prefix}-table-row) {
+  .#{$prefix}--table-column-checkbox {
+    padding-left: $spacing-05;
+    padding-right: $spacing-02;
+    border-top: 1px solid $layer-01;
+    border-bottom: 1px solid $border-subtle;
 
-:host(#{$prefix}-table-row[size='tall']) .#{$prefix}--table-column-checkbox {
-  padding-top: rem(12px);
+    .#{$prefix}--checkbox-label {
+      padding-left: $spacing-05;
+    }
+  }
 }
 
-//
-// Selected rows
-//
+:host(#{$prefix}-table-row:hover) {
+  .#{$prefix}--table-column-checkbox {
+    border-top-color: $layer-hover-01;
+    border-bottom-color: $layer-hover-01;
+    background-color: $background-hover;
+  }
+}
 
 :host(#{$prefix}-table-row[selected]) {
+  .#{$prefix}--table-column-checkbox,
   ::slotted(#{$prefix}-table-cell),
+  .#{$prefix}--table-expand,
   .#{$prefix}--table-column-checkbox {
     color: $text-primary;
     background-color: $layer-accent-01;
@@ -48,10 +58,16 @@
 }
 
 :host(#{$prefix}-table-row[selected]:hover) {
+  .#{$prefix}--table-column-checkbox,
   ::slotted(#{$prefix}-table-cell),
+  .#{$prefix}--table-expand,
   .#{$prefix}--table-column-checkbox {
     background-color: $data-table-column-hover;
-    border-top-color: $data-table-column-hover;
     border-bottom-color: $data-table-column-hover;
   }
 }
+
+:host(#{$prefix}-table-expanded-row[filtered]),
+:host(#{$prefix}-table-row[filtered]) {
+  display: none !important;
+}