Merge branch 'master' into patch-1

config/stylelint-config-carbon/package.json

@@ -1,7 +1,7 @@
 {
   "name": "stylelint-config-carbon",
   "description": "Stylelint configuration for Carbon",
-  "version": "1.0.0",
+  "version": "1.1.0",
   "license": "Apache-2.0",
   "main": "index.js",
   "repository": "https://github.com/carbon-design-system/carbon/tree/master/config/stylelint-config-carbon",

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.20.0-rc.0",
+  "version": "10.20.0",
   "license": "Apache-2.0",
   "main": "umd/index.js",
   "module": "es/index.js",
@@ -79,9 +79,9 @@
     "@babel/preset-env": "^7.10.0",
     "@babel/preset-react": "^7.10.0",
     "@babel/runtime": "^7.10.0",
-    "@carbon/elements": "^10.19.0-rc.0",
-    "@carbon/icons-handlebars": "^10.17.0",
-    "@carbon/icons-react": "^10.17.0",
+    "@carbon/elements": "^10.19.0",
+    "@carbon/icons-handlebars": "^10.18.0",
+    "@carbon/icons-react": "^10.18.0",
     "@carbon/test-utils": "^10.11.0",
     "@frctl/fractal": "^1.1.0",
     "adaro": "1.0.4",

packages/elements/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@carbon/elements",
   "description": "A collection of design elements in code for the IBM Design Language",
-  "version": "10.19.0-rc.0",
+  "version": "10.19.0",
   "license": "Apache-2.0",
   "main": "lib/index.js",
   "module": "es/index.js",
@@ -33,12 +33,12 @@
   "dependencies": {
     "@carbon/colors": "^10.13.0",
     "@carbon/grid": "^10.15.0",
-    "@carbon/icons": "^10.17.0",
+    "@carbon/icons": "^10.18.0",
     "@carbon/import-once": "^10.3.0",
     "@carbon/layout": "^10.13.0",
     "@carbon/motion": "^10.9.0",
-    "@carbon/themes": "^10.19.0-rc.0",
-    "@carbon/type": "^10.16.0-rc.0"
+    "@carbon/themes": "^10.19.0",
+    "@carbon/type": "^10.16.0"
   },
   "devDependencies": {
     "@carbon/bundler": "^10.9.0",

packages/icons-handlebars/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@carbon/icons-handlebars",
   "description": "Handlebars helpers for IBM Design Language icons in digital and software products using the Carbon Design System",
-  "version": "10.17.0",
+  "version": "10.18.0",
   "license": "Apache-2.0",
   "main": "index.js",
   "repository": "https://github.com/carbon-design-system/carbon/tree/master/packages/icons-handlebars",
@@ -23,7 +23,7 @@
   },
   "dependencies": {
     "@carbon/icon-helpers": "^10.9.0",
-    "@carbon/icons": "^10.17.0"
+    "@carbon/icons": "^10.18.0"
   },
   "devDependencies": {
     "handlebars": "^4.0.12"

packages/icons-react/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@carbon/icons-react",
   "description": "React components for icons in digital and software products using the Carbon Design System",
-  "version": "10.17.0",
+  "version": "10.18.0",
   "license": "Apache-2.0",
   "main": "lib/index.js",
   "module": "es/index.js",
@@ -33,7 +33,7 @@
   },
   "devDependencies": {
     "@carbon/icon-build-helpers": "^0.11.0",
-    "@carbon/icons": "^10.17.0"
+    "@carbon/icons": "^10.18.0"
   },
   "sideEffects": false
 }

packages/icons-vue/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@carbon/icons-vue",
   "description": "Vue components for icons in digital and software products using the Carbon Design System",
-  "version": "10.17.0",
+  "version": "10.18.0",
   "license": "Apache-2.0",
   "main": "lib/index.js",
   "module": "es/index.js",
