Merge branch 'main' into 10670-sizes

.github/ISSUE_TEMPLATE/BUG_REPORT.yaml

@@ -30,6 +30,7 @@ body:
         - '@carbon/pictograms'
         - '@carbon/pictograms-react'
         - '@carbon/react'
+        - '@carbon/styles'
         - '@carbon/themes'
         - '@carbon/type'
         - '@carbon/upgrade'

.github/workflows/deploy-react-storybook.yml

@@ -22,7 +22,7 @@ jobs:
         with:
           node-version: '16.x'
       - name: Install dependencies
-        run: yarn install --immutable --immutable-cache --check-cache
+        run: yarn install --immutable --immutable-cache
       - name: Build project
         run: yarn build
       - name: Install ibmcloud CLI

.prettierignore

@@ -44,7 +44,7 @@ packages/icons-react/next/**
 **/_inlined/**
 
 # Examples
-**/examples/**
+packages/**/examples/**
 !packages/themes/examples/**
 
 # Yarn

config/stylelint-config-carbon/index.js

@@ -12,6 +12,7 @@ module.exports = {
     require.resolve('stylelint-config-standard'),
     require.resolve('stylelint-no-unsupported-browser-features'),
     require.resolve('stylelint-config-idiomatic-order'),
+    require.resolve('stylelint-config-standard-scss'),
     require.resolve('./rules/possible-errors'),
     require.resolve('./rules/limit-language-features'),
     require.resolve('./rules/stylistic-issues'),

config/stylelint-config-carbon/package.json

@@ -23,19 +23,20 @@
     "access": "public"
   },
   "peerDependencies": {
-    "stylelint": "^13.6.0"
+    "stylelint": "^14.3.0"
   },
   "dependencies": {
     "stylelint-config-idiomatic-order": "^8.1.0",
-    "stylelint-config-prettier": "^8.0.2",
-    "stylelint-config-standard": "^22.0.0",
-    "stylelint-no-unsupported-browser-features": "^5.0.1",
-    "stylelint-order": "^4.1.0",
-    "stylelint-prettier": "^1.2.0",
-    "stylelint-scss": "^3.19.0"
+    "stylelint-config-prettier": "^9.0.3",
+    "stylelint-config-standard": "^24.0.0",
+    "stylelint-config-standard-scss": "^3.0.0",
+    "stylelint-no-unsupported-browser-features": "^5.0.2",
+    "stylelint-order": "^5.0.0",
+    "stylelint-prettier": "^2.0.0",
+    "stylelint-scss": "^4.1.0"
   },
   "devDependencies": {
     "prettier": "^2.2.1",
-    "stylelint": "^13.13.1"
+    "stylelint": "^14.3.0"
   }
 }

config/stylelint-config-carbon/plugins/scss.js

@@ -61,6 +61,8 @@ module.exports = {
     // @-rule
     // Disallow unknown at-rules. Should be used instead of stylelint's at-rule-no-unknown.
     'scss/at-rule-no-unknown': true,
+    // Disallow parentheses in conditional @ rules (if, elsif, while)
+    'scss/at-rule-conditional-no-parentheses': OFF,
 
     // $-variable
     // Require a newline after the colon in $-variable declarations.
@@ -89,6 +91,8 @@ module.exports = {
     'scss/double-slash-comment-inline': 'never',
     // Require or disallow whitespace after the // in //-comments
     'scss/double-slash-comment-whitespace-inside': OFF,
+    // Disallow empty comments. Should be used instead of the stylelint's comment-no-empty because the core rule ignores SCSS-like comments.
+    'scss/comment-no-empty': OFF,
 
     // Declaration
     // Require or disallow properties with - in their names to be in a form of a nested group.
@@ -116,4 +120,19 @@ module.exports = {
     // Disallow redundant nesting selectors (&).
     'scss/selector-no-redundant-nesting-selector': true,
   },
+  overrides: [
+    {
+      files: [
+        './packages/components/**/*.scss',
+        './packages/grid/scss/*.scss',
+        './packages/layout/scss/*.scss',
+        './packages/motion/**/*.scss',
+        './packages/type/scss/*.scss',
+        './packages/import-once/**/*.scss',
+      ],
+      rules: {
+        'scss/no-global-function-names': OFF,
+      },
+    },
+  ],
 };

config/stylelint-config-carbon/rules/limit-language-features.js

