@carbon/styles 1.72.0-rc.0 → 1.72.0

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@carbon/styles",
   "description": "Styles for the Carbon Design System",
-  "version": "1.72.0-rc.0",
+  "version": "1.72.0",
   "license": "Apache-2.0",
   "repository": {
     "type": "git",
@@ -42,11 +42,11 @@
   "dependencies": {
     "@carbon/colors": "^11.28.0",
     "@carbon/feature-flags": "^0.24.0",
-    "@carbon/grid": "^11.30.0-rc.0",
+    "@carbon/grid": "^11.30.0",
     "@carbon/layout": "^11.28.0",
     "@carbon/motion": "^11.24.0",
-    "@carbon/themes": "^11.44.0-rc.0",
-    "@carbon/type": "^11.34.0-rc.0",
+    "@carbon/themes": "^11.44.0",
+    "@carbon/type": "^11.34.0",
     "@ibm/plex": "6.0.0-next.6",
     "@ibm/plex-mono": "0.0.3-alpha.0",
     "@ibm/plex-sans": "0.0.3-alpha.0",
@@ -75,5 +75,5 @@
     "scss/**/*.css",
     "css/**/*.css"
   ],
-  "gitHead": "7b6d921583ff275baace5baa66da9d9b31740fa8"
+  "gitHead": "97fc2e65d5d78f3bc191f036cb669b072db1d85f"
 }

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

@@ -941,59 +941,67 @@
   // -------------------
   // Slug styles
   // -------------------
-  .#{$prefix}--data-table .#{$prefix}--table-column-slug {
+  .#{$prefix}--data-table .#{$prefix}--table-column-slug,
+  .#{$prefix}--data-table .#{$prefix}--table-column-decorator {
     inline-size: $spacing-05;
     padding-inline-end: 0;
   }
 
   tr.#{$prefix}--data-table--slug-row,
-  tr.#{$prefix}--data-table--slug-row + .#{$prefix}--expandable-row {
+  tr.#{$prefix}--data-table--slug-row + .#{$prefix}--expandable-row,
+  tr.#{$prefix}--data-table--ai-label-row,
+  tr.#{$prefix}--data-table--ai-label-row + .#{$prefix}--expandable-row {
     @include ai-table-gradient();
 
     background-attachment: fixed;
   }
 
-  .#{$prefix}--data-table--slug-row {
+  .#{$prefix}--data-table--slug-row,
+  .#{$prefix}--data-table--ai-label-row {
     box-shadow: inset 1px 0 $ai-border-strong;
   }
 
   // Remove table cell backgrounds that are overriding gradient background on row
-  .#{$prefix}--data-table tbody tr.#{$prefix}--data-table--slug-row:hover td,
-  tr.#{$prefix}--data-table--slug-row.#{$prefix}--expandable-row:hover
+  .#{$prefix}--data-table
+    tbody
+    tr.#{$prefix}--data-table--ai-label-row:hover
+    td,
+  tr.#{$prefix}--data-table--ai-label-row.#{$prefix}--expandable-row:hover
     + .#{$prefix}--expandable-row[data-child-row]
     td,
-  tr.#{$prefix}--data-table--slug-row.#{$prefix}--expandable-row--hover
+  tr.#{$prefix}--data-table--ai-label-row.#{$prefix}--expandable-row--hover
     + .#{$prefix}--expandable-row[data-child-row]:hover
     > td,
-  tr.#{$prefix}--data-table--slug-row.#{$prefix}--expandable-row--hover > td,
-  tr.#{$prefix}--data-table--selected.#{$prefix}--data-table--slug-row.#{$prefix}--expandable-row
+  tr.#{$prefix}--data-table--ai-label-row.#{$prefix}--expandable-row--hover
+    > td,
+  tr.#{$prefix}--data-table--selected.#{$prefix}--data-table--ai-label-row.#{$prefix}--expandable-row
     + tr.#{$prefix}--expandable-row[data-child-row]
     > td,
-  tr.#{$prefix}--data-table--slug-row.#{$prefix}--parent-row.#{$prefix}--data-table--selected.#{$prefix}--expandable-row:hover
+  tr.#{$prefix}--data-table--ai-label-row.#{$prefix}--parent-row.#{$prefix}--data-table--selected.#{$prefix}--expandable-row:hover
     td,
-  tr.#{$prefix}--data-table--slug-row.#{$prefix}--parent-row.#{$prefix}--data-table--selected.#{$prefix}--expandable-row:hover
+  tr.#{$prefix}--data-table--ai-label-row.#{$prefix}--parent-row.#{$prefix}--data-table--selected.#{$prefix}--expandable-row:hover
     td:first-of-type,
