@carbon/styles 1.34.1 → 1.35.0

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@carbon/styles",
   "description": "Styles for the Carbon Design System",
-  "version": "1.34.1",
+  "version": "1.35.0",
   "license": "Apache-2.0",
   "repository": {
     "type": "git",
@@ -22,7 +22,8 @@
     "index.scss"
   ],
   "publishConfig": {
-    "access": "public"
+    "access": "public",
+    "provenance": true
   },
   "scripts": {
     "build": "yarn clean && node tasks/build-css.js",
@@ -37,13 +38,13 @@
     }
   },
   "dependencies": {
-    "@carbon/colors": "^11.18.1",
-    "@carbon/feature-flags": "^0.15.0",
-    "@carbon/grid": "^11.17.1",
-    "@carbon/layout": "^11.17.1",
-    "@carbon/motion": "^11.14.1",
-    "@carbon/themes": "^11.22.1",
-    "@carbon/type": "^11.21.1",
+    "@carbon/colors": "^11.19.0",
+    "@carbon/feature-flags": "^0.16.0",
+    "@carbon/grid": "^11.18.0",
+    "@carbon/layout": "^11.18.0",
+    "@carbon/motion": "^11.15.0",
+    "@carbon/themes": "^11.23.0",
+    "@carbon/type": "^11.22.0",
     "@ibm/plex": "6.0.0-next.6"
   },
   "devDependencies": {
@@ -64,5 +65,5 @@
     "scss/**/*.css",
     "css/**/*.css"
   ],
-  "gitHead": "22b28f5d05e6caa4565e4e84308abcf2fd977aec"
+  "gitHead": "f9ac32a70a209100bb30ed41edc39c596eae7956"
 }

package/scss/__tests__/__snapshots__/type-test.js.snap

