Merge branch 'main' into readonly-text-input

.eslintignore

@@ -29,6 +29,8 @@ packages/components/scss
 packages/components/html
 packages/components/docs/js
 packages/components/node_modules
+packages/components/scss/globals/vendor/**
+packages/components/src/globals/scss/vendor/**
 
 # Sketch
 *.sketchplugin
@@ -39,5 +41,8 @@ packages/components/node_modules
 # React
 **/storybook-static/**
 
+# Icons React
+packages/icons-react/next/**
+
 # Templates
 packages/cli/src/component/templates/**

config/eslint-config-carbon/package.json

@@ -1,7 +1,7 @@
 {
   "name": "eslint-config-carbon",
   "description": "ESLint configuration for Carbon",
-  "version": "2.4.0",
+  "version": "2.5.0",
   "license": "Apache-2.0",
   "main": "index.js",
   "repository": {
@@ -12,6 +12,7 @@
   "bugs": "https://github.com/carbon-design-system/carbon/issues",
   "files": [
     "plugins",
+    "rules",
     "base.js",
     "index.js",
     "react.js",

config/stylelint-config-carbon/package.json

@@ -1,7 +1,7 @@
 {
   "name": "stylelint-config-carbon",
   "description": "Stylelint configuration for Carbon",
-  "version": "1.5.0",
+  "version": "1.6.0",
   "license": "Apache-2.0",
   "main": "index.js",
   "repository": {

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

@@ -19,15 +19,15 @@ module.exports = {
 
     // Function
     // Specify a blacklist of disallowed functions.
-    'function-blacklist': OFF,
+    'function-disallowed-list': OFF,
     // Disallow scheme-relative urls.
     'function-url-no-scheme-relative': OFF,
     // Specify a blacklist of disallowed url schemes.
-    'function-url-scheme-blacklist': OFF,
+    'function-url-scheme-disallowed-list': OFF,
     // Specify a whitelist of allowed url schemes.
-    'function-url-scheme-whitelist': OFF,
+    'function-url-scheme-allowed-list': OFF,
     // Specify a whitelist of allowed functions.
-    'function-whitelist': OFF,
+    'function-allowed-list': OFF,
 
     // Number
     // Limit the number of decimal places allowed in numbers.
@@ -39,9 +39,9 @@ module.exports = {
 
     // Unit
     // Specify a blacklist of disallowed units.
-    'unit-blacklist': OFF,
+    'unit-disallowed-list': OFF,
     // Specify a whitelist of allowed units.
-    'unit-whitelist': OFF,
+    'unit-allowed-list': OFF,
 
     // Shorthand property
     // Disallow redundant values in shorthand properties (Autofixable).
@@ -57,11 +57,11 @@ module.exports = {
 
     // Property
     // Specify a blacklist of disallowed properties.
-    'property-blacklist': OFF,
+    'property-disallowed-list': OFF,
     // Disallow vendor prefixes for properties.
     'property-no-vendor-prefix': OFF,
     // Specify a whitelist of allowed properties.
-    'property-whitelist': OFF,
+    'property-allowed-list': OFF,
 
     // Declaration
     // Disallow longhand properties that can be combined into one shorthand
@@ -71,37 +71,37 @@ module.exports = {
     'declaration-no-important': true,
     // Specify a blacklist of disallowed property and unit pairs within
     // declarations.
-    'declaration-property-unit-blacklist': OFF,
+    'declaration-property-unit-disallowed-list': OFF,
     // Specify a whitelist of allowed property and unit pairs within
     // declarations.
-    'declaration-property-unit-whitelist': {
+    'declaration-property-unit-allowed-list': {
       '/^animation/': ['ms'],
     },
     // Specify a blacklist of disallowed property and value pairs within
     // declarations.
-    'declaration-property-value-blacklist': {
+    'declaration-property-value-disallowed-list': {
       // Disallow unset as it is unsupported in IE11
       '/.*/': ['unset'],
     },
     // Specify a whitelist of allowed property and value pairs within
     // declarations.
-    'declaration-property-value-whitelist': OFF,
+    'declaration-property-value-allowed-list': OFF,
 
     // Declaration block
     // Limit the number of declaration within single line declaration blocks.
     'declaration-block-single-line-max-declarations': 1,
 
     // Selector
     // Specify a blacklist of disallowed attribute operators.