@@ -16,6 +16,10 @@ module.exports = {
     'color-named': 'never',
     // Disallow hex colors.
     'color-no-hex': OFF,
+    // Specify modern or legacy notation for applicable color-functions.
+    // Currently causes errors with sass
+    'color-function-notation': OFF,
+    'alpha-value-notation': OFF,
 
     // Function
     // Specify a blacklist of disallowed functions.

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` |
 

examples/codesandbox-styles/.gitignore

@@ -0,0 +1,24 @@
+# Logs
+logs
+*.log
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+pnpm-debug.log*
+lerna-debug.log*
+
+node_modules
+dist
+dist-ssr
+*.local
+
+# Editor directories and files
+.vscode/*
+!.vscode/extensions.json
+.idea
+.DS_Store
+*.suo
+*.ntvs*
+*.njsproj
+*.sln
+*.sw?

examples/codesandbox-styles/index.html

@@ -0,0 +1,13 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="icon" type="image/svg+xml" href="favicon.svg" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Carbon Styles Sandbox</title>
+  </head>
+  <body>
+    <button class="cds--btn cds--btn--primary">Hello world</button>
+    <script type="module" src="/main.js"></script>
+  </body>
+</html>

examples/codesandbox-styles/main.js

@@ -0,0 +1 @@
+import './style.scss';

examples/codesandbox-styles/package.json

@@ -0,0 +1,15 @@
+{
+  "name": "codesandbox-styles",
+  "private": true,
+  "version": "0.0.0",
+  "scripts": {
+    "develop": "vite"
+  },
+  "devDependencies": {
+    "vite": "^2.8.0"
+  },
+  "dependencies": {
+    "@carbon/styles": "0.14.0",
+    "sass": "^1.49.7"
+  }
+}

examples/codesandbox-styles/style.scss

@@ -0,0 +1,3 @@
+@use '@carbon/styles' with (
+  $font-path: '@ibm/plex'
+);

examples/codesandbox/.gitignore

@@ -0,0 +1,24 @@
+# Logs
+logs
+*.log
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+pnpm-debug.log*
+lerna-debug.log*
+
+node_modules
+dist
+dist-ssr
+*.local
+
+# Editor directories and files
+.vscode/*
+!.vscode/extensions.json
+.idea
+.DS_Store
+*.suo
+*.ntvs*
+*.njsproj
+*.sln
+*.sw?

examples/codesandbox/index.html

@@ -0,0 +1,13 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="icon" type="image/svg+xml" href="/src/favicon.svg" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Vite App</title>
+  </head>
+  <body>
+    <div id="root"></div>
+    <script type="module" src="/src/main.jsx"></script>
+  </body>
+</html>

examples/codesandbox/package.json

@@ -0,0 +1,18 @@
+{
+  "name": "codesandbox",
+  "private": true,
+  "version": "0.0.0",
+  "scripts": {
+    "develop": "vite"
+  },
+  "dependencies": {
+    "@carbon/react": "0.14.0",
+    "react": "^17.0.2",
+    "react-dom": "^17.0.2"
+  },
+  "devDependencies": {
+    "@vitejs/plugin-react": "^1.0.7",
+    "sass": "^1.49.7",
+    "vite": "^2.8.0"
+  }
+}

examples/codesandbox/src/App.jsx

@@ -0,0 +1,7 @@
+import { Button } from '@carbon/react';
+
+function App() {
+  return <Button>Hello world</Button>;
+}
+
+export default App

examples/codesandbox/src/index.scss

@@ -0,0 +1,3 @@
+@use '@carbon/react' with (
+  $font-path: '@ibm/plex',
+);

examples/codesandbox/src/main.jsx

@@ -0,0 +1,12 @@
+import './index.scss'
+
+import React from 'react'
+import ReactDOM from 'react-dom'
+import App from './App'
+
+ReactDOM.render(
+  <React.StrictMode>
+    <App />
+  </React.StrictMode>,
+  document.getElementById('root')
+)

examples/codesandbox/vite.config.js

@@ -0,0 +1,7 @@
+import { defineConfig } from 'vite';
+import react from '@vitejs/plugin-react';
+
+// https://vitejs.dev/config/
+export default defineConfig({
+  plugins: [react()],
+});

package.json

@@ -10,6 +10,7 @@
   "workspaces": [
     "actions/*",
     "config/*",
+    "examples/*",
     "packages/*",
     "www"
   ],
@@ -55,7 +56,7 @@
     "all-contributors-cli": "^6.19.0",
     "cross-env": "^7.0.0",
     "cross-spawn": "^7.0.0",
-    "doctoc": "^1.4.0",
+    "doctoc": "^2.0.0",
     "eslint": "^7.28.0",
     "fs-extra": "^10.0.0",
     "glob": "^7.1.4",
@@ -69,7 +70,7 @@
     "react": "^17.0.2",
     "react-dom": "^17.0.2",
     "rimraf": "^3.0.0",
-    "stylelint": "^13.13.1"
+    "stylelint": "^14.3.0"
   },
   "commitlint": {
     "extends": [

packages/carbon-react/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@carbon/react",
   "description": "React components for the Carbon Design System",
-  "version": "0.14.0-rc.0",
+  "version": "0.14.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.46.0-rc.0",
-    "@carbon/styles": "^0.14.0-rc.0",
+    "@carbon/icons-react": "^10.46.0",
+    "@carbon/styles": "^0.14.0",
     "@carbon/telemetry": "0.0.0-alpha.6",
-    "carbon-components": "^10.53.0-rc.0",
-    "carbon-components-react": "^7.53.0-rc.0",
+    "carbon-components": "^10.53.0",
+    "carbon-components-react": "^7.53.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.51.0-rc.0",
+    "@carbon/themes": "^10.51.0",
     "@rollup/plugin-babel": "^5.3.0",
     "@rollup/plugin-commonjs": "^21.0.0",
     "@rollup/plugin-node-resolve": "^13.0.0",

packages/carbon-react/src/components/Icons/Icons.stories.scss

@@ -4,7 +4,6 @@
 // This source code is licensed under the Apache-2.0 license found in the
 // LICENSE file in the root directory of this source tree.
 //
-
 .demo-icon-example {
   display: flex;
   width: 10rem;

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',