Merge branch 'main' into 9127-react-public-api-test

config/eslint-config-carbon/package.json

@@ -1,7 +1,7 @@
 {
   "name": "eslint-config-carbon",
   "description": "ESLint configuration for Carbon",
-  "version": "2.7.0",
+  "version": "2.8.0-rc.0",
   "license": "Apache-2.0",
   "main": "index.js",
   "repository": {

config/jest-config-carbon/package.json

@@ -2,7 +2,7 @@
   "name": "jest-config-carbon",
   "private": true,
   "description": "Jest configuration and preset for Carbon",
-  "version": "0.7.0",
+  "version": "0.8.0-rc.0",
   "license": "Apache-2.0",
   "main": "index.js",
   "repository": {

packages/carbon-react/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@carbon/react",
   "description": "React components for the Carbon Design System",
-  "version": "0.1.0",
+  "version": "0.2.0-rc.0",
   "license": "Apache-2.0",
   "main": "lib/index.js",
   "module": "es/index.js",
@@ -42,11 +42,11 @@
     "sass": "^1.32.12"
   },
   "dependencies": {
-    "@carbon/feature-flags": "^0.5.0",
-    "@carbon/icons-react": "^10.36.0",
-    "@carbon/styles": "^0.1.0",
+    "@carbon/feature-flags": "^0.6.0-rc.0",
+    "@carbon/icons-react": "^10.37.0-rc.0",
+    "@carbon/styles": "^0.2.0-rc.0",
     "@carbon/telemetry": "0.0.0-alpha.6",
-    "carbon-components-react": "^7.40.0"
+    "carbon-components-react": "^7.41.0-rc.0"
   },
   "devDependencies": {
     "@babel/core": "^7.14.6",
@@ -56,7 +56,7 @@
     "@babel/plugin-transform-react-constant-elements": "^7.14.5",
     "@babel/preset-env": "^7.14.7",
     "@babel/preset-react": "^7.14.5",
-    "@carbon/themes": "^10.39.0",
+    "@carbon/themes": "^10.40.0-rc.0",
     "@rollup/plugin-babel": "^5.3.0",
     "@rollup/plugin-commonjs": "^18.0.0",
     "@rollup/plugin-node-resolve": "^11.2.1",
@@ -83,7 +83,7 @@
     "rollup": "^2.46.0",
     "rollup-plugin-strip-banner": "^2.0.0",
     "rtlcss": "^3.1.2",
-    "sass": "^1.32.12",
+    "sass": "^1.36.0",
     "sass-loader": "10",
     "style-loader": "^2.0.0",
     "webpack": "^4.41.5"

packages/cli/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@carbon/cli",
   "description": "Task automation for working with the Carbon Design System",
-  "version": "10.26.0",
+  "version": "10.27.0-rc.0",
   "license": "Apache-2.0",
   "bin": {
     "carbon-cli": "./bin/carbon-cli.js"
@@ -48,7 +48,7 @@
     "remark": "^10.0.1",
     "replace-in-file": "^6.1.0",
     "rollup": "^2.46.0",
-    "sass": "^1.32.4",
+    "sass": "^1.36.0",
     "sassdoc": "^2.7.3",
     "yargs": "^15.1.0"
   }

packages/colors/examples/sass-modules/package.json

@@ -11,6 +11,6 @@
     "next": "^10.0.3",
     "react": "^17.0.1",
     "react-dom": "^17.0.1",
-    "sass": "^1.29.0"
+    "sass": "^1.36.0"
   }
 }

packages/colors/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@carbon/colors",
   "description": "Colors for digital and software products using the Carbon Design System",
-  "version": "10.29.0",
+  "version": "10.30.0-rc.0",
   "license": "Apache-2.0",
   "main": "lib/index.js",
   "module": "es/index.js",
@@ -15,7 +15,8 @@
     "es",
     "lib",
     "scss",
-    "umd"
+    "umd",
+    "index.scss"
   ],
   "keywords": [
     "eyeglass-module",
@@ -35,10 +36,10 @@
     "clean": "rimraf css es lib umd scss index.scss"
   },
   "devDependencies": {
-    "@carbon/cli": "^10.26.0",
+    "@carbon/cli": "^10.27.0-rc.0",
     "@carbon/cli-reporter": "^10.5.0",
     "@carbon/scss-generator": "^10.13.0",
-    "@carbon/test-utils": "^10.16.0",
+    "@carbon/test-utils": "^10.17.0-rc.0",
     "change-case": "^4.1.1",
     "fs-extra": "^8.1.0",
     "node-sass": "^6.0.0",

packages/components/package.json

@@ -1,7 +1,7 @@
 {
   "name": "carbon-components",
   "description": "The Carbon Design System is IBM’s open-source design system for products and experiences.",
-  "version": "10.40.0",
+  "version": "10.41.0-rc.0",
   "license": "Apache-2.0",
   "main": "umd/index.js",
   "module": "es/index.js",
@@ -80,11 +80,11 @@
     "@babel/preset-env": "^7.14.7",
     "@babel/preset-react": "^7.14.5",
     "@babel/runtime": "^7.14.6",
-    "@carbon/cli": "^10.26.0",
-    "@carbon/elements": "^10.39.0",
-    "@carbon/icons-handlebars": "^10.36.0",
-    "@carbon/icons-react": "^10.36.0",
-    "@carbon/test-utils": "^10.16.0",
+    "@carbon/cli": "^10.27.0-rc.0",
+    "@carbon/elements": "^10.40.0-rc.0",
+    "@carbon/icons-handlebars": "^10.37.0-rc.0",
+    "@carbon/icons-react": "^10.37.0-rc.0",
+    "@carbon/test-utils": "^10.17.0-rc.0",
     "@frctl/fractal": "^1.1.0",
     "@rollup/plugin-babel": "^5.3.0",
     "@rollup/plugin-commonjs": "^18.0.0",
@@ -163,7 +163,7 @@
     "rollup": "^2.46.0",
     "rollup-plugin-filesize": "^9.1.1",
     "rollup-plugin-terser": "^7.0.2",
-    "sass": "^1.24.5",
+    "sass": "^1.36.0",
     "sass-loader": "^8.0.2",
     "serve-static": "^1.13.0",
     "style-loader": "^1.1.3",

packages/components/src/components/ui-shell/_header.scss

@@ -36,7 +36,7 @@
 
     width: mini-units(6);
     height: mini-units(6);
-    border: rem(2px) solid transparent;
+    border: rem(1px) solid transparent;
     transition: background-color $duration--fast-02,
       border-color $duration--fast-02;
   }

packages/elements/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@carbon/elements",
   "description": "A collection of design elements in code for the IBM Design Language",
-  "version": "10.39.0",
+  "version": "10.40.0-rc.0",
   "license": "Apache-2.0",
   "main": "lib/index.js",
   "module": "es/index.js",
@@ -35,17 +35,17 @@
     "clean": "rimraf es lib umd && node tasks/clean.js"
   },
   "dependencies": {
-    "@carbon/colors": "^10.29.0",
-    "@carbon/grid": "^10.32.0",
-    "@carbon/icons": "^10.36.0",
+    "@carbon/colors": "^10.30.0-rc.0",
+    "@carbon/grid": "^10.33.0-rc.0",
+    "@carbon/icons": "^10.37.0-rc.0",
     "@carbon/import-once": "^10.6.0",
-    "@carbon/layout": "^10.28.0",
-    "@carbon/motion": "^10.21.0",
-    "@carbon/themes": "^10.39.0",
-    "@carbon/type": "^10.32.0"
+    "@carbon/layout": "^10.29.0-rc.0",
+    "@carbon/motion": "^10.22.0-rc.0",
+    "@carbon/themes": "^10.40.0-rc.0",
+    "@carbon/type": "^10.33.0-rc.0"
   },
   "devDependencies": {
-    "@carbon/cli": "^10.26.0",
+    "@carbon/cli": "^10.27.0-rc.0",
     "fs-extra": "^8.1.0",
     "klaw-sync": "^6.0.0",
     "replace-in-file": "^3.4.2",

packages/feature-flags/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@carbon/feature-flags",
   "description": "Build with feature flags in Carbon",
-  "version": "0.5.0",
+  "version": "0.6.0-rc.0",
   "license": "Apache-2.0",
   "main": "lib/index.js",
   "module": "es/index.js",

packages/grid/examples/css-grid/package.json

@@ -12,6 +12,6 @@
     "next": "^10.0.7",
     "react": "^17.0.1",
     "react-dom": "^17.0.1",
-    "sass": "^1.32.7"
+    "sass": "^1.36.0"
   }
 }