@@ -933,7 +933,7 @@ Object {
         Object {
           "position": Position {
             "end": Object {
-              "column": 72,
+              "column": 59,
               "line": 96,
             },
             "source": undefined,
@@ -944,12 +944,12 @@ Object {
           },
           "property": "font-size",
           "type": "declaration",
-          "value": "var(--cds-helper-text-02-font-size, carbon--type-scale(2))",
+          "value": "var(--cds-helper-text-02-font-size, 0.875rem)",
         },
         Object {
           "position": Position {
             "end": Object {
-              "column": 85,
+              "column": 58,
               "line": 97,
             },
             "source": undefined,
@@ -960,7 +960,7 @@ Object {
           },
           "property": "font-weight",
           "type": "declaration",
-          "value": "var(--cds-helper-text-02-font-weight, carbon--font-weight(\\"regular\\"))",
+          "value": "var(--cds-helper-text-02-font-weight, 400)",
         },
         Object {
           "position": Position {

package/scss/_layout.scss

@@ -32,7 +32,7 @@ $layout-tokens: (
   ),
 );
 
-:root {
+@mixin emit-layout-tokens {
   @each $group, $properties in $layout-tokens {
     @each $property, $steps in $properties {
       @each $step, $value in $steps {
@@ -102,3 +102,7 @@ $layout-tokens: (
     }
   }
 }
+
+:root {
+  @include emit-layout-tokens();
+}

package/scss/components/contained-list/_contained-list.scss

@@ -134,6 +134,7 @@
 
   .#{$prefix}--contained-list-item {
     position: relative;
+    display: list-item;
     list-style: none;
   }
 

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

@@ -27,6 +27,7 @@
   .#{$prefix}--table-toolbar {
     // Need for batch actions
     position: relative;
+    z-index: 1;
     display: flex;
     width: 100%;
     min-height: $spacing-09;
@@ -388,6 +389,7 @@
     justify-content: space-between;
     background-color: $background-brand;
     clip-path: polygon(0 0, 100% 0, 100% 0, 0 0);
+    opacity: 0;
     pointer-events: none;
     transform: translate3d(0, 48px, 0);
     transition: transform $duration-fast-02 motion(standard, productive),
@@ -401,7 +403,9 @@
   }
   // 200% to allow tooltips
   .#{$prefix}--batch-actions--active {
-    clip-path: polygon(0 0, 200% 0, 200% 200%, 0 200%);
+    z-index: 1;
+    clip-path: polygon(0 0, 300% 0, 300% 300%, 0 300%);
+    opacity: 1;
     pointer-events: all;
     transform: translate3d(0, 0, 0);
   }

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

@@ -69,7 +69,7 @@
   }
 
   tr.#{$prefix}--parent-row.#{$prefix}--expandable-row + tr[data-child-row] td {
-    padding-left: 4rem;
+    padding-left: 3.5rem;
     border-bottom: 1px solid $border-subtle;
     transition: padding-bottom $duration-fast-02 motion(standard, productive),
       transform $duration-fast-02 motion(standard, productive),

package/scss/components/popover/_popover.scss

@@ -173,7 +173,7 @@ $popover-caret-height: custom-property.get-var(
   }
 
   .#{$prefix}--popover--tab-tip
-    .#{$prefix}--popover
+    > .#{$prefix}--popover
     .#{$prefix}--popover-caret {
     display: none;
   }
@@ -183,13 +183,17 @@ $popover-caret-height: custom-property.get-var(
   //-----------------------------------------------------------------------------
 
   // Popover content placement
-  .#{$prefix}--popover--bottom .#{$prefix}--popover-content {
+  .#{$prefix}--popover--bottom
+    > .#{$prefix}--popover
+    .#{$prefix}--popover-content {
     bottom: 0;
     left: 50%;
     transform: translate(-50%, calc(100% + $popover-offset));
   }
 
-  .#{$prefix}--popover--bottom-left .#{$prefix}--popover-content {
+  .#{$prefix}--popover--bottom-left
+    > .#{$prefix}--popover
+    .#{$prefix}--popover-content {
     bottom: 0;
     left: 0;
     transform: translate(
@@ -198,16 +202,24 @@ $popover-caret-height: custom-property.get-var(
     );
   }
 
-  .#{$prefix}--popover--bottom-right .#{$prefix}--popover-content {
+  .#{$prefix}--popover--bottom-right
+    > .#{$prefix}--popover
+    .#{$prefix}--popover-content {
     right: 0;
     bottom: 0;
     transform: translate($popover-offset, calc(100% + $popover-offset));
   }
 
   // Popover hover area placement
-  .#{$prefix}--popover--bottom .#{$prefix}--popover-content::before,
-  .#{$prefix}--popover--bottom-left .#{$prefix}--popover-content::before,
-  .#{$prefix}--popover--bottom-right .#{$prefix}--popover-content::before {
+  .#{$prefix}--popover--bottom
+    > .#{$prefix}--popover
+    .#{$prefix}--popover-content::before,
+  .#{$prefix}--popover--bottom-left
+    > .#{$prefix}--popover
+    .#{$prefix}--popover-content::before,
+  .#{$prefix}--popover--bottom-right
+    > .#{$prefix}--popover
+    .#{$prefix}--popover-content::before {
     top: 0;
     right: 0;
     left: 0;
@@ -216,9 +228,15 @@ $popover-caret-height: custom-property.get-var(
   }
 
   // Caret placement
-  .#{$prefix}--popover--bottom .#{$prefix}--popover-caret,
-  .#{$prefix}--popover--bottom-left .#{$prefix}--popover-caret,
-  .#{$prefix}--popover--bottom-right .#{$prefix}--popover-caret {
+  .#{$prefix}--popover--bottom
+    > .#{$prefix}--popover
+    .#{$prefix}--popover-caret,
+  .#{$prefix}--popover--bottom-left
+    > .#{$prefix}--popover
+    .#{$prefix}--popover-caret,
+  .#{$prefix}--popover--bottom-right
+    > .#{$prefix}--popover
+    .#{$prefix}--popover-caret {
     bottom: 0;
     left: 50%;
     width: $popover-caret-width;
@@ -232,13 +250,17 @@ $popover-caret-height: custom-property.get-var(
   //-----------------------------------------------------------------------------
 
   // Popover content placement
-  .#{$prefix}--popover--top .#{$prefix}--popover-content {
+  .#{$prefix}--popover--top
+    > .#{$prefix}--popover
+    .#{$prefix}--popover-content {
     top: 0;
     left: 50%;
     transform: translate(-50%, calc(-100% - $popover-offset));
   }
 
-  .#{$prefix}--popover--top-left .#{$prefix}--popover-content {
+  .#{$prefix}--popover--top-left
+    > .#{$prefix}--popover
+    .#{$prefix}--popover-content {
     top: 0;
     left: 0;
     transform: translate(
@@ -247,16 +269,24 @@ $popover-caret-height: custom-property.get-var(
     );
   }
 
-  .#{$prefix}--popover--top-right .#{$prefix}--popover-content {
+  .#{$prefix}--popover--top-right
+    > .#{$prefix}--popover
+    .#{$prefix}--popover-content {
     top: 0;
     right: 0;
     transform: translate($popover-offset, calc(-100% - $popover-offset));
   }
 
   // Popover hover area placement