-  tr.#{$prefix}--data-table--slug-row.#{$prefix}--parent-row.#{$prefix}--data-table--selected:not(
+  tr.#{$prefix}--data-table--ai-label-row.#{$prefix}--parent-row.#{$prefix}--data-table--selected:not(
       .#{$prefix}--expandable-row
     ):hover
     > td,
-  tr.#{$prefix}--data-table--slug-row.#{$prefix}--parent-row.#{$prefix}--data-table--selected.#{$prefix}--expandable-row:hover
+  tr.#{$prefix}--data-table--ai-label-row.#{$prefix}--parent-row.#{$prefix}--data-table--selected.#{$prefix}--expandable-row:hover
     + tr[data-child-row]
     > td,
-  tr.#{$prefix}--data-table--slug-row.#{$prefix}--parent-row.#{$prefix}--data-table--selected.#{$prefix}--expandable-row--hover
+  tr.#{$prefix}--data-table--ai-label-row.#{$prefix}--parent-row.#{$prefix}--data-table--selected.#{$prefix}--expandable-row--hover
     > td,
-  tr.#{$prefix}--data-table--slug-row.#{$prefix}--parent-row.#{$prefix}--data-table--selected.#{$prefix}--expandable-row--hover
+  tr.#{$prefix}--data-table--ai-label-row.#{$prefix}--parent-row.#{$prefix}--data-table--selected.#{$prefix}--expandable-row--hover
     > td:first-of-type {
     background-color: transparent;
   }
 
-  .#{$prefix}--data-table tbody tr.#{$prefix}--data-table--slug-row:hover,
-  tr.#{$prefix}--data-table--slug-row:hover
+  .#{$prefix}--data-table tbody tr.#{$prefix}--data-table--ai-label-row:hover,
+  tr.#{$prefix}--data-table--ai-label-row:hover
     + .#{$prefix}--expandable-row[data-child-row],
-  tr.#{$prefix}--data-table--slug-row.#{$prefix}--expandable-row--hover
+  tr.#{$prefix}--data-table--ai-label-row.#{$prefix}--expandable-row--hover
     + .#{$prefix}--expandable-row[data-child-row]:hover,
-  tr.#{$prefix}--expandable-row--hover.#{$prefix}--data-table--slug-row,
-  tr.#{$prefix}--data-table--selected.#{$prefix}--parent-row.#{$prefix}--expandable-row--hover.#{$prefix}--data-table--slug-row {
+  tr.#{$prefix}--expandable-row--hover.#{$prefix}--data-table--ai-label-row,
+  tr.#{$prefix}--data-table--selected.#{$prefix}--parent-row.#{$prefix}--expandable-row--hover.#{$prefix}--data-table--ai-label-row {
     @include ai-table-gradient('hover');
 
     background-attachment: fixed;
@@ -1002,22 +1010,31 @@
   tr.#{$prefix}--parent-row.#{$prefix}--data-table--selected.#{$prefix}--data-table--slug-row,
   .#{$prefix}--data-table--selected.#{$prefix}--data-table--slug-row,
   tr.#{$prefix}--data-table--selected.#{$prefix}--data-table--slug-row
+    + .#{$prefix}--expandable-row,
+  tr.#{$prefix}--parent-row.#{$prefix}--data-table--selected.#{$prefix}--data-table--ai-label-row,
+  .#{$prefix}--data-table--selected.#{$prefix}--data-table--ai-label-row,
+  tr.#{$prefix}--data-table--selected.#{$prefix}--data-table--ai-label-row
     + .#{$prefix}--expandable-row {
     @include ai-table-gradient('selected');
 
     background-attachment: fixed;
   }
 
-  tr.#{$prefix}--data-table--slug-row.#{$prefix}--data-table--selected td,
-  tr.#{$prefix}--data-table--slug-row.#{$prefix}--data-table--selected:hover td,
-  tbody tr.#{$prefix}--data-table--slug-row:hover td,
-  tr.#{$prefix}--data-table--slug-row.#{$prefix}--parent-row.#{$prefix}--data-table--selected.#{$prefix}--expandable-row:hover
+  tr.#{$prefix}--data-table--ai-label-row.#{$prefix}--data-table--selected td,
+  tr.#{$prefix}--data-table--ai-label-row.#{$prefix}--data-table--selected:hover
+    td,
+  tbody tr.#{$prefix}--data-table--ai-label-row:hover td,
+  tr.#{$prefix}--data-table--ai-label-row.#{$prefix}--parent-row.#{$prefix}--data-table--selected.#{$prefix}--expandable-row:hover
     td:not(.#{$prefix}--table-expand):not(
       .#{$prefix}--table-column-checkbox
     ):not(.#{$prefix}--table-column-slug) {
     border-block-end-color: $border-subtle;
   }
 
