@carbon/styles 1.31.0-rc.0 → 1.31.0

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@carbon/styles",
   "description": "Styles for the Carbon Design System",
-  "version": "1.31.0-rc.0",
+  "version": "1.31.0",
   "license": "Apache-2.0",
   "repository": {
     "type": "git",
@@ -32,17 +32,17 @@
     "sass": "^1.33.0"
   },
   "dependencies": {
-    "@carbon/colors": "^11.16.0-rc.0",
-    "@carbon/feature-flags": "^0.15.0-rc.0",
-    "@carbon/grid": "^11.15.0-rc.0",
-    "@carbon/layout": "^11.15.0-rc.0",
-    "@carbon/motion": "^11.12.0-rc.0",
-    "@carbon/themes": "^11.20.0-rc.0",
-    "@carbon/type": "^11.19.0-rc.0",
+    "@carbon/colors": "^11.16.0",
+    "@carbon/feature-flags": "^0.15.0",
+    "@carbon/grid": "^11.15.0",
+    "@carbon/layout": "^11.15.0",
+    "@carbon/motion": "^11.12.0",
+    "@carbon/themes": "^11.20.0",
+    "@carbon/type": "^11.19.0",
     "@ibm/plex": "6.0.0-next.6"
   },
   "devDependencies": {
-    "@carbon/test-utils": "^10.30.0-rc.0",
+    "@carbon/test-utils": "^10.30.0",
     "autoprefixer": "^10.4.7",
     "browserslist-config-carbon": "^11.2.0",
     "css": "^3.0.0",
@@ -59,5 +59,5 @@
     "scss/**/*.css",
     "css/**/*.css"
   ],
-  "gitHead": "7469c25402ca50e3e74bdb049fbdd5811c1dede9"
+  "gitHead": "4f3787a474ab93252975d717426c186ec4355812"
 }

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

@@ -123,6 +123,46 @@
     text-align: left;
     vertical-align: middle;
   }
+  .#{$prefix}--data-table.#{$prefix}--data-table--top-aligned-body {
+    &.#{$prefix}--data-table--lg
+      tr:not([data-child-row])
+      td:not(.#{$prefix}--table-expand) {
+      padding-top: $spacing-05;
+      padding-bottom: $spacing-05;
+
+      &.#{$prefix}--table-column-menu {
+        padding-top: $spacing-03;
+      }
+
+      &.#{$prefix}--table-column-checkbox:not(.#{$prefix}--table-column-radio) {
+        padding-top: rem(13px);
+      }
+    }
+
+    td {
+      vertical-align: top;
+    }
+  }
+
+  .#{$prefix}--data-table.#{$prefix}--data-table--top-aligned-header {
+    &.#{$prefix}--data-table--lg
+      th:not(.#{$prefix}--table-expand):not(.#{$prefix}--table-sort__header) {
+      padding-top: $spacing-05;
+      padding-bottom: $spacing-05;
+
+      &.#{$prefix}--table-column-menu {
+        padding-top: $spacing-03;
+      }
+
+      &.#{$prefix}--table-column-checkbox {
+        padding-top: rem(13px);
+      }
+    }
+
+    th {
+      vertical-align: top;
+    }
+  }
 
   .#{$prefix}--data-table th[align='right'],
   .#{$prefix}--data-table td[align='right'] {
@@ -495,8 +535,14 @@
     height: calc(100% + 1px);
   }
 
-  .#{$prefix}--data-table.#{$prefix}--data-table--xs
-    .#{$prefix}--table-column-checkbox {
+  .#{$prefix}--data-table.#{$prefix}--data-table--xs:not(
+      .#{$prefix}--data-table--top-aligned-body
+    )
+    td.#{$prefix}--table-column-checkbox,
+  .#{$prefix}--data-table.#{$prefix}--data-table--xs:not(
+      .#{$prefix}--data-table--top-aligned-header
+    )
+    th.#{$prefix}--table-column-checkbox {
     padding-top: 0;
     padding-bottom: 0;
   }
@@ -524,13 +570,21 @@
   }
 
   .#{$prefix}--data-table--sm td,
-  .#{$prefix}--data-table--sm tbody tr th {
+  .#{$prefix}--data-table--sm tbody tr th,
+  .#{$prefix}--data-table--sm.#{$prefix}--data-table--top-aligned-header
+    th.#{$prefix}--table-column-checkbox {
     padding-top: rem(7px);
     padding-bottom: rem(6px);
   }
 
