@carbon/charts 0.58.0 → 0.58.1

package/styles/vendor/carbon-components/src/globals/scss/vendor/@carbon/styles/scss/components/data-table/_data-table.scss

@@ -25,6 +25,7 @@
   // Container
   //----------------------------------------------------------------------------
   .#{$prefix}--data-table-container {
+    position: relative;
     // Allow space for focus styles
     padding-top: $spacing-01;
   }
@@ -42,13 +43,13 @@
   }
 
   .#{$prefix}--data-table-header__title {
-    @include type-style('productive-heading-03');
+    @include type-style('heading-03');
 
     color: $text-primary;
   }
 
   .#{$prefix}--data-table-header__description {
-    @include type-style('body-short-01');
+    @include type-style('body-compact-01');
 
     color: $text-secondary;
   }
@@ -63,13 +64,13 @@
   }
 
   .#{$prefix}--data-table thead {
-    @include type-style('productive-heading-01');
+    @include type-style('heading-compact-01');
 
     background-color: $layer-accent;
   }
 
   .#{$prefix}--data-table tbody {
-    @include type-style('body-short-01');
+    @include type-style('body-compact-01');
 
     width: 100%;
     background-color: $layer;
@@ -99,17 +100,30 @@
     color: $text-primary;
   }
 
-  .#{$prefix}--data-table tbody tr:hover td .#{$prefix}--link,
-  .#{$prefix}--data-table tbody tr:hover th .#{$prefix}--link {
+  .#{$prefix}--data-table tr:hover .#{$prefix}--link {
     color: $link-secondary;
   }
 
+  .#{$prefix}--data-table tr:hover .#{$prefix}--link--disabled {
+    color: $text-disabled;
+  }
+
   .#{$prefix}--data-table th,
   .#{$prefix}--data-table td {
     text-align: left;
     vertical-align: middle;
   }
 
+  .#{$prefix}--data-table th[align='right'],
+  .#{$prefix}--data-table td[align='right'] {
+    text-align: right;
+  }
+
+  .#{$prefix}--data-table th[align='center'],
+  .#{$prefix}--data-table td[align='center'] {
+    text-align: center;
+  }
+
   .#{$prefix}--data-table th {
     padding-right: $spacing-05;
     padding-left: $spacing-05;
@@ -237,22 +251,18 @@
     }
   }
 
-  .#{$prefix}--data-table--selected .#{$prefix}--link {
+  .#{$prefix}--data-table--selected
+    .#{$prefix}--link:not(.#{$prefix}--link--disabled) {
     color: $link-secondary;
   }
 
-  // V11: Remove compact, short styles
-  .#{$prefix}--data-table--compact td.#{$prefix}--table-column-menu,
   .#{$prefix}--data-table--xs td.#{$prefix}--table-column-menu,
-  .#{$prefix}--data-table--short td.#{$prefix}--table-column-menu,
   .#{$prefix}--data-table--sm td.#{$prefix}--table-column-menu {
     height: rem(24px);
     padding-top: 0;
     padding-bottom: 0;
   }
 
-  // V11: Remove short styles
-  .#{$prefix}--data-table--short td.#{$prefix}--table-column-menu,
   .#{$prefix}--data-table--sm td.#{$prefix}--table-column-menu {
     height: rem(32px);
   }
@@ -261,8 +271,6 @@
     height: rem(40px);
   }
 
-  // V11: Remove tall styles
-  .#{$prefix}--data-table--tall .#{$prefix}--table-column-menu,
   .#{$prefix}--data-table--xl .#{$prefix}--table-column-menu {
     padding-top: $spacing-03;
   }
@@ -340,6 +348,7 @@
 
   .#{$prefix}--data-table thead th.#{$prefix}--table-column-checkbox,
   .#{$prefix}--data-table tbody td.#{$prefix}--table-column-checkbox {
+    width: 2.5rem;
     // spacing between checkbox / chevron and next cell should be 8px / 0.5rem
     padding-right: rem(4px);
     padding-left: 1rem;
@@ -351,9 +360,6 @@
     height: rem(32px);
   }
 
