Merge branch 'main' into missed-skeleton-vrt

.all-contributorsrc

@@ -774,6 +774,15 @@
       "contributions": [
         "code"
       ]
+    },
+    {
+      "login": "adamalston",
+      "name": "Adam Alston",
+      "avatar_url": "https://avatars.githubusercontent.com/u/18297826?v=4",
+      "profile": "https://github.com/adamalston",
+      "contributions": [
+        "doc"
+      ]
     }
   ],
   "commitConvention": "none"

.github/workflows/ci.yml

@@ -67,7 +67,7 @@ jobs:
         run: yarn build --ignore '@carbon/sketch'
       - name: Check generated styles
         run: |
-          yarn carbon-cli check --ignore '**/@(node_modules|examples|components|react|fixtures)/**' 'packages/**/*.scss'
+          yarn carbon-cli check --ignore '**/@(node_modules|examples|components|react|fixtures|compat)/**' 'packages/**/*.scss'
       - name: Run tests
         run: yarn test --ci
 

.yarnrc

@@ -1,4 +1,4 @@
 # THIS IS AN AUTOGENERATED FILE. DO NOT EDIT THIS FILE DIRECTLY.
 # yarn lockfile v1
 
-yarn-path ".yarn/releases/yarn-3.0.0-rc.1.cjs"
+yarn-path ".yarn/releases/yarn-3.0.0.cjs"

.yarnrc.yml

@@ -6,4 +6,4 @@ plugins:
   - path: .yarn/plugins/@yarnpkg/plugin-workspace-tools.cjs
     spec: "@yarnpkg/plugin-workspace-tools"
 
-yarnPath: .yarn/releases/yarn-3.0.0-rc.1.cjs
+yarnPath: .yarn/releases/yarn-3.0.0.cjs

config/eslint-config-carbon/package.json

@@ -39,7 +39,7 @@
     "eslint-plugin-cypress": "^2.11.3",
     "eslint-plugin-import": "^2.23.4",
     "eslint-plugin-jest": "^24.3.6",
-    "eslint-plugin-jsdoc": "^35.3.0",
+    "eslint-plugin-jsdoc": "^36.0.3",
     "eslint-plugin-jsx-a11y": "^6.4.1",
     "eslint-plugin-prettier": "^3.4.0",
     "eslint-plugin-react": "^7.24.0",

config/jest-config-carbon/package.json

@@ -27,14 +27,14 @@
     "@babel/preset-env": "^7.14.7",
     "@babel/preset-react": "^7.14.5",
     "@babel/runtime": "^7.14.6",
-    "accessibility-checker": "^3.1.8",
-    "axe-core": "^4.2.2",
+    "accessibility-checker": "^3.1.9",
+    "axe-core": "^4.3.2",
     "babel-jest": "^27.0.6",
     "chalk": "^4.1.1",
     "enzyme": "^3.11.0",
     "enzyme-adapter-react-16": "^1.15.6",
     "enzyme-to-json": "^3.6.2",