-  .#{$prefix}--data-table.#{$prefix}--data-table--sm
-    .#{$prefix}--table-column-checkbox {
+  .#{$prefix}--data-table.#{$prefix}--data-table--sm:not(
+      .#{$prefix}--data-table--top-aligned-body
+    )
+    td.#{$prefix}--table-column-checkbox,
+  .#{$prefix}--data-table.#{$prefix}--data-table--sm:not(
+      .#{$prefix}--data-table--top-aligned-header
+    )
+    th.#{$prefix}--table-column-checkbox {
     padding-top: rem(3px);
     padding-bottom: rem(3px);
   }
@@ -548,7 +602,9 @@
     height: rem(40px);
   }
 
-  .#{$prefix}--data-table--md .#{$prefix}--table-header-label {
+  .#{$prefix}--data-table--md .#{$prefix}--table-header-label,
+  .#{$prefix}--data-table--md.#{$prefix}--data-table--top-aligned-header
+    th.#{$prefix}--table-column-checkbox {
     padding-top: rem(7px);
     padding-bottom: rem(7px);
   }
@@ -559,8 +615,14 @@
     padding-bottom: rem(6px);
   }
 
-  .#{$prefix}--data-table.#{$prefix}--data-table--md
-    .#{$prefix}--table-column-checkbox {
+  .#{$prefix}--data-table.#{$prefix}--data-table--md:not(
+      .#{$prefix}--data-table--top-aligned-body
+    )
+    td.#{$prefix}--table-column-checkbox,
+  .#{$prefix}--data-table.#{$prefix}--data-table--md:not(
+      .#{$prefix}--data-table--top-aligned-header
+    )
+    th.#{$prefix}--table-column-checkbox {
     padding-top: rem(3px);
     padding-bottom: rem(3px);
   }
@@ -586,7 +648,8 @@
 
   .#{$prefix}--data-table--xl td,
   .#{$prefix}--data-table--xl tbody tr th {
-    padding-top: 1rem;
+    padding-top: $spacing-05;
+    padding-bottom: $spacing-05;
   }
 
   .#{$prefix}--data-table--xl th,

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

@@ -216,10 +216,41 @@
     height: calc(100% + 1px);
     align-items: center;
     justify-content: center;
-    padding: 0 0.5rem;
+    padding: 0 $spacing-03;
     vertical-align: inherit;
   }
 
+  .#{$prefix}--data-table--top-aligned-body
+    td
+    .#{$prefix}--table-expand__button,
+  .#{$prefix}--data-table--top-aligned-header
+    th
+    .#{$prefix}--table-expand__button {
+    height: rem(32px);
+    align-items: start;
+    padding-top: $spacing-03;
+  }
+
+  .#{$prefix}--data-table--top-aligned-body.#{$prefix}--data-table--xs
+    td
+    .#{$prefix}--table-expand__button,
+  .#{$prefix}--data-table--top-aligned-header.#{$prefix}--data-table--xs
+    th
+    .#{$prefix}--table-expand__button {
+    height: rem(24px);
+    padding-top: $spacing-02;
+  }
+
+  .#{$prefix}--data-table--top-aligned-body.#{$prefix}--data-table--md
+    td
+    .#{$prefix}--table-expand__button,
+  .#{$prefix}--data-table--top-aligned-header.#{$prefix}--data-table--md
+    th
+    .#{$prefix}--table-expand__button {
+    padding-top: $spacing-03;
+    margin-top: -$spacing-02;
+  }
+
   .#{$prefix}--table-expand__button:focus {
     box-shadow: inset 0 0 0 2px $focus;
     outline: none;
@@ -233,7 +264,6 @@
 
   .#{$prefix}--data-table--xl .#{$prefix}--table-expand__button {
     width: rem(32px);
-    padding: 0;
   }
 
   // fix expanded parent separating border length

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

@@ -90,6 +90,39 @@
     justify-content: space-between;
   }
 