-  // V11: Remove compact
-  .#{$prefix}--data-table--compact thead th.#{$prefix}--table-expand,
-  .#{$prefix}--data-table--compact tbody td.#{$prefix}--table-expand,
   .#{$prefix}--data-table--xs thead th.#{$prefix}--table-expand,
   .#{$prefix}--data-table--xs tbody td.#{$prefix}--table-expand {
     width: rem(24px);
@@ -361,9 +367,6 @@
     padding: 0 0 0 0.5rem;
   }
 
-  // V11: remove short
-  .#{$prefix}--data-table--short thead th.#{$prefix}--table-expand,
-  .#{$prefix}--data-table--short tbody td.#{$prefix}--table-expand,
   .#{$prefix}--data-table--sm thead th.#{$prefix}--table-expand,
   .#{$prefix}--data-table--sm tbody td.#{$prefix}--table-expand {
     width: rem(32px);
@@ -379,9 +382,6 @@
     padding: rem(4px) 0 rem(4px) rem(8px);
   }
 
-  // V11: remove tall
-  .#{$prefix}--data-table--tall thead th.#{$prefix}--table-expand,
-  .#{$prefix}--data-table--tall tbody td.#{$prefix}--table-expand,
   .#{$prefix}--data-table--xl thead th.#{$prefix}--table-expand,
   .#{$prefix}--data-table--xl tbody td.#{$prefix}--table-expand {
     height: rem(64px);
@@ -389,22 +389,14 @@
     padding-bottom: rem(22px);
   }
 
-  // V11: remove tall
-  .#{$prefix}--data-table--tall .#{$prefix}--table-column-checkbox,
   .#{$prefix}--data-table--xl .#{$prefix}--table-column-checkbox {
     padding-top: rem(13px);
   }
 
-  // V11: remove tall
-  .#{$prefix}--data-table--tall .#{$prefix}--table-column-radio,
   .#{$prefix}--data-table--xl .#{$prefix}--table-column-radio {
     padding-top: $spacing-05;
   }
 
-  .#{$prefix}--date-table tbody th.#{$prefix}--table-column-checkbox:hover {
-    background: $data-table-column-hover;
-  }
-
   //----------------------------------------------------------------------------
   // Radio
   //----------------------------------------------------------------------------
@@ -436,7 +428,7 @@
     td,
   tr.#{$prefix}--data-table--selected:first-of-type td {
     // Top border acts as separator from thead
-    border-top: 1px solid $layer-active;
+    border-top: 1px solid $border-subtle-selected;
   }
 
   // last row + zebra select last
@@ -488,46 +480,6 @@
     opacity: 1;
   }
 
-  // V11: Remove this compact block
-  //----------------------------------------------------------------------------
-  // Compact
-  //----------------------------------------------------------------------------
-  .#{$prefix}--data-table--compact thead tr,
-  .#{$prefix}--data-table--compact tbody tr,
-  .#{$prefix}--data-table--compact tbody tr th {
-    height: rem(24px);
-  }
-
-  .#{$prefix}--data-table--compact .#{$prefix}--table-header-label {
-    padding-top: rem(2px);
-    padding-bottom: rem(2px);
-  }
-
-  .#{$prefix}--data-table--compact td,
-  .#{$prefix}--data-table--compact tbody tr th {
-    padding-top: rem(2px);
-    padding-bottom: rem(2px);
-  }
-
-  .#{$prefix}--data-table--compact .#{$prefix}--overflow-menu {
-    width: rem(32px);
-    height: 100%;
-  }
-
-  .#{$prefix}--data-table.#{$prefix}--data-table--compact
-    .#{$prefix}--table-column-checkbox {
-    padding-top: 0;
-    padding-bottom: 0;
-  }
-
-  .#{$prefix}--data-table.#{$prefix}--data-table--compact
-    .#{$prefix}--table-column-checkbox
-    .#{$prefix}--checkbox-label {
-    height: rem(23px);
-    // 24px row - 1px border
-    min-height: rem(23px);
-  }
-
   //----------------------------------------------------------------------------
   // Extra Small
   //----------------------------------------------------------------------------
@@ -567,37 +519,6 @@
     min-height: rem(23px);
   }
 