-    "jest-circus": "^27.0.5",
+    "jest-circus": "^27.0.6",
     "jest-watch-typeahead": "^0.6.4"
   },
   "devDependencies": {

docs/migration/11.x-color.md

@@ -0,0 +1,130 @@
+# Color
+
+> **Note:** The Carbon v11 release is currently in beta release. Be on the
+> lookout for the public preview release available in the coming months.
+
+## Color tokens
+
+**Status key:**
+
+- **New:** A net new color token to the system in v11. It has no v10
+  counterpart.
+- **Updated name:** From v10 to V11 the number suffix has been replaced with an
+  adjective that reflects it's usage. This is just a name change, the role
+  remains the same between v10 and v11.
+- **Split:** V10 token has been split into multiple v11 tokens for more specific
+  usage.
+- **No change:** Token name has no change between versions.
+- **Depreciated:** v10 token was removed in v11.
+
+| **V10 token name** | **V11 token name**        | **Status**          |
+| ------------------ | ------------------------- | ------------------- |
+| visited-link       | link-visited              | Updated name        |
+| ui-background      | background                | Updated name        |
+| ui-05              | layer-selected-inverse    | Updated name        |
+| ui-05              | border-inverse            | Updated name        |
+| ui-04              | border-strong-01          | Split, Updated name |
+| ui-04              | toggle-off                | Split, Updated name |
+| ui-03              | layer-accent-01           | Split, Updated name |
+| ui-03              | border-subtle-01          | Split, Updated name |
+| ui-02              | layer-02                  | Updated name        |
+| ui-01              | layer-01                  | Updated name        |
+| text-error         | text-error                | Updated name        |
+| text-05            | text-helper               | Updated name        |
+| text-04            | text-on-color             | Updated name        |
+| text-03            | text-placeholder          | Updated name        |
+| text-02            | text-secondary            | Updated name        |
+| text-01            | text-primary              | Updated name        |
+| support-04         | support-info              | Updated name        |
+| support-03         | support-warning           | Updated name        |
+| support-02         | support-success           | Updated name        |
+| support-01         | support-error             | Updated name        |
+| skeleton-02        | skeleton-element          | Updated name        |
+| skeleton-01        | skeleton-background       | Updated name        |
+| selected-ui        | background-selected       | Split, Updated name |
+| selected-ui        | layer-selected-01         | Split, Updated name |
+| selected-light-ui  | layer-selected-02         | Updated name        |
+| overlay-01         | overlay                   | Updated name        |
+| link-02            | link-secondary            | Updated name        |
+| link-01            | link-primary              | Updated name        |
+| inverse-support-04 | support-info-inverse      | Updated name        |
+| inverse-support-03 | support-warning-inverse   | Updated name        |
+| inverse-support-02 | support-success-inverse   | Updated name        |
+| inverse-support-01 | support-error-inverse     | Updated name        |
+| inverse-link       | link-inverse              | Updated name        |
+| inverse-hover-ui   | background-inverse-hover  | Updated name        |
+| inverse-focus-ui   | focus-inverse             | Updated name        |
+| inverse-02         | background-inverse        | Updated name        |
+| inverse-01         | text-inverse              | Split, Updated name |
+| inverse-01         | icon-inverse              | Split, Updated name |
+| inverse-01         | focus-inset               | Split, Updated name |
+| interactive-04     | interactive               | Updated name        |
+| interactive-04     | border-interactive        | Updated name        |
+| interactive-03     | button-tertiary           | Updated name        |
+| interactive-02     | button-secondary          | Updated name        |
+| interactive-01     | background-brand          | Updated name        |
+| interactive-01     | button-primary            | Updated name        |
+| icon-03            | icon-on-color             | Updated name        |
+| icon-02            | icon-secondary            | Updated name        |
+| icon-01            | icon-primary              | Updated name        |
+| hover-ui           | background-hover          | Updated name        |
+| hover-ui           | layer-hover-01            | Split, Updated name |
+| hover-ui           | field-hover-01            | Split, Updated name |
+| hover-ui           | field-hover-02            | Split, Updated name |
+| hover-tertiary     | button-tertiary-hover     | Updated name        |
+| hover-selected-ui  | background-selected-hover | Split, Updated name |
+| hover-selected-ui  | layer-selected-hover-01   | Split, Updated name |
+| hover-selected-ui  | layer-accent-hover-01     | Split, Updated name |
+| hover-secondary    | button-secondary-hover    | Updated name        |
+| hover-primary-text | link-primary-hover        | Updated name        |
+| hover-primary      | button-primary-hover      | Updated name        |
+| hover-light-ui     | layer-hover-02            | Updated name        |
+| hover-danger       | button-danger-hover       | Updated name        |
+| highlight          | highlight                 | No change           |
+| focus              | focus                     | No change           |
+| field-02           | field-02                  | No change           |
+| field-01           | field-01                  | No change           |
+| disabled-03        | layer-selected-disabled   | Split, Updated name |
+| disabled-03        | text-on-color-disabled    | Split, Updated name |
+| disabled-03        | icon-on-color-disabled    | Split, Updated name |
+| disabled-02        | text-disabled             | Split, Updated name |
+| disabled-02        | icon-disabled             | Split, Updated name |
+| disabled-02        | button-disabled           | Split, Updated name |
+| disabled-01        | layer-disabled-01         | Split               |
+| disabled-01        | field-disabled-01         | Split               |
+| disabled-01        | border-disabled-01        | Split               |
+| disabled-01        | field-disabled-02         | Split               |
+| disabled-01        | border-disabled-03        | Split               |
+| decorative-01      | border-subtle-02          | Updated name        |
+| danger-02          | button-danger-secondary   | Updated name        |
+| danger / danger-01 | button-danger-primary     | Updated name        |
+| button-separator   | button-separator          | No change           |
+| active-ui          | background-active         | Split, Updated name |
+| active-ui          | layer-active-01           | Split, Updated name |
+| active-ui          | layer-accent-active-01    | Split, Updated name |
+| active-ui          | border-subtle-selected-01 | Split, Updated name |
+| active-tertiary    | button-tertiary-active    | Updated name        |
+| active-secondary   | button-secondary-active   | Updated name        |
+| active-primary     | button-primary-active     | Updated name        |
+| active-light-ui    | layer-active-02           | Updated name        |
+| active-danger      | button-danger-active      | Updated name        |
+| -                  | border-subtle-00          | New                 |
+| -                  | layer-selected-hover-02   | New                 |
+| -                  | layer-accent-02           | New                 |
+| -                  | layer-accent-hover-02     | New                 |
+| -                  | layer-accent-active-02    | New                 |
+| -                  | border-strong-02          | New                 |
+| -                  | border-subtle-selected-02 | New                 |
+| -                  | layer-03                  | New                 |
+| -                  | layer-hover-03            | New                 |
+| -                  | layer-active-03           | New                 |
+| -                  | layer-selected-03         | New                 |
+| -                  | layer-selected-hover-03   | New                 |
+| -                  | layer-accent-03           | New                 |
+| -                  | layer-accent-hover-03     | New                 |
+| -                  | layer-accent-active-03    | New                 |
+| -                  | field-03                  | New                 |
+| -                  | field-hover-03            | New                 |
+| -                  | border-strong-03          | New                 |
+| -                  | border-subtle-03          | New                 |
+| -                  | border-subtle-selected-03 | New                 |

docs/migration/v11.x.md

@@ -8,9 +8,10 @@
 ## Table of Contents
 
 - [Timeline](#timeline)
-- [Previewing the release](#previewing-the-release)
-  - [Feature flags](#feature-flags)
-
+- [Updates](#updates)
+  - [Single-entrypoint packages](#single-entrypoint-packages)
+  - [`carbon-icons`](#carbon-icons)
+  - [Vanilla JS components](#vanilla-js-components)
 
 <!-- END doctoc generated TOC please keep comment here to allow auto update -->
 <!-- prettier-ignore-end -->
@@ -19,12 +20,12 @@
 
 **Note: all dates are an estimate and can be changed**
 
-| Date                        | Release          | Status            |
-| --------------------------- | ---------------- | ----------------- |
-| Alpha release               | April 15th, 2021 | Published         |
-| Beta release                | May 13th, 2021   | Under development |
-| Release Candidate 0 release | June 10th, 2021  | Not published     |
-| Stable release              | July 1st, 2021   | Not published     |
+| Date                        | Release             | Status            |
+| --------------------------- | ------------------- | ----------------- |
+| Alpha release               | April 15th, 2021    | Published         |
+| Beta release                | July 22nd, 2021     | Under development |
+| Release Candidate 0 release | ~1 month after beta | Not published     |
+| Stable release              | ~1 month after rc.0 | Not published     |
 
 We are breaking up our v11 release into several iterations to get feedback from
 teams before our stable release. If you're interested in helping us out with
@@ -40,68 +41,54 @@ publishing.
 During each release stage, we're looking to get feedback from teams in our
 [Release Partner Program](https://github.com/carbon-design-system/carbon/wiki/Release-Partner-Program).
 
-## Previewing the release
-
-There are two ways to try out the v11 release of Carbon:
-
-- Feature flags along with the `carbon-components` and `carbon-components-react`
-  packages
-- Using the new packages directly, like `@carbon/react` or `@carbon/styles`
-
-As we near the v11 release, the preference will be to use the `@carbon/react`
-package. However, for the alpha and beta release, full compatibility will not be
-available, so we recommend trying out new features using feature flags.
-
-### Feature flags
-
-Our team makes use of
-[feature flags](https://martinfowler.com/articles/feature-toggles.html) to ship
-new code in our v10 release without breaking existing usage.
-
-To try out features related to the v11 release, you will use the
-`enable-v11-release` flag in both Sass and JavaScript.
+## Updates
 
-To enable this flag in `carbon-components`, you will need to set
-`$feature-flags` before importing `carbon-components`. For example:
+### Single-entrypoint packages
 
-```scss
-$feature-flags: (
-  enable-v11-release: true,
-);
+Starting in v11, we will prefix many of the packages we ship with the `@carbon`
+scope. We will also try and consolidate packages where possible to get as close
+to a one-package, one-install experience.
 
-@import 'path/to/carbon';
-```
+- `carbon-components`
+- `carbon-components-react`
+- `carbon-icons`
 
-To enable this flag in `carbon-components-react`, you can either set flags
-directly using the `@carbon/feature-flags` package or use the `FeatureFlags`
-component.
+In v11, you will only need to install one package: `@carbon/react`. This package
+will contain components, styles, and icons all bundled up in one package.
 
-**`FeatureFlags`**
+This does not mean that all packages are now developed in the `@carbon/react`
+package. Instead, we re-export packages like `@carbon/icons-react` or the new
+`@carbon/styles` for you to use.
 
-```jsx
-import { unstable_FeatureFlags as FeatureFlags } from 'carbon-components-react';
+For teams using the `carbon-components` package for styles, you can update to
+`@carbon/styles` which is our standalone styles package for Sass.
 
-render(
-  <FeatureFlags flags={{ 'enable-v11-release': true }}>
-    <MyComponent />
-  </FeatureFlags>
-);
-```
+Both `carbon-components` and `carbon-components-react` will continue to work in
+v11, however they are only re-exporting from `@carbon/styles` and
+`@carbon/react` respectively.
 
-**`@carbon/feature-flags`**
+### `carbon-icons`
 
-First, create a file called `feature-flags.js` and include the following:
+The `carbon-icons` package has been archived and is no longer supported. To use
+icons from the Carbon Design System, you should install the appropriate library
+to use with your framework:
 
-```js
-import * as FeatureFlags from '@carbon/feature-flags';
+- `@carbon/icons`: Vanilla JavaScript
+- `@carbon/icons-react`: React
+- `@carbon/icons-vue`: Vue
+- `@carbon/icons-angular`: Angular
+- `carbon-icons-svelte`: Svelte
 
-FeatureFlags.enable('enable-v11-release');
-```
+### Vanilla JS components
 
-Next, bring in this file as the first import in your project:
+For a long time now, the `carbon-components` package has shipped Vanilla
+JavaScript version of components for teams to use. Starting in v11, these
+components will be split out from the main package and into a
+community-supported package. The Carbon team will no longer directly support
+these components.
 
-```js
-import './feature-flags';
+You can continue to use the v10.x version of `carbon-components`, or use the
+`TODO` package to access the Vanilla JS components.
 
-// Import feature flags before any of your application code
-```
+If you're interested in helping to maintain this package, we're currently
+looking for maintainers! Please reach out to us over at: TODO.

package.json

@@ -46,11 +46,11 @@
     "@carbon/cli": "workspace:packages/cli",
     "@commitlint/cli": "^8.3.5",
     "@commitlint/config-conventional": "^8.3.4",
-    "@percy/cli": "^1.0.0-beta.48",
-    "@testing-library/dom": "^7.26.6",
-    "@testing-library/jest-dom": "^5.11.5",
-    "@testing-library/react": "^11.1.1",
-    "@testing-library/user-event": "^13.1.9",
+    "@percy/cli": "^1.0.0-beta.61",
+    "@testing-library/dom": "^8.1.0",
+    "@testing-library/jest-dom": "^5.14.1",
+    "@testing-library/react": "^12.0.0",
+    "@testing-library/user-event": "^13.2.1",
     "all-contributors-cli": "^6.19.0",
     "cross-env": "^5.2.0",
     "cross-spawn": "^6.0.5",
@@ -59,7 +59,7 @@
     "fs-extra": "^8.1.0",
     "glob": "^7.1.4",
     "husky": "^4.0.10",
-    "jest": "^27.0.5",
+    "jest": "^27.0.6",
     "jest-junit": "^10.0.0",
     "lerna": "^3.20.2",
     "lint-staged": "^9.5.0",

packages/carbon-react/.storybook/Welcome/welcome.scss

@@ -1,5 +1,4 @@
-// @import '~carbon-components/scss/globals/scss/typography';
-@use '@carbon/styles/scss/theme' as *;
+@use '@carbon/styles/scss/theme';
 @use '@carbon/styles/scss/type';
 
 .container-welcome {
@@ -19,7 +18,7 @@
 .welcome__heading {
   @include type.type-style('productive-heading-07');
 
-  color: $text-inverse;
+  color: theme.$text-inverse;
 }
 
 .welcome__heading--subtitle {

packages/carbon-react/.storybook/styles.scss

@@ -9,19 +9,13 @@ $feature-flags: (
   enable-v11-release: true,
 );
 
-@use "~@ibm/plex/default" as sans;
-@use "~@ibm/plex/mono";
-@use "~@ibm/plex/arabic";
-
-@use '../index.scss' as styles;
+@use '../index.scss' as styles with (
+  $css--font-face: true,
+  $css--plex-arabic: true,
+);
 @use '../scss/components/button';
 @use '../scss/components/tag';
 
-// For now, including all weights for testing
-@include arabic.all;
-@include sans.all;
-@include mono.all;
-
 :root {
   @include styles.theme(styles.$white, button.$white, tag.$white);
 }