Merge branch 'main' into 9179-grid-storybook-docs

.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
 

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/eslint-config-carbon/plugins/react.js

@@ -51,6 +51,7 @@ module.exports = {
     {
       files: ['*-story.js'],
       rules: {
+        'react/display-name': 0,
         'react/prop-types': 0,
       },
     },

docs/migration/11.x-color.md

@@ -0,0 +1,135 @@
+## Color tokens
+
+<InlineNotification>
+
+**Note:** The Carbon v11 release is currently in beta release. Be on the lookout
+for the public preview release available in the coming months.
+
+</InlineNotification>
+
+**Status key:**
+
+**New:** a net new color token to the system in v11. It has no v10 counterpart.
+
+**Updated name:** the v10 name has been updated to in v11 to replace the number
+ending with a usage adjective. It just a name change the role stays 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                 |

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

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

packages/carbon-react/src/components/ComboBox/ComboBox.stories.js

@@ -0,0 +1,56 @@
+/**
+ * Copyright IBM Corp. 2016, 2018
+ *
+ * This source code is licensed under the Apache-2.0 license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+import React from 'react';
+import { ComboBox } from 'carbon-components-react';
+
+const items = [
+  {
+    id: 'option-0',
+    text:
+      'An example option that is really long to show what should be done to handle long text',
+  },
+  {
+    id: 'option-1',
+    text: 'Option 1',
+  },
+  {
+    id: 'option-2',
+    text: 'Option 2',
+  },
+  {
+    id: 'option-3',
+    text: 'Option 3',
+  },
+  {
+    id: 'option-4',
+    text: 'Option 4',
+  },
+  {
+    id: 'option-5',
+    text: 'Option 5',
+  },
+];
+
+export default {
+  title: 'Components/ComboBox',
+  component: ComboBox,
+};
+
+export const Combobox = () => (
+  <div style={{ width: 300 }}>
+    <ComboBox
+      onChange={() => {}}
+      id="carbon-combobox"
+      items={items}
+      itemToString={(item) => (item ? item.text : '')}
+      placeholder="Filter..."
+      titleText="ComboBox title"
+      helperText="Combobox helper text"
+    />
+  </div>
+);

packages/carbon-react/src/components/ComboBox/index.js

@@ -0,0 +1,8 @@
+/**
+ * Copyright IBM Corp. 2016, 2018
+ *
+ * This source code is licensed under the Apache-2.0 license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+export { ComboBox } from 'carbon-components-react';

packages/carbon-react/src/components/Dropdown/Dropdown.stories.js

@@ -0,0 +1,80 @@
+/**
+ * Copyright IBM Corp. 2016, 2018
+ *
+ * This source code is licensed under the Apache-2.0 license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+import React from 'react';
+import { Dropdown, DropdownSkeleton } from 'carbon-components-react';
+
+const items = [
+  {
+    id: 'option-0',
+    text: 'Lorem, ipsum dolor sit amet consectetur adipisicing elit.',
+  },
+  {
+    id: 'option-1',
+    text: 'Option 1',
+  },
+  {
+    id: 'option-2',
+    text: 'Option 2',
+  },
+  {
+    id: 'option-3',
+    text: 'Option 3',
+  },
+  {
+    id: 'option-4',
+    text: 'Option 4',
+  },
+  {
+    id: 'option-5',
+    text: 'Option 5',
+  },
+];
+
+export default {
+  title: 'Components/Dropdown',
+
+  parameters: {
+    component: Dropdown,
+
+    subcomponents: {
+      DropdownSkeleton,
+    },
+  },
+};
+
+export const Default = () => (
+  <div style={{ width: 400 }}>
+    <Dropdown
+      id="default"
+      titleText="Dropdown label"
+      helperText="This is some helper text"
+      label="Dropdown menu options"
+      items={items}
+      itemToString={(item) => (item ? item.text : '')}
+    />
+  </div>
+);
+
+export const Inline = () => (
+  <div style={{ width: 600 }}>
+    <Dropdown
+      id="inline"
+      titleText="Inline dropdown label"
+      label="Dropdown menu options"
+      type="inline"
+      items={items}
+      itemToString={(item) => (item ? item.text : '')}
+    />
+  </div>
+);
+
+export const Skeleton = () => (
+  <div style={{ width: 300 }}>
+    <DropdownSkeleton />
+  </div>
+);

packages/carbon-react/src/components/Dropdown/index.js

@@ -0,0 +1,8 @@
+/**
+ * Copyright IBM Corp. 2016, 2018
+ *
+ * This source code is licensed under the Apache-2.0 license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+export { Dropdown } from 'carbon-components-react';