packages/grid/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@carbon/grid",
   "description": "Grid for digital and software products using the Carbon Design System",
-  "version": "10.32.0",
+  "version": "10.33.0-rc.0",
   "license": "Apache-2.0",
   "repository": {
     "type": "git",
@@ -11,7 +11,8 @@
   "bugs": "https://github.com/carbon-design-system/carbon/issues",
   "files": [
     "css",
-    "scss"
+    "scss",
+    "index.scss"
   ],
   "keywords": [
     "eyeglass-module",
@@ -32,10 +33,10 @@
   },
   "dependencies": {
     "@carbon/import-once": "^10.6.0",
-    "@carbon/layout": "^10.28.0"
+    "@carbon/layout": "^10.29.0-rc.0"
   },
   "devDependencies": {
-    "@carbon/cli": "^10.26.0",
+    "@carbon/cli": "^10.27.0-rc.0",
     "rimraf": "^3.0.0"
   },
   "eyeglass": {

packages/grid/scss/modules/_css-grid.scss

@@ -5,6 +5,8 @@
 // LICENSE file in the root directory of this source tree.
 //
 
+@use "sass:math";
+
 @use 'sass:map';
 @use 'config' as *;
 @use 'breakpoint' as *;
@@ -411,7 +413,7 @@ $carbon--aspect-ratios: (
     $height: nth($aspect-ratio, 2);
 
     .#{$prefix}--aspect-ratio--#{$width}x#{$height}::before {
-      padding-top: percentage($height / $width);
+      padding-top: percentage(math.div($height, $width));
     }
   }
 }

