diff --git a/docs/release-schedule.md b/docs/release-schedule.md index 47644c8c860..743485e4f49 100644 --- a/docs/release-schedule.md +++ b/docs/release-schedule.md @@ -12,7 +12,7 @@ major versions of the Carbon for IBM.com library. > Dates are subject to change -![schedule](https://www.ibm.com/standards/carbon/static/bcfed95efe679166dbec1cbae7ea33bb/4ea69/dotcom-lts.png) +![schedule](https://www.ibm.com/standards/carbon/static/0ef80acd5f41a795ca27d8add6516414/4ea69/dotcom-lts.png) ## Release phases diff --git a/packages/carbon-web-components/CHANGELOG.md b/packages/carbon-web-components/CHANGELOG.md index 7e990229fce..d9e3ba4ed2a 100644 --- a/packages/carbon-web-components/CHANGELOG.md +++ b/packages/carbon-web-components/CHANGELOG.md @@ -3,6 +3,18 @@ All notable changes to this project will be documented in this file. See [Conventional Commits](https://conventionalcommits.org) for commit guidelines. +# [1.32.0-rc.0](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/compare/@carbon/web-components@1.31.0...@carbon/web-components@1.32.0-rc.0) (2023-09-06) + + +### Bug Fixes + +* **lerna:** build packages & codesandbox updates ([#10876](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/issues/10876)) ([fa5bee0](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/commit/fa5bee07eb65a0f730c7cb1094a5eb8d122ab593)) +* **pagination:** mark selected option in page-sizes-select component ([#10884](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/issues/10884)) ([ec3e4cf](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/commit/ec3e4cfaa4f50282c037c789898b7d6a61d6d54c)) + + + + + # [1.31.0](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/compare/@carbon/web-components@1.31.0-rc.2...@carbon/web-components@1.31.0) (2023-08-22) **Note:** Version bump only for package @carbon/web-components diff --git a/packages/carbon-web-components/examples/codesandbox/form/basic/webpack.config.js b/packages/carbon-web-components/examples/codesandbox/form/basic/webpack.config.js index e042df62109..90877d62670 100644 --- a/packages/carbon-web-components/examples/codesandbox/form/basic/webpack.config.js +++ b/packages/carbon-web-components/examples/codesandbox/form/basic/webpack.config.js @@ -10,6 +10,10 @@ const HtmlWebpackPlugin = require('html-webpack-plugin'); module.exports = { + // disable the host check on sandbox + devServer: { + disableHostCheck: true + }, plugins: [ new HtmlWebpackPlugin({ template: 'index.html', diff --git a/packages/carbon-web-components/examples/codesandbox/form/redux-form/webpack.config.js b/packages/carbon-web-components/examples/codesandbox/form/redux-form/webpack.config.js index ca7a49487c6..c515fb9acc8 100644 --- a/packages/carbon-web-components/examples/codesandbox/form/redux-form/webpack.config.js +++ b/packages/carbon-web-components/examples/codesandbox/form/redux-form/webpack.config.js @@ -10,6 +10,10 @@ const HtmlWebpackPlugin = require('html-webpack-plugin'); module.exports = { + // disable the host check on sandbox + devServer: { + disableHostCheck: true + }, module: { rules: [ { diff --git a/packages/carbon-web-components/examples/codesandbox/ie/.gitignore b/packages/carbon-web-components/examples/codesandbox/ie/.gitignore deleted file mode 100644 index d94d6e13e94..00000000000 --- a/packages/carbon-web-components/examples/codesandbox/ie/.gitignore +++ /dev/null @@ -1,22 +0,0 @@ -# See https://help.github.com/ignore-files/ for more about ignoring files. - -# dependencies -/node_modules - -# testing -/coverage - -# production -/build - -# misc -.DS_Store -.cache -.env.local -.env.development.local -.env.test.local -.env.production.local - -npm-debug.log* -yarn-debug.log* -yarn-error.log* diff --git a/packages/carbon-web-components/examples/codesandbox/ie/package.json b/packages/carbon-web-components/examples/codesandbox/ie/package.json deleted file mode 100644 index 3bf1e12d205..00000000000 --- a/packages/carbon-web-components/examples/codesandbox/ie/package.json +++ /dev/null @@ -1,32 +0,0 @@ -{ - "name": "carbon-web-components-ie-getting-started", - "version": "0.1.0", - "description": "Sample project for getting started with the Web Components from the Carbon Design System with IE.", - "license": "Apache-2", - "author": "", - "scripts": { - "start": "webpack-dev-server --mode development --port 8080" - }, - "keywords": [], - "devDependencies": { - "@babel/core": "^7.8.0", - "@babel/plugin-transform-runtime": "^7.8.0", - "@babel/preset-env": "^7.8.0", - "@babel/runtime": "^7.8.0", - "@webcomponents/custom-elements": "^1.2.0", - "@webcomponents/shadycss": "^1.9.0", - "@webcomponents/shadydom": "^1.6.0", - "@webcomponents/template": "^1.4.0", - "@webcomponents/url": "^0.7.0", - "@webcomponents/webcomponents-platform": "^1.0.0", - "babel-loader": "^8.0.0", - "@carbon/web-components": "latest", - "core-js": "^3.0.0", - "es6-promise": "^4.1.0", - "html-webpack-plugin": "^3.2.0", - "resize-observer-polyfill": "^1.5.0", - "webpack": "^4.39.0", - "webpack-cli": "^3.3.0", - "webpack-dev-server": "^3.8.0" - } -} diff --git a/packages/carbon-web-components/examples/codesandbox/ie/sandbox.config.json b/packages/carbon-web-components/examples/codesandbox/ie/sandbox.config.json deleted file mode 100644 index a4df8557d7b..00000000000 --- a/packages/carbon-web-components/examples/codesandbox/ie/sandbox.config.json +++ /dev/null @@ -1,3 +0,0 @@ -{ - "template": "node" -} diff --git a/packages/carbon-web-components/examples/codesandbox/ie/src/index.html b/packages/carbon-web-components/examples/codesandbox/ie/src/index.html deleted file mode 100644 index a112b247973..00000000000 --- a/packages/carbon-web-components/examples/codesandbox/ie/src/index.html +++ /dev/null @@ -1,37 +0,0 @@ - - - - - carbon-web-components example with IE - - - - - -

Hello World! 👋

-
- - Option 1 - Option 2 - Option 3 - Option 4 - Option 5 - -
- - diff --git a/packages/carbon-web-components/examples/codesandbox/ie/src/index.js b/packages/carbon-web-components/examples/codesandbox/ie/src/index.js deleted file mode 100644 index ef117d13cb4..00000000000 --- a/packages/carbon-web-components/examples/codesandbox/ie/src/index.js +++ /dev/null @@ -1,12 +0,0 @@ -/** - * @license - * - * Copyright IBM Corp. 2019, 2022 - * - * 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 '@carbon/web-components/es/polyfills'; -import '@carbon/web-components/es/components/dropdown/dropdown'; -import '@carbon/web-components/es/components/dropdown/dropdown-item'; diff --git a/packages/carbon-web-components/examples/codesandbox/ie/webpack.config.js b/packages/carbon-web-components/examples/codesandbox/ie/webpack.config.js deleted file mode 100644 index bb9496cbd31..00000000000 --- a/packages/carbon-web-components/examples/codesandbox/ie/webpack.config.js +++ /dev/null @@ -1,58 +0,0 @@ -/** - * @license - * - * Copyright IBM Corp. 2019, 2022 - * - * This source code is licensed under the Apache-2.0 license found in the - * LICENSE file in the root directory of this source tree. - */ - -const path = require('path'); -const HtmlWebpackPlugin = require('html-webpack-plugin'); - -module.exports = { - entry: './src/index.js', - output: { - filename: 'bundle.js', - }, - module: { - rules: [ - { - test: /\.js$/, - include: [ - path.dirname(require.resolve('carbon-web-components/es')), - path.dirname(require.resolve('lit-html')), - path.dirname(require.resolve('lit-element')), - path.dirname(require.resolve('@webcomponents/custom-elements')), - // `ShadyCSS` NPM package is missing its entry point file - path.dirname(require.resolve('@webcomponents/shadycss/scoping-shim.min.js')), - path.dirname(require.resolve('@webcomponents/shadydom')), - ], - use: [ - { - loader: 'babel-loader', - options: { - presets: [ - [ - '@babel/preset-env', - { - modules: false, - targets: ['last 1 version', 'Firefox ESR', 'ie >= 11'], - }, - ], - ], - // `version: '7.3.0'` ensures `@babel/plugin-transform-runtime` is applied to decorator helper - plugins: [['@babel/plugin-transform-runtime', { version: '7.3.0' }]], - }, - }, - ], - }, - ], - }, - plugins: [new HtmlWebpackPlugin({ template: './src/index.html' })], - devServer: { - open: true, - contentBase: path.resolve(__dirname, 'src'), - publicPath: '/dist', - }, -}; diff --git a/packages/carbon-web-components/examples/codesandbox/next/package.json b/packages/carbon-web-components/examples/codesandbox/next/package.json index 2e2c7c9dbe3..a5509251eee 100644 --- a/packages/carbon-web-components/examples/codesandbox/next/package.json +++ b/packages/carbon-web-components/examples/codesandbox/next/package.json @@ -5,12 +5,12 @@ "description": "Sample project for getting started with the Web Components from the Carbon Design System with Next.js.", "license": "Apache-2", "scripts": { - "start": "echo 'Running Next in Node 12.16.3+. If you have such Node version in your system just `next` here will work.' && ./node_modules/node/node_modules/.bin/node ./node_modules/.bin/next" + "start": "echo 'Running Next in Node 18.15.0+. If you have such Node version in your system just `next` here will work.' && NODE_OPTIONS=--openssl-legacy-provider ./node_modules/node/node_modules/.bin/node ./node_modules/.bin/next" }, "dependencies": { "@carbon/web-components": "latest", "next": "^10.0.0", - "node": "^12.16.3", + "node": "^18.15.0", "react": "^17.0.0", "react-dom": "^17.0.0" } diff --git a/packages/carbon-web-components/examples/codesandbox/react-ssr/webpack.config.js b/packages/carbon-web-components/examples/codesandbox/react-ssr/webpack.config.js index 8b4d5b50ae2..d0e9c68931d 100644 --- a/packages/carbon-web-components/examples/codesandbox/react-ssr/webpack.config.js +++ b/packages/carbon-web-components/examples/codesandbox/react-ssr/webpack.config.js @@ -8,6 +8,10 @@ */ module.exports = { + // disable the host check on sandbox + devServer: { + disableHostCheck: true + }, module: { rules: [ { diff --git a/packages/carbon-web-components/examples/codesandbox/react/webpack.config.js b/packages/carbon-web-components/examples/codesandbox/react/webpack.config.js index ca7a49487c6..c515fb9acc8 100644 --- a/packages/carbon-web-components/examples/codesandbox/react/webpack.config.js +++ b/packages/carbon-web-components/examples/codesandbox/react/webpack.config.js @@ -10,6 +10,10 @@ const HtmlWebpackPlugin = require('html-webpack-plugin'); module.exports = { + // disable the host check on sandbox + devServer: { + disableHostCheck: true + }, module: { rules: [ { diff --git a/packages/carbon-web-components/examples/codesandbox/rtl/webpack.config.js b/packages/carbon-web-components/examples/codesandbox/rtl/webpack.config.js index 9af1894a55c..2187967fd8f 100644 --- a/packages/carbon-web-components/examples/codesandbox/rtl/webpack.config.js +++ b/packages/carbon-web-components/examples/codesandbox/rtl/webpack.config.js @@ -19,6 +19,7 @@ const devServer = { open: true, contentBase: path.resolve(__dirname, 'src'), publicPath: '/dist', + disableHostCheck: true, setup(app, server) { app.get('/', (req, res) => { const { fileSystem, waitUntilValid } = server.middleware; diff --git a/packages/carbon-web-components/examples/codesandbox/styling/custom-style/webpack.config.js b/packages/carbon-web-components/examples/codesandbox/styling/custom-style/webpack.config.js index e042df62109..90877d62670 100644 --- a/packages/carbon-web-components/examples/codesandbox/styling/custom-style/webpack.config.js +++ b/packages/carbon-web-components/examples/codesandbox/styling/custom-style/webpack.config.js @@ -10,6 +10,10 @@ const HtmlWebpackPlugin = require('html-webpack-plugin'); module.exports = { + // disable the host check on sandbox + devServer: { + disableHostCheck: true + }, plugins: [ new HtmlWebpackPlugin({ template: 'index.html', diff --git a/packages/carbon-web-components/examples/codesandbox/vue/package.json b/packages/carbon-web-components/examples/codesandbox/vue/package.json index 0f5f0ff2061..511220b15c9 100644 --- a/packages/carbon-web-components/examples/codesandbox/vue/package.json +++ b/packages/carbon-web-components/examples/codesandbox/vue/package.json @@ -21,8 +21,7 @@ }, "browserslist": [ "> 1%", - "last 2 versions", - "not ie <= 8" + "last 2 versions" ], "eslintConfig": { "parserOptions": { diff --git a/packages/carbon-web-components/package.json b/packages/carbon-web-components/package.json index e5bfdd4ce7f..2876fcac768 100644 --- a/packages/carbon-web-components/package.json +++ b/packages/carbon-web-components/package.json @@ -11,11 +11,12 @@ "main": "es/index.js", "module": "es/index.js", "exports": { - "./es/components-react/": { - "node": "./lib/components-react-node/", - "default": "./es/components-react/" + "./es/components-react/*": { + "node": "./lib/components-react-node/*", + "default": "./es/components-react/*" }, "./es/components/*": { + "node": "./lib/components/*", "default": "./es/components/*" }, "./es/globals/": { diff --git a/packages/carbon-web-components/src/components/combo-box/combo-box-story.ts b/packages/carbon-web-components/src/components/combo-box/combo-box-story.ts index ae6a88546ad..9560e430d1b 100644 --- a/packages/carbon-web-components/src/components/combo-box/combo-box-story.ts +++ b/packages/carbon-web-components/src/components/combo-box/combo-box-story.ts @@ -74,7 +74,7 @@ export const Default = () => { export const WithLayer = () => { return html` -
+
{ - const width = !name.toLowerCase().includes('layer') ? `width:400px` : ``; + const width = !name.toLowerCase().includes('layer') ? `width:300px` : ``; return html`
${story()}
`; }, ], diff --git a/packages/carbon-web-components/src/components/combo-box/combo-box.scss b/packages/carbon-web-components/src/components/combo-box/combo-box.scss index 3cbd7080a55..ee1fbba470e 100644 --- a/packages/carbon-web-components/src/components/combo-box/combo-box.scss +++ b/packages/carbon-web-components/src/components/combo-box/combo-box.scss @@ -11,13 +11,15 @@ $css--plex: true !default; @use '@carbon/styles/scss/spacing' as *; @use '@carbon/styles/scss/theme' as *; @use '@carbon/styles/scss/utilities' as *; -@use '@carbon/styles/scss/components/combo-box/combo-box'; +@use '@carbon/styles/scss/layout' as *; +@use '@carbon/styles/scss/components/combo-box' as *; @use '@carbon/styles/scss/components/form'; @use '@carbon/styles/scss/components/text-input/text-input'; @use '../dropdown/dropdown.scss'; :host(#{$prefix}-combo-box) { @extend :host(#{$prefix}-dropdown); + @include emit-layout-tokens(); outline: none; @@ -27,6 +29,10 @@ $css--plex: true !default; top: -100%; } + .#{$prefix}--list-box__field { + padding: 0; + } + .#{$prefix}--list-box__menu { outline: none; top: 100%; @@ -47,6 +53,12 @@ $css--plex: true !default; } } +:host(#{$prefix}-combo-box[invalid]) { + .#{$prefix}--form__helper-text { + color: $text-error; + } +} + :host(#{$prefix}-combo-box[read-only]) { .#{$prefix}--list-box__selection svg { fill: $icon-disabled; @@ -61,6 +73,10 @@ $css--plex: true !default; .#{$prefix}--list-box__menu-item__option { height: auto; } + + &:hover { + background-color: $layer-hover; + } } :host(#{$prefix}-combo-box-item[disabled]) { diff --git a/packages/carbon-web-components/src/components/tabs/tabs.scss b/packages/carbon-web-components/src/components/tabs/tabs.scss index a898f27505c..c5486eb64c4 100644 --- a/packages/carbon-web-components/src/components/tabs/tabs.scss +++ b/packages/carbon-web-components/src/components/tabs/tabs.scss @@ -134,7 +134,7 @@ $inset-transition: inset 110ms motion(standard, productive); height: $spacing-09; padding: $spacing-03 $spacing-05; // height - vertical padding - /* stylelint-disable declaration-property-unit-whitelist */ + /* stylelint-disable declaration-property-unit-allowed-list */ line-height: calc(#{$spacing-09} - (#{$spacing-03} * 2)); } } diff --git a/packages/eslint-config-ibmdotcom/CHANGELOG.md b/packages/eslint-config-ibmdotcom/CHANGELOG.md index c688eb1353c..fbbe81c69b2 100644 --- a/packages/eslint-config-ibmdotcom/CHANGELOG.md +++ b/packages/eslint-config-ibmdotcom/CHANGELOG.md @@ -3,6 +3,14 @@ All notable changes to this project will be documented in this file. See [Conventional Commits](https://conventionalcommits.org) for commit guidelines. +# [1.42.0-rc.0](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/compare/@carbon/eslint-config-ibmdotcom@1.41.0...@carbon/eslint-config-ibmdotcom@1.42.0-rc.0) (2023-09-06) + +**Note:** Version bump only for package @carbon/eslint-config-ibmdotcom + + + + + # [1.41.0](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/compare/@carbon/eslint-config-ibmdotcom@1.41.0-rc.2...@carbon/eslint-config-ibmdotcom@1.41.0) (2023-08-22) **Note:** Version bump only for package @carbon/eslint-config-ibmdotcom diff --git a/packages/eslint-plugin-ibmdotcom-import-rules/CHANGELOG.md b/packages/eslint-plugin-ibmdotcom-import-rules/CHANGELOG.md index 33427d59293..ebc54e882c3 100644 --- a/packages/eslint-plugin-ibmdotcom-import-rules/CHANGELOG.md +++ b/packages/eslint-plugin-ibmdotcom-import-rules/CHANGELOG.md @@ -3,6 +3,14 @@ All notable changes to this project will be documented in this file. See [Conventional Commits](https://conventionalcommits.org) for commit guidelines. +# [1.41.0-rc.0](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/compare/@carbon/eslint-plugin-ibmdotcom-import-rules@1.40.0...@carbon/eslint-plugin-ibmdotcom-import-rules@1.41.0-rc.0) (2023-09-06) + +**Note:** Version bump only for package @carbon/eslint-plugin-ibmdotcom-import-rules + + + + + # [1.40.0](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/compare/@carbon/eslint-plugin-ibmdotcom-import-rules@1.40.0-rc.2...@carbon/eslint-plugin-ibmdotcom-import-rules@1.40.0) (2023-08-22) **Note:** Version bump only for package @carbon/eslint-plugin-ibmdotcom-import-rules diff --git a/packages/eslint-plugin-react-prop-type-comments/CHANGELOG.md b/packages/eslint-plugin-react-prop-type-comments/CHANGELOG.md index cfd7afe4cb1..2bd96637233 100644 --- a/packages/eslint-plugin-react-prop-type-comments/CHANGELOG.md +++ b/packages/eslint-plugin-react-prop-type-comments/CHANGELOG.md @@ -3,6 +3,14 @@ All notable changes to this project will be documented in this file. See [Conventional Commits](https://conventionalcommits.org) for commit guidelines. +# [1.41.0-rc.0](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/compare/@carbon/eslint-plugin-react-prop-type-comments@1.40.0...@carbon/eslint-plugin-react-prop-type-comments@1.41.0-rc.0) (2023-09-06) + +**Note:** Version bump only for package @carbon/eslint-plugin-react-prop-type-comments + + + + + # [1.40.0](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/compare/@carbon/eslint-plugin-react-prop-type-comments@1.40.0-rc.2...@carbon/eslint-plugin-react-prop-type-comments@1.40.0) (2023-08-22) **Note:** Version bump only for package @carbon/eslint-plugin-react-prop-type-comments diff --git a/packages/services-store/CHANGELOG.md b/packages/services-store/CHANGELOG.md index ca4e26ac1ea..7e8a96c8585 100644 --- a/packages/services-store/CHANGELOG.md +++ b/packages/services-store/CHANGELOG.md @@ -3,6 +3,14 @@ All notable changes to this project will be documented in this file. See [Conventional Commits](https://conventionalcommits.org) for commit guidelines. +# [1.51.0-rc.0](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/compare/@carbon/ibmdotcom-services-store@1.50.0...@carbon/ibmdotcom-services-store@1.51.0-rc.0) (2023-09-06) + +**Note:** Version bump only for package @carbon/ibmdotcom-services-store + + + + + # [1.50.0](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/compare/@carbon/ibmdotcom-services-store@1.50.0-rc.2...@carbon/ibmdotcom-services-store@1.50.0) (2023-08-22) **Note:** Version bump only for package @carbon/ibmdotcom-services-store diff --git a/packages/services/CHANGELOG.md b/packages/services/CHANGELOG.md index 70f98766701..604e38651cd 100644 --- a/packages/services/CHANGELOG.md +++ b/packages/services/CHANGELOG.md @@ -3,6 +3,14 @@ All notable changes to this project will be documented in this file. See [Conventional Commits](https://conventionalcommits.org) for commit guidelines. +# [1.51.0-rc.0](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/compare/@carbon/ibmdotcom-services@1.50.0...@carbon/ibmdotcom-services@1.51.0-rc.0) (2023-09-06) + +**Note:** Version bump only for package @carbon/ibmdotcom-services + + + + + # [1.50.0](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/compare/@carbon/ibmdotcom-services@1.50.0-rc.2...@carbon/ibmdotcom-services@1.50.0) (2023-08-22) **Note:** Version bump only for package @carbon/ibmdotcom-services diff --git a/packages/services/src/services/Locale/Locale.js b/packages/services/src/services/Locale/Locale.js index 91b54786606..76172a9e829 100644 --- a/packages/services/src/services/Locale/Locale.js +++ b/packages/services/src/services/Locale/Locale.js @@ -14,8 +14,10 @@ import root from 'window-or-global'; * @constant {string | string} Host for the Locale API call * @private */ -const _host = process && process.env.TRANSLATION_HOST; -('https://1.www.s81c.com'); +const _host = + (process && + (process.env.REACT_APP_TRANSLATION_HOST || process.env.TRANSLATION_HOST)) || + 'https://1.www.s81c.com'; /** * Sets the default location if nothing is returned diff --git a/packages/services/src/services/Translation/__tests__/Translation.test.js b/packages/services/src/services/Translation/__tests__/Translation.test.js index 16603b729bc..0bb5df4c66a 100755 --- a/packages/services/src/services/Translation/__tests__/Translation.test.js +++ b/packages/services/src/services/Translation/__tests__/Translation.test.js @@ -153,7 +153,7 @@ describe('TranslationAPI', () => { href: 'https://www.loremipsum.com', }; - const expectedSessionKey = 'cds-translation-us-en'; + const expectedSessionKey = 'c4d-translation-us-en'; await TranslationAPI.getTranslation({ lc: 'en', @@ -167,7 +167,7 @@ describe('TranslationAPI', () => { it('should return a json with a recent timestamp', async () => { // using very old cached session sessionStorageMock.setItem( - 'cds-translation-us-en', + 'c4d-translation-us-en', JSON.stringify(Object.assign(oldSession, { CACHE: true })) ); @@ -177,7 +177,7 @@ describe('TranslationAPI', () => { }); const newSession = JSON.parse( - sessionStorageMock.getItem('cds-translation-us-en') + sessionStorageMock.getItem('c4d-translation-us-en') ); // fresh data would lack this property diff --git a/packages/storybook-addon-theme/CHANGELOG.md b/packages/storybook-addon-theme/CHANGELOG.md index f5a0fbe9e1c..c08cf117b75 100644 --- a/packages/storybook-addon-theme/CHANGELOG.md +++ b/packages/storybook-addon-theme/CHANGELOG.md @@ -3,6 +3,14 @@ All notable changes to this project will be documented in this file. See [Conventional Commits](https://conventionalcommits.org) for commit guidelines. +# [1.42.0-rc.0](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/compare/@carbon/storybook-addon-theme@1.41.0...@carbon/storybook-addon-theme@1.42.0-rc.0) (2023-09-06) + +**Note:** Version bump only for package @carbon/storybook-addon-theme + + + + + # [1.41.0](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/compare/@carbon/storybook-addon-theme@1.41.0-rc.2...@carbon/storybook-addon-theme@1.41.0) (2023-08-22) **Note:** Version bump only for package @carbon/storybook-addon-theme diff --git a/packages/stylelint-config-ibmdotcom/CHANGELOG.md b/packages/stylelint-config-ibmdotcom/CHANGELOG.md index 88952aaa759..d8d66b890ca 100644 --- a/packages/stylelint-config-ibmdotcom/CHANGELOG.md +++ b/packages/stylelint-config-ibmdotcom/CHANGELOG.md @@ -3,6 +3,14 @@ All notable changes to this project will be documented in this file. See [Conventional Commits](https://conventionalcommits.org) for commit guidelines. +# [1.41.0-rc.0](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/compare/@carbon/stylelint-config-ibmdotcom@1.40.0...@carbon/stylelint-config-ibmdotcom@1.41.0-rc.0) (2023-09-06) + +**Note:** Version bump only for package @carbon/stylelint-config-ibmdotcom + + + + + # [1.40.0](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/compare/@carbon/stylelint-config-ibmdotcom@1.40.0-rc.2...@carbon/stylelint-config-ibmdotcom@1.40.0) (2023-08-22) **Note:** Version bump only for package @carbon/stylelint-config-ibmdotcom diff --git a/packages/stylelint-config-ibmdotcom/rules/limit-language-features.js b/packages/stylelint-config-ibmdotcom/rules/limit-language-features.js index 3a5f63e78dd..4a891accb5e 100644 --- a/packages/stylelint-config-ibmdotcom/rules/limit-language-features.js +++ b/packages/stylelint-config-ibmdotcom/rules/limit-language-features.js @@ -74,14 +74,14 @@ module.exports = { 'declaration-property-unit-blacklist': OFF, // Specify a whitelist of allowed property and unit pairs within // declarations. - 'declaration-property-unit-whitelist': { + 'declaration-property-unit-allowed-list': { 'font-size': ['rem', '%', 'vw'], '/^animation/': ['ms'], 'line-height': ['rem'], }, // Specify a blacklist of disallowed property and value pairs within // declarations. - 'declaration-property-value-blacklist': { + 'declaration-property-value-disallowed-list': { // Disallow unset as it is unsupported in IE11 '/.*/': ['unset'], }, diff --git a/packages/styles/CHANGELOG.md b/packages/styles/CHANGELOG.md index 11c8915aea1..57db9777f09 100644 --- a/packages/styles/CHANGELOG.md +++ b/packages/styles/CHANGELOG.md @@ -3,6 +3,18 @@ All notable changes to this project will be documented in this file. See [Conventional Commits](https://conventionalcommits.org) for commit guidelines. +# [1.51.0-rc.0](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/compare/@carbon/ibmdotcom-styles@1.50.0...@carbon/ibmdotcom-styles@1.51.0-rc.0) (2023-09-06) + + +### Bug Fixes + +* **cta-card:** video heading style fix ([#10804](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/issues/10804)) ([f2ea944](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/commit/f2ea944fc632c99f1c0283fbc37a2825f9fc18fb)) +* **tabs-extended:** add hyphens auto to handle word breaks ([#10849](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/issues/10849)) ([09c9468](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/commit/09c946894bd1a33cb32628379daf031fe91ee11b)) + + + + + # [1.50.0](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/compare/@carbon/ibmdotcom-styles@1.50.0-rc.2...@carbon/ibmdotcom-styles@1.50.0) (2023-08-22) **Note:** Version bump only for package @carbon/ibmdotcom-styles diff --git a/packages/styles/scss/components/filter-panel/_filter-panel.scss b/packages/styles/scss/components/filter-panel/_filter-panel.scss index e466549b382..906f6628788 100644 --- a/packages/styles/scss/components/filter-panel/_filter-panel.scss +++ b/packages/styles/scss/components/filter-panel/_filter-panel.scss @@ -138,7 +138,8 @@ &:not([has-selections]) { .#{$prefix}--clear { - display: none; + color: $button-disabled; + cursor: not-allowed; } } @include breakpoint-down(lg) { diff --git a/packages/styles/scss/components/leadspace-block/_leadspace-block.scss b/packages/styles/scss/components/leadspace-block/_leadspace-block.scss index ebe3f10d27b..9f8c8edef03 100644 --- a/packages/styles/scss/components/leadspace-block/_leadspace-block.scss +++ b/packages/styles/scss/components/leadspace-block/_leadspace-block.scss @@ -78,7 +78,7 @@ /* stylelint-disable declaration-no-important */ ::slotted(h1) { - all: unset !important; /* stylelint-disable-line declaration-property-value-blacklist */ + all: unset !important; /* stylelint-disable-line declaration-property-value-disallowed-list */ } /* stylelint-enable declaration-no-important */ diff --git a/packages/styles/scss/components/leadspace-with-search/_leadspace-with-search.scss b/packages/styles/scss/components/leadspace-with-search/_leadspace-with-search.scss index b744e0d4d67..c301a1a9df5 100644 --- a/packages/styles/scss/components/leadspace-with-search/_leadspace-with-search.scss +++ b/packages/styles/scss/components/leadspace-with-search/_leadspace-with-search.scss @@ -345,7 +345,7 @@ /* stylelint-disable declaration-no-important */ ::slotted(h1) { - all: unset !important; /* stylelint-disable-line declaration-property-value-blacklist */ + all: unset !important; /* stylelint-disable-line declaration-property-value-disallowed-list */ } /* stylelint-enable declaration-no-important */ } diff --git a/packages/styles/scss/components/leadspace/_leadspace.scss b/packages/styles/scss/components/leadspace/_leadspace.scss index c0278fd1339..2a42db61c83 100644 --- a/packages/styles/scss/components/leadspace/_leadspace.scss +++ b/packages/styles/scss/components/leadspace/_leadspace.scss @@ -477,7 +477,7 @@ $btn-min-width: 26; /* stylelint-disable declaration-no-important */ ::slotted(h1) { - all: unset !important; /* stylelint-disable-line declaration-property-value-blacklist */ + all: unset !important; /* stylelint-disable-line declaration-property-value-disallowed-list */ } /* stylelint-enable declaration-no-important */ } diff --git a/packages/styles/scss/components/tabs-extended/_tabs-extended.scss b/packages/styles/scss/components/tabs-extended/_tabs-extended.scss index 6b66774eec9..a75fc8bf874 100644 --- a/packages/styles/scss/components/tabs-extended/_tabs-extended.scss +++ b/packages/styles/scss/components/tabs-extended/_tabs-extended.scss @@ -119,7 +119,7 @@ overflow: hidden; height: 100%; line-height: 1.375rem; - word-break: break-word; + hyphens: auto; @include type-style('body-compact-02'); } @@ -280,3 +280,8 @@ button.#{$prefix}--tabs__nav-link { button.#{$prefix}--tabs__nav-link:active { color: $text-secondary; } +/* stylelint-enable selector-pseudo-class-parentheses-space-inside */ + +.#{$prefix}--accordion__title { + hyphens: auto; +} diff --git a/packages/styles/scss/themes/expressive/components/_tag.scss b/packages/styles/scss/themes/expressive/components/_tag.scss index 7c1a9649eb3..039f955d9f1 100644 --- a/packages/styles/scss/themes/expressive/components/_tag.scss +++ b/packages/styles/scss/themes/expressive/components/_tag.scss @@ -18,7 +18,7 @@ .#{$prefix}--tag { @include type-style('label-01'); - /* stylelint-disable-next-line declaration-property-unit-whitelist */ + /* stylelint-disable-next-line declaration-property-unit-allowed-list */ line-height: rem(20px); height: $spacing-07; /* carbon--container-02 */ diff --git a/packages/utilities/CHANGELOG.md b/packages/utilities/CHANGELOG.md index 428b5fc34b6..7c3e3865989 100644 --- a/packages/utilities/CHANGELOG.md +++ b/packages/utilities/CHANGELOG.md @@ -3,6 +3,14 @@ All notable changes to this project will be documented in this file. See [Conventional Commits](https://conventionalcommits.org) for commit guidelines. +# [1.51.0-rc.0](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/compare/@carbon/ibmdotcom-utilities@1.50.0...@carbon/ibmdotcom-utilities@1.51.0-rc.0) (2023-09-06) + +**Note:** Version bump only for package @carbon/ibmdotcom-utilities + + + + + # [1.50.0](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/compare/@carbon/ibmdotcom-utilities@1.50.0-rc.2...@carbon/ibmdotcom-utilities@1.50.0) (2023-08-22) **Note:** Version bump only for package @carbon/ibmdotcom-utilities diff --git a/packages/web-components/CHANGELOG.md b/packages/web-components/CHANGELOG.md index a9bf5187562..82dd56c0054 100644 --- a/packages/web-components/CHANGELOG.md +++ b/packages/web-components/CHANGELOG.md @@ -3,6 +3,18 @@ All notable changes to this project will be documented in this file. See [Conventional Commits](https://conventionalcommits.org) for commit guidelines. +# [1.36.0-rc.0](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/compare/@carbon/ibmdotcom-web-components@1.35.0...@carbon/ibmdotcom-web-components@1.36.0-rc.0) (2023-09-06) + + +### Bug Fixes + +* **docs:** add documentation regarding the carbonElement decorator ([#10871](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/issues/10871)) ([883a7e5](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/commit/883a7e55873b81b1a8c7f73c675f339733f8703c)), closes [#10278](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/issues/10278) +* **lightbox-video-player:** use more reliable reference to video player ([#10878](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/issues/10878)) ([29434ed](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/commit/29434ed90536fefe8473059332f5efa2e573ec0b)) + + + + + # [1.35.0](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/compare/@carbon/ibmdotcom-web-components@1.35.0-rc.2...@carbon/ibmdotcom-web-components@1.35.0) (2023-08-22) **Note:** Version bump only for package @carbon/ibmdotcom-web-components diff --git a/packages/web-components/docs/coding-conventions.md b/packages/web-components/docs/coding-conventions.md index a4968733a9a..2b1e19f60d4 100644 --- a/packages/web-components/docs/coding-conventions.md +++ b/packages/web-components/docs/coding-conventions.md @@ -29,8 +29,10 @@ - [Null checks](#null-checks) - [Updating view upon change in `private`/`protected` properties](#updating-view-upon-change-in-privateprotected-properties) - [Avoiding global `document`/`window` reference](#avoiding-global-documentwindow-reference) -- [Custom element registration](#custom-element-registration) -- [Custom element itself as an eleement](#custom-element-itself-as-an-eleement) +- [Custom Elements](#custom-elements) + - [@carbonElement Decorator](#carbon-element-decorator) + - [Custom element registration](#custom-element-registration) + - [Custom element itself as an element](#custom-element-itself-as-an-element) - [Propagating misc attributes from shadow host to an element in shadow DOM](#propagating-misc-attributes-from-shadow-host-to-an-element-in-shadow-dom) - [Private properties](#private-properties) - [Preferring class inheritance pattern over React composition pattern](#preferring-class-inheritance-pattern-over-react-composition-pattern) @@ -260,7 +262,7 @@ A component variant with different options can be created by creating a derived | CSS selectors/classes used in imperative DOM API calls (Doing so allows overriding `.render()` method) | `selectorNonSelectedItem` | An exception is where `lit-element`'s `@query` decorator is applicable | | [Custom event](#custom-events) names | `eventBeforeSelect` | | -#### Areas where component optinos are _not_ applied +#### Areas where component options are _not_ applied - CSS classes used in template (Should be done by overriding `.render()` method) @@ -437,7 +439,31 @@ To cause re-rendering upon change in `private`/`protected` properties, use `stat Global `document`/`window` can be different from the ones associated with custom element instance, when the custom element is transported to a different frame e.g. with `document.importNode()`. Though such cases are rare, the codebase avoids global `document`/`window` reference to keep ourselves in a good DOM citizen. We use [`element.ownerDocument`](https://developer.mozilla.org/en-US/docs/Web/API/Node/ownerDocument)/[`.element.ownerDocument.defaultView`](https://developer.mozilla.org/en-US/docs/Web/API/Document/defaultView), respectively, instead. -## Custom element registration +## Custom Elements +### @carbonElement Decorator + +We use a custom [`@carbonElement`](../../carbon-web-components/src/globals/decorators/carbon-element.ts) decorator instead of Lit's [`@customElement`](https://lit.dev/docs/v1/api/lit-element/decorators/#customElement), which doesn't provide a way to check if an element has already been defined in the window's `CustomElementRegistry`. If an attempt is made to redefine an element that has already been registered, an error will occur and any remaining code will fail to execute. + +`@carbonElement` is identical to `@customElement` with the exception that it gracefully handles any failures from duplicate registrations and continues executing the remainder of the running script. + +#### Usage + +1. Use this project's `carbon-element.ts` file to supply the decorator +2. Alias `@carbonElement` to `@customElement` + +The second item is **required** for proper creation of the react-wrapped components + +Example: + +```typescript +import { html, property, LitElement } from 'lit-element'; +import { carbonElement as customElement } from '../../globals/decorators/carbon-element'; + +@customElement(`${prefix}-accordion-item`) +class BXAccordionItem extends FocusMixin(LitElement) { + ... +``` +### Custom element registration This library registers custom elements to global `window` automatically upon importing the corresponding modules. It may not be desirable in two scenarios: @@ -445,7 +471,7 @@ It may not be desirable in two scenarios: - One is when consumer wants to customize our custom element's behavior before it's registered. In such case, consumer can create a derived class and register it with a different custom element name. - Another, though the use case is rare, is using our custom element in a different realm. In such case, consumer can re-register the custom element in the realm. -## Custom element itself as an eleement +### Custom element itself as an element In Custom Elements world, the custom element itself (the host of shadow DOM) itself is an element. diff --git a/packages/web-components/src/components/card-group/__stories__/card-group.stories.react.tsx b/packages/web-components/src/components/card-group/__stories__/card-group.stories.react.tsx index c08afd0331a..78950e5b9b7 100644 --- a/packages/web-components/src/components/card-group/__stories__/card-group.stories.react.tsx +++ b/packages/web-components/src/components/card-group/__stories__/card-group.stories.react.tsx @@ -1,7 +1,7 @@ /** * @license * - * Copyright IBM Corp. 2020, 2022 + * Copyright IBM Corp. 2020, 2023 * * This source code is licensed under the Apache-2.0 license found in the * LICENSE file in the root directory of this source tree. @@ -113,22 +113,26 @@ const cardsDiffLengthPhrase = ( ); - const videoCardGroupItem = ( + const videoCardGroupItem = (videoId = '1_9h94wo6b') => ( Topic {tagGroup ? tagGroupContent : ''} ); + const demoVideoIds = ['1_9h94wo6b', '0_ibuqxqbe', '1_6b6qjovy']; + count = count > 3 ? 0 : count + 1; - return media && index % 2 ? videoCardGroupItem : defaultCardGroupItem; + return media && index % 2 + ? videoCardGroupItem(demoVideoIds[index % 3]) + : defaultCardGroupItem; }; const longHeadingCardGroupItem = ( @@ -212,7 +216,7 @@ const cardInCardItems = (i, tagGroup, media, gridMode) => { ) : ( Topic {tagGroup ? tagGroupContent : ''} diff --git a/packages/web-components/src/components/card-group/__stories__/card-group.stories.ts b/packages/web-components/src/components/card-group/__stories__/card-group.stories.ts index e3f789b5639..2770d9abe56 100644 --- a/packages/web-components/src/components/card-group/__stories__/card-group.stories.ts +++ b/packages/web-components/src/components/card-group/__stories__/card-group.stories.ts @@ -104,10 +104,10 @@ const cardsDiffLengthPhrase = ( `; - const videoCardGroupItem = html` + const videoCardGroupItem = (videoId = '1_9h94wo6b') => html` Topic @@ -117,8 +117,12 @@ const cardsDiffLengthPhrase = ( `; + const demoVideoIds = ['1_9h94wo6b', '0_ibuqxqbe', '1_6b6qjovy']; + count = count > 3 ? 0 : count + 1; - return media && index % 2 ? videoCardGroupItem : defaultCardGroupItem; + return media && index % 2 + ? videoCardGroupItem(demoVideoIds[index % 3]) + : defaultCardGroupItem; }; const longHeadingCardGroupItem = ( diff --git a/packages/web-components/src/components/expressive-modal/expressive-modal.ts b/packages/web-components/src/components/expressive-modal/expressive-modal.ts index 52d76a60379..8aa14db2eef 100644 --- a/packages/web-components/src/components/expressive-modal/expressive-modal.ts +++ b/packages/web-components/src/components/expressive-modal/expressive-modal.ts @@ -32,52 +32,6 @@ const FOLLOWING = const WITHIN = Node.DOCUMENT_POSITION_CONTAINED_BY; /* eslint-enable no-bitwise */ -/** - * Tries to focus on the given elements and bails out if one of the is successful. - * - * @param elems The elements. - * @param reverse `true` to go through the list in reverse order. - * @param fallback element to focus on if none - * @returns `true` if one of the attempts is successful, `false` otherwise. - */ -function tryFocusElems( - elems: NodeListOf | [HTMLElement], - reverse: boolean = false, - fallback: HTMLElement | null = null -) { - if (!reverse) { - for (let i = 0; i < elems.length; ++i) { - const elem = elems[i]; - if ( - elem.offsetWidth || - elem.offsetHeight || - elem.getClientRects().length - ) { - elem.focus(); - if ((elem.getRootNode() as Document).activeElement === elem) { - return true; - } - } - } - } else { - for (let i = elems.length - 1; i >= 0; --i) { - const elem = elems[i]; - if ( - elem.offsetWidth || - elem.offsetHeight || - elem.getClientRects().length - ) { - elem.focus(); - if ((elem.getRootNode() as Document).activeElement === elem) { - return true; - } - } - } - } - fallback?.focus(); - return false; -} - // TODO: Wait for `.d.ts` update to support `ResizeObserver` // @ts-ignore const onResize: ResizeObserverCallback = ([entry]) => { @@ -161,7 +115,7 @@ class C4DExpressiveModal extends StableSelectorMixin( ]; } - private get _focusableElements() { + get _focusableElements() { const { hasFocusableElements } = this; const focusableElements: [HTMLElement?] = []; @@ -232,7 +186,8 @@ class C4DExpressiveModal extends StableSelectorMixin( * * @param event The event. */ - private _handleFocusIn = ({ target, relatedTarget }) => { + protected _handleFocusIn = ({ target, relatedTarget }) => { + const { tryFocusElems } = this.constructor as typeof C4DExpressiveModal; let focusFromWithin = false; if (target && relatedTarget) { const comparedToThis = this.compareDocumentPosition(relatedTarget); @@ -274,6 +229,7 @@ class C4DExpressiveModal extends StableSelectorMixin( // If no target/relatedTarget, focus has entered/left the window. Do nothing. if (!target || !relatedTarget) return; + const { tryFocusElems } = this.constructor as typeof C4DExpressiveModal; const { _focusableElements: focusableElements } = this; // See if element gaining focus is inside `this` or `this.shadowRoot`. @@ -504,7 +460,7 @@ class C4DExpressiveModal extends StableSelectorMixin( async updated(changedProperties) { const { _focusableElements: focusableElements, size } = this; - const { selectorCloseButton } = this + const { selectorCloseButton, tryFocusElems } = this .constructor as typeof C4DExpressiveModal; if (changedProperties.has('size')) { @@ -591,6 +547,52 @@ class C4DExpressiveModal extends StableSelectorMixin( return `${c4dPrefix}-expressive-modal-closed`; } + /** + * Tries to focus on the given elements and bails out if one of the is successful. + * + * @param elems The elements. + * @param reverse `true` to go through the list in reverse order. + * @param fallback element to focus on if none + * @returns `true` if one of the attempts is successful, `false` otherwise. + */ + static tryFocusElems( + elems: NodeListOf | [HTMLElement], + reverse: boolean = false, + fallback: HTMLElement | null = null + ) { + if (!reverse) { + for (let i = 0; i < elems.length; ++i) { + const elem = elems[i]; + if ( + elem.offsetWidth || + elem.offsetHeight || + elem.getClientRects().length + ) { + elem.focus(); + if ((elem.getRootNode() as Document).activeElement === elem) { + return true; + } + } + } + } else { + for (let i = elems.length - 1; i >= 0; --i) { + const elem = elems[i]; + if ( + elem.offsetWidth || + elem.offsetHeight || + elem.getClientRects().length + ) { + elem.focus(); + if ((elem.getRootNode() as Document).activeElement === elem) { + return true; + } + } + } + } + fallback?.focus(); + return false; + } + static styles = styles; // `styles` here is a `CSSResult` generated by custom WebPack loader } diff --git a/packages/web-components/src/components/filter-panel/__stories__/filter-panel.stories.react.tsx b/packages/web-components/src/components/filter-panel/__stories__/filter-panel.stories.react.tsx index 06012837c5a..5d2c416b64d 100644 --- a/packages/web-components/src/components/filter-panel/__stories__/filter-panel.stories.react.tsx +++ b/packages/web-components/src/components/filter-panel/__stories__/filter-panel.stories.react.tsx @@ -1,7 +1,7 @@ /** * @license * - * Copyright IBM Corp. 2020, 2022 + * Copyright IBM Corp. 2020, 2023 * * This source code is licensed under the Apache-2.0 license found in the * LICENSE file in the root directory of this source tree. @@ -40,11 +40,13 @@ export const Default = (args) => { - API - + + API + + Application - + Data Set diff --git a/packages/web-components/src/components/filter-panel/__stories__/filter-panel.stories.ts b/packages/web-components/src/components/filter-panel/__stories__/filter-panel.stories.ts index 900c6ae3c8b..68ebe8f1dd8 100644 --- a/packages/web-components/src/components/filter-panel/__stories__/filter-panel.stories.ts +++ b/packages/web-components/src/components/filter-panel/__stories__/filter-panel.stories.ts @@ -15,6 +15,9 @@ import readme from './README.stories.mdx'; export const Default = (args) => { const { heading, filterCutoff, maxFilters, viewAllText, gridKnobs } = args?.FilterPanel ?? {}; + const selectedItems = args?.FilterPanel?.selectedItems + ? parseInt(args?.FilterPanel?.selectedItems) + : 0; const filterPanelHeading = document.querySelector('c4d-filter-panel-heading'); if (filterPanelHeading) { @@ -35,28 +38,44 @@ export const Default = (args) => { filter-cutoff="${filterCutoff}" max-filters="${maxFilters}" view-all-text="${viewAllText}"> - = 1} + value="API" >API - = 2} + value="Application" >Application - = 3} + value="Data Set" >Data Set - = 4} + value="Free Trial" >Free Trial - = 5} + value="Hardware" >Hardware - = 6} + value="Service" >Service - = 7} + value="Service Assets" >Service Assets - = 8} + value="Software" >Software @@ -124,10 +143,14 @@ export const Default = (args) => { title="Supply chain management"> - = 9} + value="On-premises" >On-premises - = 10} + value="SaaS" >SaaS @@ -161,6 +184,11 @@ export default { ['3 columns', '4 columns'], '4 columns' ), + selectedItems: select( + 'Number of selected items', + ['0', '1', '2', '3', '4', '5', '6', '7', '8', '9', '10'], + '2' + ), }), }, propsSet: { diff --git a/packages/web-components/src/components/filter-panel/filter-panel-composite.ts b/packages/web-components/src/components/filter-panel/filter-panel-composite.ts index aab65fa64a4..facf7e407de 100644 --- a/packages/web-components/src/components/filter-panel/filter-panel-composite.ts +++ b/packages/web-components/src/components/filter-panel/filter-panel-composite.ts @@ -60,15 +60,6 @@ class C4DFilterPanelComposite extends HostListenerMixin( if (!value) { this._selectedValues = this._selectedValues.filter((e) => e !== value); - - if (!this._selectedValues.length) { - this.shadowRoot!.querySelector( - `${c4dPrefix}-filter-panel-modal` - )?.removeAttribute('has-selections'); - this.shadowRoot!.querySelector( - `${c4dPrefix}-filter-panel` - )?.removeAttribute('has-selections'); - } return; } @@ -81,16 +72,6 @@ class C4DFilterPanelComposite extends HostListenerMixin( (e) => e !== lastValue ); } - // enables the clear button - if (this._selectedValues) { - this.shadowRoot!.querySelector( - `${c4dPrefix}-filter-panel-modal` - )?.setAttribute('has-selections', ''); - this.shadowRoot!.querySelector(`${c4dPrefix}-filter-panel`)?.setAttribute( - 'has-selections', - '' - ); - } this.renderStatus(); }; @@ -133,24 +114,6 @@ class C4DFilterPanelComposite extends HostListenerMixin( this._selectedValues = this._selectedValues.filter((e) => e !== value); } - // shows clear button depending on the list's length - if (!this._selectedValues.length) { - this.shadowRoot!.querySelector( - `${c4dPrefix}-filter-panel-modal` - )?.removeAttribute('has-selections'); - this.shadowRoot!.querySelector( - `${c4dPrefix}-filter-panel` - )?.removeAttribute('has-selections'); - } else { - this.shadowRoot!.querySelector( - `${c4dPrefix}-filter-panel-modal` - )?.setAttribute('has-selections', ''); - this.shadowRoot!.querySelector(`${c4dPrefix}-filter-panel`)?.setAttribute( - 'has-selections', - '' - ); - } - this.renderStatus(); }; @@ -228,26 +191,6 @@ class C4DFilterPanelComposite extends HostListenerMixin( (e) => e !== headerValue ); } - - if (!this._selectedValues.length) { - this.shadowRoot!.querySelector( - `${c4dPrefix}-filter-panel-modal` - )?.removeAttribute('has-selections'); - this.shadowRoot!.querySelector( - `${c4dPrefix}-filter-panel` - )?.removeAttribute('has-selections'); - } - - // enables the clear button - if (this._selectedValues.length > 0) { - this.shadowRoot!.querySelector( - `${c4dPrefix}-filter-panel-modal` - )?.setAttribute('has-selections', ''); - this.shadowRoot!.querySelector(`${c4dPrefix}-filter-panel`)?.setAttribute( - 'has-selections', - '' - ); - } this.renderStatus(); }; @@ -311,14 +254,6 @@ class C4DFilterPanelComposite extends HostListenerMixin( e.removeAttribute('is-open'); }); - // disables the button - this.shadowRoot!.querySelector( - `${c4dPrefix}-filter-panel-modal` - )?.removeAttribute('has-selections'); - this.shadowRoot!.querySelector( - `${c4dPrefix}-filter-panel` - )?.removeAttribute('has-selections'); - this.renderStatus(); }; @@ -412,11 +347,27 @@ class C4DFilterPanelComposite extends HostListenerMixin( * @param event The event. */ protected _handleSlotChange({ target }: Event) { - this._contents = (target as HTMLSlotElement) + const contents = (this._contents = (target as HTMLSlotElement) .assignedNodes() .filter( (node) => node.nodeType !== Node.TEXT_NODE || node!.textContent!.trim() + )); + // Calculate initial this._selectedValues. Look at the first node, which is + // expected to be . + if (contents[0] instanceof Element) { + const items = Array.from( + contents[0].querySelectorAll( + `${c4dPrefix}-filter-panel-checkbox[checked], + ${c4dPrefix}-filter-panel-input-select[selected], + ${c4dPrefix}-filter-panel-input-select-item[selected]` + ) ); + this._selectedValues = items + .map((item) => { + return item.getAttribute('value') ?? ''; + }) + .filter((item) => !!item); + } } protected renderStatus() { @@ -443,12 +394,13 @@ class C4DFilterPanelComposite extends HostListenerMixin( /** * Renders original content into the modal and listens for changes to this - * content to then be stored in `this._content`. + * content to then be stored in `this._title` and `this._content`. */ protected _renderModal = (): TemplateResult => html` + heading="${this._filterButtonTitle}" + ?has-selections="${this._selectedValues.length}"> @@ -458,7 +410,9 @@ class C4DFilterPanelComposite extends HostListenerMixin( * Renders copies of slotted elements into the desktop presentation. */ protected _renderDesktop = (): TemplateResult => html` - + ${this._title.map((e) => { return html` ${unsafeHTML((e as HTMLElement).outerHTML)} `; })} diff --git a/packages/web-components/src/components/filter-panel/filter-panel-input-select.ts b/packages/web-components/src/components/filter-panel/filter-panel-input-select.ts index 15a892055fc..7d53f81efba 100644 --- a/packages/web-components/src/components/filter-panel/filter-panel-input-select.ts +++ b/packages/web-components/src/components/filter-panel/filter-panel-input-select.ts @@ -34,7 +34,7 @@ class C4DFilterPanelInputSelect extends FocusMixin( /** * Sets the input selected dropdown to closed */ - @property({ attribute: 'is-open', type: Boolean }) + @property({ attribute: 'is-open', type: Boolean, reflect: true }) isOpen = false; /** @@ -46,7 +46,7 @@ class C4DFilterPanelInputSelect extends FocusMixin( /** * sets the selected value attribute to selected */ - @property({ attribute: 'selected', type: Boolean }) + @property({ attribute: 'selected', type: Boolean, reflect: true }) selected: boolean = false; /** diff --git a/packages/web-components/src/components/filter-panel/filter-panel-modal.ts b/packages/web-components/src/components/filter-panel/filter-panel-modal.ts index 5bacd995b68..7f40217843c 100644 --- a/packages/web-components/src/components/filter-panel/filter-panel-modal.ts +++ b/packages/web-components/src/components/filter-panel/filter-panel-modal.ts @@ -13,7 +13,7 @@ import HostListenerMixin from '../../internal/vendor/@carbon/web-components/glob import './filter-group'; import './filter-modal-button'; import './filter-modal-heading'; -import CDSModal from '../../internal/vendor/@carbon/web-components/components/modal/modal.js'; +import C4DExpressiveModal from '../expressive-modal/expressive-modal'; import settings from '../../internal/vendor/@carbon/ibmdotcom-utilities/utilities/settings/settings'; import './filter-modal-footer'; import StableSelectorMixin from '../../globals/mixins/stable-selector'; @@ -32,7 +32,7 @@ const { prefix, stablePrefix: c4dPrefix } = settings; */ @customElement(`${c4dPrefix}-filter-panel-modal`) class C4DFilterPanelModal extends HostListenerMixin( - StableSelectorMixin(CDSModal) + StableSelectorMixin(C4DExpressiveModal) ) { /** * Renders the selected values. @@ -90,7 +90,7 @@ class C4DFilterPanelModal extends HostListenerMixin( if ( this.dispatchEvent( new CustomEvent( - (this.constructor as typeof CDSModal).eventBeforeClose, + (this.constructor as typeof C4DExpressiveModal).eventBeforeClose, init ) ) @@ -98,7 +98,7 @@ class C4DFilterPanelModal extends HostListenerMixin( this.open = false; this.dispatchEvent( new CustomEvent( - (this.constructor as typeof CDSModal).eventClose, + (this.constructor as typeof C4DExpressiveModal).eventClose, init ) ); @@ -107,13 +107,16 @@ class C4DFilterPanelModal extends HostListenerMixin( } render() { + const { _handleFocusIn: handleFocusIn } = this; + return html` - -
+ @focusin="${handleFocusIn}"> + START + +
@@ -134,11 +137,12 @@ class C4DFilterPanelModal extends HostListenerMixin( >
- + @focusin="${handleFocusIn}"> + END + `; } diff --git a/packages/web-components/src/components/filter-panel/filter-panel.ts b/packages/web-components/src/components/filter-panel/filter-panel.ts index 7e1caf34474..346bdefbd25 100644 --- a/packages/web-components/src/components/filter-panel/filter-panel.ts +++ b/packages/web-components/src/components/filter-panel/filter-panel.ts @@ -72,7 +72,10 @@ class C4DFilterPanel extends HostListenerMixin(
${this.heading}
-