-  .#{$prefix}--popover--top .#{$prefix}--popover-content::before,
-  .#{$prefix}--popover--top-left .#{$prefix}--popover-content::before,
-  .#{$prefix}--popover--top-right .#{$prefix}--popover-content::before {
+  .#{$prefix}--popover--top
+    > .#{$prefix}--popover
+    .#{$prefix}--popover-content::before,
+  .#{$prefix}--popover--top-left
+    > .#{$prefix}--popover
+    .#{$prefix}--popover-content::before,
+  .#{$prefix}--popover--top-right
+    > .#{$prefix}--popover
+    .#{$prefix}--popover-content::before {
     right: 0;
     bottom: 0;
     left: 0;
@@ -265,9 +295,13 @@ $popover-caret-height: custom-property.get-var(
   }
 
   // Caret placement
-  .#{$prefix}--popover--top .#{$prefix}--popover-caret,
-  .#{$prefix}--popover--top-left .#{$prefix}--popover-caret,
-  .#{$prefix}--popover--top-right .#{$prefix}--popover-caret {
+  .#{$prefix}--popover--top > .#{$prefix}--popover .#{$prefix}--popover-caret,
+  .#{$prefix}--popover--top-left
+    > .#{$prefix}--popover
+    .#{$prefix}--popover-caret,
+  .#{$prefix}--popover--top-right
+    > .#{$prefix}--popover
+    .#{$prefix}--popover-caret {
     top: 0;
     left: 50%;
     width: $popover-caret-width;
@@ -281,7 +315,9 @@ $popover-caret-height: custom-property.get-var(
   //-----------------------------------------------------------------------------
 
   // Popover content placement
-  .#{$prefix}--popover--right .#{$prefix}--popover-content {
+  .#{$prefix}--popover--right
+    > .#{$prefix}--popover
+    .#{$prefix}--popover-content {
     top: 50%;
     left: 100%;
     // Add in 0.1px to prevent rounding errors where the content is
@@ -289,7 +325,9 @@ $popover-caret-height: custom-property.get-var(
     transform: translate($popover-offset, -50%);
   }
 
-  .#{$prefix}--popover--right-top .#{$prefix}--popover-content {
+  .#{$prefix}--popover--right-top
+    > .#{$prefix}--popover
+    .#{$prefix}--popover-content {
     top: 50%;
     left: 100%;
     transform: translate(
@@ -298,16 +336,24 @@ $popover-caret-height: custom-property.get-var(
     );
   }
 
-  .#{$prefix}--popover--right-bottom .#{$prefix}--popover-content {
+  .#{$prefix}--popover--right-bottom
+    > .#{$prefix}--popover
+    .#{$prefix}--popover-content {
     bottom: 50%;
     left: 100%;
     transform: translate($popover-offset, calc(0.5 * $popover-offset + 16px));
   }
 
   // Popover hover area placement
-  .#{$prefix}--popover--right .#{$prefix}--popover-content::before,
-  .#{$prefix}--popover--right-top .#{$prefix}--popover-content::before,
-  .#{$prefix}--popover--right-bottom .#{$prefix}--popover-content::before {
+  .#{$prefix}--popover--right
+    > .#{$prefix}--popover
+    .#{$prefix}--popover-content::before,
+  .#{$prefix}--popover--right-top
+    > .#{$prefix}--popover
+    .#{$prefix}--popover-content::before,
+  .#{$prefix}--popover--right-bottom
+    > .#{$prefix}--popover
+    .#{$prefix}--popover-content::before {
     top: 0;
     bottom: 0;
     left: 0;
@@ -316,9 +362,13 @@ $popover-caret-height: custom-property.get-var(
   }
 
   // Caret placement
