diff --git a/.yarn/offline-mirror/@babel-helper-skip-transparent-expression-wrappers-7.11.0.tgz b/.yarn/offline-mirror/@babel-helper-skip-transparent-expression-wrappers-7.11.0.tgz new file mode 100644 index 000000000000..708dee9f2966 Binary files /dev/null and b/.yarn/offline-mirror/@babel-helper-skip-transparent-expression-wrappers-7.11.0.tgz differ diff --git a/.yarn/offline-mirror/@babel-plugin-proposal-nullish-coalescing-operator-7.10.4.tgz b/.yarn/offline-mirror/@babel-plugin-proposal-nullish-coalescing-operator-7.10.4.tgz new file mode 100644 index 000000000000..4fa5e724f320 Binary files /dev/null and b/.yarn/offline-mirror/@babel-plugin-proposal-nullish-coalescing-operator-7.10.4.tgz differ diff --git a/.yarn/offline-mirror/@babel-plugin-proposal-optional-chaining-7.11.0.tgz b/.yarn/offline-mirror/@babel-plugin-proposal-optional-chaining-7.11.0.tgz new file mode 100644 index 000000000000..49e389930c74 Binary files /dev/null and b/.yarn/offline-mirror/@babel-plugin-proposal-optional-chaining-7.11.0.tgz differ diff --git a/.yarn/offline-mirror/@babel-plugin-transform-modules-commonjs-7.10.4.tgz b/.yarn/offline-mirror/@babel-plugin-transform-modules-commonjs-7.10.4.tgz new file mode 100644 index 000000000000..72ff8e1ab19f Binary files /dev/null and b/.yarn/offline-mirror/@babel-plugin-transform-modules-commonjs-7.10.4.tgz differ diff --git a/.yarn/offline-mirror/@babel-types-7.11.0.tgz b/.yarn/offline-mirror/@babel-types-7.11.0.tgz new file mode 100644 index 000000000000..6da194edf9ee Binary files /dev/null and b/.yarn/offline-mirror/@babel-types-7.11.0.tgz differ diff --git a/.yarn/offline-mirror/events-3.0.0.tgz b/.yarn/offline-mirror/events-3.0.0.tgz deleted file mode 100644 index 5085012db4a3..000000000000 Binary files a/.yarn/offline-mirror/events-3.0.0.tgz and /dev/null differ diff --git a/.yarn/offline-mirror/jscodeshift-0.10.0.tgz b/.yarn/offline-mirror/jscodeshift-0.10.0.tgz new file mode 100644 index 000000000000..ee833c4dd836 Binary files /dev/null and b/.yarn/offline-mirror/jscodeshift-0.10.0.tgz differ diff --git a/codemods/.npmignore b/codemods/.npmignore new file mode 100644 index 000000000000..81ba1598b971 --- /dev/null +++ b/codemods/.npmignore @@ -0,0 +1,4 @@ +**/__mocks__/** +**/__tests__/** +**/examples/** +**/tasks/** \ No newline at end of file diff --git a/codemods/ARCHITECTURE.md b/codemods/ARCHITECTURE.md new file mode 100644 index 000000000000..431f7914450e --- /dev/null +++ b/codemods/ARCHITECTURE.md @@ -0,0 +1,43 @@ +# @carbon/codemods + +> An internal package for codemods for the Carbon Design System + +## Usage + +You can run a specific transform for a path in the project by running: + +```bash +yarn jscodeshift -t codemods/transform/.js 'path/to/file' +``` + +If you want to preview changes that are being made, you should enable the `dry` +and `print` options: + +```bash +yarn jscodeshift -d -p -t codemods/transform/.js 'path/to/file' +``` + +## Writing transforms + +Transforms are written in the `transforms` directory with their tests and +fixtures written in the `__tests__` and `__testfixtures__` directories, +accordingly. + +As an example, to add a transform called `sort-prop-types` oone would create the +following files: + +``` +- codemods + - transforms + - __testfixtures__ + - sort-prop-types.input.js + - sort-prop-types.output.js + - __tests__ + - sort-prop-types-test.js + - sort-prop-types.js +``` + +In this structure, the test file will determine which test fixtures get run. +Test fixtures are written with a `*.input.js` and `*.output.js` convention. +Files that end with `*.input.js` are given to your transform and the test runner +will assert that the output matches what is available in `*.output.js`. diff --git a/codemods/package.json b/codemods/package.json new file mode 100644 index 000000000000..7400fd03f6da --- /dev/null +++ b/codemods/package.json @@ -0,0 +1,19 @@ +{ + "name": "@carbon/codemods", + "private": true, + "description": "Codemods for the Carbon monorepo", + "version": "0.0.0", + "license": "Apache-2.0", + "repository": "https://github.com/carbon-design-system/carbon/tree/master/codemods", + "bugs": "https://github.com/carbon-design-system/carbon/issues", + "keywords": [ + "ibm", + "carbon", + "carbon-design-system", + "components", + "react" + ], + "dependencies": { + "jscodeshift": "^0.10.0" + } +} diff --git a/codemods/transforms/__testfixtures__/sort-prop-types.input.js b/codemods/transforms/__testfixtures__/sort-prop-types.input.js new file mode 100644 index 000000000000..0d71c33cce35 --- /dev/null +++ b/codemods/transforms/__testfixtures__/sort-prop-types.input.js @@ -0,0 +1,7 @@ +function MyComponent() {} + +MyComponent.propTypes = { + a: PropTypes.string, + c: PropTypes.string, + b: PropTypes.string, +}; diff --git a/codemods/transforms/__testfixtures__/sort-prop-types.output.js b/codemods/transforms/__testfixtures__/sort-prop-types.output.js new file mode 100644 index 000000000000..daaf2f087a1d --- /dev/null +++ b/codemods/transforms/__testfixtures__/sort-prop-types.output.js @@ -0,0 +1,7 @@ +function MyComponent() {} + +MyComponent.propTypes = { + a: PropTypes.string, + b: PropTypes.string, + c: PropTypes.string, +}; diff --git a/codemods/transforms/__testfixtures__/sort-prop-types2.input.js b/codemods/transforms/__testfixtures__/sort-prop-types2.input.js new file mode 100644 index 000000000000..fb1601c634e0 --- /dev/null +++ b/codemods/transforms/__testfixtures__/sort-prop-types2.input.js @@ -0,0 +1,7 @@ +class A extends React.Component { + static propTypes = { + a: PropTypes.string, + c: PropTypes.string, + b: PropTypes.string, + }; +} diff --git a/codemods/transforms/__testfixtures__/sort-prop-types2.output.js b/codemods/transforms/__testfixtures__/sort-prop-types2.output.js new file mode 100644 index 000000000000..58a1c3c63860 --- /dev/null +++ b/codemods/transforms/__testfixtures__/sort-prop-types2.output.js @@ -0,0 +1,7 @@ +class A extends React.Component { + static propTypes = { + a: PropTypes.string, + b: PropTypes.string, + c: PropTypes.string, + }; +} diff --git a/codemods/transforms/__tests__/sort-prop-types-test.js b/codemods/transforms/__tests__/sort-prop-types-test.js new file mode 100644 index 000000000000..dde91a82784e --- /dev/null +++ b/codemods/transforms/__tests__/sort-prop-types-test.js @@ -0,0 +1,13 @@ +/** + * Copyright IBM Corp. 2016, 2020 + * + * This source code is licensed under the Apache-2.0 license found in the + * LICENSE file in the root directory of this source tree. + */ + +'use strict'; + +const { defineTest } = require('jscodeshift/dist/testUtils'); + +defineTest(__dirname, 'sort-prop-types'); +defineTest(__dirname, 'sort-prop-types', null, 'sort-prop-types2'); diff --git a/codemods/transforms/sort-prop-types.js b/codemods/transforms/sort-prop-types.js new file mode 100644 index 000000000000..811ec2ff4100 --- /dev/null +++ b/codemods/transforms/sort-prop-types.js @@ -0,0 +1,88 @@ +/** + * Copyright IBM Corp. 2016, 2020 + * + * This source code is licensed under the Apache-2.0 license found in the + * LICENSE file in the root directory of this source tree. + */ + +'use strict'; + +const defaultOptions = { + quote: 'single', + trailingComma: true, +}; + +function transform(fileInfo, api, options) { + const printOptions = options.printOptions || defaultOptions; + const j = api.jscodeshift; + const root = j(fileInfo.source); + + root + .find(j.AssignmentExpression, { + left: { + type: 'MemberExpression', + property: { + name: 'propTypes', + }, + }, + }) + .forEach((path) => { + path.node.right.properties.sort((a, b) => { + if (a.type === 'Property' && b.type === 'Property') { + if (getPropName(a) > getPropName(b)) { + return 1; + } + return -1; + } + + if (a.type === 'SpreadElement' && b.type === 'SpreadElement') { + if (getPropName(a) > getPropName(b)) { + return 1; + } + return -1; + } + + if (a.type === 'SpreadElement') { + return -1; + } + + return 1; + }); + }); + + root + .find(j.ClassProperty, { + key: { + name: 'propTypes', + }, + }) + .forEach((path) => { + path.node.value.properties.sort((a, b) => { + if (getPropName(a) > getPropName(b)) { + return 1; + } + return -1; + }); + }); + + function getPropName(node) { + if (node.type === 'SpreadElement') { + return node.argument.name; + } + + if (node.type === 'Property') { + if (node.key.type === 'Identifier') { + return node.key.name; + } + if (node.key.type === 'Literal') { + return node.key.value; + } + } + + throw new Error(`Unknown node of type: ${node.type}`); + } + + return root.toSource(printOptions); +} + +module.exports = transform; diff --git a/config/eslint-config-carbon/plugins/react.js b/config/eslint-config-carbon/plugins/react.js index 2a0311cbd4c4..772bd1865ec8 100644 --- a/config/eslint-config-carbon/plugins/react.js +++ b/config/eslint-config-carbon/plugins/react.js @@ -32,6 +32,7 @@ module.exports = { 'react/no-find-dom-node': 1, 'react/jsx-no-useless-fragment': 2, 'react/no-typos': 2, + 'react/sort-prop-types': 2, // react-hooks 'react-hooks/rules-of-hooks': 2, diff --git a/lerna.json b/lerna.json index d71556cf7f05..95948ad83cf6 100644 --- a/lerna.json +++ b/lerna.json @@ -6,6 +6,7 @@ "useWorkspaces": true, "ignoreChanges": [ "actions/**", + "codemods/**", "**/__fixtures__/**", "**/__tests__/**", "**/docs/**", diff --git a/package.json b/package.json index 0fd69e05725c..8a82f9817fba 100644 --- a/package.json +++ b/package.json @@ -9,9 +9,10 @@ }, "workspaces": { "packages": [ - "packages/*", "actions/*", - "config/*" + "codemods", + "config/*", + "packages/*" ], "nohoist": [] }, @@ -22,7 +23,7 @@ "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 packages actions", + "lint": "eslint actions config codemods packages", "lint:docs": "alex 'docs/**/*.md' -q", "lint:styles": "stylelint '**/*.{css,scss}' --report-needless-disables --report-invalid-scope-disables", "sync": "carbon-cli sync", diff --git a/packages/colors/.gitignore b/packages/colors/.gitignore new file mode 100644 index 000000000000..a419809a4e0a --- /dev/null +++ b/packages/colors/.gitignore @@ -0,0 +1 @@ +scss diff --git a/packages/colors/scss/colors.scss b/packages/colors/scss/colors.scss deleted file mode 100644 index d84d1424df4d..000000000000 --- a/packages/colors/scss/colors.scss +++ /dev/null @@ -1,12 +0,0 @@ -// Code generated by @carbon/colors. DO NOT EDIT. -// -// Copyright IBM Corp. 2018, 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 './mixins'; -// Deprecated ☠️ -@include ibm--colors(); -// Preferred -@include carbon--colors(); diff --git a/packages/colors/scss/index.scss b/packages/colors/scss/index.scss deleted file mode 100644 index d84d1424df4d..000000000000 --- a/packages/colors/scss/index.scss +++ /dev/null @@ -1,12 +0,0 @@ -// Code generated by @carbon/colors. DO NOT EDIT. -// -// Copyright IBM Corp. 2018, 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 './mixins'; -// Deprecated ☠️ -@include ibm--colors(); -// Preferred -@include carbon--colors(); diff --git a/packages/colors/scss/mixins.scss b/packages/colors/scss/mixins.scss deleted file mode 100644 index 6b2c47baea43..000000000000 --- a/packages/colors/scss/mixins.scss +++ /dev/null @@ -1,651 +0,0 @@ -// Code generated by @carbon/colors. DO NOT EDIT. -// -// Copyright IBM Corp. 2018, 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. -// -/// Define color variables -/// @access public -/// @group @carbon/colors -/// @deprecated Use `$carbon--colors` going forward -@mixin ibm--colors() { - $ibm-color__black-100: #000000 !default !global; - $ibm-color__blue-10: #edf5ff !default !global; - $ibm-color__blue-20: #d0e2ff !default !global; - $ibm-color__blue-30: #a6c8ff !default !global; - $ibm-color__blue-40: #78a9ff !default !global; - $ibm-color__blue-50: #4589ff !default !global; - $ibm-color__blue-60: #0f62fe !default !global; - $ibm-color__blue-70: #0043ce !default !global; - $ibm-color__blue-80: #002d9c !default !global; - $ibm-color__blue-90: #001d6c !default !global; - $ibm-color__blue-100: #001141 !default !global; - $ibm-color__cool-gray-10: #f2f4f8 !default !global; - $ibm-color__cool-gray-20: #dde1e6 !default !global; - $ibm-color__cool-gray-30: #c1c7cd !default !global; - $ibm-color__cool-gray-40: #a2a9b0 !default !global; - $ibm-color__cool-gray-50: #878d96 !default !global; - $ibm-color__cool-gray-60: #697077 !default !global; - $ibm-color__cool-gray-70: #4d5358 !default !global; - $ibm-color__cool-gray-80: #343a3f !default !global; - $ibm-color__cool-gray-90: #21272a !default !global; - $ibm-color__cool-gray-100: #121619 !default !global; - $ibm-color__cyan-10: #e5f6ff !default !global; - $ibm-color__cyan-20: #bae6ff !default !global; - $ibm-color__cyan-30: #82cfff !default !global; - $ibm-color__cyan-40: #33b1ff !default !global; - $ibm-color__cyan-50: #1192e8 !default !global; - $ibm-color__cyan-60: #0072c3 !default !global; - $ibm-color__cyan-70: #00539a !default !global; - $ibm-color__cyan-80: #003a6d !default !global; - $ibm-color__cyan-90: #012749 !default !global; - $ibm-color__cyan-100: #061727 !default !global; - $ibm-color__gray-10: #f4f4f4 !default !global; - $ibm-color__gray-20: #e0e0e0 !default !global; - $ibm-color__gray-30: #c6c6c6 !default !global; - $ibm-color__gray-40: #a8a8a8 !default !global; - $ibm-color__gray-50: #8d8d8d !default !global; - $ibm-color__gray-60: #6f6f6f !default !global; - $ibm-color__gray-70: #525252 !default !global; - $ibm-color__gray-80: #393939 !default !global; - $ibm-color__gray-90: #262626 !default !global; - $ibm-color__gray-100: #161616 !default !global; - $ibm-color__green-10: #defbe6 !default !global; - $ibm-color__green-20: #a7f0ba !default !global; - $ibm-color__green-30: #6fdc8c !default !global; - $ibm-color__green-40: #42be65 !default !global; - $ibm-color__green-50: #24a148 !default !global; - $ibm-color__green-60: #198038 !default !global; - $ibm-color__green-70: #0e6027 !default !global; - $ibm-color__green-80: #044317 !default !global; - $ibm-color__green-90: #022d0d !default !global; - $ibm-color__green-100: #071908 !default !global; - $ibm-color__magenta-10: #fff0f7 !default !global; - $ibm-color__magenta-20: #ffd6e8 !default !global; - $ibm-color__magenta-30: #ffafd2 !default !global; - $ibm-color__magenta-40: #ff7eb6 !default !global; - $ibm-color__magenta-50: #ee5396 !default !global; - $ibm-color__magenta-60: #d12771 !default !global; - $ibm-color__magenta-70: #9f1853 !default !global; - $ibm-color__magenta-80: #740937 !default !global; - $ibm-color__magenta-90: #510224 !default !global; - $ibm-color__magenta-100: #2a0a18 !default !global; - $ibm-color__orange-40: #ff832b !default !global; - $ibm-color__purple-10: #f6f2ff !default !global; - $ibm-color__purple-20: #e8daff !default !global; - $ibm-color__purple-30: #d4bbff !default !global; - $ibm-color__purple-40: #be95ff !default !global; - $ibm-color__purple-50: #a56eff !default !global; - $ibm-color__purple-60: #8a3ffc !default !global; - $ibm-color__purple-70: #6929c4 !default !global; - $ibm-color__purple-80: #491d8b !default !global; - $ibm-color__purple-90: #31135e !default !global; - $ibm-color__purple-100: #1c0f30 !default !global; - $ibm-color__red-10: #fff1f1 !default !global; - $ibm-color__red-20: #ffd7d9 !default !global; - $ibm-color__red-30: #ffb3b8 !default !global; - $ibm-color__red-40: #ff8389 !default !global; - $ibm-color__red-50: #fa4d56 !default !global; - $ibm-color__red-60: #da1e28 !default !global; - $ibm-color__red-70: #a2191f !default !global; - $ibm-color__red-80: #750e13 !default !global; - $ibm-color__red-90: #520408 !default !global; - $ibm-color__red-100: #2d0709 !default !global; - $ibm-color__teal-10: #d9fbfb !default !global; - $ibm-color__teal-20: #9ef0f0 !default !global; - $ibm-color__teal-30: #3ddbd9 !default !global; - $ibm-color__teal-40: #08bdba !default !global; - $ibm-color__teal-50: #009d9a !default !global; - $ibm-color__teal-60: #007d79 !default !global; - $ibm-color__teal-70: #005d5d !default !global; - $ibm-color__teal-80: #004144 !default !global; - $ibm-color__teal-90: #022b30 !default !global; - $ibm-color__teal-100: #081a1c !default !global; - $ibm-color__warm-gray-10: #f7f3f2 !default !global; - $ibm-color__warm-gray-20: #e5e0df !default !global; - $ibm-color__warm-gray-30: #cac5c4 !default !global; - $ibm-color__warm-gray-40: #ada8a8 !default !global; - $ibm-color__warm-gray-50: #8f8b8b !default !global; - $ibm-color__warm-gray-60: #736f6f !default !global; - $ibm-color__warm-gray-70: #565151 !default !global; - $ibm-color__warm-gray-80: #3c3838 !default !global; - $ibm-color__warm-gray-90: #272525 !default !global; - $ibm-color__warm-gray-100: #171414 !default !global; - $ibm-color__white-0: #ffffff !default !global; - $ibm-color__yellow-20: #fdd13a !default !global; - $ibm-color__yellow-30: #f1c21b !default !global; - $ibm-color-map: ( - 'black': ( - 100: #000000, - ), - 'blue': ( - 10: #edf5ff, - 20: #d0e2ff, - 30: #a6c8ff, - 40: #78a9ff, - 50: #4589ff, - 60: #0f62fe, - 70: #0043ce, - 80: #002d9c, - 90: #001d6c, - 100: #001141, - ), - 'cool-gray': ( - 10: #f2f4f8, - 20: #dde1e6, - 30: #c1c7cd, - 40: #a2a9b0, - 50: #878d96, - 60: #697077, - 70: #4d5358, - 80: #343a3f, - 90: #21272a, - 100: #121619, - ), - 'coolGray': ( - 10: #f2f4f8, - 20: #dde1e6, - 30: #c1c7cd, - 40: #a2a9b0, - 50: #878d96, - 60: #697077, - 70: #4d5358, - 80: #343a3f, - 90: #21272a, - 100: #121619, - ), - 'cyan': ( - 10: #e5f6ff, - 20: #bae6ff, - 30: #82cfff, - 40: #33b1ff, - 50: #1192e8, - 60: #0072c3, - 70: #00539a, - 80: #003a6d, - 90: #012749, - 100: #061727, - ), - 'gray': ( - 10: #f4f4f4, - 20: #e0e0e0, - 30: #c6c6c6, - 40: #a8a8a8, - 50: #8d8d8d, - 60: #6f6f6f, - 70: #525252, - 80: #393939, - 90: #262626, - 100: #161616, - ), - 'green': ( - 10: #defbe6, - 20: #a7f0ba, - 30: #6fdc8c, - 40: #42be65, - 50: #24a148, - 60: #198038, - 70: #0e6027, - 80: #044317, - 90: #022d0d, - 100: #071908, - ), - 'magenta': ( - 10: #fff0f7, - 20: #ffd6e8, - 30: #ffafd2, - 40: #ff7eb6, - 50: #ee5396, - 60: #d12771, - 70: #9f1853, - 80: #740937, - 90: #510224, - 100: #2a0a18, - ), - 'orange': ( - 40: #ff832b, - ), - 'purple': ( - 10: #f6f2ff, - 20: #e8daff, - 30: #d4bbff, - 40: #be95ff, - 50: #a56eff, - 60: #8a3ffc, - 70: #6929c4, - 80: #491d8b, - 90: #31135e, - 100: #1c0f30, - ), - 'red': ( - 10: #fff1f1, - 20: #ffd7d9, - 30: #ffb3b8, - 40: #ff8389, - 50: #fa4d56, - 60: #da1e28, - 70: #a2191f, - 80: #750e13, - 90: #520408, - 100: #2d0709, - ), - 'teal': ( - 10: #d9fbfb, - 20: #9ef0f0, - 30: #3ddbd9, - 40: #08bdba, - 50: #009d9a, - 60: #007d79, - 70: #005d5d, - 80: #004144, - 90: #022b30, - 100: #081a1c, - ), - 'warm-gray': ( - 10: #f7f3f2, - 20: #e5e0df, - 30: #cac5c4, - 40: #ada8a8, - 50: #8f8b8b, - 60: #736f6f, - 70: #565151, - 80: #3c3838, - 90: #272525, - 100: #171414, - ), - 'warmGray': ( - 10: #f7f3f2, - 20: #e5e0df, - 30: #cac5c4, - 40: #ada8a8, - 50: #8f8b8b, - 60: #736f6f, - 70: #565151, - 80: #3c3838, - 90: #272525, - 100: #171414, - ), - 'white': ( - 0: #ffffff, - ), - 'yellow': ( - 20: #fdd13a, - 30: #f1c21b, - ), - ) !default !global; -} -/// Define color variables -/// @access public -/// @group @carbon/colors -@mixin carbon--colors() { - $carbon--black-100: #000000 !default !global; - $carbon--blue-10: #edf5ff !default !global; - $carbon--blue-20: #d0e2ff !default !global; - $carbon--blue-30: #a6c8ff !default !global; - $carbon--blue-40: #78a9ff !default !global; - $carbon--blue-50: #4589ff !default !global; - $carbon--blue-60: #0f62fe !default !global; - $carbon--blue-70: #0043ce !default !global; - $carbon--blue-80: #002d9c !default !global; - $carbon--blue-90: #001d6c !default !global; - $carbon--blue-100: #001141 !default !global; - $carbon--cool-gray-10: #f2f4f8 !default !global; - $carbon--cool-gray-20: #dde1e6 !default !global; - $carbon--cool-gray-30: #c1c7cd !default !global; - $carbon--cool-gray-40: #a2a9b0 !default !global; - $carbon--cool-gray-50: #878d96 !default !global; - $carbon--cool-gray-60: #697077 !default !global; - $carbon--cool-gray-70: #4d5358 !default !global; - $carbon--cool-gray-80: #343a3f !default !global; - $carbon--cool-gray-90: #21272a !default !global; - $carbon--cool-gray-100: #121619 !default !global; - $carbon--cyan-10: #e5f6ff !default !global; - $carbon--cyan-20: #bae6ff !default !global; - $carbon--cyan-30: #82cfff !default !global; - $carbon--cyan-40: #33b1ff !default !global; - $carbon--cyan-50: #1192e8 !default !global; - $carbon--cyan-60: #0072c3 !default !global; - $carbon--cyan-70: #00539a !default !global; - $carbon--cyan-80: #003a6d !default !global; - $carbon--cyan-90: #012749 !default !global; - $carbon--cyan-100: #061727 !default !global; - $carbon--gray-10: #f4f4f4 !default !global; - $carbon--gray-20: #e0e0e0 !default !global; - $carbon--gray-30: #c6c6c6 !default !global; - $carbon--gray-40: #a8a8a8 !default !global; - $carbon--gray-50: #8d8d8d !default !global; - $carbon--gray-60: #6f6f6f !default !global; - $carbon--gray-70: #525252 !default !global; - $carbon--gray-80: #393939 !default !global; - $carbon--gray-90: #262626 !default !global; - $carbon--gray-100: #161616 !default !global; - $carbon--green-10: #defbe6 !default !global; - $carbon--green-20: #a7f0ba !default !global; - $carbon--green-30: #6fdc8c !default !global; - $carbon--green-40: #42be65 !default !global; - $carbon--green-50: #24a148 !default !global; - $carbon--green-60: #198038 !default !global; - $carbon--green-70: #0e6027 !default !global; - $carbon--green-80: #044317 !default !global; - $carbon--green-90: #022d0d !default !global; - $carbon--green-100: #071908 !default !global; - $carbon--magenta-10: #fff0f7 !default !global; - $carbon--magenta-20: #ffd6e8 !default !global; - $carbon--magenta-30: #ffafd2 !default !global; - $carbon--magenta-40: #ff7eb6 !default !global; - $carbon--magenta-50: #ee5396 !default !global; - $carbon--magenta-60: #d12771 !default !global; - $carbon--magenta-70: #9f1853 !default !global; - $carbon--magenta-80: #740937 !default !global; - $carbon--magenta-90: #510224 !default !global; - $carbon--magenta-100: #2a0a18 !default !global; - $carbon--orange-40: #ff832b !default !global; - $carbon--purple-10: #f6f2ff !default !global; - $carbon--purple-20: #e8daff !default !global; - $carbon--purple-30: #d4bbff !default !global; - $carbon--purple-40: #be95ff !default !global; - $carbon--purple-50: #a56eff !default !global; - $carbon--purple-60: #8a3ffc !default !global; - $carbon--purple-70: #6929c4 !default !global; - $carbon--purple-80: #491d8b !default !global; - $carbon--purple-90: #31135e !default !global; - $carbon--purple-100: #1c0f30 !default !global; - $carbon--red-10: #fff1f1 !default !global; - $carbon--red-20: #ffd7d9 !default !global; - $carbon--red-30: #ffb3b8 !default !global; - $carbon--red-40: #ff8389 !default !global; - $carbon--red-50: #fa4d56 !default !global; - $carbon--red-60: #da1e28 !default !global; - $carbon--red-70: #a2191f !default !global; - $carbon--red-80: #750e13 !default !global; - $carbon--red-90: #520408 !default !global; - $carbon--red-100: #2d0709 !default !global; - $carbon--teal-10: #d9fbfb !default !global; - $carbon--teal-20: #9ef0f0 !default !global; - $carbon--teal-30: #3ddbd9 !default !global; - $carbon--teal-40: #08bdba !default !global; - $carbon--teal-50: #009d9a !default !global; - $carbon--teal-60: #007d79 !default !global; - $carbon--teal-70: #005d5d !default !global; - $carbon--teal-80: #004144 !default !global; - $carbon--teal-90: #022b30 !default !global; - $carbon--teal-100: #081a1c !default !global; - $carbon--warm-gray-10: #f7f3f2 !default !global; - $carbon--warm-gray-20: #e5e0df !default !global; - $carbon--warm-gray-30: #cac5c4 !default !global; - $carbon--warm-gray-40: #ada8a8 !default !global; - $carbon--warm-gray-50: #8f8b8b !default !global; - $carbon--warm-gray-60: #736f6f !default !global; - $carbon--warm-gray-70: #565151 !default !global; - $carbon--warm-gray-80: #3c3838 !default !global; - $carbon--warm-gray-90: #272525 !default !global; - $carbon--warm-gray-100: #171414 !default !global; - $carbon--white-0: #ffffff !default !global; - $carbon--yellow-20: #fdd13a !default !global; - $carbon--yellow-30: #f1c21b !default !global; - $black-100: #000000 !default !global; - $blue-10: #edf5ff !default !global; - $blue-20: #d0e2ff !default !global; - $blue-30: #a6c8ff !default !global; - $blue-40: #78a9ff !default !global; - $blue-50: #4589ff !default !global; - $blue-60: #0f62fe !default !global; - $blue-70: #0043ce !default !global; - $blue-80: #002d9c !default !global; - $blue-90: #001d6c !default !global; - $blue-100: #001141 !default !global; - $cool-gray-10: #f2f4f8 !default !global; - $cool-gray-20: #dde1e6 !default !global; - $cool-gray-30: #c1c7cd !default !global; - $cool-gray-40: #a2a9b0 !default !global; - $cool-gray-50: #878d96 !default !global; - $cool-gray-60: #697077 !default !global; - $cool-gray-70: #4d5358 !default !global; - $cool-gray-80: #343a3f !default !global; - $cool-gray-90: #21272a !default !global; - $cool-gray-100: #121619 !default !global; - $cyan-10: #e5f6ff !default !global; - $cyan-20: #bae6ff !default !global; - $cyan-30: #82cfff !default !global; - $cyan-40: #33b1ff !default !global; - $cyan-50: #1192e8 !default !global; - $cyan-60: #0072c3 !default !global; - $cyan-70: #00539a !default !global; - $cyan-80: #003a6d !default !global; - $cyan-90: #012749 !default !global; - $cyan-100: #061727 !default !global; - $gray-10: #f4f4f4 !default !global; - $gray-20: #e0e0e0 !default !global; - $gray-30: #c6c6c6 !default !global; - $gray-40: #a8a8a8 !default !global; - $gray-50: #8d8d8d !default !global; - $gray-60: #6f6f6f !default !global; - $gray-70: #525252 !default !global; - $gray-80: #393939 !default !global; - $gray-90: #262626 !default !global; - $gray-100: #161616 !default !global; - $green-10: #defbe6 !default !global; - $green-20: #a7f0ba !default !global; - $green-30: #6fdc8c !default !global; - $green-40: #42be65 !default !global; - $green-50: #24a148 !default !global; - $green-60: #198038 !default !global; - $green-70: #0e6027 !default !global; - $green-80: #044317 !default !global; - $green-90: #022d0d !default !global; - $green-100: #071908 !default !global; - $magenta-10: #fff0f7 !default !global; - $magenta-20: #ffd6e8 !default !global; - $magenta-30: #ffafd2 !default !global; - $magenta-40: #ff7eb6 !default !global; - $magenta-50: #ee5396 !default !global; - $magenta-60: #d12771 !default !global; - $magenta-70: #9f1853 !default !global; - $magenta-80: #740937 !default !global; - $magenta-90: #510224 !default !global; - $magenta-100: #2a0a18 !default !global; - $orange-40: #ff832b !default !global; - $purple-10: #f6f2ff !default !global; - $purple-20: #e8daff !default !global; - $purple-30: #d4bbff !default !global; - $purple-40: #be95ff !default !global; - $purple-50: #a56eff !default !global; - $purple-60: #8a3ffc !default !global; - $purple-70: #6929c4 !default !global; - $purple-80: #491d8b !default !global; - $purple-90: #31135e !default !global; - $purple-100: #1c0f30 !default !global; - $red-10: #fff1f1 !default !global; - $red-20: #ffd7d9 !default !global; - $red-30: #ffb3b8 !default !global; - $red-40: #ff8389 !default !global; - $red-50: #fa4d56 !default !global; - $red-60: #da1e28 !default !global; - $red-70: #a2191f !default !global; - $red-80: #750e13 !default !global; - $red-90: #520408 !default !global; - $red-100: #2d0709 !default !global; - $teal-10: #d9fbfb !default !global; - $teal-20: #9ef0f0 !default !global; - $teal-30: #3ddbd9 !default !global; - $teal-40: #08bdba !default !global; - $teal-50: #009d9a !default !global; - $teal-60: #007d79 !default !global; - $teal-70: #005d5d !default !global; - $teal-80: #004144 !default !global; - $teal-90: #022b30 !default !global; - $teal-100: #081a1c !default !global; - $warm-gray-10: #f7f3f2 !default !global; - $warm-gray-20: #e5e0df !default !global; - $warm-gray-30: #cac5c4 !default !global; - $warm-gray-40: #ada8a8 !default !global; - $warm-gray-50: #8f8b8b !default !global; - $warm-gray-60: #736f6f !default !global; - $warm-gray-70: #565151 !default !global; - $warm-gray-80: #3c3838 !default !global; - $warm-gray-90: #272525 !default !global; - $warm-gray-100: #171414 !default !global; - $white-0: #ffffff !default !global; - $yellow-20: #fdd13a !default !global; - $yellow-30: #f1c21b !default !global; - $carbon--colors: ( - 'black': ( - 100: #000000, - ), - 'blue': ( - 10: #edf5ff, - 20: #d0e2ff, - 30: #a6c8ff, - 40: #78a9ff, - 50: #4589ff, - 60: #0f62fe, - 70: #0043ce, - 80: #002d9c, - 90: #001d6c, - 100: #001141, - ), - 'cool-gray': ( - 10: #f2f4f8, - 20: #dde1e6, - 30: #c1c7cd, - 40: #a2a9b0, - 50: #878d96, - 60: #697077, - 70: #4d5358, - 80: #343a3f, - 90: #21272a, - 100: #121619, - ), - 'coolGray': ( - 10: #f2f4f8, - 20: #dde1e6, - 30: #c1c7cd, - 40: #a2a9b0, - 50: #878d96, - 60: #697077, - 70: #4d5358, - 80: #343a3f, - 90: #21272a, - 100: #121619, - ), - 'cyan': ( - 10: #e5f6ff, - 20: #bae6ff, - 30: #82cfff, - 40: #33b1ff, - 50: #1192e8, - 60: #0072c3, - 70: #00539a, - 80: #003a6d, - 90: #012749, - 100: #061727, - ), - 'gray': ( - 10: #f4f4f4, - 20: #e0e0e0, - 30: #c6c6c6, - 40: #a8a8a8, - 50: #8d8d8d, - 60: #6f6f6f, - 70: #525252, - 80: #393939, - 90: #262626, - 100: #161616, - ), - 'green': ( - 10: #defbe6, - 20: #a7f0ba, - 30: #6fdc8c, - 40: #42be65, - 50: #24a148, - 60: #198038, - 70: #0e6027, - 80: #044317, - 90: #022d0d, - 100: #071908, - ), - 'magenta': ( - 10: #fff0f7, - 20: #ffd6e8, - 30: #ffafd2, - 40: #ff7eb6, - 50: #ee5396, - 60: #d12771, - 70: #9f1853, - 80: #740937, - 90: #510224, - 100: #2a0a18, - ), - 'orange': ( - 40: #ff832b, - ), - 'purple': ( - 10: #f6f2ff, - 20: #e8daff, - 30: #d4bbff, - 40: #be95ff, - 50: #a56eff, - 60: #8a3ffc, - 70: #6929c4, - 80: #491d8b, - 90: #31135e, - 100: #1c0f30, - ), - 'red': ( - 10: #fff1f1, - 20: #ffd7d9, - 30: #ffb3b8, - 40: #ff8389, - 50: #fa4d56, - 60: #da1e28, - 70: #a2191f, - 80: #750e13, - 90: #520408, - 100: #2d0709, - ), - 'teal': ( - 10: #d9fbfb, - 20: #9ef0f0, - 30: #3ddbd9, - 40: #08bdba, - 50: #009d9a, - 60: #007d79, - 70: #005d5d, - 80: #004144, - 90: #022b30, - 100: #081a1c, - ), - 'warm-gray': ( - 10: #f7f3f2, - 20: #e5e0df, - 30: #cac5c4, - 40: #ada8a8, - 50: #8f8b8b, - 60: #736f6f, - 70: #565151, - 80: #3c3838, - 90: #272525, - 100: #171414, - ), - 'warmGray': ( - 10: #f7f3f2, - 20: #e5e0df, - 30: #cac5c4, - 40: #ada8a8, - 50: #8f8b8b, - 60: #736f6f, - 70: #565151, - 80: #3c3838, - 90: #272525, - 100: #171414, - ), - 'white': ( - 0: #ffffff, - ), - 'yellow': ( - 20: #fdd13a, - 30: #f1c21b, - ), - ) !default !global; -} diff --git a/packages/components/demo/js/components/CodePage/CodePage.js b/packages/components/demo/js/components/CodePage/CodePage.js index a2af830c9937..a6a9a8d231c5 100644 --- a/packages/components/demo/js/components/CodePage/CodePage.js +++ b/packages/components/demo/js/components/CodePage/CodePage.js @@ -52,14 +52,14 @@ const CodePage = ({ CodePage.propTypes = { /** - * The component data. + * `true` to hide "full render" link. */ - metadata: PropTypes.shape().isRequired, + hideViewFullRender: PropTypes.bool, /** - * `true` to hide "full render" link. + * The component data. */ - hideViewFullRender: PropTypes.bool, + metadata: PropTypes.shape().isRequired, /** * `true` to use static full render page. diff --git a/packages/components/demo/js/components/ComponentExample/ComponentExample.js b/packages/components/demo/js/components/ComponentExample/ComponentExample.js index 7ee06db6ae2b..2c741ac389e8 100644 --- a/packages/components/demo/js/components/ComponentExample/ComponentExample.js +++ b/packages/components/demo/js/components/ComponentExample/ComponentExample.js @@ -15,9 +15,9 @@ const { forEach } = Array.prototype; class ComponentExample extends Component { static propTypes = { /** - * The source code. + * The slug of the CodePen link. */ - htmlFile: PropTypes.string, + codepenSlug: PropTypes.string, /** * The component name. @@ -25,14 +25,14 @@ class ComponentExample extends Component { component: PropTypes.string, /** - * The component variant name. + * `true` to hide "view full render" link. */ - variant: PropTypes.string, + hideViewFullRender: PropTypes.bool, /** - * `true` to hide "view full render" link. + * The source code. */ - hideViewFullRender: PropTypes.bool, + htmlFile: PropTypes.string, /** * `true` to use a link (only) for the live demo. @@ -45,14 +45,14 @@ class ComponentExample extends Component { useIframe: PropTypes.bool, /** - * The slug of the CodePen link. + * `true` to use static full render page. */ - codepenSlug: PropTypes.string, + useStaticFullRenderPage: PropTypes.bool, /** - * `true` to use static full render page. + * The component variant name. */ - useStaticFullRenderPage: PropTypes.bool, + variant: PropTypes.string, }; /** diff --git a/packages/components/demo/js/components/SideNav.js b/packages/components/demo/js/components/SideNav.js index 322c94bbf661..795184905876 100644 --- a/packages/components/demo/js/components/SideNav.js +++ b/packages/components/demo/js/components/SideNav.js @@ -11,11 +11,6 @@ import { */ class SideNav extends Component { static propTypes = { - /** - * The array of component data. - */ - items: PropTypes.arrayOf(PropTypes.shape()).isRequired, - /** * The ID of the selected component. */ @@ -26,6 +21,11 @@ class SideNav extends Component { */ className: PropTypes.string, + /** + * The array of component data. + */ + items: PropTypes.arrayOf(PropTypes.shape()).isRequired, + /** * The handler for the `click` event for changing selection. */ diff --git a/packages/icon-build-helpers/src/builders/react/components/Icon.js b/packages/icon-build-helpers/src/builders/react/components/Icon.js index 309b76b81bed..11b59c6a24c0 100644 --- a/packages/icon-build-helpers/src/builders/react/components/Icon.js +++ b/packages/icon-build-helpers/src/builders/react/components/Icon.js @@ -38,8 +38,8 @@ Icon.propTypes = { 'aria-hidden': PropTypes.string, 'aria-label': PropTypes.string, 'aria-labelledby': PropTypes.string, - className: PropTypes.string, children: PropTypes.node, + className: PropTypes.string, height: PropTypes.number, preserveAspectRatio: PropTypes.string, tabIndex: PropTypes.string, diff --git a/packages/react/src/components/Accordion/Accordion.Skeleton.js b/packages/react/src/components/Accordion/Accordion.Skeleton.js index 61d5b2d3eb1a..4767ddba9092 100644 --- a/packages/react/src/components/Accordion/Accordion.Skeleton.js +++ b/packages/react/src/components/Accordion/Accordion.Skeleton.js @@ -45,29 +45,29 @@ function AccordionSkeleton({ align, open, count, className, ...rest }) { AccordionSkeleton.propTypes = { /** - * `false` to not display the first item opened + * Specify the alignment of the accordion heading title and chevron. */ - open: PropTypes.bool, + align: PropTypes.oneOf(['start', 'end']), /** - * Set number of items to render + * Specify an optional className to add. */ - count: PropTypes.number, + className: PropTypes.string, /** - * Set unique identifier to generate unique item keys + * Set number of items to render */ - uid: deprecate(PropTypes.any), + count: PropTypes.number, /** - * Specify an optional className to add. + * `false` to not display the first item opened */ - className: PropTypes.string, + open: PropTypes.bool, /** - * Specify the alignment of the accordion heading title and chevron. + * Set unique identifier to generate unique item keys */ - align: PropTypes.oneOf(['start', 'end']), + uid: deprecate(PropTypes.any), }; AccordionSkeleton.defaultProps = { diff --git a/packages/react/src/components/Accordion/Accordion.js b/packages/react/src/components/Accordion/Accordion.js index f7670cb15e08..1275dc464c90 100644 --- a/packages/react/src/components/Accordion/Accordion.js +++ b/packages/react/src/components/Accordion/Accordion.js @@ -28,6 +28,11 @@ Accordion.defaultProps = { }; Accordion.propTypes = { + /** + * Specify the alignment of the accordion heading title and chevron. + */ + align: PropTypes.oneOf(['start', 'end']), + /** * Pass in the children that will be rendered within the Accordion */ @@ -37,11 +42,6 @@ Accordion.propTypes = { * Specify an optional className to be applied to the container node */ className: PropTypes.string, - - /** - * Specify the alignment of the accordion heading title and chevron. - */ - align: PropTypes.oneOf(['start', 'end']), }; export default Accordion; diff --git a/packages/react/src/components/Accordion/AccordionItem.js b/packages/react/src/components/Accordion/AccordionItem.js index 861be47ada11..88535ff49cb1 100644 --- a/packages/react/src/components/Accordion/AccordionItem.js +++ b/packages/react/src/components/Accordion/AccordionItem.js @@ -100,17 +100,6 @@ AccordionItem.propTypes = { */ className: PropTypes.string, - /** - * The accordion title. - */ - title: PropTypes.node, - - /** - * The callback function to render the expando button. - * Can be a React component class. - */ - renderExpando: PropTypes.func, - /** * The description of the expando icon. */ @@ -122,20 +111,31 @@ AccordionItem.propTypes = { '`carbon-components-react`' ), + /** + * The handler of the massaged `click` event. + */ + onClick: PropTypes.func, + + /** + * The handler of the massaged `click` event on the heading. + */ + onHeadingClick: PropTypes.func, + /** * `true` to open the expando. */ open: PropTypes.bool, /** - * The handler of the massaged `click` event. + * The callback function to render the expando button. + * Can be a React component class. */ - onClick: PropTypes.func, + renderExpando: PropTypes.func, /** - * The handler of the massaged `click` event on the heading. + * The accordion title. */ - onHeadingClick: PropTypes.func, + title: PropTypes.node, }; export default AccordionItem; diff --git a/packages/react/src/components/Button/Button.Skeleton.js b/packages/react/src/components/Button/Button.Skeleton.js index f14f4683f39c..60dcb988bb0e 100644 --- a/packages/react/src/components/Button/Button.Skeleton.js +++ b/packages/react/src/components/Button/Button.Skeleton.js @@ -33,9 +33,9 @@ const ButtonSkeleton = ({ className, small, href, ...rest }) => { ButtonSkeleton.propTypes = { /** - * Specify whether the Button should be a small variant + * Specify an optional className to add. */ - small: PropTypes.bool, + className: PropTypes.string, /** * Optionally specify an href for your Button to become an element @@ -43,9 +43,9 @@ ButtonSkeleton.propTypes = { href: PropTypes.string, /** - * Specify an optional className to add. + * Specify whether the Button should be a small variant */ - className: PropTypes.string, + small: PropTypes.bool, }; ButtonSkeleton.defaultProps = { diff --git a/packages/react/src/components/Button/Button.js b/packages/react/src/components/Button/Button.js index 79cc1b97f577..8d13c0dfd335 100644 --- a/packages/react/src/components/Button/Button.js +++ b/packages/react/src/components/Button/Button.js @@ -98,11 +98,6 @@ const Button = React.forwardRef(function Button( Button.displayName = 'Button'; Button.propTypes = { - /** - * Specify the content of your Button - */ - children: PropTypes.node, - /** * Specify how the button itself should be rendered. * Make sure to apply all props to the root node and render children appropriately @@ -113,6 +108,11 @@ Button.propTypes = { PropTypes.elementType, ]), + /** + * Specify the content of your Button + */ + children: PropTypes.node, + /** * Specify an optional className to be added to your Button */ @@ -124,68 +124,69 @@ Button.propTypes = { disabled: PropTypes.bool, /** - * Specify the size of the button, from a list of available sizes. - * For `default` buttons, this prop can remain unspecified. + * Specify if the button is an icon-only button */ - size: PropTypes.oneOf(['default', 'field', 'small']), + hasIconOnly: PropTypes.bool, /** - * Deprecated in v10 in favor of `size`. - * Specify whether the Button should be a small variant + * Optionally specify an href for your Button to become an element */ - small: deprecate( - PropTypes.bool, - `\nThe prop \`small\` for Button has been deprecated in favor of \`size\`. Please use \`size="small"\` instead.` - ), + href: PropTypes.string, /** - * Specify the kind of Button you want to create + * If specifying the `renderIcon` prop, provide a description for that icon that can + * be read by screen readers */ - kind: PropTypes.oneOf(ButtonKinds).isRequired, + iconDescription: (props) => { + if (props.renderIcon && !props.children && !props.iconDescription) { + return new Error( + 'renderIcon property specified without also providing an iconDescription property.' + ); + } + return undefined; + }, /** - * Optionally specify an href for your Button to become an element + * Specify the kind of Button you want to create */ - href: PropTypes.string, + kind: PropTypes.oneOf(ButtonKinds).isRequired, /** - * Optional prop to specify the tabIndex of the Button + * Optional prop to allow overriding the icon rendering. + * Can be a React component class */ - tabIndex: PropTypes.number, + renderIcon: PropTypes.oneOfType([PropTypes.func, PropTypes.object]), /** - * Optional prop to specify the type of the Button + * Optional prop to specify the role of the Button */ - type: PropTypes.oneOf(['button', 'reset', 'submit']), + role: PropTypes.string, /** - * Optional prop to specify the role of the Button + * Specify the size of the button, from a list of available sizes. + * For `default` buttons, this prop can remain unspecified. */ - role: PropTypes.string, + size: PropTypes.oneOf(['default', 'field', 'small']), /** - * Optional prop to allow overriding the icon rendering. - * Can be a React component class + * Deprecated in v10 in favor of `size`. + * Specify whether the Button should be a small variant */ - renderIcon: PropTypes.oneOfType([PropTypes.func, PropTypes.object]), + small: deprecate( + PropTypes.bool, + `\nThe prop \`small\` for Button has been deprecated in favor of \`size\`. Please use \`size="small"\` instead.` + ), /** - * If specifying the `renderIcon` prop, provide a description for that icon that can - * be read by screen readers + * Optional prop to specify the tabIndex of the Button */ - iconDescription: (props) => { - if (props.renderIcon && !props.children && !props.iconDescription) { - return new Error( - 'renderIcon property specified without also providing an iconDescription property.' - ); - } - return undefined; - }, + tabIndex: PropTypes.number, /** - * Specify if the button is an icon-only button + * Specify the alignment of the tooltip to the icon-only button. + * Can be one of: start, center, or end. */ - hasIconOnly: PropTypes.bool, + tooltipAlignment: PropTypes.oneOf(['start', 'center', 'end']), /** * Specify the direction of the tooltip for icon-only buttons. @@ -194,10 +195,9 @@ Button.propTypes = { tooltipPosition: PropTypes.oneOf(['top', 'right', 'bottom', 'left']), /** - * Specify the alignment of the tooltip to the icon-only button. - * Can be one of: start, center, or end. + * Optional prop to specify the type of the Button */ - tooltipAlignment: PropTypes.oneOf(['start', 'center', 'end']), + type: PropTypes.oneOf(['button', 'reset', 'submit']), }; Button.defaultProps = { diff --git a/packages/react/src/components/Checkbox/Checkbox.js b/packages/react/src/components/Checkbox/Checkbox.js index a76e13c43fff..b16303e80034 100644 --- a/packages/react/src/components/Checkbox/Checkbox.js +++ b/packages/react/src/components/Checkbox/Checkbox.js @@ -71,24 +71,24 @@ Checkbox.propTypes = { checked: PropTypes.bool, /** - * Specify whether the underlying input should be checked by default + * Specify an optional className to be applied to the