-  // V11: Remove this short block
-  //----------------------------------------------------------------------------
-  // Short
-  //----------------------------------------------------------------------------
-  .#{$prefix}--data-table--short thead tr,
-  .#{$prefix}--data-table--short tbody tr,
-  .#{$prefix}--data-table--short tbody tr th {
-    height: rem(32px);
-  }
-
-  .#{$prefix}--data-table--short .#{$prefix}--table-header-label {
-    padding-top: rem(7px);
-    padding-bottom: rem(7px);
-  }
-
-  .#{$prefix}--data-table--short td,
-  .#{$prefix}--data-table--short tbody tr th {
-    padding-top: rem(7px);
-    padding-bottom: rem(6px);
-  }
-
-  .#{$prefix}--data-table.#{$prefix}--data-table--short
-    .#{$prefix}--table-column-checkbox {
-    padding-top: rem(3px);
-    padding-bottom: rem(3px);
-  }
-
-  .#{$prefix}--data-table--short .#{$prefix}--overflow-menu {
-    height: 100%;
-  }
-
   //----------------------------------------------------------------------------
   // Small
   //----------------------------------------------------------------------------
@@ -659,35 +580,6 @@
     padding-bottom: rem(3px);
   }
 
-  // V11: remove this tall block
-  //----------------------------------------------------------------------------
-  // Tall
-  //----------------------------------------------------------------------------
-  .#{$prefix}--data-table--tall thead tr,
-  .#{$prefix}--data-table--tall tbody tr,
-  .#{$prefix}--data-table--tall tbody tr th {
-    height: rem(64px);
-  }
-
-  .#{$prefix}--data-table--tall .#{$prefix}--table-header-label {
-    padding-top: $spacing-05;
-    padding-bottom: $spacing-05;
-  }
-
-  .#{$prefix}--data-table--tall td,
-  .#{$prefix}--data-table--tall tbody tr th {
-    padding-top: 1rem;
-  }
-
-  .#{$prefix}--data-table--tall th,
-  .#{$prefix}--data-table--tall td {
-    vertical-align: top;
-  }
-
-  .#{$prefix}--data-table--tall .#{$prefix}--data-table--cell-secondary-text {
-    @include type-style('label-01');
-  }
-
   //----------------------------------------------------------------------------
   // Extra Large
   //----------------------------------------------------------------------------
@@ -723,6 +615,10 @@
     width: auto;
   }
 
+  .#{$prefix}--data-table-container--static {
+    width: fit-content;
+  }
+
   // -------------
   // Sticky header
   // -------------
@@ -787,8 +683,7 @@
       min-height: 3rem;
     }
 
-    // V11: remove compact, tall, and short
-    &:not(.#{$prefix}--data-table--compact):not(.#{$prefix}--data-table--xs):not(.#{$prefix}--data-table--tall):not(.#{$prefix}--data-table--xl):not(.#{$prefix}--data-table--short):not(.#{$prefix}--data-table--sm)
+    &:not(.#{$prefix}--data-table--xs):not(.#{$prefix}--data-table--xl):not(.#{$prefix}--data-table--sm)
       td:not(.#{$prefix}--table-column-menu):not(.#{$prefix}--table-column-checkbox) {
       padding-top: rem(14px);
     }
@@ -817,10 +712,7 @@
       align-items: center;
     }
 
-    // V11: remove tall
-    &.#{$prefix}--data-table--tall thead th.#{$prefix}--table-column-checkbox,
     &.#{$prefix}--data-table--xl thead th.#{$prefix}--table-column-checkbox,
-    &.#{$prefix}--data-table--tall td.#{$prefix}--table-column-checkbox,
     &.#{$prefix}--data-table--xl td.#{$prefix}--table-column-checkbox {
       align-items: flex-start;
     }
@@ -865,46 +757,29 @@
       min-width: 0;
     }
 
-    // V11: remove compact, short, tall
-    &.#{$prefix}--data-table--compact tr:not(.#{$prefix}--expandable-row),
     &.#{$prefix}--data-table--xs tr:not(.#{$prefix}--expandable-row),
-    &.#{$prefix}--data-table--short tr:not(.#{$prefix}--expandable-row),
     &.#{$prefix}--data-table--sm tr:not(.#{$prefix}--expandable-row),