+  tr.#{$prefix}--expandable-row.#{$prefix}--data-table--selected.#{$prefix}--data-table--slug-row[data-parent-row]
+    > td:not(.#{$prefix}--table-expand):not(
+      .#{$prefix}--table-column-checkbox
+    ):not(.#{$prefix}--table-column-slug),
   tr.#{$prefix}--expandable-row.#{$prefix}--data-table--selected.#{$prefix}--data-table--slug-row[data-parent-row]
     > td:not(.#{$prefix}--table-expand):not(
       .#{$prefix}--table-column-checkbox
@@ -1026,6 +1043,10 @@
   }
 
   tr.#{$prefix}--parent-row.#{$prefix}--data-table--slug-row.#{$prefix}--expandable-row:hover
+    td:first-of-type,
+  tr.#{$prefix}--parent-row.#{$prefix}--data-table--ai-label-row.#{$prefix}--expandable-row:hover
+    td:first-of-type,
+  tr.#{$prefix}--parent-row.#{$prefix}--data-table--decoratorß-row.#{$prefix}--expandable-row:hover
     td:first-of-type {
     border-block-end: 1px solid transparent;
   }
@@ -1034,14 +1055,20 @@
     thead
     th.#{$prefix}--table-sort__header--slug
     .#{$prefix}--table-sort,
+  .#{$prefix}--data-table thead th:has(> .#{$prefix}--table-header-label--slug),
+  .#{$prefix}--data-table
+    thead
+    th.#{$prefix}--table-sort__header--ai-label
+    .#{$prefix}--table-sort,
   .#{$prefix}--data-table
     thead
-    th:has(> .#{$prefix}--table-header-label--slug) {
+    th:has(> .#{$prefix}--table-header-label--ai-label) {
     @include ai-table-gradient();
   }
 
   .#{$prefix}--table-column-slug .#{$prefix}--ai-label,
-  .#{$prefix}--table-column-slug .#{$prefix}--slug {
+  .#{$prefix}--table-column-slug .#{$prefix}--slug,
+  .#{$prefix}--table-column-decorator .#{$prefix}--decorator {
     position: absolute;
     z-index: 2;
     transform: translateY(-50%);
@@ -1050,27 +1077,40 @@
   .#{$prefix}--data-table--xl
     .#{$prefix}--table-column-slug
     .#{$prefix}--ai-label,
-  .#{$prefix}--data-table--xl .#{$prefix}--table-column-slug .#{$prefix}--slug {
+  .#{$prefix}--data-table--xl .#{$prefix}--table-column-slug .#{$prefix}--slug,
+  .#{$prefix}--data-table--xl
+    .#{$prefix}--table-column-decorator
+    .#{$prefix}--decorator {
     transform: translateY(1px);
   }
 
   // AILabel inside header styles
-  th .#{$prefix}--table-header-label.#{$prefix}--table-header-label--slug {
+  th .#{$prefix}--table-header-label.#{$prefix}--table-header-label--slug,
+  th .#{$prefix}--table-header-label.#{$prefix}--table-header-label--ai-label,
+  th .#{$prefix}--table-header-label.#{$prefix}--table-header-label--decorator {
     display: flex;
     align-items: center;
   }
 
   th
-    .#{$prefix}--table-header-label.#{$prefix}--table-header-label--slug
+    .#{$prefix}--table-header-label.#{$prefix}--table-header-label--ai-label
     .#{$prefix}--ai-label,
   th
-    .#{$prefix}--table-header-label.#{$prefix}--table-header-label--slug
-    .#{$prefix}--slug {
+    .#{$prefix}--table-header-label.#{$prefix}--table-header-label--ai-label
+    .#{$prefix}--slug,
+  th
+    .#{$prefix}--table-header-label.#{$prefix}--table-header-label--decorator
+    .#{$prefix}--table-header-label--decorator-inner,
+  th
+    .#{$prefix}--table-header-label.#{$prefix}--table-header-label--ai-label
+    .#{$prefix}--table-header-label--decorator-inner {
     margin-inline-start: auto;
   }
 
   th.#{$prefix}--table-sort__header--slug,