+  .#{$prefix}--data-table--top-aligned-header th .#{$prefix}--table-sort__flex {
+    align-items: start;
+  }
+
+  .#{$prefix}--data-table.#{$prefix}--data-table--top-aligned-header.#{$prefix}--data-table--lg
+    th.#{$prefix}--table-sort__header {
+    padding-top: $spacing-05;
+  }
+
+  .#{$prefix}--data-table.#{$prefix}--data-table--top-aligned-header.#{$prefix}--data-table--sm
+    th.#{$prefix}--table-sort__header
+    .#{$prefix}--table-sort__flex
+    .#{$prefix}--table-header-label,
+  .#{$prefix}--data-table.#{$prefix}--data-table--top-aligned-header.#{$prefix}--data-table--xs
+    th.#{$prefix}--table-sort__header
+    .#{$prefix}--table-sort__flex
+    .#{$prefix}--table-header-label {
+    padding-top: 0;
+    padding-bottom: 0;
+  }
+
+  .#{$prefix}--data-table.#{$prefix}--data-table--top-aligned-header.#{$prefix}--data-table--sm
+    th.#{$prefix}--table-sort__header {
+    padding-top: rem(7px);
+    padding-bottom: rem(7px);
+  }
+
+  .#{$prefix}--data-table.#{$prefix}--data-table--top-aligned-header.#{$prefix}--data-table--xs
+    th.#{$prefix}--table-sort__header {
+    padding-top: rem(2px);
+    padding-bottom: rem(2px);
+  }
+
   .#{$prefix}--data-table--sort:not(.#{$prefix}--data-table--xs):not(
       .#{$prefix}--data-table--sm
     ):not(.#{$prefix}--data-table--md):not(.#{$prefix}--data-table--xl)

package/scss/components/progress-bar/_progress-bar.scss

@@ -12,19 +12,24 @@
 @use '../../type' as *;
 @use '../../utilities/convert' as *;
 @use '../../utilities/visually-hidden' as *;
+@use '../../utilities/layout';
 
 /// Progress Bar styles
 /// @access public
 /// @group progress-bar
 @mixin progress-bar {
+  .#{$prefix}--progress-bar {
+    @include layout.use('density', $default: 'normal');
+  }
+
   .#{$prefix}--progress-bar__label {
     @include type-style('body-compact-01');
 
     display: flex;
     min-width: rem(48px);
     justify-content: space-between;
-    margin-bottom: $spacing-03;
     color: $text-primary;
+    margin-block-end: $spacing-03;
   }
 
   .#{$prefix}--progress-bar__label-text {
@@ -90,7 +95,7 @@
 
   .#{$prefix}--progress-bar__status-icon {
     flex-shrink: 0;
-    margin-left: $spacing-05;
+    margin-inline-start: layout.density('padding-inline');
   }
 
   .#{$prefix}--progress-bar--finished .#{$prefix}--progress-bar__bar,
@@ -122,7 +127,7 @@
     .#{$prefix}--progress-bar__label {
     flex-shrink: 1;
     justify-content: flex-start;
-    margin-right: 0;
+    margin-inline-end: 0;
   }
 
   @keyframes progress-bar-indeterminate {
@@ -144,7 +149,7 @@
   .#{$prefix}--progress-bar--inline .#{$prefix}--progress-bar__label {
     flex-shrink: 0;
     margin-bottom: 0;
-    margin-inline-end: $spacing-05;
+    margin-inline-end: layout.density('padding-inline');
   }
 
   .#{$prefix}--progress-bar--inline .#{$prefix}--progress-bar__track {
@@ -158,6 +163,6 @@
 
   .#{$prefix}--progress-bar--indented .#{$prefix}--progress-bar__label,
   .#{$prefix}--progress-bar--indented .#{$prefix}--progress-bar__helper-text {
-    padding-inline: $spacing-05;
+    padding-inline: layout.density('padding-inline');
   }
 }

package/scss/components/slider/_slider.scss

@@ -46,7 +46,7 @@
   }
 
   .#{$prefix}--slider__range-label {
-    @include type-style('code-02');
+    @include type-style('body-compact-01');
 
     color: $text-primary;
     white-space: nowrap;

package/scss/components/tabs/_tabs.scss

@@ -326,7 +326,6 @@ $icon-tab-size: custom-property.get-var('icon-tab-size', rem(40px));
       .#{$prefix}--tabs__nav-item--close-icon {
         padding: $spacing-02;
         margin: -$spacing-02;
-        cursor: pointer;
         line-height: 0;
         pointer-events: auto;
       }