-    &.#{$prefix}--data-table--tall tr:not(.#{$prefix}--expandable-row),
     &.#{$prefix}--data-table--xl tr:not(.#{$prefix}--expandable-row) {
       height: auto;
     }
 
-    // Compact
-    // V11: remove compact
-    &.#{$prefix}--data-table--compact tr:not(.#{$prefix}--expandable-row),
     &.#{$prefix}--data-table--xs tr:not(.#{$prefix}--expandable-row) {
       min-height: rem(24px);
     }
 
-    // Short
-    // V11: remove short
-    &.#{$prefix}--data-table--short tr:not(.#{$prefix}--expandable-row),
     &.#{$prefix}--data-table--sm tr:not(.#{$prefix}--expandable-row) {
       min-height: rem(32px);
     }
 
-    // Tall
-    // V11: remove tall
-    &.#{$prefix}--data-table--tall tr:not(.#{$prefix}--expandable-row),
     &.#{$prefix}--data-table--xl tr:not(.#{$prefix}--expandable-row) {
       min-height: rem(64px);
     }
 
     // Expansion overrides
-    // V11: remove compact
-    &.#{$prefix}--data-table--compact tr td.#{$prefix}--table-expand,
     &.#{$prefix}--data-table--xs tr td.#{$prefix}--table-expand {
       padding-top: rem(4px);
     }
 
-    // V11: remove short
-    &.#{$prefix}--data-table--short tr td.#{$prefix}--table-expand,
     &.#{$prefix}--data-table--sm tr td.#{$prefix}--table-expand {
       padding-top: rem(8px);
     }
@@ -919,41 +794,25 @@
       overflow-y: hidden;
     }
 
-    // V11: remove compact
-    &.#{$prefix}--data-table--compact th .#{$prefix}--table-header-label,
     &.#{$prefix}--data-table--xs th .#{$prefix}--table-header-label {
       padding-top: rem(3px);
       padding-bottom: 0;
     }
 
-    // V11: remove short
-    &.#{$prefix}--data-table--short th .#{$prefix}--table-header-label,
     &.#{$prefix}--data-table--sm th .#{$prefix}--table-header-label {
       padding-top: rem(8px);
       padding-bottom: 0;
     }
 
-    // V11: remove tall
-    &.#{$prefix}--data-table--tall th .#{$prefix}--table-header-label,
     &.#{$prefix}--data-table--xl th .#{$prefix}--table-header-label {
       padding-top: 1rem;
     }
 
-    // V11: remove tall
-    &.#{$prefix}--data-table--tall th.#{$prefix}--table-expand,
     &.#{$prefix}--data-table--xl th.#{$prefix}--table-expand {
       display: flex;
       align-items: flex-start;
     }
 
-    // With dynamic content overrides
-    // V11: remove compact, short
-    &.#{$prefix}--data-table--compact
-      tr.#{$prefix}--parent-row
-      .#{$prefix}--table-column-checkbox,
-    &.#{$prefix}--data-table--short
-      tr.#{$prefix}--parent-row
-      .#{$prefix}--table-column-checkbox,
     &.#{$prefix}--data-table--xs
       tr.#{$prefix}--parent-row
       .#{$prefix}--table-column-checkbox,
@@ -969,15 +828,11 @@
   // -------------------
   // with boolean column
   // -------------------
-  .#{$prefix}--data-table .bx--form-item.bx--checkbox-wrapper:last-of-type {
+  .#{$prefix}--data-table
+    .#{$prefix}--form-item.#{$prefix}--checkbox-wrapper:last-of-type {
     margin: 0;
   }
 
-  // V11: remove short, compact
-  .#{$prefix}--data-table--short
-    .#{$prefix}--form-item.#{$prefix}--checkbox-wrapper:last-of-type,
-  .#{$prefix}--data-table--compact
-    .#{$prefix}--form-item.#{$prefix}--checkbox-wrapper:last-of-type,
   .#{$prefix}--data-table--xs
     .#{$prefix}--form-item.#{$prefix}--checkbox-wrapper:last-of-type,
   .#{$prefix}--data-table--sm