-  th:has(.#{$prefix}--table-header-label--slug) {
+  th:has(.#{$prefix}--table-header-label--slug),
+  th.#{$prefix}--table-sort__header--ai-label,
+  th:has(.#{$prefix}--table-header-label--ai-label) {
     box-shadow: inset 0 1px $ai-border-strong;
   }
 

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

@@ -82,6 +82,9 @@
   tbody:has(> tr.#{$prefix}--data-table--slug-row)
     > tr.#{$prefix}--expandable-row[data-child-row]
     td,
+  tbody:has(> tr.#{$prefix}--data-table--ai-label-row)
+    > tr.#{$prefix}--expandable-row[data-child-row]
+    td,
   tbody:has(td.#{$prefix}--table-column-checkbox)
     > tr.#{$prefix}--expandable-row[data-child-row]
     td {
@@ -89,7 +92,7 @@
   }
 
   // Increase padding inside expandable row when slug AND checkbox is present in row
-  tbody:has(> tr.#{$prefix}--data-table--slug-row):has(
+  tbody:has(> tr.#{$prefix}--data-table--ai-label-row):has(
       td.#{$prefix}--table-column-checkbox
     )
     > tr.#{$prefix}--expandable-row[data-child-row]
@@ -474,6 +477,10 @@
   .#{$prefix}--parent-row .#{$prefix}--table-column-slug,
   .#{$prefix}--parent-row
     .#{$prefix}--table-column-slug
+    + td.#{$prefix}--table-expand[data-previous-value='collapsed'],
+  .#{$prefix}--parent-row .#{$prefix}--table-column-decorator,
+  .#{$prefix}--parent-row
+    .#{$prefix}--table-column-decorator
     + td.#{$prefix}--table-expand[data-previous-value='collapsed'] {
     box-shadow: none;
   }
@@ -482,12 +489,19 @@
     .#{$prefix}--table-column-slug,
   .#{$prefix}--parent-row.#{$prefix}--expandable-row
     .#{$prefix}--table-column-slug
+    + td.#{$prefix}--table-expand[data-previous-value='collapsed'],
+  .#{$prefix}--parent-row.#{$prefix}--expandable-row
+    .#{$prefix}--table-column-decorator,
+  .#{$prefix}--parent-row.#{$prefix}--expandable-row
+    .#{$prefix}--table-column-decorator
     + td.#{$prefix}--table-expand[data-previous-value='collapsed'] {
     border-block-end: 1px solid transparent;
   }
 
   .#{$prefix}--data-table--slug-row td,
-  .#{$prefix}--data-table tr.#{$prefix}--data-table--slug-row:hover td {
+  .#{$prefix}--data-table tr.#{$prefix}--data-table--slug-row:hover td,
+  .#{$prefix}--data-table--ai-label-row td,
+  .#{$prefix}--data-table tr.#{$prefix}--data-table--ai-label-row:hover td {
     border-block-start: 1px solid transparent;
   }
 

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

@@ -245,11 +245,21 @@
 
   // AILabel styles
   .#{$prefix}--table-sort__header--slug .#{$prefix}--table-sort__icon,
-  .#{$prefix}--table-sort__header--slug .#{$prefix}--table-sort__icon-unsorted {
+  .#{$prefix}--table-sort__header--slug .#{$prefix}--table-sort__icon-unsorted,
+  .#{$prefix}--table-sort__header--ai-label .#{$prefix}--table-sort__icon,
+  .#{$prefix}--table-sort__header--ai-label
+    .#{$prefix}--table-sort__icon-unsorted,
+  .#{$prefix}--table-sort__header--decorator .#{$prefix}--table-sort__icon,
+  .#{$prefix}--table-sort__header--decorator
+    .#{$prefix}--table-sort__icon-unsorted {
     margin-inline: auto convert.to-rem(8px);
   }
-  .#{$prefix}--table-sort__header--slug .#{$prefix}--ai-label,
-  .#{$prefix}--table-sort__header--slug .#{$prefix}--slug {
+  .#{$prefix}--table-sort__header--ai-label .#{$prefix}--ai-label,
+  .#{$prefix}--table-sort__header--ai-label .#{$prefix}--slug,
+  .#{$prefix}--table-sort__header--decorator
+    .#{$prefix}--table-header-label--decorator-inner,
+  .#{$prefix}--table-sort__header--ai-label
+    .#{$prefix}--table-header-label--decorator-inner {
     margin-inline-end: convert.to-rem(8px);
   }