diff --git a/.yarn/cache/@rollup-plugin-node-resolve-npm-11.1.0-7278c3f15c-87332c94d1.zip b/.yarn/cache/@rollup-plugin-node-resolve-npm-11.1.0-7278c3f15c-87332c94d1.zip deleted file mode 100644 index 36130972855a..000000000000 Binary files a/.yarn/cache/@rollup-plugin-node-resolve-npm-11.1.0-7278c3f15c-87332c94d1.zip and /dev/null differ diff --git a/.yarn/cache/@rollup-plugin-node-resolve-npm-11.1.1-96281b2a2a-79161dcdf4.zip b/.yarn/cache/@rollup-plugin-node-resolve-npm-11.1.1-96281b2a2a-79161dcdf4.zip new file mode 100644 index 000000000000..ba0510345f7a Binary files /dev/null and b/.yarn/cache/@rollup-plugin-node-resolve-npm-11.1.1-96281b2a2a-79161dcdf4.zip differ diff --git a/.yarn/cache/abbrev-npm-1.0.9-cd7db4ee43-d6f04095d5.zip b/.yarn/cache/abbrev-npm-1.0.9-cd7db4ee43-d6f04095d5.zip deleted file mode 100644 index e3d52ac90392..000000000000 Binary files a/.yarn/cache/abbrev-npm-1.0.9-cd7db4ee43-d6f04095d5.zip and /dev/null differ diff --git a/.yarn/cache/argparse-npm-2.0.1-faff7999e6-160b7a25d2.zip b/.yarn/cache/argparse-npm-2.0.1-faff7999e6-160b7a25d2.zip new file mode 100644 index 000000000000..02d76b10375d Binary files /dev/null and b/.yarn/cache/argparse-npm-2.0.1-faff7999e6-160b7a25d2.zip differ diff --git a/.yarn/cache/dateformat-npm-1.0.12-4f6883f5a8-621f645716.zip b/.yarn/cache/dateformat-npm-1.0.12-4f6883f5a8-621f645716.zip deleted file mode 100644 index dcdab80c8fe0..000000000000 Binary files a/.yarn/cache/dateformat-npm-1.0.12-4f6883f5a8-621f645716.zip and /dev/null differ diff --git a/.yarn/cache/entities-npm-2.0.0-90314ccb18-cc29118c9d.zip b/.yarn/cache/entities-npm-2.0.0-90314ccb18-cc29118c9d.zip deleted file mode 100644 index 5626c8b72bfb..000000000000 Binary files a/.yarn/cache/entities-npm-2.0.0-90314ccb18-cc29118c9d.zip and /dev/null differ diff --git a/.yarn/cache/entities-npm-2.1.0-b27b8aebc6-91d5330633.zip b/.yarn/cache/entities-npm-2.1.0-b27b8aebc6-91d5330633.zip new file mode 100644 index 000000000000..ee673ceb2e55 Binary files /dev/null and b/.yarn/cache/entities-npm-2.1.0-b27b8aebc6-91d5330633.zip differ diff --git a/.yarn/cache/escodegen-npm-1.8.1-9f3a2ea179-b1ec1987e0.zip b/.yarn/cache/escodegen-npm-1.8.1-9f3a2ea179-b1ec1987e0.zip deleted file mode 100644 index 5c02d1fdfc2f..000000000000 Binary files a/.yarn/cache/escodegen-npm-1.8.1-9f3a2ea179-b1ec1987e0.zip and /dev/null differ diff --git a/.yarn/cache/esprima-npm-2.7.3-486ce0727a-9a7512eaf1.zip b/.yarn/cache/esprima-npm-2.7.3-486ce0727a-9a7512eaf1.zip deleted file mode 100644 index ea909bfe605e..000000000000 Binary files a/.yarn/cache/esprima-npm-2.7.3-486ce0727a-9a7512eaf1.zip and /dev/null differ diff --git a/.yarn/cache/estraverse-npm-1.9.3-d92e28664e-32374c6c06.zip b/.yarn/cache/estraverse-npm-1.9.3-d92e28664e-32374c6c06.zip deleted file mode 100644 index ef20059f6205..000000000000 Binary files a/.yarn/cache/estraverse-npm-1.9.3-d92e28664e-32374c6c06.zip and /dev/null differ diff --git a/.yarn/cache/fsevents-npm-2.1.2-9686f8b2bc-8f61ef7840.zip b/.yarn/cache/fsevents-npm-2.1.2-9686f8b2bc-8f61ef7840.zip deleted file mode 100644 index c035c5af3728..000000000000 Binary files a/.yarn/cache/fsevents-npm-2.1.2-9686f8b2bc-8f61ef7840.zip and /dev/null differ diff --git a/.yarn/cache/fsevents-patch-06bd254f51-f4e06c69cb.zip b/.yarn/cache/fsevents-patch-06bd254f51-f4e06c69cb.zip deleted file mode 100644 index b284b866fbbe..000000000000 Binary files a/.yarn/cache/fsevents-patch-06bd254f51-f4e06c69cb.zip and /dev/null differ diff --git a/.yarn/cache/has-flag-npm-1.0.0-9e0c397172-556423170e.zip b/.yarn/cache/has-flag-npm-1.0.0-9e0c397172-556423170e.zip deleted file mode 100644 index d1417ed1f9f3..000000000000 Binary files a/.yarn/cache/has-flag-npm-1.0.0-9e0c397172-556423170e.zip and /dev/null differ diff --git a/.yarn/cache/istanbul-lib-instrument-npm-4.0.0-aa0eaf7e52-e8fcdc1fdc.zip b/.yarn/cache/istanbul-lib-instrument-npm-4.0.0-aa0eaf7e52-e8fcdc1fdc.zip deleted file mode 100644 index 3e5f57c47ff4..000000000000 Binary files a/.yarn/cache/istanbul-lib-instrument-npm-4.0.0-aa0eaf7e52-e8fcdc1fdc.zip and /dev/null differ diff --git a/.yarn/cache/istanbul-lib-instrument-npm-4.0.3-4d4c2263f8-478e43e75d.zip b/.yarn/cache/istanbul-lib-instrument-npm-4.0.3-4d4c2263f8-478e43e75d.zip new file mode 100644 index 000000000000..91a5171866b4 Binary files /dev/null and b/.yarn/cache/istanbul-lib-instrument-npm-4.0.3-4d4c2263f8-478e43e75d.zip differ diff --git a/.yarn/cache/istanbul-npm-0.4.5-09740d5eb4-85311ed193.zip b/.yarn/cache/istanbul-npm-0.4.5-09740d5eb4-85311ed193.zip deleted file mode 100644 index d6ad7fa4c43f..000000000000 Binary files a/.yarn/cache/istanbul-npm-0.4.5-09740d5eb4-85311ed193.zip and /dev/null differ diff --git a/.yarn/cache/karma-coverage-npm-1.1.2-04989e5284-12fc98c88d.zip b/.yarn/cache/karma-coverage-npm-1.1.2-04989e5284-12fc98c88d.zip deleted file mode 100644 index 6d33523219e0..000000000000 Binary files a/.yarn/cache/karma-coverage-npm-1.1.2-04989e5284-12fc98c88d.zip and /dev/null differ diff --git a/.yarn/cache/karma-coverage-npm-2.0.3-571c0c6c32-9357913789.zip b/.yarn/cache/karma-coverage-npm-2.0.3-571c0c6c32-9357913789.zip new file mode 100644 index 000000000000..0b9eb3d2fc53 Binary files /dev/null and b/.yarn/cache/karma-coverage-npm-2.0.3-571c0c6c32-9357913789.zip differ diff --git a/.yarn/cache/linkify-it-npm-3.0.2-55fc9f4a37-bbc23f16d5.zip b/.yarn/cache/linkify-it-npm-3.0.2-55fc9f4a37-bbc23f16d5.zip new file mode 100644 index 000000000000..e4b7928971b9 Binary files /dev/null and b/.yarn/cache/linkify-it-npm-3.0.2-55fc9f4a37-bbc23f16d5.zip differ diff --git a/.yarn/cache/markdown-it-npm-12.0.4-f58fa54bda-6331b09e1c.zip b/.yarn/cache/markdown-it-npm-12.0.4-f58fa54bda-6331b09e1c.zip new file mode 100644 index 000000000000..3bf26ca2cb41 Binary files /dev/null and b/.yarn/cache/markdown-it-npm-12.0.4-f58fa54bda-6331b09e1c.zip differ diff --git a/.yarn/cache/resolve-npm-1.1.7-8ca43ca8f7-3e928e9586.zip b/.yarn/cache/resolve-npm-1.1.7-8ca43ca8f7-3e928e9586.zip deleted file mode 100644 index 41f005d0372f..000000000000 Binary files a/.yarn/cache/resolve-npm-1.1.7-8ca43ca8f7-3e928e9586.zip and /dev/null differ diff --git a/.yarn/cache/resolve-patch-bef242007a-ca4e21815c.zip b/.yarn/cache/resolve-patch-bef242007a-ca4e21815c.zip deleted file mode 100644 index 780091e66987..000000000000 Binary files a/.yarn/cache/resolve-patch-bef242007a-ca4e21815c.zip and /dev/null differ diff --git a/.yarn/cache/rollup-npm-2.38.0-231a42d133-253664a16e.zip b/.yarn/cache/rollup-npm-2.38.0-231a42d133-253664a16e.zip deleted file mode 100644 index 9956d77454d8..000000000000 Binary files a/.yarn/cache/rollup-npm-2.38.0-231a42d133-253664a16e.zip and /dev/null differ diff --git a/.yarn/cache/rollup-npm-2.38.4-322de95391-dab8b6c64f.zip b/.yarn/cache/rollup-npm-2.38.4-322de95391-dab8b6c64f.zip new file mode 100644 index 000000000000..2a70efac083a Binary files /dev/null and b/.yarn/cache/rollup-npm-2.38.4-322de95391-dab8b6c64f.zip differ diff --git a/.yarn/cache/source-map-npm-0.2.0-1cadfbac85-4967b3b943.zip b/.yarn/cache/source-map-npm-0.2.0-1cadfbac85-4967b3b943.zip deleted file mode 100644 index bc5c24b9aca5..000000000000 Binary files a/.yarn/cache/source-map-npm-0.2.0-1cadfbac85-4967b3b943.zip and /dev/null differ diff --git a/.yarn/cache/supports-color-npm-3.2.3-117b06af49-d26b4f5f7a.zip b/.yarn/cache/supports-color-npm-3.2.3-117b06af49-d26b4f5f7a.zip deleted file mode 100644 index d169ab1aa689..000000000000 Binary files a/.yarn/cache/supports-color-npm-3.2.3-117b06af49-d26b4f5f7a.zip and /dev/null differ diff --git a/.yarn/cache/wordwrap-npm-1.0.0-ae57a645e8-b4f3f8104a.zip b/.yarn/cache/wordwrap-npm-1.0.0-ae57a645e8-b4f3f8104a.zip deleted file mode 100644 index dab0dd5be530..000000000000 Binary files a/.yarn/cache/wordwrap-npm-1.0.0-ae57a645e8-b4f3f8104a.zip and /dev/null differ diff --git a/config/eslint-config-carbon/base.js b/config/eslint-config-carbon/base.js index a8ea9199579b..938aeccd83c0 100644 --- a/config/eslint-config-carbon/base.js +++ b/config/eslint-config-carbon/base.js @@ -9,7 +9,11 @@ module.exports = { parser: 'babel-eslint', - extends: ['eslint:recommended', require.resolve('./plugins/jsdoc')], + extends: [ + 'eslint:recommended', + require.resolve('./rules/best-practices'), + require.resolve('./plugins/jsdoc'), + ], rules: { // Handle cases where we are destructuring but may not be using the initial // variables diff --git a/config/eslint-config-carbon/rules/best-practices.js b/config/eslint-config-carbon/rules/best-practices.js new file mode 100644 index 000000000000..49af5bc38f6b --- /dev/null +++ b/config/eslint-config-carbon/rules/best-practices.js @@ -0,0 +1,15 @@ +/** + * 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. + */ + +'use strict'; + +module.exports = { + rules: { + // @see https://eslint.org/docs/rules/curly + curly: 'error', + }, +}; diff --git a/config/storybook-preset-carbon/package.json b/config/storybook-preset-carbon/package.json index 8f003c287bf6..0025648f0a14 100644 --- a/config/storybook-preset-carbon/package.json +++ b/config/storybook-preset-carbon/package.json @@ -1,7 +1,7 @@ { "name": "storybook-preset-carbon", "private": true, - "version": "0.2.0-rc.0", + "version": "0.2.0", "license": "Apache-2.0", "main": "index.js", "repository": { diff --git a/docs/migration/11.x-themes.md b/docs/migration/11.x-themes.md new file mode 100644 index 000000000000..cf93d72d7eda --- /dev/null +++ b/docs/migration/11.x-themes.md @@ -0,0 +1,21 @@ +# Motion + +**Note: everything in this file is a work-in-progress and will be changed.** + +## Changes + +| Filename | v10 | v11 | +| ------------------ | ----------------------- | ------------------------------------------ | +| `_tokens.scss` | | Deprecated, use Custom Properties directly | +| `_theme-maps.scss` | | Removed, use `_themes.scss` instead | +| `_theme-maps.scss` | `$carbon--theme--white` | `$white` | +| | `$carbon--theme--g10` | `$g10` | +| | `$carbon--theme--g90` | `$g90` | +| | `$carbon--theme--g100` | `$g100` | +| `_mixins.scss` | | Removed, use `_theme.scss` instead | +| `_mixins.scss` | `carbon--theme` | `theme` | + +- Theme maps are now available in `scss/_themes.scss` and no longer require a + namespace +- Theme mixin has been simplified, it now emits the given theme as Custom + Properties for the parent selector diff --git a/packages/cli/package.json b/packages/cli/package.json index 157001c662e1..34d0e2a79a5c 100644 --- a/packages/cli/package.json +++ b/packages/cli/package.json @@ -1,7 +1,7 @@ { "name": "@carbon/cli", "description": "Task automation for working with the Carbon Design System", - "version": "10.19.0-rc.0", + "version": "10.19.0", "license": "Apache-2.0", "bin": { "carbon-cli": "./bin/carbon-cli.js" diff --git a/packages/cli/src/commands/sassdoc/tools.js b/packages/cli/src/commands/sassdoc/tools.js index 227e3dfb3f74..a4ab9db628b8 100644 --- a/packages/cli/src/commands/sassdoc/tools.js +++ b/packages/cli/src/commands/sassdoc/tools.js @@ -122,7 +122,9 @@ function createAnchorLink(name, heading) { function createMarkdownItem(item) { let str = ''; - if (!item.context) return ''; + if (!item.context) { + return ''; + } let status = item.access === 'public' ? '✅' : '❌'; @@ -160,9 +162,13 @@ $${item.context.name}: ${item.context.value}; if (item.parameter) { item.parameter.forEach((param) => { - if (paramStr) paramStr += `, `; + if (paramStr) { + paramStr += `, `; + } paramStr += `$${param.name}`; - if (param.default) paramStr += `: ${param.default}`; + if (param.default) { + paramStr += `: ${param.default}`; + } }); } diff --git a/packages/colors/package.json b/packages/colors/package.json index 0079385e52b0..8dd4f2b85214 100644 --- a/packages/colors/package.json +++ b/packages/colors/package.json @@ -1,7 +1,7 @@ { "name": "@carbon/colors", "description": "Colors for digital and software products using the Carbon Design System", - "version": "10.20.0-rc.0", + "version": "10.20.0", "license": "Apache-2.0", "main": "lib/index.js", "module": "es/index.js", @@ -35,9 +35,9 @@ "clean": "rimraf css es lib umd scss index.scss" }, "devDependencies": { - "@carbon/cli": "^10.19.0-rc.0", + "@carbon/cli": "^10.19.0", "@carbon/cli-reporter": "^10.4.0", - "@carbon/scss-generator": "^10.12.0", + "@carbon/scss-generator": "^10.13.0", "@carbon/test-utils": "^10.14.0", "change-case": "^4.1.1", "core-js": "^3.6.5", diff --git a/packages/components/gulpfile.js b/packages/components/gulpfile.js index 7752053746c9..25e99377a925 100644 --- a/packages/components/gulpfile.js +++ b/packages/components/gulpfile.js @@ -241,7 +241,9 @@ const convertToESMGulpPlugin = () => }), ], onwarn: (warning, handle) => { - if (warning.code !== 'EMPTY_BUNDLE') handle(warning); + if (warning.code !== 'EMPTY_BUNDLE') { + handle(warning); + } }, }) .then((bundle) => bundle.generate({ format: 'esm' })) diff --git a/packages/components/package.json b/packages/components/package.json index 729fd5f799f3..2411d409b672 100644 --- a/packages/components/package.json +++ b/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.28.0-rc.0", + "version": "10.28.0", "license": "Apache-2.0", "main": "umd/index.js", "module": "es/index.js", @@ -84,10 +84,10 @@ "@babel/preset-env": "^7.10.0", "@babel/preset-react": "^7.10.0", "@babel/runtime": "^7.10.0", - "@carbon/cli": "^10.19.0-rc.0", - "@carbon/elements": "^10.27.0-rc.0", - "@carbon/icons-handlebars": "^10.25.0-rc.0", - "@carbon/icons-react": "^10.25.0-rc.0", + "@carbon/cli": "^10.19.0", + "@carbon/elements": "^10.27.0", + "@carbon/icons-handlebars": "^10.25.0", + "@carbon/icons-react": "^10.25.0", "@carbon/test-utils": "^10.14.0", "@frctl/fractal": "^1.1.0", "@rollup/plugin-babel": "^5.2.2", @@ -139,7 +139,7 @@ "jasmine-core": "^3.0.0", "karma": "^4.0.0", "karma-chrome-launcher": "^2.2.0", - "karma-coverage": "^1.1.0", + "karma-coverage": "^2.0.3", "karma-firefox-launcher": "^2.1.0", "karma-html2js-preprocessor": "^1.1.0", "karma-ie-launcher": "^1.0.0", @@ -149,7 +149,7 @@ "karma-spec-reporter": "0.0.32", "karma-webpack": "^3.0.0", "lolex": "^3.0.0", - "markdown-it": "^8.4.0", + "markdown-it": "^12.0.4", "minimatch": "^3.0.4", "mkdirp": "^0.5.0", "mock-raf": "^1.0.0", diff --git a/packages/components/src/components/data-table/_data-table-core.scss b/packages/components/src/components/data-table/_data-table-core.scss index 5576b83e44a3..84c5458fc5ae 100644 --- a/packages/components/src/components/data-table/_data-table-core.scss +++ b/packages/components/src/components/data-table/_data-table-core.scss @@ -105,6 +105,14 @@ background-color: $ui-03; } + .#{$prefix}--data-table.#{$prefix}--data-table--sort th { + padding: 0; + } + + .#{$prefix}--data-table.#{$prefix}--data-table--sort .#{$prefix}--table-sort { + padding-left: $spacing-05; + } + .#{$prefix}--data-table th:last-of-type { // Do not use `position: relative`, as its behavior is undefined for many table elements: https://www.w3.org/TR/CSS21/visuren.html#propdef-position position: static; diff --git a/packages/components/src/components/list-box/_list-box.scss b/packages/components/src/components/list-box/_list-box.scss index 5c7d63820b73..75ee8ffbfc1e 100644 --- a/packages/components/src/components/list-box/_list-box.scss +++ b/packages/components/src/components/list-box/_list-box.scss @@ -110,6 +110,7 @@ $list-box-menu-width: rem(300px); } .#{$prefix}--list-box .#{$prefix}--text-input { + min-width: 0; height: 100%; } diff --git a/packages/components/src/components/multi-select/_multi-select.scss b/packages/components/src/components/multi-select/_multi-select.scss index 725e651726a7..42c60e553530 100644 --- a/packages/components/src/components/multi-select/_multi-select.scss +++ b/packages/components/src/components/multi-select/_multi-select.scss @@ -65,15 +65,34 @@ color: $text-01; } + .#{$prefix}--multi-select--filterable { + transition: outline-color $duration--fast-01 motion(standard, productive); + } + + .#{$prefix}--multi-select--filterable.#{$prefix}--combo-box + .#{$prefix}--text-input { + background-clip: padding-box; + border: rem(2px) solid transparent; + outline: none; + } + + .#{$prefix}--multi-select--filterable--input-focused { + @include focus-outline('outline'); + } + + .#{$prefix}--multi-select--filterable.#{$prefix}--multi-select--selected + .#{$prefix}--text-input { + padding-left: 0; + } + .#{$prefix}--multi-select--filterable.#{$prefix}--list-box--disabled:hover .#{$prefix}--text-input { background-color: $field-01; } - .#{$prefix}--multi-select--filterable { + .#{$prefix}--multi-select--filterable .#{$prefix}--list-box__selection--multi { - margin: 0 0 0 $spacing-05; - } + margin: 0 0 0 $spacing-05; } .#{$prefix}--multi-select--filterable.#{$prefix}--multi-select--inline, diff --git a/packages/components/tests/pure-modules-test.js b/packages/components/tests/pure-modules-test.js index 23869c33975c..0c614fd1d124 100644 --- a/packages/components/tests/pure-modules-test.js +++ b/packages/components/tests/pure-modules-test.js @@ -71,7 +71,9 @@ describe('ES modules', () => { terser.terser(), ], onwarn: (warning, handle) => { - if (warning.code !== 'EMPTY_BUNDLE') handle(warning); + if (warning.code !== 'EMPTY_BUNDLE') { + handle(warning); + } }, treeshake: { annotations: false, @@ -103,7 +105,9 @@ describe('ES modules', () => { terser.terser(), ], onwarn: (warning, handle) => { - if (warning.code !== 'EMPTY_BUNDLE') handle(warning); + if (warning.code !== 'EMPTY_BUNDLE') { + handle(warning); + } }, treeshake: { annotations: false, diff --git a/packages/elements/package.json b/packages/elements/package.json index a9facf363608..4eb0ac2162a7 100644 --- a/packages/elements/package.json +++ b/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.27.0-rc.0", + "version": "10.27.0", "license": "Apache-2.0", "main": "lib/index.js", "module": "es/index.js", @@ -35,17 +35,17 @@ "clean": "rimraf es lib umd && node tasks/clean.js" }, "dependencies": { - "@carbon/colors": "^10.20.0-rc.0", - "@carbon/grid": "^10.20.0-rc.0", - "@carbon/icons": "^10.25.0-rc.0", - "@carbon/import-once": "^10.5.0", - "@carbon/layout": "^10.18.0-rc.0", - "@carbon/motion": "^10.13.0-rc.0", - "@carbon/themes": "^10.27.0-rc.0", - "@carbon/type": "^10.21.0-rc.0" + "@carbon/colors": "^10.20.0", + "@carbon/grid": "^10.20.0", + "@carbon/icons": "^10.25.0", + "@carbon/import-once": "^10.6.0", + "@carbon/layout": "^10.18.0", + "@carbon/motion": "^10.13.0", + "@carbon/themes": "^10.27.0", + "@carbon/type": "^10.21.0" }, "devDependencies": { - "@carbon/cli": "^10.19.0-rc.0", + "@carbon/cli": "^10.19.0", "fs-extra": "^8.1.0", "klaw-sync": "^6.0.0", "replace-in-file": "^3.4.2", diff --git a/packages/feature-flags/package.json b/packages/feature-flags/package.json index 01939dea0dd1..4d411f0f96cc 100644 --- a/packages/feature-flags/package.json +++ b/packages/feature-flags/package.json @@ -2,7 +2,7 @@ "name": "@carbon/feature-flags", "private": true, "description": "Build with feature flags in Carbon", - "version": "0.5.0-rc.0", + "version": "0.5.0", "license": "Apache-2.0", "main": "lib/index.js", "module": "es/index.js", @@ -27,7 +27,7 @@ "devDependencies": { "@babel/generator": "^7.10.2", "@babel/types": "^7.10.2", - "@carbon/scss-generator": "^10.12.0", + "@carbon/scss-generator": "^10.13.0", "fs-extra": "^9.0.1", "js-yaml": "^3.14.0", "rimraf": "^3.0.2", diff --git a/packages/grid/package.json b/packages/grid/package.json index 0ca34a0dd483..cb498e636915 100644 --- a/packages/grid/package.json +++ b/packages/grid/package.json @@ -1,7 +1,7 @@ { "name": "@carbon/grid", "description": "Grid for digital and software products using the Carbon Design System", - "version": "10.20.0-rc.0", + "version": "10.20.0", "license": "Apache-2.0", "repository": { "type": "git", @@ -31,11 +31,11 @@ "clean": "rimraf scss/_inlined scss/vendor" }, "dependencies": { - "@carbon/import-once": "^10.5.0", - "@carbon/layout": "^10.18.0-rc.0" + "@carbon/import-once": "^10.6.0", + "@carbon/layout": "^10.18.0" }, "devDependencies": { - "@carbon/cli": "^10.19.0-rc.0", + "@carbon/cli": "^10.19.0", "rimraf": "^3.0.0" }, "eyeglass": { diff --git a/packages/icon-build-helpers/package.json b/packages/icon-build-helpers/package.json index 3c820dcf9739..3cf965adac74 100644 --- a/packages/icon-build-helpers/package.json +++ b/packages/icon-build-helpers/package.json @@ -2,7 +2,7 @@ "name": "@carbon/icon-build-helpers", "private": true, "description": "Build helpers for the Carbon Design System icon library", - "version": "0.15.0-rc.0", + "version": "0.15.0", "license": "Apache-2.0", "main": "src/index.js", "repository": { @@ -25,7 +25,7 @@ "@babel/preset-env": "^7.10.0", "@babel/preset-react": "^7.10.0", "@carbon/cli-reporter": "^10.4.0", - "@carbon/icon-helpers": "^10.13.0-rc.0", + "@carbon/icon-helpers": "^10.13.0", "@rollup/plugin-babel": "^5.2.2", "@rollup/plugin-replace": "^2.3.4", "browserslist-config-carbon": "^10.6.0", diff --git a/packages/icon-build-helpers/src/builders/plugins/virtual.js b/packages/icon-build-helpers/src/builders/plugins/virtual.js index 7a4084fda4a6..fdf7ef6e9d21 100644 --- a/packages/icon-build-helpers/src/builders/plugins/virtual.js +++ b/packages/icon-build-helpers/src/builders/plugins/virtual.js @@ -22,13 +22,18 @@ module.exports = function virtual(modules) { name: 'virtual', resolveId(id, importer) { - if (id in modules) return PREFIX + id; + if (id in modules) { + return PREFIX + id; + } if (importer) { - if (importer.startsWith(PREFIX)) + if (importer.startsWith(PREFIX)) { importer = importer.slice(PREFIX.length); + } const resolved = path.resolve(path.dirname(importer), id); - if (resolvedIds.has(resolved)) return PREFIX + resolved; + if (resolvedIds.has(resolved)) { + return PREFIX + resolved; + } } }, diff --git a/packages/icon-helpers/package.json b/packages/icon-helpers/package.json index a3de56ef31d9..c0bd1db875d6 100644 --- a/packages/icon-helpers/package.json +++ b/packages/icon-helpers/package.json @@ -1,7 +1,7 @@ { "name": "@carbon/icon-helpers", "description": "Helpers used alongside icons for digital and software products using the Carbon Design System", - "version": "10.13.0-rc.0", + "version": "10.13.0", "license": "Apache-2.0", "main": "lib/index.js", "module": "es/index.js", @@ -33,7 +33,7 @@ "clean": "rimraf es lib umd" }, "devDependencies": { - "@carbon/cli": "^10.19.0-rc.0", + "@carbon/cli": "^10.19.0", "rimraf": "^3.0.0" }, "sideEffects": false diff --git a/packages/icons-handlebars/package.json b/packages/icons-handlebars/package.json index 657ad7a88456..d56df709e15a 100644 --- a/packages/icons-handlebars/package.json +++ b/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.25.0-rc.0", + "version": "10.25.0", "license": "Apache-2.0", "main": "index.js", "repository": { @@ -26,8 +26,8 @@ "handlebars": "^4.0.12" }, "dependencies": { - "@carbon/icon-helpers": "^10.13.0-rc.0", - "@carbon/icons": "^10.25.0-rc.0" + "@carbon/icon-helpers": "^10.13.0", + "@carbon/icons": "^10.25.0" }, "devDependencies": { "handlebars": "^4.0.12" diff --git a/packages/icons-react/package.json b/packages/icons-react/package.json index 87d7e1ce2108..e2ddd01f58f3 100644 --- a/packages/icons-react/package.json +++ b/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.25.0-rc.0", + "version": "10.25.0", "license": "Apache-2.0", "main": "lib/index.js", "module": "es/index.js", @@ -36,12 +36,12 @@ "react": ">=16" }, "dependencies": { - "@carbon/icon-helpers": "^10.13.0-rc.0", + "@carbon/icon-helpers": "^10.13.0", "prop-types": "^15.7.2" }, "devDependencies": { - "@carbon/icon-build-helpers": "^0.15.0-rc.0", - "@carbon/icons": "^10.25.0-rc.0" + "@carbon/icon-build-helpers": "^0.15.0", + "@carbon/icons": "^10.25.0" }, "sideEffects": false } diff --git a/packages/icons-vue/package.json b/packages/icons-vue/package.json index cf9e96a95192..9c5c89bf7020 100644 --- a/packages/icons-vue/package.json +++ b/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.25.0-rc.0", + "version": "10.25.0", "license": "Apache-2.0", "main": "lib/index.js", "module": "es/index.js", @@ -28,11 +28,11 @@ "clean": "rimraf es lib" }, "dependencies": { - "@carbon/icon-helpers": "^10.13.0-rc.0" + "@carbon/icon-helpers": "^10.13.0" }, "devDependencies": { "@carbon/cli-reporter": "^10.4.0", - "@carbon/icons": "^10.25.0-rc.0", + "@carbon/icons": "^10.25.0", "fs-extra": "^8.1.0", "prettier": "^2.2.1", "rimraf": "^3.0.0", diff --git a/packages/icons/package.json b/packages/icons/package.json index 145e23bdaf15..9749bd46fea5 100644 --- a/packages/icons/package.json +++ b/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.25.0-rc.0", + "version": "10.25.0", "license": "Apache-2.0", "main": "lib/index.js", "module": "es/index.js", @@ -38,8 +38,8 @@ "prepublishOnly": "yarn build" }, "devDependencies": { - "@carbon/cli": "^10.19.0-rc.0", - "@carbon/icon-build-helpers": "^0.15.0-rc.0", + "@carbon/cli": "^10.19.0", + "@carbon/icon-build-helpers": "^0.15.0", "rimraf": "^3.0.2" } } diff --git a/packages/import-once/package.json b/packages/import-once/package.json index 005ca48932e0..1947f0105ff7 100644 --- a/packages/import-once/package.json +++ b/packages/import-once/package.json @@ -1,7 +1,7 @@ { "name": "@carbon/import-once", "description": "Sass helper for importing files only once. Used in the Carbon Design System", - "version": "10.5.0", + "version": "10.6.0", "license": "Apache-2.0", "repository": { "type": "git", diff --git a/packages/layout/package.json b/packages/layout/package.json index f96f1c8cb3af..84cf902db538 100644 --- a/packages/layout/package.json +++ b/packages/layout/package.json @@ -1,7 +1,7 @@ { "name": "@carbon/layout", "description": "Layout helpers for digital and software products using the Carbon Design System", - "version": "10.18.0-rc.0", + "version": "10.18.0", "license": "Apache-2.0", "main": "lib/index.js", "module": "es/index.js", @@ -29,8 +29,9 @@ "clean": "rimraf es lib umd scss/generated scss/modules/generated" }, "devDependencies": { + "@carbon/cli": "^10.19.0", "@carbon/cli-reporter": "^10.4.0", - "@carbon/scss-generator": "^10.12.0", + "@carbon/scss-generator": "^10.13.0", "@carbon/test-utils": "^10.14.0", "core-js": "^3.6.5", "rimraf": "^3.0.0" diff --git a/packages/layout/tasks/build.js b/packages/layout/tasks/build.js index 188cabbca73f..b6cf82ab29f8 100644 --- a/packages/layout/tasks/build.js +++ b/packages/layout/tasks/build.js @@ -207,15 +207,18 @@ function buildModulesTokenFile(tokenScale, group) { return [comment, assignment, t.Newline()]; }); - const list = [ - t.Comment(`/ @type List + const map = [ + t.Comment(`/ @type Map / @access public / @group @carbon/layout`), t.Assignment({ id: t.Identifier(group), - init: t.SassList({ - elements: values.map(([_name, _shorthand, id]) => { - return id; + init: t.SassMap({ + properties: values.map(([name, _shorthand, id]) => { + return t.SassMapProperty({ + key: id, + value: t.SassValue(`$${name}`), + }); }), }), }), @@ -225,7 +228,7 @@ function buildModulesTokenFile(tokenScale, group) { FILE_BANNER, t.Newline(), ...variables, - ...list, + ...map, t.Newline(), ]); } diff --git a/packages/motion/package.json b/packages/motion/package.json index 620185122f83..97409e47e874 100644 --- a/packages/motion/package.json +++ b/packages/motion/package.json @@ -1,7 +1,7 @@ { "name": "@carbon/motion", "description": "Motion helpers for digital and software products using the Carbon Design System", - "version": "10.13.0-rc.0", + "version": "10.13.0", "license": "Apache-2.0", "main": "lib/index.js", "module": "es/index.js", @@ -29,7 +29,7 @@ "clean": "rimraf es lib umd" }, "devDependencies": { - "@carbon/cli": "^10.19.0-rc.0", + "@carbon/cli": "^10.19.0", "rimraf": "^3.0.0" }, "eyeglass": { diff --git a/packages/pictograms-react/package.json b/packages/pictograms-react/package.json index f3a8ae59daab..bc3e2d141485 100644 --- a/packages/pictograms-react/package.json +++ b/packages/pictograms-react/package.json @@ -1,7 +1,7 @@ { "name": "@carbon/pictograms-react", "description": "React components for pictograms in digital and software products using the Carbon Design System", - "version": "11.3.0-rc.0", + "version": "11.3.0", "license": "Apache-2.0", "main": "lib/index.js", "module": "es/index.js", @@ -37,13 +37,13 @@ "react": ">=16" }, "dependencies": { - "@carbon/icon-helpers": "^10.13.0-rc.0", + "@carbon/icon-helpers": "^10.13.0", "@carbon/telemetry": "0.0.0-alpha.6", "prop-types": "^15.7.2" }, "devDependencies": { - "@carbon/icon-build-helpers": "^0.15.0-rc.0", - "@carbon/pictograms": "^11.3.0-rc.0" + "@carbon/icon-build-helpers": "^0.15.0", + "@carbon/pictograms": "^11.3.0" }, "sideEffects": false } diff --git a/packages/pictograms/package.json b/packages/pictograms/package.json index 6be21ca4a5ad..a840d8e1a7fe 100644 --- a/packages/pictograms/package.json +++ b/packages/pictograms/package.json @@ -1,7 +1,7 @@ { "name": "@carbon/pictograms", "description": "Pictograms for digital and software products using the Carbon Design System", - "version": "11.3.0-rc.0", + "version": "11.3.0", "license": "Apache-2.0", "main": "lib/index.js", "module": "es/index.js", @@ -31,7 +31,7 @@ "prepublishOnly": "yarn build" }, "devDependencies": { - "@carbon/icon-build-helpers": "^0.15.0-rc.0", + "@carbon/icon-build-helpers": "^0.15.0", "rimraf": "^3.0.0" } } diff --git a/packages/react/__tests__/__snapshots__/PublicAPI-test.js.snap b/packages/react/__tests__/__snapshots__/PublicAPI-test.js.snap index 9eb95254f298..3f652fa22dbf 100644 --- a/packages/react/__tests__/__snapshots__/PublicAPI-test.js.snap +++ b/packages/react/__tests__/__snapshots__/PublicAPI-test.js.snap @@ -1402,7 +1402,8 @@ Map { "persistent": Object { "type": "bool", }, - "placeHolderText": Object { + "placeHolderText": [Function], + "placeholder": Object { "type": "string", }, "searchContainerClass": Object { @@ -1993,7 +1994,8 @@ Map { "persistent": Object { "type": "bool", }, - "placeHolderText": Object { + "placeHolderText": [Function], + "placeholder": Object { "type": "string", }, "searchContainerClass": Object { @@ -4530,7 +4532,7 @@ Map { "defaultProps": Object { "closeButtonLabelText": "Clear search input", "onChange": [Function], - "placeHolderText": "", + "placeholder": "", "type": "text", }, "propTypes": Object { @@ -4572,7 +4574,8 @@ Map { "onKeyDown": Object { "type": "func", }, - "placeHolderText": Object { + "placeHolderText": [Function], + "placeholder": Object { "type": "string", }, "size": Object { diff --git a/packages/react/package.json b/packages/react/package.json index 633ed950682d..daa149808297 100644 --- a/packages/react/package.json +++ b/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.28.0-rc.0", + "version": "7.28.0", "license": "Apache-2.0", "main": "lib/index.js", "module": "es/index.js", @@ -44,7 +44,7 @@ "react-dom": "^16.8.6 || ^17.0.1" }, "dependencies": { - "@carbon/icons-react": "^10.25.0-rc.0", + "@carbon/icons-react": "^10.25.0", "@carbon/telemetry": "0.0.0-alpha.6", "classnames": "2.2.6", "downshift": "5.2.1", @@ -89,7 +89,7 @@ "babel-plugin-react-docgen": "^4.0.0", "babel-plugin-transform-inline-environment-variables": "^0.4.0", "browserslist-config-carbon": "^10.6.0", - "carbon-components": "^10.28.0-rc.0", + "carbon-components": "^10.28.0", "carbon-icons": "^7.0.5", "chalk": "^2.3.0", "cli-table": "^0.3.0", @@ -118,7 +118,7 @@ "rollup-plugin-terser": "^7.0.2", "rtlcss": "^2.4.0", "sass-loader": "^8.0.2", - "storybook-preset-carbon": "^0.2.0-rc.0", + "storybook-preset-carbon": "^0.2.0", "string-replace-loader": "^2.1.0", "terser-webpack-plugin": "^2.3.2", "webpack": "^4.41.5", diff --git a/packages/react/src/components/ComposedModal/ComposedModal-story.js b/packages/react/src/components/ComposedModal/ComposedModal-story.js index dee9057dac54..3cbf72411a02 100644 --- a/packages/react/src/components/ComposedModal/ComposedModal-story.js +++ b/packages/react/src/components/ComposedModal/ComposedModal-story.js @@ -9,17 +9,17 @@ import React, { useState } from 'react'; import ReactDOM from 'react-dom'; import { action } from '@storybook/addon-actions'; import { withKnobs, boolean, select, text } from '@storybook/addon-knobs'; -import { settings } from 'carbon-components'; import ComposedModal, { ModalHeader, ModalBody, ModalFooter, } from '../ComposedModal'; +import Select from '../Select'; +import SelectItem from '../SelectItem'; +import TextInput from '../TextInput'; import Button from '../Button'; import mdx from './ComposedModal.mdx'; -const { prefix } = settings; - const sizes = { Default: '', 'Extra small (xs)': 'xs', @@ -27,11 +27,17 @@ const sizes = { 'Large (lg)': 'lg', }; +const buttons = { + 'None (0)': 0, + 'One (1)': 1, + 'Two (2)': 2, +}; + const props = { composedModal: ({ titleOnly } = {}) => ({ + numberOfButtons: select('Number of Buttons', buttons, 2), open: boolean('Open (open in )', true), onKeyDown: action('onKeyDown'), - danger: boolean('Danger mode (danger)', false), selectorPrimaryFocus: text( 'Primary focus element selector (selectorPrimaryFocus)', '[data-modal-primary-focus]' @@ -39,65 +45,54 @@ const props = { size: select('Size (size)', sizes, titleOnly ? 'sm' : ''), preventCloseOnClickOutside: boolean( 'Prevent closing on click outside of modal (preventCloseOnClickOutside)', - false - ), - }), - composedModalWithLauncher: ({ titleOnly } = {}) => ({ - onKeyDown: action('onKeyDown'), - danger: boolean('Danger mode (danger)', false), - selectorPrimaryFocus: text( - 'Primary focus element selector (selectorPrimaryFocus)', - '[data-modal-primary-focus]' - ), - size: select('Size (size)', sizes, titleOnly ? 'sm' : ''), - preventCloseOnClickOutside: boolean( - 'Prevent closing on click outside of modal (preventCloseOnClickOutside)', - false + true ), }), modalHeader: ({ titleOnly } = {}) => ({ - label: text('Optional Label (label in )', 'Optional Label'), + label: text('Optional Label (label in )', 'Label'), title: text( 'Optional title (title in )', titleOnly ? ` Passive modal title as the message. Should be direct and 3 lines or less. `.trim() - : 'Example' + : 'Modal heading' ), iconDescription: text( 'Close icon description (iconDescription in )', 'Close' ), buttonOnClick: action('buttonOnClick'), - preventCloseOnClickOutside: boolean( - 'Prevent closing on click outside of modal (preventCloseOnClickOutside)', - false - ), }), modalBody: () => ({ hasScrollingContent: boolean( 'Modal contains scrollable content (hasScrollingContent)', - true - ), - 'aria-label': text('ARIA label for content', 'Example modal content'), - }), - modalFooter: () => ({ - primaryButtonText: text( - 'Primary button text (primaryButtonText in )', - 'Save' - ), - primaryButtonDisabled: boolean( - 'Primary button disabled (primaryButtonDisabled in )', false ), - secondaryButtonText: text( - 'Secondary button text (secondaryButtonText in )', - '' - ), - onRequestClose: action('onRequestClose'), - onRequestSubmit: action('onRequestSubmit'), + 'aria-label': text('ARIA label for content', 'Example modal content'), }), + modalFooter: (numberOfButtons) => { + return { + danger: boolean('Primary button danger (danger)', false), + primaryButtonText: text( + 'Primary button text (primaryButtonText in )', + 'Primary button' + ), + primaryButtonDisabled: boolean( + 'Primary button disabled (primaryButtonDisabled in )', + false + ), + secondaryButtonText: + numberOfButtons === 2 + ? text( + 'Secondary button text (secondaryButtonText in )', + 'Secondary button' + ) + : null, + onRequestClose: action('onRequestClose'), + onRequestSubmit: action('onRequestSubmit'), + }; + }, }; const scrollingContent = ( @@ -155,27 +150,6 @@ const scrollingContent = ( ); -/** - * Simple state manager for modals. - */ -const ModalStateManager = ({ - renderLauncher: LauncherContent, - children: ModalContent, -}) => { - const [open, setOpen] = useState(false); - return ( - <> - {!ModalContent || typeof document === 'undefined' - ? null - : ReactDOM.createPortal( - , - document.body - )} - {LauncherContent && } - - ); -}; - export default { title: 'ComposedModal', decorators: [withKnobs], @@ -192,134 +166,127 @@ export default { }, }; -export const UsingHeaderFooterProps = () => { - const { size, ...rest } = props.composedModalWithLauncher(); - const { hasScrollingContent, ...bodyProps } = props.modalBody(); +export const Playground = () => { + const { size, numberOfButtons, ...rest } = props.composedModal(); + const { hasScrollingContent } = props.modalBody(); return ( - + -

- Please see the "With Trigger Button" storybook example for a - demo of this functionality. +

+ Custom domains direct requests for your apps in this Cloud Foundry + organization to a URL that you own. A custom domain can be a shared + domain, a shared subdomain, or a shared domain and host.

+ +
{hasScrollingContent && scrollingContent} - + {numberOfButtons > 0 && ( + + )} ); }; -UsingHeaderFooterProps.storyName = 'Using Header / Footer Props'; - -UsingHeaderFooterProps.parameters = { - info: { - text: ` - Composed Modal allows you to create your own modal with just the parts you need. The ComposedModal element provides the state management for open/close, as well as passes the ModalHeader a prop to close the modal (with the close button). - - The interior components - ModalHeader / ModalBody / ModalFooter - are all container elements that will render any children you add in, wrapped in the appropriate CSS classes. - - The Modal Header / Modal Footer come with some built in props to let you accelerate towards standard Carbon modal UI. If there are customizations you need to do, see the next example of just using the interior components as containers. - `, - }, -}; - -export const UsingChildNodes = () => { - const { size, ...rest } = props.composedModal(); - const { hasScrollingContent, ...bodyProps } = props.modalBody(); +export const Default = () => { return ( - - -

Testing

- - -

- Please see the "With Trigger Button" storybook example for a - demo of this functionality. + + + +

+ Custom domains direct requests for your apps in this Cloud Foundry + organization to a URL that you own. A custom domain can be a shared + domain, a shared subdomain, or a shared domain and host.

-
- {hasScrollingContent && scrollingContent} + + - - - - + ); }; -UsingChildNodes.storyName = 'Using child nodes'; - -UsingChildNodes.parameters = { - info: { - text: ` - Alternatively, you can just use the Modal components as wrapper elements and figure the children out yourself. We do suggest for the header you utilize the built in props for label and title though, for the footer it's mostly a composed element so creating the two buttons yourself (using the Button component) is probably the most straight-forward pattern. - `, - }, -}; - -export const TitleOnly = () => { - const { size, ...rest } = props.composedModal({ titleOnly: true }); +export const PassiveModal = () => { return ( - - + + - ); }; -TitleOnly.storyName = 'Title only'; - -TitleOnly.parameters = { - info: { - text: ` - In "small" and "xs" modals size, the title is allowed to span multiple lines and be used for the main message. - It should be less than 3 lines of text. If more room is required then use the standard body copy format. - `, - }, -}; - -export const WithTriggerButton = () => { - const { size, ...rest } = props.composedModalWithLauncher(); - const { hasScrollingContent, ...bodyProps } = props.modalBody(); +export const WithStateManager = () => { + /** + * Simple state manager for modals. + */ + const ModalStateManager = ({ + renderLauncher: LauncherContent, + children: ModalContent, + }) => { + const [open, setOpen] = useState(false); + return ( + <> + {!ModalContent || typeof document === 'undefined' + ? null + : ReactDOM.createPortal( + , + document.body + )} + {LauncherContent && } + + ); + }; return ( ( )}> {({ open, setOpen }) => ( - setOpen(false)}> - - - {hasScrollingContent && scrollingContent} + setOpen(false)}> + + +

+ Custom domains direct requests for your apps in this Cloud Foundry + organization to a URL that you own. A custom domain can be a + shared domain, a shared subdomain, or a shared domain and host. +

+ + - + )} ); }; - -WithTriggerButton.storyName = 'Example usage with trigger button'; - -WithTriggerButton.parameters = { - info: { - text: ` - An example ComposedModal with a trigger button - `, - }, -}; diff --git a/packages/react/src/components/DataTable/TableHeader.js b/packages/react/src/components/DataTable/TableHeader.js index 1f8522023bad..a300819716a7 100644 --- a/packages/react/src/components/DataTable/TableHeader.js +++ b/packages/react/src/components/DataTable/TableHeader.js @@ -14,6 +14,7 @@ import { ArrowsVertical20 as Arrows, } from '@carbon/icons-react'; import { sortStates } from './state/sorting'; +import { useId } from '../../internal/useId'; const { prefix } = settings; @@ -65,6 +66,8 @@ const TableHeader = React.forwardRef(function TableHeader( }, ref ) { + const uniqueId = useId('table-sort'); + if (!isSortable) { return ( -
+
{sortDescription}
+ {secondaryButtonText && ( + + )}