@carbon/styles 1.28.0-rc.0 → 1.29.0-rc.0

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@carbon/styles",
   "description": "Styles for the Carbon Design System",
-  "version": "1.28.0-rc.0",
+  "version": "1.29.0-rc.0",
   "license": "Apache-2.0",
   "repository": {
     "type": "git",
@@ -44,13 +44,13 @@
   "devDependencies": {
     "@carbon/test-utils": "^10.28.0",
     "autoprefixer": "^10.4.7",
-    "browserslist-config-carbon": "^11.2.0-rc.0",
+    "browserslist-config-carbon": "^11.2.0",
     "css": "^3.0.0",
     "cssnano": "^6.0.0",
     "lodash.isequal": "^4.5.0",
     "postcss": "^8.4.14",
     "postcss-flexbugs-fixes": "^5.0.2",
-    "rimraf": "^4.0.0",
+    "rimraf": "^5.0.0",
     "sass": "^1.51.0"
   },
   "sideEffects": [
@@ -59,5 +59,5 @@
     "scss/**/*.css",
     "css/**/*.css"
   ],
-  "gitHead": "419643a2b37523e0d4add7245c4762e51356e91b"
+  "gitHead": "e25cb04ffef0834eac0ef6f05bc9f7978fb4b796"
 }

package/scss/_config.scss

@@ -62,7 +62,7 @@ $prefix: 'cds' !default;
 /// @group @carbon/grid
 $flex-grid-columns: 16 !default;
 
-/// Specify if the default grid type should be the flexbox grid
+/// Specify if the flexbox grid styles should be emitted
 /// @type Boolean
 /// @group config
 $use-flexbox-grid: false !default;

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

@@ -33,6 +33,52 @@
     width: 100%;
   }
 
+  .#{$prefix}--contained-list .#{$prefix}--search {
+    position: sticky;
+    z-index: 1;
+    top: 48px;
+
+    &.#{$prefix}--search--expandable .#{$prefix}--search-input {
+      background-color: $field;
+    }
+  }
+
+  .#{$prefix}--contained-list .#{$prefix}--search .#{$prefix}--search-input {
+    border-bottom: 1px solid $border-subtle;
+    background-color: $background;
+  }
+
+  .#{$prefix}--contained-list
+    .#{$prefix}--search
+    .#{$prefix}--search-close::before {
+    display: none;
+  }
+
+  .#{$prefix}--contained-list .#{$prefix}--search .#{$prefix}--search-close {
+    border-right: 2px solid transparent;
+    outline: none;
+
+    &:focus {
+      @include focus-outline('outline');
+    }
+  }
+
+  .#{$prefix}--contained-list
+    .#{$prefix}--search
+    .#{$prefix}--search-input
+    ~ .#{$prefix}--search-close:hover {
+    border-bottom: 1px solid transparent;
+  }
+
+  .#{$prefix}--contained-list
+    .#{$prefix}--search
+    .#{$prefix}--search-input:focus
+    ~ .#{$prefix}--search-close:hover {
+    border: 2px solid $focus;
+    border-left: 0;
+    outline: none;
+  }
+
   // Sizes
 
   $sizes: (

package/scss/components/number-input/_number-input.scss

@@ -31,6 +31,12 @@
     flex-direction: column;
   }
 
+  .#{$prefix}--number
+    .#{$prefix}--number__input-wrapper--warning
+    input[type='number'] {
+    padding-right: rem(128px);
+  }
+
   .#{$prefix}--number input[type='number'] {
     @include type-style('body-compact-01');
     @include focus-outline('reset');
@@ -40,7 +46,7 @@
     min-width: 9.375rem;
     height: rem(40px);
     box-sizing: border-box;
-    padding-right: rem(128px);
+    padding-right: rem(96px);
     padding-left: $spacing-05;
     border: 0;
     border-bottom: rem(1px) solid $border-strong;
@@ -77,14 +83,38 @@
     &::-webkit-inner-spin-button {
       appearance: none;
     }
+
+    &[data-invalid] {
+      padding-right: rem(128px);
+    }
   }
 
-  .#{$prefix}--number--lg.#{$prefix}--number input[type='number'] {
-    padding-right: rem(144px);
+  .#{$prefix}--number--lg.#{$prefix}--number {
+    input[type='number'] {
+      padding-right: rem(112px);
+
+      &[data-invalid] {
+        padding-right: rem(144px);
+      }
+    }
+
+    .#{$prefix}--number__input-wrapper--warning input[type='number'] {
+      padding-right: rem(144px);
+    }
   }
 
-  .#{$prefix}--number--sm.#{$prefix}--number input[type='number'] {
-    padding-right: rem(112px);
+  .#{$prefix}--number--sm.#{$prefix}--number {
+    input[type='number'] {
+      padding-right: rem(80px);
+
+      &[data-invalid] {
+        padding-right: rem(112px);
+      }
+    }
+
+    .#{$prefix}--number__input-wrapper--warning input[type='number'] {
+      padding-right: rem(112px);
+    }
   }
 
   .#{$prefix}--number input[type='number']:disabled {

package/scss/components/structured-list/_structured-list.scss

@@ -186,11 +186,15 @@
     white-space: nowrap;
   }
 
+  .#{$prefix}--structured-list-input + .#{$prefix}--structured-list-td {
+    text-align: right;
+  }
+
   .#{$prefix}--structured-list-svg {
     display: inline-block;
     fill: transparent;
     transition: all motion.$duration-fast-02 motion.motion(standard, productive);
-    vertical-align: middle;
+    vertical-align: top;
   }
 
   .#{$prefix}--structured-list-input:checked

package/scss/components/ui-shell/side-nav/_side-nav.scss

@@ -87,6 +87,7 @@
 
   .#{$prefix}--side-nav__overlay-active {
     @include breakpoint-down('lg') {
+      z-index: z('overlay');
       width: 100vw;
       height: 100vh;
       background-color: $overlay;

package/scss/grid/_index.scss

@@ -12,6 +12,6 @@
 
 @if config.$use-flexbox-grid == true {
   @include grid.flex-grid();
-} @else {
-  @include grid.css-grid();
 }
+
+@include grid.css-grid();