-    'selector-attribute-operator-blacklist': OFF,
+    'selector-attribute-operator-disallowed-list': OFF,
     // Specify a whitelist of allowed attribute operators.
-    'selector-attribute-operator-whitelist': OFF,
+    'selector-attribute-operator-allowed-list': OFF,
     // Specify a pattern for class selectors.
     'selector-class-pattern': OFF,
     // Specify a blacklist of disallowed combinators.
-    'selector-combinator-blacklist': OFF,
+    'selector-combinator-disallowed-list': OFF,
     // Specify a whitelist of allowed combinators.
-    'selector-combinator-whitelist': OFF,
+    'selector-combinator-allowed-list': OFF,
     // Specify a pattern for id selectors.
     'selector-id-pattern': OFF,
     // Limit the number of attribute selectors in a selector.
@@ -129,37 +129,37 @@ module.exports = {
     // Disallow vendor prefixes for selectors.
     'selector-no-vendor-prefix': OFF,
     // Specify a blacklist of disallowed pseudo-class selectors.
-    'selector-pseudo-class-blacklist': OFF,
+    'selector-pseudo-class-disallowed-list': OFF,
     // Specify a whitelist of allowed pseudo-class selectors.
-    'selector-pseudo-class-whitelist': OFF,
+    'selector-pseudo-class-allowed-list': OFF,
     // Specify a blacklist of disallowed pseudo-element selectors.
-    'selector-pseudo-element-blacklist': OFF,
+    'selector-pseudo-element-disallowed-list': OFF,
     // Specify a whitelist of allowed pseudo-element selectors.
-    'selector-pseudo-element-whitelist': OFF,
+    'selector-pseudo-element-allowed-list': OFF,
 
     // Media feature
     // Specify a blacklist of disallowed media feature names.
-    'media-feature-name-blacklist': OFF,
+    'media-feature-name-disallowed-list': OFF,
     // Disallow vendor prefixes for media feature names.
     'media-feature-name-no-vendor-prefix': true,
     // Specify a whitelist of allowed media feature names.
-    'media-feature-name-whitelist': OFF,
+    'media-feature-name-allowed-list': OFF,
 
     // Custom media
     // Specify a pattern for custom media query names.
     'custom-media-pattern': OFF,
 
     // At-rule
     // Specify a blacklist of disallowed at-rules.
-    'at-rule-blacklist': OFF,
+    'at-rule-disallowed-list': OFF,
     // Disallow vendor prefixes for at-rules.
     'at-rule-no-vendor-prefix': true,
     // Specify a whitelist of allowed at-rules.
-    'at-rule-whitelist': OFF,
+    'at-rule-allowed-list': OFF,
 
     // Comment
     // Specify a blacklist of disallowed words within comments.
-    'comment-word-blacklist': OFF,
+    'comment-word-disallowed-list': OFF,
 
     // General / Sheet
     // Limit the depth of nesting.

docs/migration/11.x-carbon-components.md

@@ -63,3 +63,12 @@
 | `$duration--slow-02`       |     |
 | `@function motion`         |     |
 | `@mixin motion`            |     |
+
+### `src/globals/scss/_theme-tokens.scss`
+
+| v10                                 | v11     |
+| :---------------------------------- | :------ |
+| `$data-table-heading-transform`     | Removed |
+| `$data-table-heading-border-bottom` | Removed |
+| `$data-table-row-height`            | Removed |
+| `$data-table-zebra-color`           | Removed |

package.json

@@ -68,7 +68,7 @@
     "react": "^16.8.6",
     "react-dom": "^16.8.6",
     "rimraf": "^3.0.0",
-    "stylelint": "^13.6.0"
+    "stylelint": "^13.13.1"
   },
   "husky": {
     "hooks": {

packages/carbon-react/.storybook/main.js

@@ -30,6 +30,24 @@ module.exports = {
     '../src/**/*.stories.mdx',
   ],
   webpack(config) {
+    const babelLoader = config.module.rules.find((rule) => {
+      return rule.use.some(({ loader }) => {
+        return loader.includes('babel-loader');
+      });
+    });
+
+    // This is a temporary trick to get `babel-loader` to ignore packages that
+    // are brought in that have an es, lib, or umd directory.
+    //
+    // Typically this is covered by /node_modules/ (which is the default), but
+    // in our case it seems like these dependencies are resolving to where their
+    // symlink points to. In other words, `@carbon/icons-react` becomes
+    // `../icons-react/es/index.js`.
+    //
+    // This results in these files being included in `babel-loader` and causing
+    // the build times to increase dramatically
+    babelLoader.exclude = [/node_modules/, /packages\/.*\/(es|lib|umd)/];
+
     config.module.rules.push({
       test: /\.s?css$/,
       sideEffects: true,
@@ -53,7 +71,6 @@ module.exports = {
             postcssOptions: {
               plugins: [
                 require('postcss-custom-properties')(),
-                require('rtlcss')(),
                 require('autoprefixer')({
                   overrideBrowserslist: ['last 1 version'],
                 }),

packages/carbon-react/.storybook/manager-head.html

@@ -41,19 +41,31 @@
 
 <!-- Style overrides -->
 <style>
+  body {
+    font-family: 'IBM Plex Sans', 'Helvetica Neue', Arial, sans-serif;
+  }
+
   body a[href='/?path=/settings/about'] {
     display: none;
   }
 
-  .simplebar-content form span {
+  .os-content form span {
     font-weight: 600;
   }
 
-  .simplebar-content a button {
+  .os-content a button {
+    color: #161616;
+  }
+
+  button.sidebar-item svg {
+    color: #161616;
+  }
+
+  a.sidebar-item[data-selected='true'] {
     color: #161616;
   }
 
-  .simplebar-content .sidebar-item.selected {
+  a.sidebar-item[data-selected='true'] svg {
     color: #161616;
   }
 </style>

packages/carbon-react/.storybook/preview-head.html

@@ -12,7 +12,18 @@
   }
 
   .sbdocs-wrapper .sbdocs-h2 {
-    margin-bottom: 0;
     padding-bottom: 12px;
+    margin-bottom: 0;
+  }
+
+  .sb-show-main.sb-main-padded {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    padding: 42px;
+  }
+
+  body #root {
+    width: 100%;
   }
 </style>

packages/carbon-react/.storybook/preview.js

@@ -10,6 +10,7 @@ import './styles.scss';
 import { configureActions } from '@storybook/addon-actions';
 import { white, g10, g90, g100 } from '@carbon/themes';
 import React from 'react';
+import { breakpoints } from '@carbon/layout';
 
 export const globalTypes = {
   locale: {
@@ -24,6 +25,11 @@ export const globalTypes = {
           title: 'English',
           value: 'en',
         },
+        {
+          right: '🇵🇸',
+          title: 'Arabic',
+          value: 'ar',
+        },
       ],
     },
   },
@@ -74,6 +80,50 @@ export const parameters = {
     // https://storybook.js.org/docs/react/essentials/controls#sorting-controls
     sort: 'alpha',
   },
+  // Small (<672)
+  // Medium (672 - 1056px)
+  // Large (1056 - 1312px)
+  // X-Large (1312 - 1584px)
+  // Max (>1584)
+  viewport: {
+    viewports: {
+      sm: {
+        name: 'Small',
+        styles: {
+          width: breakpoints.sm.width,
+          height: '100%',
+        },
+      },
+      md: {
+        name: 'Medium',
+        styles: {
+          width: breakpoints.md.width,
+          height: '100%',
+        },
+      },
+      lg: {
+        name: 'Large',
+        styles: {
+          width: breakpoints.lg.width,
+          height: '100%',
+        },
+      },
+      xlg: {
+        name: 'X-Large',
+        styles: {
+          width: breakpoints.xlg.width,
+          height: '100%',
+        },
+      },
+      Max: {
+        name: 'Max',
+        styles: {
+          width: breakpoints.max.width,
+          height: '100%',
+        },
+      },
+    },
+  },
 };
 
 configureActions({
@@ -83,12 +133,16 @@ configureActions({
 
 export const decorators = [
   (Story, context) => {
-    const { theme } = context.globals;
+    const { locale, theme } = context.globals;
 
     React.useEffect(() => {
       document.body.setAttribute('data-carbon-theme', theme);
     }, [theme]);
 
+    React.useEffect(() => {
+      document.documentElement.lang = locale;
+    }, [locale]);
+
     return <Story {...context} />;
   },
 ];