Merge branch 'main' into bidi-docs-updates

carbon-design-system · Oct 22, 2021 · afa04f8 · afa04f8
2 parents 15aa469 + f012e36
commit afa04f8
Show file tree

Hide file tree

Showing 140 changed files with 4,478 additions and 361 deletions.
diff --git a/.all-contributorsrc b/.all-contributorsrc
@@ -801,6 +801,25 @@
       "contributions": [
         "code"
       ]
+    },
+    {
+      "login": "RianTavares",
+      "name": "@RianTavaresOn",
+      "avatar_url": "https://avatars.githubusercontent.com/u/8935295?v=4",
+      "profile": "https://riantavares.github.io/",
+      "contributions": [
+        "code",
+        "design"
+      ]
+    },
+    {
+      "login": "ColbyJohnIBM",
+      "name": "ColbyJohnIBM",
+      "avatar_url": "https://avatars.githubusercontent.com/u/19613692?v=4",
+      "profile": "https://github.com/ColbyJohnIBM",
+      "contributions": [
+        "code"
+      ]
     }
   ],
   "commitConvention": "none"

diff --git a/.github/ISSUE_TEMPLATE/DESIGN_DEFECT.yaml b/.github/ISSUE_TEMPLATE/DESIGN_DEFECT.yaml
@@ -0,0 +1,93 @@
+name: Design defect 🎨
+description: Report a visual design issue
+title: '[Bug]: '
+labels: 'type: bug 🐛'
+body:
+  - type: markdown
+    attributes:
+      value: '## Welcome!'
+  - type: markdown
+    attributes:
+      value:
+        Thanks for taking the time to fill out the details below for this design
+        defect.
+  - type: dropdown
+    id: package
+    attributes:
+      label: Package
+      description: Which package(s) are you using?
+      multiple: true
+      options:
+        - 'carbon-components'
+        - 'carbon-components-react'
+        - '@carbon/colors'
+        - '@carbon/elements'
+        - '@carbon/grid'
+        - '@carbon/icons'
+        - '@carbon/icons-react'
+        - '@carbon/icons-vue'
+        - '@carbon/layout'
+        - '@carbon/motion'
+        - '@carbon/pictograms'
+        - '@carbon/pictograms-react'
+        - '@carbon/themes'
+        - '@carbon/type'
+        - '@carbon/upgrade'
+    validations:
+      required: true
+  - type: dropdown
+    id: browser
+    attributes:
+      label: Browser
+      description: Which browser(s) are you experiencing the issue?
+      multiple: true
+      options:
+        - Chrome
+        - Safari
+        - Firefox
+        - Edge
+  - type: input
+    id: version
+    attributes:
+      label: Package version
+      description: 'Which version(s) are you using?'
+      placeholder: e.g. v10.42.0
+    validations:
+      required: true
+  - type: textarea
+    id: description
+    attributes:
+      label: Description
+      description: "Tell us more about the problem that you're running into"
+      placeholder: What did you see? What did you expect to see?
+    validations:
+      required: true
+  - type: textarea
+    id: example-url
+    attributes:
+      label: Screenshots
+      description: 'Provide screenshots of the problem'
+    validations:
+      required: true
+  - type: textarea
+    id: reproduce
+    attributes:
+      label: Steps to reproduce
+      description:
+        'How do we reproduce the problem displayed in the screenshots above?'
+    validations:
+      required: true
+  - type: checkboxes
+    id: terms
+    attributes:
+      label: Code of Conduct
+      description: Please confirm the following
+      options:
+        - label:
+            I agree to follow this project's [Code of
+            Conduct](https://github.com/carbon-design-system/carbon/blob/f555616971a03fd454c0f4daea184adf41fff05b/.github/CODE_OF_CONDUCT.md)
+          required: true
+        - label:
+            I checked the [current
+            issues](https://github.com/carbon-design-system/carbon/issues) for
+            duplicate problems
diff --git a/README.md b/README.md
@@ -187,6 +187,8 @@ check out our [Contributing Guide](/.github/CONTRIBUTING.md) and our
     <td align="center"><a href="https://github.com/adamalston"><img src="https://avatars.githubusercontent.com/u/18297826?v=4?s=100" width="100px;" alt=""/><br /><sub><b>Adam Alston</b></sub></a><br /><a href="https://github.com/carbon-design-system/carbon/commits?author=adamalston" title="Documentation">📖</a></td>
     <td align="center"><a href="https://github.com/Kiittyka"><img src="https://avatars.githubusercontent.com/u/41021851?v=4?s=100" width="100px;" alt=""/><br /><sub><b>Krithika S Udupa</b></sub></a><br /><a href="https://github.com/carbon-design-system/carbon/commits?author=Kiittyka" title="Documentation">📖</a></td>
     <td align="center"><a href="https://github.com/egriff38"><img src="https://avatars.githubusercontent.com/u/6627718?v=4?s=100" width="100px;" alt=""/><br /><sub><b>Eshin Griffith</b></sub></a><br /><a href="https://github.com/carbon-design-system/carbon/commits?author=egriff38" title="Code">💻</a></td>
+    <td align="center"><a href="https://riantavares.github.io/"><img src="https://avatars.githubusercontent.com/u/8935295?v=4?s=100" width="100px;" alt=""/><br /><sub><b>@RianTavaresOn</b></sub></a><br /><a href="https://github.com/carbon-design-system/carbon/commits?author=RianTavares" title="Code">💻</a> <a href="#design-RianTavares" title="Design">🎨</a></td>
+    <td align="center"><a href="https://github.com/ColbyJohnIBM"><img src="https://avatars.githubusercontent.com/u/19613692?v=4?s=100" width="100px;" alt=""/><br /><sub><b>ColbyJohnIBM</b></sub></a><br /><a href="https://github.com/carbon-design-system/carbon/commits?author=ColbyJohnIBM" title="Code">💻</a></td>
   </tr>
 </table>
 

diff --git a/package.json b/package.json
@@ -71,12 +71,6 @@
     "rimraf": "^3.0.0",
     "stylelint": "^13.13.1"
   },
-  "husky": {
-    "hooks": {
-      "commit-msg": "commitlint -e $HUSKY_GIT_PARAMS",
-      "pre-commit": "lint-staged"
-    }
-  },
   "commitlint": {
     "extends": [
       "@commitlint/config-conventional"

diff --git a/packages/carbon-react/package.json b/packages/carbon-react/package.json
@@ -1,7 +1,7 @@
 {
   "name": "@carbon/react",
   "description": "React components for the Carbon Design System",
-  "version": "0.6.0",
+  "version": "0.7.0",
   "license": "Apache-2.0",
   "main": "lib/index.js",
   "module": "es/index.js",
@@ -43,11 +43,11 @@
   },
   "dependencies": {
     "@carbon/feature-flags": "^0.6.0",
-    "@carbon/icons-react": "^10.40.0",
-    "@carbon/styles": "^0.6.0",
+    "@carbon/icons-react": "^10.41.0",
+    "@carbon/styles": "^0.7.0",
     "@carbon/telemetry": "0.0.0-alpha.6",
-    "carbon-components": "^10.45.0",
-    "carbon-components-react": "^7.45.0",
+    "carbon-components": "^10.46.0",
+    "carbon-components-react": "^7.46.0",
     "carbon-icons": "^7.0.7"
   },
   "devDependencies": {
@@ -58,7 +58,7 @@
     "@babel/plugin-transform-react-constant-elements": "^7.14.5",
     "@babel/preset-env": "^7.14.7",
     "@babel/preset-react": "^7.14.5",
-    "@carbon/themes": "^10.44.0",
+    "@carbon/themes": "^10.45.0",
     "@rollup/plugin-babel": "^5.3.0",
     "@rollup/plugin-commonjs": "^18.0.0",
     "@rollup/plugin-node-resolve": "^11.2.1",

diff --git a/packages/carbon-react/src/components/CodeSnippet/CodeSnippet.stories.js b/packages/carbon-react/src/components/CodeSnippet/CodeSnippet.stories.js
@@ -7,6 +7,7 @@
 
 import React from 'react';
 import { CodeSnippet, CodeSnippetSkeleton } from 'carbon-components-react';
+import { Layer } from '../Layer';
 
 export default {
   title: 'Components/CodeSnippet',
@@ -60,6 +61,153 @@ export const singleline = () => (
   </CodeSnippet>
 );
 
+export const inlineWithLayer = () => {
+  return (
+    <>
+      <CodeSnippet type="inline" feedback="Copied to clipboard">
+        {'node -v'}
+      </CodeSnippet>
+      <Layer>
+        <CodeSnippet type="inline" feedback="Copied to clipboard">
+          {'node -v'}
+        </CodeSnippet>
+        <Layer>
+          <CodeSnippet type="inline" feedback="Copied to clipboard">
+            {'node -v'}
+          </CodeSnippet>
+        </Layer>
+      </Layer>
+    </>
+  );
+};
+
+export const multilineWithLayer = () => {
+  return (
+    <>
+      <CodeSnippet type="multi" feedback="Copied to clipboard">
+        {`  "scripts": {
+        "build": "lerna run build --stream --prefix --npm-client yarn",
+        "ci-check": "carbon-cli ci-check",
+        "clean": "lerna run clean && lerna clean --yes && rimraf node_modules",
+        "doctoc": "doctoc --title '## Table of Contents'",
+        "format": "prettier --write '**/*.{js,md,scss,ts}' '!**/{build,es,lib,storybook,ts,umd}/**'",
+        "format:diff": "prettier --list-different '**/*.{js,md,scss,ts}' '!**/{build,es,lib,storybook,ts,umd}/**' '!packages/components/**'",
+        "lint": "eslint actions config codemods packages",
+        "lint:styles": "stylelint '**/*.{css,scss}' --report-needless-disables --report-invalid-scope-disables",
+        "sync": "carbon-cli sync",
+        "test": "cross-env BABEL_ENV=test jest",
+        "test:e2e": "cross-env BABEL_ENV=test jest --testPathPattern=e2e --testPathIgnorePatterns='examples,/packages/components/,/packages/react/'"
+        },
+        "resolutions": {
+          "react": "~16.9.0",
+          "react-dom": "~16.9.0",
+          "react-is": "~16.9.0",
+          "react-test-renderer": "~16.9.0"
+        },
+        "devDependencies": {
+          "@babel/core": "^7.10.0",
+          "@babel/plugin-proposal-class-properties": "^7.7.4",
+          "@babel/plugin-proposal-export-default-from": "^7.7.4",
+          "@babel/plugin-proposal-export-namespace-from": "^7.7.4",
+          "@babel/plugin-transform-runtime": "^7.10.0",
+          "@babel/preset-env": "^7.10.0",
+          "@babel/preset-react": "^7.10.0",
+          "@babel/runtime": "^7.10.0",
+          "@commitlint/cli": "^8.3.5",`}
+      </CodeSnippet>
+      <Layer>
+        <CodeSnippet type="multi" feedback="Copied to clipboard">
+          {`  "scripts": {
+          "build": "lerna run build --stream --prefix --npm-client yarn",
+          "ci-check": "carbon-cli ci-check",
+          "clean": "lerna run clean && lerna clean --yes && rimraf node_modules",
+          "doctoc": "doctoc --title '## Table of Contents'",
+          "format": "prettier --write '**/*.{js,md,scss,ts}' '!**/{build,es,lib,storybook,ts,umd}/**'",
+          "format:diff": "prettier --list-different '**/*.{js,md,scss,ts}' '!**/{build,es,lib,storybook,ts,umd}/**' '!packages/components/**'",
+          "lint": "eslint actions config codemods packages",
+          "lint:styles": "stylelint '**/*.{css,scss}' --report-needless-disables --report-invalid-scope-disables",
+          "sync": "carbon-cli sync",
+          "test": "cross-env BABEL_ENV=test jest",
+          "test:e2e": "cross-env BABEL_ENV=test jest --testPathPattern=e2e --testPathIgnorePatterns='examples,/packages/components/,/packages/react/'"
+          },
+          "resolutions": {
+            "react": "~16.9.0",
+            "react-dom": "~16.9.0",
+            "react-is": "~16.9.0",
+            "react-test-renderer": "~16.9.0"
+          },
+          "devDependencies": {
+            "@babel/core": "^7.10.0",
+            "@babel/plugin-proposal-class-properties": "^7.7.4",
+            "@babel/plugin-proposal-export-default-from": "^7.7.4",
+            "@babel/plugin-proposal-export-namespace-from": "^7.7.4",
+            "@babel/plugin-transform-runtime": "^7.10.0",
+            "@babel/preset-env": "^7.10.0",
+            "@babel/preset-react": "^7.10.0",
+            "@babel/runtime": "^7.10.0",
+            "@commitlint/cli": "^8.3.5",`}
+        </CodeSnippet>
+        <Layer>
+          <CodeSnippet type="multi" feedback="Copied to clipboard">
+            {`  "scripts": {
+            "build": "lerna run build --stream --prefix --npm-client yarn",
+            "ci-check": "carbon-cli ci-check",
+            "clean": "lerna run clean && lerna clean --yes && rimraf node_modules",
+            "doctoc": "doctoc --title '## Table of Contents'",
+            "format": "prettier --write '**/*.{js,md,scss,ts}' '!**/{build,es,lib,storybook,ts,umd}/**'",
+            "format:diff": "prettier --list-different '**/*.{js,md,scss,ts}' '!**/{build,es,lib,storybook,ts,umd}/**' '!packages/components/**'",
+            "lint": "eslint actions config codemods packages",
+            "lint:styles": "stylelint '**/*.{css,scss}' --report-needless-disables --report-invalid-scope-disables",
+            "sync": "carbon-cli sync",
+            "test": "cross-env BABEL_ENV=test jest",
+            "test:e2e": "cross-env BABEL_ENV=test jest --testPathPattern=e2e --testPathIgnorePatterns='examples,/packages/components/,/packages/react/'"
+            },
+            "resolutions": {
+              "react": "~16.9.0",
+              "react-dom": "~16.9.0",
+              "react-is": "~16.9.0",
+              "react-test-renderer": "~16.9.0"
+            },
+            "devDependencies": {
+              "@babel/core": "^7.10.0",
+              "@babel/plugin-proposal-class-properties": "^7.7.4",
+              "@babel/plugin-proposal-export-default-from": "^7.7.4",
+              "@babel/plugin-proposal-export-namespace-from": "^7.7.4",
+              "@babel/plugin-transform-runtime": "^7.10.0",
+              "@babel/preset-env": "^7.10.0",
+              "@babel/preset-react": "^7.10.0",
+              "@babel/runtime": "^7.10.0",
+              "@commitlint/cli": "^8.3.5",`}
+          </CodeSnippet>
+        </Layer>
+      </Layer>
+    </>
+  );
+};
+
+export const singlelineWithLayer = () => {
+  return (
+    <>
+      <CodeSnippet type="single" feedback="Copied to clipboard">
+        yarn add carbon-components@latest carbon-components-react@latest
+        @carbon/icons-react@latest carbon-icons@latest
+      </CodeSnippet>
+      <Layer>
+        <CodeSnippet type="single" feedback="Copied to clipboard">
+          yarn add carbon-components@latest carbon-components-react@latest
+          @carbon/icons-react@latest carbon-icons@latest
+        </CodeSnippet>
+        <Layer>
+          <CodeSnippet type="single" feedback="Copied to clipboard">
+            yarn add carbon-components@latest carbon-components-react@latest
+            @carbon/icons-react@latest carbon-icons@latest
+          </CodeSnippet>
+        </Layer>
+      </Layer>
+    </>
+  );
+};
+
 export const skeleton = () => (
   <div>
     <CodeSnippetSkeleton type="single" style={{ marginBottom: 8 }} />

diff --git a/packages/carbon-react/src/components/ComboBox/ComboBox.stories.js b/packages/carbon-react/src/components/ComboBox/ComboBox.stories.js
@@ -7,6 +7,7 @@
 
 import React from 'react';
 import { ComboBox } from 'carbon-components-react';
+import { Layer } from '../Layer';
 
 const items = [
   {
@@ -54,3 +55,39 @@ export const Combobox = () => (
     />
   </div>
 );
+
+export const withLayer = () => (
+  <div style={{ width: 300 }}>
+    <ComboBox
+      onChange={() => {}}
+      id="carbon-combobox"
+      items={items}
+      itemToString={(item) => (item ? item.text : '')}
+      placeholder="Filter..."
+      titleText="First Layer"
+      helperText="Combobox helper text"
+    />
+    <Layer>
+      <ComboBox
+        onChange={() => {}}
+        id="carbon-combobox"
+        items={items}
+        itemToString={(item) => (item ? item.text : '')}
+        placeholder="Filter..."
+        titleText="Second Layer"
+        helperText="Combobox helper text"
+      />
+      <Layer>
+        <ComboBox
+          onChange={() => {}}
+          id="carbon-combobox"
+          items={items}
+          itemToString={(item) => (item ? item.text : '')}
+          placeholder="Filter..."
+          titleText="Third Layer"
+          helperText="Combobox helper text"
+        />
+      </Layer>
+    </Layer>
+  </div>
+);