-  .#{$prefix}--popover--right .#{$prefix}--popover-caret,
-  .#{$prefix}--popover--right-top .#{$prefix}--popover-caret,
-  .#{$prefix}--popover--right-bottom .#{$prefix}--popover-caret {
+  .#{$prefix}--popover--right > .#{$prefix}--popover .#{$prefix}--popover-caret,
+  .#{$prefix}--popover--right-top
+    > .#{$prefix}--popover
+    .#{$prefix}--popover-caret,
+  .#{$prefix}--popover--right-bottom
+    > .#{$prefix}--popover
+    .#{$prefix}--popover-caret {
     top: 50%;
     left: 100%;
     width: $popover-caret-height;
@@ -332,7 +382,9 @@ $popover-caret-height: custom-property.get-var(
   //-----------------------------------------------------------------------------
 
   // Popover content placement
-  .#{$prefix}--popover--left .#{$prefix}--popover-content {
+  .#{$prefix}--popover--left
+    > .#{$prefix}--popover
+    .#{$prefix}--popover-content {
     top: 50%;
     right: 100%;
     // Add in 0.1px to prevent rounding errors where the content is
@@ -340,7 +392,9 @@ $popover-caret-height: custom-property.get-var(
     transform: translate(calc(-1 * $popover-offset + 0.1px), -50%);
   }
 
-  .#{$prefix}--popover--left-top .#{$prefix}--popover-content {
+  .#{$prefix}--popover--left-top
+    > .#{$prefix}--popover
+    .#{$prefix}--popover-content {
     top: -50%;
     right: 100%;
     // Add in 0.1px to prevent rounding errors where the content is
@@ -351,7 +405,9 @@ $popover-caret-height: custom-property.get-var(
     );
   }
 
-  .#{$prefix}--popover--left-bottom .#{$prefix}--popover-content {
+  .#{$prefix}--popover--left-bottom
+    > .#{$prefix}--popover
+    .#{$prefix}--popover-content {
     right: 100%;
     bottom: -50%;
     // Add in 0.1px to prevent rounding errors where the content is
@@ -363,9 +419,15 @@ $popover-caret-height: custom-property.get-var(
   }
 
   // Popover hover area placement
-  .#{$prefix}--popover--left .#{$prefix}--popover-content::before,
-  .#{$prefix}--popover--left-top .#{$prefix}--popover-content::before,
-  .#{$prefix}--popover--left-bottom .#{$prefix}--popover-content::before {
+  .#{$prefix}--popover--left
+    > .#{$prefix}--popover
+    .#{$prefix}--popover-content::before,
+  .#{$prefix}--popover--left-top
+    > .#{$prefix}--popover
+    .#{$prefix}--popover-content::before,
+  .#{$prefix}--popover--left-bottom
+    > .#{$prefix}--popover
+    .#{$prefix}--popover-content::before {
     top: 0;
     right: 0;
     bottom: 0;
@@ -374,9 +436,13 @@ $popover-caret-height: custom-property.get-var(
   }
 
   // Caret placement
-  .#{$prefix}--popover--left .#{$prefix}--popover-caret,
-  .#{$prefix}--popover--left-top .#{$prefix}--popover-caret,
-  .#{$prefix}--popover--left-bottom .#{$prefix}--popover-caret {
+  .#{$prefix}--popover--left > .#{$prefix}--popover .#{$prefix}--popover-caret,
+  .#{$prefix}--popover--left-top
+    > .#{$prefix}--popover
+    .#{$prefix}--popover-caret,
+  .#{$prefix}--popover--left-bottom
+    > .#{$prefix}--popover
+    .#{$prefix}--popover-caret {
     top: 50%;
     right: 100%;
     width: $popover-caret-height;
@@ -388,7 +454,9 @@ $popover-caret-height: custom-property.get-var(
   //-----------------------------------------------------------------------------
   // Tab Tip Variant
   //-----------------------------------------------------------------------------
-  .#{$prefix}--popover--tab-tip .#{$prefix}--popover-content {
+  .#{$prefix}--popover--tab-tip
+    > .#{$prefix}--popover
+    .#{$prefix}--popover-content {
     border-radius: 0;
   }
 

package/scss/components/select/_select.scss

@@ -57,6 +57,7 @@
     font-family: inherit;
     // reset disabled <select> opacity
     opacity: 1;
+    text-overflow: ellipsis;
 
     // Do not transition on background-color (see: https://github.com/carbon-design-system/carbon/issues/4464)
     transition: outline $duration-fast-01 motion(standard, productive);