Merge branch 'main' into size-audit-controlled-pass

docs/migration/v11.md

@@ -1270,8 +1270,8 @@ For full Sass API documentation, visit the
 | `scss/grid.scss`      |     | Moved to `index.scss`                                                     |
 | `scss/index.scss`     |     | Moved to `index.scss`                                                     |
 | `scss/_css-grid.scss` |     | New                                                                       |
-| `scss/_flexbox.scss`  |     | New                                                                       |
-| `scss/_mixins.scss`   |     | Moved to `scss/_flexbox.scss`                                             |
+| `scss/flex-grid.scss` |     | New                                                                       |
+| `scss/_mixins.scss`   |     | Moved to `scss/flex-grid.scss`                                            |
 | `scss/_prefix.scss`   |     | Moved to `scss/_config.scss`                                              |
 | `scss/12.scss`        |     | This file has been removed, to configure the grid use `scss/_config.scss` |
 

packages/carbon-react/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@carbon/react",
   "description": "React components for the Carbon Design System",
-  "version": "0.13.0",
+  "version": "0.14.0-rc.0",
   "license": "Apache-2.0",
   "main": "lib/index.js",
   "module": "es/index.js",
@@ -43,11 +43,11 @@
   },
   "dependencies": {
     "@carbon/feature-flags": "^0.7.0",
-    "@carbon/icons-react": "^10.45.0",
-    "@carbon/styles": "^0.13.0",
+    "@carbon/icons-react": "^10.46.0-rc.0",
+    "@carbon/styles": "^0.14.0-rc.0",
     "@carbon/telemetry": "0.0.0-alpha.6",
-    "carbon-components": "^10.52.0",
-    "carbon-components-react": "^7.52.0",
+    "carbon-components": "^10.53.0-rc.0",
+    "carbon-components-react": "^7.53.0-rc.0",
     "carbon-icons": "^7.0.7"
   },
   "devDependencies": {
@@ -58,7 +58,7 @@
     "@babel/plugin-transform-react-constant-elements": "^7.16.7",
     "@babel/preset-env": "^7.16.7",
     "@babel/preset-react": "^7.16.7",
-    "@carbon/themes": "^10.50.0",
+    "@carbon/themes": "^10.51.0-rc.0",
     "@rollup/plugin-babel": "^5.3.0",
     "@rollup/plugin-commonjs": "^21.0.0",
     "@rollup/plugin-node-resolve": "^13.0.0",

packages/carbon-react/tasks/build-styles.js

@@ -95,6 +95,16 @@ async function build() {
               },
             ],
           },