packages/grid/scss/modules/_mixins.scss

@@ -5,6 +5,8 @@
 // LICENSE file in the root directory of this source tree.
 //
 
+@use "sass:math";
+
 @use 'config' as *;
 @use 'breakpoint' as *;
 
@@ -27,21 +29,21 @@
   // always setting `width: 100%;`. This works because we use `flex` values
   // later on to override this initial width.
   width: 100%;
-  padding-right: ($gutter / 2);
-  padding-left: ($gutter / 2);
+  padding-right: ($gutter * 0.5);
+  padding-left: ($gutter * 0.5);
 
   // For our condensed use-case, our gutters collapse to 2px solid, 1px on each
   // side.
   .#{$prefix}--row--condensed &,
   .#{$prefix}--grid--condensed & {
-    padding-right: ($condensed-gutter / 2);
-    padding-left: ($condensed-gutter / 2);
+    padding-right: ($condensed-gutter * 0.5);
+    padding-left: ($condensed-gutter * 0.5);
   }
 
   // For our narrow use-case, our container hangs 16px into the gutter
   .#{$prefix}--row--narrow &,
   .#{$prefix}--grid--narrow & {
-    padding-right: ($gutter / 2);
+    padding-right: ($gutter * 0.5);
     padding-left: 0;
   }
 }
@@ -61,8 +63,8 @@
     // Add a `max-width` to ensure content within each column does not blow out
     // the width of the column. Applies to IE10+ and Firefox. Chrome and Safari
     // do not appear to require this.
-    max-width: percentage($span / $columns);
-    flex: 0 0 percentage($span / $columns);
+    max-width: percentage(math.div($span, $columns));
+    flex: 0 0 percentage(math.div($span, $columns));
   }
 }
 
@@ -72,7 +74,7 @@
 /// @access private
 /// @group @carbon/grid
 @mixin -make-col-offset($span, $columns) {
-  $offset: $span / $columns;
+  $offset: math.div($span, $columns);
   @if $offset == 0 {
     margin-left: 0;
   } @else {
@@ -154,8 +156,8 @@
 @mixin make-row($gutter: $grid-gutter) {
   display: flex;
   flex-wrap: wrap;
-  margin-right: -1 * $gutter / 2;
-  margin-left: -1 * $gutter / 2;
+  margin-right: -1 * $gutter * 0.5;
+  margin-left: -1 * $gutter * 0.5;
 }
 
 // -----------------------------------------------------------------------------
@@ -206,20 +208,20 @@
 /// @group @carbon/grid
 @mixin -hang($gutter: $grid-gutter) {
   .#{$prefix}--hang--start {
-    padding-left: ($gutter / 2);
+    padding-left: ($gutter * 0.5);
   }
 
   .#{$prefix}--hang--end {
-    padding-right: ($gutter / 2);
+    padding-right: ($gutter * 0.5);
   }
 
   // Deprecated ☠️
   .#{$prefix}--hang--left {
-    padding-left: ($gutter / 2);
+    padding-left: ($gutter * 0.5);
   }
 
   .#{$prefix}--hang--right {
-    padding-right: ($gutter / 2);
+    padding-right: ($gutter * 0.5);
   }
 }
 
@@ -246,14 +248,14 @@
       $prev-margin: map-get($prev-breakpoint, margin);
       @if $prev-margin != $margin {
         @include breakpoint($name) {
-          padding-right: #{($grid-gutter / 2) + $margin};
-          padding-left: #{($grid-gutter / 2) + $margin};
+          padding-right: #{($grid-gutter * 0.5) + $margin};
+          padding-left: #{($grid-gutter * 0.5) + $margin};
         }
       }
     } @else {
       @include breakpoint($name) {
-        padding-right: #{($grid-gutter / 2) + $margin};
-        padding-left: #{($grid-gutter / 2) + $margin};
+        padding-right: #{($grid-gutter * 0.5) + $margin};
+        padding-left: #{($grid-gutter * 0.5) + $margin};
       }
     }
   }
@@ -308,13 +310,13 @@
 
   .#{$prefix}--row-padding [class*='#{$prefix}--col'],
   .#{$prefix}--col-padding {
-    padding-top: $grid-gutter / 2;
-    padding-bottom: $grid-gutter / 2;
+    padding-top: $grid-gutter * 0.5;
+    padding-bottom: $grid-gutter * 0.5;
   }
 
   .#{$prefix}--grid--condensed [class*='#{$prefix}--col'] {
-    padding-top: $condensed-gutter / 2;
-    padding-bottom: $condensed-gutter / 2;
+    padding-top: $condensed-gutter * 0.5;
+    padding-bottom: $condensed-gutter * 0.5;
   }
 
   @include -make-grid-columns($breakpoints, $grid-gutter);