Merge branch 'main' into aria-label-menu-bug

config/eslint-config-carbon/package.json

@@ -1,7 +1,7 @@
 {
   "name": "eslint-config-carbon",
   "description": "ESLint configuration for Carbon",
-  "version": "2.9.0",
+  "version": "2.10.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.11.0",
+  "version": "0.12.0-rc.0",
   "license": "Apache-2.0",
   "main": "index.js",
   "repository": {

docs/migration/11.x-color.md

@@ -0,0 +1,132 @@
+# 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:**
+
+- **No change:** Token name has no change between versions.
+- **Updated:** 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 new v11 tokens for more
+  specific usage.
+- **New:** A net new color token to the system in v11. It has no v10
+  counterpart.
+- **Deprecated:** v10 token was removed in v11.
+
+| V10 token name     | V11 token name            | V11 Contextual token   | Status     |
+| ------------------ | ------------------------- | ---------------------- | ---------- |
+| active-danger      | button-danger-active      | —                      | Updated    |
+| active-light-ui    | layer-active-02           | layer-active           | Updated    |
+| active-primary     | button-primary-active     | —                      | Updated    |
+| active-secondary   | button-secondary-active   | —                      | Updated    |
+| active-tertiary    | button-tertiary-active    | —                      | Updated    |
+| active-ui          | layer-active-01           | layer-active           | Split      |
+| active-ui          | background-active         | —                      | Split      |
+| active-ui          | layer-accent-active-01    | layer-accent-active    | Split      |
+| active-ui          | border-subtle-selected-01 | border-sublte-selected | Split      |
+| button-separator   | button-separator          | —                      | No change  |
+| danger             | button-danger-primary     | —                      | Deprecated |
+| danger-01          | button-danger-primary     | —                      | Updated    |
+| danger-02          | button-danger-secondary   | —                      | Updated    |
+| decorative-01      | border-subtle-02          | border-subtle          | Updated    |
+| disabled-01        | —                         | —                      | Deprecated |
+| disabled-02        | text-disabled             | —                      | Split      |
+| disabled-02        | icon-disabled             | —                      | Split      |
+| disabled-02        | button-disabled           | —                      | Split      |
+| disabled-02        | border-disabled           | border-disabled        | Split      |
+| disabled-03        | icon-on-color-disabled    | —                      | Split      |
+| disabled-03        | layer-selected-disabled   | —                      | Split      |
+| disabled-03        | text-on-color-disabled    | —                      | Split      |
+| field-01           | field-01                  | field                  | No change  |
+| field-02           | field-02                  | field                  | No change  |
+| focus              | focus                     | —                      | No change  |
+| highlight          | highlight                 | —                      | No change  |
+| hover-danger       | button-danger-hover       | —                      | Updated    |
+| hover-light-ui     | layer-hover-02            | —                      | Updated    |
+| hover-primary      | button-primary-hover      | —                      | Updated    |
+| hover-primary-text | link-primary-hover        | —                      | Updated    |
+| hover-secondary    | button-secondary-hover    | —                      | Updated    |
+| hover-selected-ui  | background-selected-hover | —                      | Split      |
+| hover-selected-ui  | layer-accent-hover-01     | layer-accent-hover     | Split      |
+| hover-selected-ui  | layer-selected-hover-01   | layer-selected-hover   | Split      |
+| hover-tertiary     | button-tertiary-hover     | —                      | Updated    |
+| hover-ui           | background-hover          | —                      | Updated    |
+| hover-ui           | layer-hover-01            | layer-hover            | Split      |
+| hover-ui           | field-hover-01            | field-hover            | Split      |
+| hover-ui           | field-hover-02            | field-hover            | Split      |
+| icon-01            | icon-primary              | —                      | Updated    |
+| icon-02            | icon-secondary            | —                      | Updated    |
+| icon-03            | icon-on-color             | —                      | Updated    |
+| interactive-01     | button-primary            | —                      | Updated    |
+| interactive-01     | background-brand          | —                      | Updated    |
+| interactive-02     | button-secondary          | —                      | Updated    |
+| interactive-03     | button-tertiary           | —                      | Updated    |
+| interactive-04     | border-interactive        | —                      | Split      |
+| interactive-04     | interactive               | —                      | Split      |
+| inverse-01         | icon-inverse              | —                      | Split      |
+| inverse-01         | focus-inset               | —                      | Split      |
+| inverse-01         | text-inverse              | —                      | Split      |
+| inverse-02         | "background-inverse "     | —                      | Updated    |
+| inverse-focus-ui   | focus-inverse             | —                      | Updated    |
+| inverse-hover-ui   | background-inverse-hover  | —                      | Updated    |
+| inverse-link       | link-inverse              | —                      | Updated    |
+| inverse-support-01 | support-error-inverse     | —                      | Updated    |
+| inverse-support-02 | support-success-inverse   | —                      | Updated    |
+| inverse-support-03 | support-warning-inverse   | —                      | Updated    |
+| inverse-support-04 | support-info-inverse      | —                      | Updated    |
+| link-01            | link-primary              | —                      | Updated    |
+| link-02            | link-secondary            | —                      | Updated    |
+| overlay-01         | overlay                   | —                      | Updated    |
+| selected-light-ui  | layer-selected-02         | —                      | Updated    |
+| selected-ui        | layer-selected-01         | layer-selected         | Split      |
+| selected-ui        | background-selected       | —                      | Split      |
+| skeleton-01        | skeleton-background       | —                      | Updated    |
+| skeleton-02        | skeleton-element          | —                      | Updated    |
+| support-01         | support-error             | —                      | Updated    |
+| support-02         | support-success           | —                      | Updated    |
+| support-03         | support-warning           | —                      | Updated    |
+| support-04         | support-info              | —                      | Updated    |
+| text-01            | text-primary              | —                      | Updated    |
+| text-02            | text-secondary            | —                      | Updated    |
+| text-03            | text-placeholder          | —                      | Updated    |
+| text-04            | text-on-color             | —                      | Updated    |
+| text-05            | text-helper               | —                      | Updated    |
+| text-error         | text-error                | —                      | Updated    |
+| hover-row          | layer-hover-01            | layer-hover            | Deprecated |
+| ui-01              | layer-01                  | layer                  | Updated    |
+| ui-02              | layer-02                  | layer                  | Updated    |
+| ui-03              | layer-accent-01           | layer-accent           | Split      |
+| ui-03              | border-subtle-01          | border-subtle          | Split      |
+| ui-04              | toggle-off                | —                      | Split      |
+| ui-04              | border-strong-01          | border-strong          | Split      |
+| ui-05              | border-inverse            | —                      | Updated    |
+| ui-05              | layer-selected-inverse    | —                      | Updated    |
+| ui-background      | background                | —                      | Updated    |
+| visited-link       | link-visited              | —                      | Updated    |
+| brand-01           | —                         | —                      | Deprecated |
+| brand-02           | —                         | —                      | Deprecated |
+| brand-03           | —                         | —                      | Deprecated |
+| —                  | border-strong-02          | border-strong          | New        |
+| —                  | border-strong-03          | border-strong          | New        |
+| —                  | border-subtle-00          | border-subtle          | New        |
+| —                  | border-subtle-03          | border-subtle          | New        |
+| —                  | border-subtle-selected-02 | border-subtle-selected | New        |
+| —                  | border-subtle-selected-03 | border-subtle-selected | New        |
+| —                  | field-03                  | field                  | New        |
+| —                  | field-hover-03            | field-hover            | New        |
+| —                  | layer-03                  | layer                  | New        |
+| —                  | layer-active-03           | layer-active           | New        |
+| —                  | layer-hover-03            | layer-hover            | New        |
+| —                  | layer-selected-03         | layer-selected         | New        |
+| —                  | layer-selected-hover-02   | layer-selected-hover   | New        |
+| —                  | layer-selected-hover-03   | layer-selected-hover   | New        |
+| —                  | layer-accent-02           | layer-accent           | New        |
+| —                  | layer-accent-03           | layer-accent           | New        |
+| —                  | layer-accent-active-02    | layer-accent-active    | New        |
+| —                  | layer-accent-active-03    | layer-accent-active    | New        |
+| —                  | layer-accent-hover-02     | layer-accent-hover     | New        |
+| —                  | layer-accent-hover-03     | layer-accent-hover     | New        |

packages/carbon-react/__tests__/index-test.js

@@ -57,6 +57,7 @@ describe('Carbon Components React', () => {
         "FileUploaderItem",
         "FileUploaderSkeleton",
         "Filename",
+        "FlexGrid",
         "FluidForm",
         "Form",
         "FormGroup",

packages/carbon-react/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@carbon/react",
   "description": "React components for the Carbon Design System",
-  "version": "0.12.0",
+  "version": "0.13.0-rc.0",
   "license": "Apache-2.0",
   "main": "lib/index.js",
   "module": "es/index.js",
@@ -44,10 +44,10 @@
   "dependencies": {
     "@carbon/feature-flags": "^0.7.0",
     "@carbon/icons-react": "^10.45.0",
-    "@carbon/styles": "^0.12.0",
+    "@carbon/styles": "^0.13.0-rc.0",
     "@carbon/telemetry": "0.0.0-alpha.6",
-    "carbon-components": "^10.51.0",
-    "carbon-components-react": "^7.51.0",
+    "carbon-components": "^10.52.0-rc.0",
+    "carbon-components-react": "^7.52.0-rc.0",
     "carbon-icons": "^7.0.7"
   },
   "devDependencies": {

packages/carbon-react/src/index.js

@@ -184,6 +184,9 @@ export {
   SideNavMenu,
   SideNavMenuItem,
   SideNavSwitcher,
+  Grid,
+  Column,
+  unstable_FlexGrid as FlexGrid,
   // Experimental
   unstable_useContextMenu,
   unstable_FeatureFlags as FeatureFlags,
@@ -219,8 +222,3 @@ export {
   unstable_useTheme as useTheme,
   unstable_VStack as VStack,
 } from 'carbon-components-react';
-export {
-  // Grid
-  Grid,
-  Column,
-} from './components/Grid';

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.51.0",
+  "version": "10.52.0-rc.0",
   "license": "Apache-2.0",
   "main": "umd/index.js",
   "module": "es/index.js",
@@ -94,7 +94,7 @@
     "babel-plugin-dev-expression": "^0.2.3",
     "babel-plugin-istanbul": "^6.1.1",
     "babel-plugin-rewire": "^1.2.0",
-    "bluebird": "~3.1.1",
+    "bluebird": "~3.7.0",
     "browser-sync": "^2.26.3",
     "browserslist-config-carbon": "^10.6.1",
     "carbon-components": "^9.0.0",

packages/components/src/components/data-table/_data-table-action.scss

@@ -74,11 +74,15 @@
 
   .#{$prefix}--toolbar-search-container-expandable .#{$prefix}--search-input {
     height: 100%;
-    padding: 0;
     cursor: pointer;
     opacity: 0;
   }
 
+  .#{$prefix}--toolbar-search-container-expandable:not(.#{$prefix}--toolbar-search-container-active)
+    .#{$prefix}--search-input {
+    padding: 0;
+  }
+
   .#{$prefix}--toolbar-search-container-expandable
     .#{$prefix}--search-magnifier-icon {
     left: 0;

packages/components/src/components/date-picker/_flatpickr.scss

@@ -211,6 +211,7 @@
     cursor: pointer;
     transition: background-color $duration--fast-01 motion(standard, productive);
     fill: $icon-01;
+    user-select: none;
 
     &:hover {
       background-color: $hover-ui;

packages/react/__tests__/__snapshots__/PublicAPI-test.js.snap

@@ -3,9 +3,6 @@
 exports[`Public API should only change with a semver change 1`] = `
 Map {
   "Accordion" => Object {
-    "defaultProps": Object {
-      "align": "end",
-    },
     "propTypes": Object {
       "align": Object {
         "args": Array [
@@ -7892,6 +7889,38 @@ Map {
       },
     },
   },
+  "unstable_FlexGrid" => Object {
+    "propTypes": Object {
+      "as": Object {
+        "args": Array [
+          Array [
+            Object {
+              "type": "string",
+            },
+            Object {
+              "type": "elementType",
+            },
+          ],
+        ],
+        "type": "oneOfType",
+      },
+      "children": Object {
+        "type": "node",
+      },
+      "className": Object {
+        "type": "string",
+      },
+      "condensed": Object {
+        "type": "bool",
+      },
+      "fullWidth": Object {
+        "type": "bool",
+      },
+      "narrow": Object {
+        "type": "bool",
+      },
+    },
+  },
   "unstable_HStack" => Object {
     "$$typeof": Symbol(react.forward_ref),
     "render": [Function],

packages/react/package.json

@@ -1,7 +1,7 @@
 {
   "name": "carbon-components-react",
   "description": "The Carbon Design System is IBM’s open-source design system for products and experiences.",
-  "version": "7.51.0",
+  "version": "7.52.0-rc.0",
   "license": "Apache-2.0",
   "main": "lib/index.js",
   "module": "es/index.js",
@@ -107,7 +107,7 @@
     "babel-plugin-react-docgen": "^4.2.1",
     "babel-plugin-transform-inline-environment-variables": "^0.4.3",
     "browserslist-config-carbon": "^10.6.1",
-    "carbon-components": "^10.51.0",
+    "carbon-components": "^10.52.0-rc.0",
     "carbon-icons": "^7.0.5",
     "chalk": "^4.1.1",
     "cli-table": "^0.3.0",