+          {
+            type: 'directory',
+            filepath: 'aspect-ratio',
+            files: [
+              {
+                type: 'file',
+                filepath: '_index.scss',
+              },
+            ],
+          },
           {
             type: 'directory',
             filepath: 'breadcrumb',

packages/cli/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@carbon/cli",
   "description": "Task automation for working with the Carbon Design System",
-  "version": "10.32.0",
+  "version": "10.33.0-rc.0",
   "license": "Apache-2.0",
   "bin": {
     "carbon-cli": "./bin/carbon-cli.js"

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.35.0",
+  "version": "10.36.0-rc.0",
   "license": "Apache-2.0",
   "main": "lib/index.js",
   "module": "es/index.js",
@@ -36,7 +36,7 @@
     "clean": "rimraf css es lib umd scss index.scss"
   },
   "devDependencies": {
-    "@carbon/cli": "^10.32.0",
+    "@carbon/cli": "^10.33.0-rc.0",
     "@carbon/cli-reporter": "^10.5.0",
     "@carbon/scss-generator": "^10.13.0",
     "@carbon/test-utils": "^10.21.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.52.0",
+  "version": "10.53.0-rc.0",
   "license": "Apache-2.0",
   "main": "umd/index.js",
   "module": "es/index.js",
@@ -77,10 +77,10 @@
     "@babel/preset-env": "^7.16.7",
     "@babel/preset-react": "^7.16.7",
     "@babel/runtime": "^7.16.7",
-    "@carbon/cli": "^10.32.0",
-    "@carbon/elements": "^10.51.0",
-    "@carbon/icons-handlebars": "^10.45.0",
-    "@carbon/icons-react": "^10.45.0",
+    "@carbon/cli": "^10.33.0-rc.0",
+    "@carbon/elements": "^10.52.0-rc.0",
+    "@carbon/icons-handlebars": "^10.46.0-rc.0",
+    "@carbon/icons-react": "^10.46.0-rc.0",
     "@carbon/test-utils": "^10.21.0",
     "@frctl/fractal": "^1.1.0",
     "@rollup/plugin-babel": "^5.3.0",

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.51.0",
+  "version": "10.52.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.35.0",
-    "@carbon/grid": "^10.40.0",
-    "@carbon/icons": "^10.45.0",
+    "@carbon/colors": "^10.36.0-rc.0",
+    "@carbon/grid": "^10.41.0-rc.0",
+    "@carbon/icons": "^10.46.0-rc.0",
     "@carbon/import-once": "^10.6.0",
-    "@carbon/layout": "^10.35.0",
-    "@carbon/motion": "^10.27.0",
-    "@carbon/themes": "^10.50.0",
-    "@carbon/type": "^10.40.0"
+    "@carbon/layout": "^10.36.0-rc.0",
+    "@carbon/motion": "^10.28.0-rc.0",
+    "@carbon/themes": "^10.51.0-rc.0",
+    "@carbon/type": "^10.41.0-rc.0"
   },
   "devDependencies": {
-    "@carbon/cli": "^10.32.0",
+    "@carbon/cli": "^10.33.0-rc.0",
     "fs-extra": "^10.0.0",
     "klaw-sync": "^6.0.0",
     "replace-in-file": "^3.4.2",

packages/grid/__tests__/__snapshots__/scss-test.js.snap

@@ -3,9 +3,9 @@
 exports[`@carbon/grid Public API 1`] = `
 Array [
   "prefix",
+  "flex-grid-columns",
   "grid-gutter",
   "grid-gutter--condensed",
   "grid-breakpoints",
-  "carbon--aspect-ratios",
 ]
 `;

packages/grid/index.scss

@@ -7,6 +7,8 @@
 
 @forward 'scss/modules/config' with (
   $prefix: 'bx' !default,
+  $flex-grid-columns: 16 !default,
 );
 @forward 'scss/modules/breakpoint';
 @forward 'scss/modules/css-grid';
+@forward 'scss/modules/flex-grid';

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.40.0",
+  "version": "10.41.0-rc.0",
   "license": "Apache-2.0",
   "repository": {
     "type": "git",
@@ -33,10 +33,10 @@
   },
   "dependencies": {
     "@carbon/import-once": "^10.6.0",
-    "@carbon/layout": "^10.35.0"
+    "@carbon/layout": "^10.36.0-rc.0"
   },
   "devDependencies": {
-    "@carbon/cli": "^10.32.0",
+    "@carbon/cli": "^10.33.0-rc.0",
     "rimraf": "^3.0.0"
   },
   "eyeglass": {

packages/grid/scss/modules/_config.scss

@@ -10,3 +10,9 @@
 /// @access public
 /// @group @carbon/grid
 $prefix: 'bx' !default;
+
+/// Total columns used in the flex grid
+/// @type Number
+/// @access public
+/// @group @carbon/grid
+$flex-grid-columns: 16 !default;

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

@@ -356,71 +356,3 @@
 .#{$prefix}--align-items-center {
   align-items: center;
 }
-
-// -----------------------------------------------------------------------------
-// Aspect ratio -- TODO: in v11 should this move to a new file to live alongside the AspectRatio component?
-// -----------------------------------------------------------------------------
-
-/// The aspect ratios that are used to generate corresponding aspect ratio
-/// classes in code
-/// @type List
-/// @access public
-/// @group @carbon/grid
-$carbon--aspect-ratios: (
-  (16, 9),
-  (9, 16),
-  (2, 1),
-  (1, 2),
-  (4, 3),
-  (3, 4),
-  (3, 2),
-  (2, 3),
-  (1, 1)
-);
-
-/// Generates the CSS classname utilities for the aspect ratios
-///
-/// CSS Tricks article on aspect ratios and all the different ways it can be done.
-/// https://css-tricks.com/aspect-ratio-boxes/#article-header-id-6
-///
-/// That article references an earlier article on the topic.
-/// https://keithjgrant.com/posts/2017/03/aspect-ratios/
-///
-/// @param {Number} $width width from an aspect ratio
-/// @param {Number} $height height from an aspect ratio
-/// @access private
-/// @group @carbon/grid
-@mixin carbon--aspect-ratio($aspect-ratios: $carbon--aspect-ratios) {
-  .#{$prefix}--aspect-ratio {
-    position: relative;
-  }
-
-  .#{$prefix}--aspect-ratio::before {
-    width: 1px;
-    height: 0;
-    margin-left: -1px;
-    content: '';
-    float: left;
-  }
-
-  .#{$prefix}--aspect-ratio::after {
-    display: table;
-    clear: both;
-    content: '';
-  }
-
-  @each $aspect-ratio in $aspect-ratios {
-    $width: nth($aspect-ratio, 1);
-    $height: nth($aspect-ratio, 2);
-
-    .#{$prefix}--aspect-ratio--#{$width}x#{$height}::before {
-      @if meta.function-exists('div', 'math') {
-        padding-top: percentage(math.div($height, $width));
-      } @else {
-        padding-top: percentage(($height / $width));
-      }
-    }
-  }
-}
-
-@include carbon--aspect-ratio();