@@ -28,7 +28,7 @@
   },
   "devDependencies": {
     "@carbon/cli-reporter": "^10.3.0",
-    "@carbon/icons": "^10.17.0",
+    "@carbon/icons": "^10.18.0",
     "fs-extra": "^8.1.0",
     "prettier": "^2.1.0",
     "rimraf": "^3.0.0",

packages/icons/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@carbon/icons",
   "description": "Icons for digital and software products using the Carbon Design System",
-  "version": "10.17.0",
+  "version": "10.18.0",
   "license": "Apache-2.0",
   "main": "lib/index.js",
   "module": "es/index.js",

packages/react-hooks/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@carbon/react-hooks",
   "private": true,
-  "version": "10.14.0-rc.0",
+  "version": "10.14.0",
   "license": "Apache-2.0",
   "main": "lib/index.js",
   "module": "es/index.js",
@@ -39,7 +39,7 @@
     "autoprefixer": "^9.7.4",
     "babel-loader": "^8.1.0",
     "browserslist-config-carbon": "^10.5.0",
-    "carbon-components": "^10.20.0-rc.0",
+    "carbon-components": "^10.20.0",
     "css-loader": "^3.4.2",
     "node-sass": "^4.13.1",
     "postcss-loader": "^3.0.0",

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.20.0-rc.0",
+  "version": "7.20.0",
   "license": "Apache-2.0",
   "main": "lib/index.js",
   "module": "es/index.js",
@@ -39,7 +39,7 @@
     "react-dom": "^16.8.6"
   },
   "dependencies": {
-    "@carbon/icons-react": "^10.17.0",
+    "@carbon/icons-react": "^10.18.0",
     "classnames": "2.2.6",
     "downshift": "5.2.1",
     "flatpickr": "4.6.1",
@@ -84,7 +84,7 @@
     "babel-plugin-react-docgen": "^4.0.0",
     "babel-plugin-transform-inline-environment-variables": "^0.4.0",
     "browserslist-config-carbon": "^10.5.0",
-    "carbon-components": "^10.20.0-rc.0",
+    "carbon-components": "^10.20.0",
     "carbon-icons": "^7.0.5",
     "chalk": "^2.3.0",
     "cli-table": "^0.3.0",

packages/react/src/components/Accordion/Accordion.mdx

@@ -3,6 +3,12 @@ import { Accordion, AccordionItem, AccordionSkeleton } from '../Accordion';
 
 # Accordion
 
+[Source code](https://github.com/carbon-design-system/carbon/tree/master/packages/react/src/components/Accordion)
+ | 
+[Usage guidelines](https://www.carbondesignsystem.com/components/accordion/usage)
+ | 
+[Accessibility](https://www.carbondesignsystem.com/components/accordion/accessibility)
+
 <!-- START doctoc generated TOC please keep comment here to allow auto update -->
 <!-- DON'T EDIT THIS SECTION, INSTEAD RE-RUN doctoc TO UPDATE -->
 
@@ -149,6 +155,6 @@ or screen reader.
 
 ## Feedback
 
-Help us improve this component by providing feedback, asking questions, and
-leaving any other comments on
+Help us improve this component by providing feedback, asking questions on Slack,
+or updating this file on
 [GitHub](https://github.com/carbon-design-system/carbon/edit/master/packages/react/src/components/Accordion/Accordion.mdx).

packages/react/src/components/Breadcrumb/Breadcrumb.mdx

@@ -3,6 +3,12 @@ import { Breadcrumb, BreadcrumbItem, BreadcrumbSkeleton } from '../Breadcrumb';
 
 # Breadcrumb
 
+[Source code](https://github.com/carbon-design-system/carbon/tree/master/packages/react/src/components/Breadcrumb)
+ | 
+[Usage guidelines](https://www.carbondesignsystem.com/components/breadcrumb/usage)
+ | 
+[Accessibility](https://www.carbondesignsystem.com/components/breadcrumb/accessibility)
+
 ## Table of Contents
 
 - [Overview](#overview)
@@ -13,15 +19,20 @@ import { Breadcrumb, BreadcrumbItem, BreadcrumbSkeleton } from '../Breadcrumb';
 
 ## Overview
 
-You can build a breadcrumb using a combination of the `Breadcrumb` and `BreadcrumbItem` components. The `Breadcrumb` component accepts a list of `BreadcrumbItem` components as `children` and each `BreadcrumbItem` is responsible for displaying the page links in the hierarchy.
+You can build a breadcrumb using a combination of the `Breadcrumb` and
+`BreadcrumbItem` components. The `Breadcrumb` component accepts a list of
+`BreadcrumbItem` components as `children` and each `BreadcrumbItem` is
+responsible for displaying the page links in the hierarchy.
 
 <Preview>
   <Story id="breadcrumb--breadcrumb" />
 </Preview>
 
 ## Skeleton state
 
-You can use the `BreadcrumbSkeleton` component to render a skeleton variant of a breadcrumb. This is useful to display while content in your breadcrumb is being fetched from an external resource like an API.
+You can use the `BreadcrumbSkeleton` component to render a skeleton variant of a
+breadcrumb. This is useful to display while content in your breadcrumb is being
+fetched from an external resource like an API.
 
 <Preview>
   <Story id="breadcrumb--skeleton" />
@@ -33,7 +44,8 @@ You can use the `BreadcrumbSkeleton` component to render a skeleton variant of a
 
 ### Breadcrumb noTrailingSlash
 
-You can use the `noTrailingSlash` prop to omit the slash from the end of the current page.
+You can use the `noTrailingSlash` prop to omit the slash from the end of the
+current page.
 
 ```jsx
 <Breadcrumb noTrailingSlash>
@@ -45,7 +57,8 @@ You can use the `noTrailingSlash` prop to omit the slash from the end of the cur
 
 ### BreadcrumbItem isCurrentPage
 
-You can use the `isCurrentPage` prop on a `BreadcrumbItem` to represent the current page.
+You can use the `isCurrentPage` prop on a `BreadcrumbItem` to represent the
+current page.
 
 ```jsx
 <Breadcrumb>
@@ -59,5 +72,6 @@ You can use the `isCurrentPage` prop on a `BreadcrumbItem` to represent the curr
 
 ## Feedback
 
-Help us improve this component by providing feedback through, asking questions on Slack,or updating this file on GitHub
-[GitHub](https://github.com/carbon-design-system/carbon/edit/master/packages/react/src/components/Breadcrumb/Breadcrumb.mdx).
+Help us improve this component by providing feedback, asking questions on Slack,
+or updating this file on
+[GitHub](https://github.com/carbon-design-system/carbon/edit/master/packages/react/src/components/Breadcrumb/Breadcrumb.mdx).

packages/react/src/components/Button/Button.mdx

@@ -7,10 +7,17 @@ import { Add16, Delete16 } from '@carbon/icons-react';
 
 # Button
 
+[Source code](https://github.com/carbon-design-system/carbon/tree/master/packages/react/src/components/Button)
+ | 
+[Usage guidelines](https://www.carbondesignsystem.com/components/button/usage)
+ | 
+[Accessibility](https://www.carbondesignsystem.com/components/button/accessibility)
+
+## Table of Contents
+
 <!-- START doctoc generated TOC please keep comment here to allow auto update -->
 <!-- DON'T EDIT THIS SECTION, INSTEAD RE-RUN doctoc TO UPDATE -->
 
-
 - [Overview](#overview)
 - [Icon-only Buttons](#icon-only-buttons)
 - [Set of Buttons](#set-of-buttons)
@@ -315,5 +322,6 @@ By passing in `stacked` to the `ButtonSet` component, you can arrange your two
 
 ## Feedback
 
-Help us improve these docs by
-[editing this file on GitHub](https://github.com/carbon-design-system/carbon/edit/master/packages/react/src/components/Accordion/Accordion.stories.mdx)
+Help us improve this component by providing feedback, asking questions on Slack,
+or updating this file on
+[GitHub](https://github.com/carbon-design-system/carbon/edit/master/packages/react/src/components/Button/Button.mdx)

packages/react/src/components/Checkbox/Checkbox.mdx

@@ -3,6 +3,12 @@ import { Checkbox, CheckboxSkeleton } from '../Checkbox';
 
 # Checkbox
 
+[Source code](https://github.com/carbon-design-system/carbon/tree/master/packages/react/src/components/Checkbox)
+ | 
+[Usage guidelines](https://www.carbondesignsystem.com/components/checkbox/usage)
+ | 
+[Accessibility](https://www.carbondesignsystem.com/components/checkbox/accessibility)
+
 ## Table of Contents
 
 - [Overview](#overview)
@@ -12,7 +18,8 @@ import { Checkbox, CheckboxSkeleton } from '../Checkbox';
 
 ## Overview
 
-You can build a checkbox using the `Checkbox` in combination with a `<fieldset>` element to group controls and `<legend>` element for the label.
+You can build a checkbox using the `Checkbox` in combination with a `<fieldset>`
+element to group controls and `<legend>` element for the label.
 
 <Preview>
   <Story id="checkbox--checkbox" />
@@ -25,13 +32,15 @@ You can also use a controlled checkbox component driven by state:
 ```jsx
 function ExampleComponent() {
   const [isChecked, setIsChecked] = useState(false);
-  return <Checkbox checked={isChecked} onChange={setIsChecked} />
+  return <Checkbox checked={isChecked} onChange={setIsChecked} />;
 }
 ```
 
 ## Skeleton state
 
-You can use the `CheckboxSkeleton` component to render a skeleton variant of a checkbox. This is useful to display while content in your checkbox is being fetched from an external resource like an API.
+You can use the `CheckboxSkeleton` component to render a skeleton variant of a
+checkbox. This is useful to display while content in your checkbox is being
+fetched from an external resource like an API.
 
 <Preview>
   <Story id="checkbox--skeleton" />
@@ -43,7 +52,8 @@ You can use the `CheckboxSkeleton` component to render a skeleton variant of a c
 
 ### Checkbox defaultChecked
 
-You can use the `defaultChecked` prop to specify weather a checkbox is checked by default or not on page load.  
+You can use the `defaultChecked` prop to specify weather a checkbox is checked
+by default or not on page load.
 
 ```jsx
 <Checkbox defaultChecked labelText={`Checkbox label`} id="checkbox-label-1" />
@@ -52,7 +62,8 @@ You can use the `defaultChecked` prop to specify weather a checkbox is checked b
 
 ### Checkbox id
 
-The `id` should be used to provide each checkbox input with a unique id and is a required prop.
+The `id` should be used to provide each checkbox input with a unique id and is a
+required prop.
 
 ```jsx
 <Checkbox labelText={`Checkbox label`} id="checkbox-label-1" />
@@ -61,7 +72,8 @@ The `id` should be used to provide each checkbox input with a unique id and is a
 
 ### Checkbox labelText
 
-The `labelText` should be used to provide a label that describes the checkbox input that is being exposed to the user and is a required prop.
+The `labelText` should be used to provide a label that describes the checkbox
+input that is being exposed to the user and is a required prop.
 
 ```jsx
 <Checkbox labelText={`Checkbox label`} id="checkbox-label-1" />
@@ -70,7 +82,9 @@ The `labelText` should be used to provide a label that describes the checkbox in
 
 ### Checkbox onChange
 
-You can use the `onChange` prop to pass in a custom function for event handling. This prop recieves three arguements: a boolean, the checkbox id, and the dom event.
+You can use the `onChange` prop to pass in a custom function for event handling.
+This prop recieves three arguements: a boolean, the checkbox id, and the dom
+event.
 
 ```jsx
 <Checkbox onChange={()=>{}} labelText={`Checkbox label`} id="checkbox-label-1" />
@@ -79,5 +93,6 @@ You can use the `onChange` prop to pass in a custom function for event handling.
 
 ## Feedback
 
-Help us improve this component by providing feedback through, asking questions on Slack,or updating this file on GitHub
-[GitHub](https://github.com/carbon-design-system/carbon/edit/master/packages/react/src/components/Checkbox/Checkbox.mdx).
+Help us improve this component by providing feedback, asking questions on Slack,
+or updating this file on
+[GitHub](https://github.com/carbon-design-system/carbon/edit/master/packages/react/src/components/Checkbox/Checkbox.mdx).