diff --git a/web-components/packages/carbon-web-components/.storybook/_container.scss b/web-components/packages/carbon-web-components/.storybook/_container.scss index 4b30e9e0343e..b9f91b386343 100644 --- a/web-components/packages/carbon-web-components/.storybook/_container.scss +++ b/web-components/packages/carbon-web-components/.storybook/_container.scss @@ -1,53 +1,54 @@ // // @license // -// Copyright IBM Corp. 2019, 2022 +// Copyright IBM Corp. 2019, 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. // -@import 'carbon-components/scss/globals/scss/css--helpers'; -@import 'carbon-components/scss/globals/scss/css--font-face'; -@import 'carbon-components/scss/globals/scss/vendor/@carbon/elements/scss/themes/mixins'; -@import 'carbon-components/scss/globals/scss/component-tokens'; -@import 'carbon-components/src/components/tag/tag'; -@import 'carbon-components/src/components/notification/inline-notification'; -@import 'carbon-components/src/components/notification/toast-notification'; +@use '@carbon/styles/scss/config' as *; +@use '@carbon/styles/scss/utilities/convert' as *; +@use '@carbon/styles/scss/utilities'; +@use '@carbon/styles/scss/fonts'; +@use '@carbon/styles/scss/theme' as *; +@use '@carbon/styles/scss/themes' as *; + +@import '@carbon/type/scss/type'; +@import '@carbon/type/scss/font-face/mono'; +@import '@carbon/type/scss/font-face/sans'; +@import '@carbon/type/scss/font-face/serif'; + +@include carbon--type-reset(); +@include carbon--font-face-mono(); +@include carbon--font-face-sans(); +@include carbon--font-face-serif(); // The default theme is "white" (White) :root { - @include carbon--theme($carbon--theme--white, true) { - @include emit-component-tokens($tag-colors); - @include emit-component-tokens($notification-colors); - } + @include theme($white); } - // Set the theme attribute to "g10" to use the Gray 10 theme // :root[storybook-carbon-theme='g10'] { - @include carbon--theme($carbon--theme--g10, true) { - @include emit-component-tokens($tag-colors); - @include emit-component-tokens($notification-colors); - } + @include theme($g10); } // Set the theme attribute to "g90" to use the Gray 90 theme // :root[storybook-carbon-theme='g90'] { - @include carbon--theme($carbon--theme--g90, true) { - @include emit-component-tokens($tag-colors); - @include emit-component-tokens($notification-colors); - } + @include theme($g90); } // Set the theme attribute to "g100" to use the Gray 100 theme // :root[storybook-carbon-theme='g100'] { - @include carbon--theme($carbon--theme--g100, true) { - @include emit-component-tokens($tag-colors); - @include emit-component-tokens($notification-colors); - } + @include theme($g100); +} + +body { + background-color: $background; + color: $text-primary; } html, @@ -70,7 +71,7 @@ body, } } -.bx-ce-demo-devenv--container { +.#{$prefix}-ce-demo-devenv--container { padding: 3em; display: flex; flex-direction: column; @@ -78,14 +79,15 @@ body, position: relative; } -.bx--content.bx-ce-demo-devenv--ui-shell-content { - background-color: $ui-01; +.#{$prefix}--content.#{$prefix}-ce-demo-devenv--ui-shell-content { + background-color: $layer-01; margin: 0; height: 100vh; width: 100%; h2 { font-weight: 800; + /* stylelint-disable declaration-property-unit-whitelist */ margin: 30px 0; font-size: 20px; } diff --git a/web-components/packages/carbon-web-components/.storybook/container.ts b/web-components/packages/carbon-web-components/.storybook/container.ts index 72c857f1ae17..de271dc03de0 100644 --- a/web-components/packages/carbon-web-components/.storybook/container.ts +++ b/web-components/packages/carbon-web-components/.storybook/container.ts @@ -8,6 +8,7 @@ */ import { html, TemplateResult } from 'lit'; +import { prefix } from '../src/globals/settings'; import containerStyles from './_container.scss'; // eslint-disable-line import/first /** @@ -26,12 +27,13 @@ const container = ({ +
+ class="${prefix}-ce-demo-devenv--container"> ${children}
`; diff --git a/web-components/packages/carbon-web-components/.storybook/main.js b/web-components/packages/carbon-web-components/.storybook/main.js index 3e45df0723d0..5dae036b0d90 100644 --- a/web-components/packages/carbon-web-components/.storybook/main.js +++ b/web-components/packages/carbon-web-components/.storybook/main.js @@ -156,7 +156,10 @@ module.exports = { implementation: sass, webpackImporter: false, sassOptions: { - includePaths: [path.resolve(__dirname, '..', 'node_modules')], + includePaths: [ + path.resolve(__dirname, '..', 'node_modules'), + path.resolve(__dirname, '../../../', 'node_modules'), + ], }, }, }, diff --git a/web-components/packages/carbon-web-components/docs/styling-story.mdx b/web-components/packages/carbon-web-components/docs/styling-story.mdx index a597b5cc24dd..40d1bd3dbb94 100644 --- a/web-components/packages/carbon-web-components/docs/styling-story.mdx +++ b/web-components/packages/carbon-web-components/docs/styling-story.mdx @@ -4,9 +4,12 @@ import { Meta } from '@storybook/addon-docs/blocks'; # Using custom styles in components -As Shadow DOM (one of the Web Components specs that `carbon-web-components` uses) promises, styles that `carbon-web-components` defines does not affect styles in your application, or vice versa. +As Shadow DOM (one of the Web Components specs that `carbon-web-components` +uses) promises, styles that `carbon-web-components` defines does not affect +styles in your application, or vice versa. -However, in cases where your application or a Carbon-derived style guide wants to change the styles of our components, there are a few options. +However, in cases where your application or a Carbon-derived style guide wants +to change the styles of our components, there are a few options. @@ -20,14 +23,19 @@ However, in cases where your application or a Carbon-derived style guide wants t ## Using CSS Custom Properties -Changes to CSS Custom Properties of the Carbon theme are reflected in the color scheme of `carbon-web-components` components: +Changes to CSS Custom Properties of the Carbon theme are reflected in the color +scheme of `carbon-web-components` components: + sandbox="allow-modals allow-forms allow-popups allow-scripts allow-same-origin"> For example, if you add CSS like below: @@ -37,7 +45,8 @@ footer { } ``` -The color of the button in the code below changes to the one in the `g100` theme: +The color of the button in the code below changes to the one in the `g100` +theme: ```html ``` -The names of CSS Custom Properties you can use are the Carbon theme tokens prefixed with `--cds-`. The list of Carbon theme tokens can be found at [here](https://github.com/carbon-design-system/carbon/blob/v10.7.0/packages/themes/scss/generated/_themes.scss#L14-L454). +The names of CSS Custom Properties you can use are the Carbon theme tokens +prefixed with `--cds-`. The list of Carbon theme tokens can be found at +[here](https://github.com/carbon-design-system/carbon/blob/v10.7.0/packages/themes/scss/generated/_themes.scss#L14-L454). -With CSS Custom Properties approach, you can switch the entire theme under the specific element by: +With CSS Custom Properties approach, you can switch the entire theme under the +specific element by: ```css -@import 'carbon-components/scss/globals/scss/css--helpers'; -@import 'carbon-components/scss/globals/scss/vendor/@carbon/elements/scss/themes/mixins'; +@use '@carbon/styles/scss/utilities'; +@use '@carbon/styles/scss/vendor/@carbon/elements/scss/themes/mixins'; footer { - @include carbon--theme($carbon--theme--g100, true); // Emits all theme tokens in CSS Custom Properties + @include carbon--theme( + $carbon--theme--g100, + true + ); // Emits all theme tokens in CSS Custom Properties } ``` ## Dependency injection -You can let our custom elements modules load alternate `CSSResult` module. Below example uses [Webpack `NormalModuleReplacementPlugin`](https://webpack.js.org/plugins/normal-module-replacement-plugin/) to let our custom elements modules load RTL version of `CSSResult` module that is shipped alongside with default `CSSResult` modules, instead of loading the default version: +You can let our custom elements modules load alternate `CSSResult` module. Below +example uses +[Webpack `NormalModuleReplacementPlugin`](https://webpack.js.org/plugins/normal-module-replacement-plugin/) +to let our custom elements modules load RTL version of `CSSResult` module that +is shipped alongside with default `CSSResult` modules, instead of loading the +default version: ```javascript const reCssBundle = /\.css\.js$/i; @@ -81,14 +101,20 @@ module.exports = { + sandbox="allow-modals allow-forms allow-popups allow-scripts allow-same-origin"> ## Creating derived components with different style -You can create a derived class of our component and override [static `styles` property](https://lit-element.polymer-project.org/guide/styles#static-styles), like: +You can create a derived class of our component and override +[static `styles` property](https://lit-element.polymer-project.org/guide/styles#static-styles), +like: ```javascript import { css, customElement } from 'lit-element'; @@ -108,11 +134,18 @@ class MyDropdown extends BXDropdown { + sandbox="allow-modals allow-forms allow-popups allow-scripts allow-same-origin"> ## CSS Shadow Parts -In the future, we'd like to support [CSS Shadow Parts](https://www.w3.org/TR/css-shadow-parts-1/) too, so you can use your application's CSS to affect `carbon-web-components` styles in a more flexible manner. +In the future, we'd like to support +[CSS Shadow Parts](https://www.w3.org/TR/css-shadow-parts-1/) too, so you can +use your application's CSS to affect `carbon-web-components` styles in a more +flexible manner. diff --git a/web-components/packages/carbon-web-components/docs/styling.md b/web-components/packages/carbon-web-components/docs/styling.md index a23cacd71f1e..e89c6ab82bbc 100644 --- a/web-components/packages/carbon-web-components/docs/styling.md +++ b/web-components/packages/carbon-web-components/docs/styling.md @@ -1,8 +1,11 @@ # Using custom styles in components -As Shadow DOM (one of the Web Components specs that `@carbon/web-components` uses) promises, styles that `@carbon/web-components` defines does not affect styles in your application, or vice versa. +As Shadow DOM (one of the Web Components specs that `carbon-web-components` +uses) promises, styles that `carbon-web-components` defines does not affect +styles in your application, or vice versa. -However, in cases where your application or a Carbon-derived style guide wants to change the styles of our components, there are a few options. +However, in cases where your application or a Carbon-derived style guide wants +to change the styles of our components, there are a few options. @@ -16,7 +19,8 @@ However, in cases where your application or a Carbon-derived style guide wants t ## Using CSS Custom Properties -Changes to CSS Custom Properties of the Carbon theme are reflected in the color scheme of `carbon-web-components` components: +Changes to CSS Custom Properties of the Carbon theme are reflected in the color +scheme of `carbon-web-components` components: [![Edit carbon-web-components with custom style](https://codesandbox.io/static/img/play-codesandbox.svg)](https://codesandbox.io/s/github/carbon-design-system/carbon-web-components/tree/main/examples/codesandbox/styling/theme-zoning) @@ -28,7 +32,8 @@ footer { } ``` -The color of the button in the code below changes to the one in the `g100` theme: +The color of the button in the code below changes to the one in the `g100` +theme: ```html ``` -The names of CSS Custom Properties you can use are the Carbon theme tokens prefixed with `--cds-`. The list of Carbon theme tokens can be found at [here](https://github.com/carbon-design-system/carbon/blob/v10.7.0/packages/themes/scss/generated/_themes.scss#L14-L454). +The names of CSS Custom Properties you can use are the Carbon theme tokens +prefixed with `--cds-`. The list of Carbon theme tokens can be found at +[here](https://github.com/carbon-design-system/carbon/blob/v10.7.0/packages/themes/scss/generated/_themes.scss#L14-L454). -With CSS Custom Properties approach, you can switch the entire theme under the specific element by: +With CSS Custom Properties approach, you can switch the entire theme under the +specific element by: ```css -@import 'carbon-components/scss/globals/scss/css--helpers'; -@import 'carbon-components/scss/globals/scss/vendor/@carbon/elements/scss/themes/mixins'; +@use '@carbon/styles/scss/utilities'; +@use '@carbon/styles/scss/vendor/@carbon/elements/scss/themes/mixins'; footer { - @include carbon--theme($carbon--theme--g100, true); // Emits all theme tokens in CSS Custom Properties + @include carbon--theme( + $carbon--theme--g100, + true + ); // Emits all theme tokens in CSS Custom Properties } ``` -Some components such as `Notification` and `Tag` have specific tokens per theme that need to emitted in the styles. You can do this for example by adding the following: +Some components such as `Notification` and `Tag` have specific tokens per theme +that need to emitted in the styles. You can do this for example by adding the +following: ```css -@import 'carbon-components/scss/globals/scss/vendor/@carbon/elements/scss/themes/mixins'; -@import 'carbon-components/scss/globals/scss/component-tokens'; +@use '@carbon/styles/scss/vendor/@carbon/elements/scss/themes/mixins'; +@use '@carbon/styles/scss/component-tokens'; @import 'carbon-components/src/components/tag/tag'; .dds-theme-zone-g90 { @include carbon--theme($carbon--theme--g90, true) { @@ -64,7 +77,12 @@ Some components such as `Notification` and `Tag` have specific tokens per theme ## Dependency injection -You can let our custom elements modules load alternate `CSSResult` module. Below example uses [Webpack `NormalModuleReplacementPlugin`](https://webpack.js.org/plugins/normal-module-replacement-plugin/) to let our custom elements modules load RTL version of `CSSResult` module that is shipped alongside with default `CSSResult` modules, instead of loading the default version: +You can let our custom elements modules load alternate `CSSResult` module. Below +example uses +[Webpack `NormalModuleReplacementPlugin`](https://webpack.js.org/plugins/normal-module-replacement-plugin/) +to let our custom elements modules load RTL version of `CSSResult` module that +is shipped alongside with default `CSSResult` modules, instead of loading the +default version: [![Edit carbon-web-components with custom style](https://codesandbox.io/static/img/play-codesandbox.svg)](https://codesandbox.io/s/github/carbon-design-system/carbon-web-components/tree/main/examples/codesandbox/rtl) @@ -87,7 +105,9 @@ module.exports = { ## Creating derived components with different style -You can create a derived class of our component and override [static `styles` property](https://lit-element.polymer-project.org/guide/styles#static-styles), like: +You can create a derived class of our component and override +[static `styles` property](https://lit-element.polymer-project.org/guide/styles#static-styles), +like: [![Edit carbon-web-components with custom style](https://codesandbox.io/static/img/play-codesandbox.svg)](https://codesandbox.io/s/github/carbon-design-system/carbon-web-components/tree/main/examples/codesandbox/styling/custom-style) @@ -109,4 +129,7 @@ class MyDropdown extends BXDropdown { ## CSS Shadow Parts -In the future, we'd like to support [CSS Shadow Parts](https://www.w3.org/TR/css-shadow-parts-1/) too, so you can use your application's CSS to affect `carbon-web-components` styles in a more flexible manner. +In the future, we'd like to support +[CSS Shadow Parts](https://www.w3.org/TR/css-shadow-parts-1/) too, so you can +use your application's CSS to affect `carbon-web-components` styles in a more +flexible manner. diff --git a/web-components/packages/carbon-web-components/examples/codesandbox/styling/theme-zoning/index.html b/web-components/packages/carbon-web-components/examples/codesandbox/styling/theme-zoning/index.html index 3f6490c1618e..1e8eca9c9355 100644 --- a/web-components/packages/carbon-web-components/examples/codesandbox/styling/theme-zoning/index.html +++ b/web-components/packages/carbon-web-components/examples/codesandbox/styling/theme-zoning/index.html @@ -11,21 +11,32 @@ carbon-web-components example - - + + - [Platform] + [Platform] Link 1 Link 2 Link 3 - Sub-link 1 - Sub-link 2 - Sub-link 3 + Sub-link 1 + Sub-link 2 + Sub-link 3 @@ -33,23 +44,30 @@
-

- Theming and CSS scoping -

+

Theming and CSS scoping

- The color scheme of carbon-web-components components can be changed either by CSS custom properties (this - example) or by - - creating inherited components with the static styles property changed. + The color scheme of carbon-web-components components + can be changed either by CSS custom properties (this example) or + by + + creating inherited components with the static + styles property changed.

- If you inspect the style of <footer> in this example, you'll find some Carbon theme custom - properties there are changed to ones of g100 theme, and see the background color as well as the color - of <bx-btn> reflect such change. + If you inspect the style of <footer> in this + example, you'll find some Carbon theme custom properties there are + changed to ones of g100 theme, and see the background + color as well as the color of <bx-btn> reflect + such change.

- As Shadow DOM (one of the Web Components specs that carbon-web-components uses) promises, styles that - carbon-web-components defines do not affect styles in your application. + As Shadow DOM (one of the Web Components specs that + carbon-web-components uses) promises, styles that + carbon-web-components defines do not affect styles in + your application.

@@ -59,7 +77,11 @@

Have questions? Nope! - Enter an issue + Enter an issue

diff --git a/web-components/packages/carbon-web-components/examples/codesandbox/styling/theme-zoning/src/index.scss b/web-components/packages/carbon-web-components/examples/codesandbox/styling/theme-zoning/src/index.scss index 161d1bdc4f86..0ab11085d2d6 100644 --- a/web-components/packages/carbon-web-components/examples/codesandbox/styling/theme-zoning/src/index.scss +++ b/web-components/packages/carbon-web-components/examples/codesandbox/styling/theme-zoning/src/index.scss @@ -1,11 +1,11 @@ // -// 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. // -@import 'carbon-components/scss/globals/scss/vendor/@carbon/elements/scss/themes/mixins'; +@use '@carbon/styles/scss/vendor/@carbon/elements/scss/themes/mixins'; html { height: 100%; diff --git a/web-components/packages/carbon-web-components/gulp-tasks/build/modules/css.js b/web-components/packages/carbon-web-components/gulp-tasks/build/modules/css.js index 5b973b8ccef3..6e6337f1e478 100644 --- a/web-components/packages/carbon-web-components/gulp-tasks/build/modules/css.js +++ b/web-components/packages/carbon-web-components/gulp-tasks/build/modules/css.js @@ -49,10 +49,16 @@ const buildModulesCSS = ({ banner, dir }) => ) .pipe( sass({ - includePaths: ['node_modules'], + includePaths: ['node_modules', '../../node_modules'], }) ) - .pipe(postcss([fixHostPseudo(), autoprefixer(), ...(dir === 'rtl' ? [rtlcss] : [])])) + .pipe( + postcss([ + fixHostPseudo(), + autoprefixer(), + ...(dir === 'rtl' ? [rtlcss] : []), + ]) + ) .pipe(cleanCSS()) .pipe( through2.obj((file, enc, done) => { @@ -60,7 +66,10 @@ const buildModulesCSS = ({ banner, dir }) => import { css } from 'lit'; export default css([${JSON.stringify(String(file.contents))}]); `); - file.path = replaceExtension(file.path, dir === 'rtl' ? '.rtl.css.js' : '.css.js'); + file.path = replaceExtension( + file.path, + dir === 'rtl' ? '.rtl.css.js' : '.css.js' + ); done(null, file); }) ) @@ -74,7 +83,10 @@ const buildModulesCSS = ({ banner, dir }) => * @returns {Promise} Stream */ async function css() { - const banner = await readFileAsync(path.resolve(__dirname, '../../../tools/license.js'), 'utf8'); + const banner = await readFileAsync( + path.resolve(__dirname, '../../../tools/license.js'), + 'utf8' + ); await Promise.all([ promisifyStream(() => buildModulesCSS({ banner })), promisifyStream(() => buildModulesCSS({ banner, dir: 'rtl' })), diff --git a/web-components/packages/carbon-web-components/package.json b/web-components/packages/carbon-web-components/package.json index 3705c02280da..10ab80fe998e 100644 --- a/web-components/packages/carbon-web-components/package.json +++ b/web-components/packages/carbon-web-components/package.json @@ -68,7 +68,7 @@ ], "dependencies": { "@babel/runtime": "^7.16.3", - "carbon-components": "10.58.3", + "@carbon/styles": "^1.19.0", "flatpickr": "4.6.13", "lit": "^2.6.0", "lodash-es": "^4.17.21" @@ -93,7 +93,9 @@ "@carbon/icons": "^10.48.0", "@open-wc/semantic-dom-diff": "~0.18.0", "@percy-io/in-percy": "^0.1.11", - "@percy/storybook": "^4.3.4", + "@percy/cli": "^1.8.1", + "@percy/cypress": "^3.1.1", + "@percy/dom": "^1.0.5", "@rollup/plugin-babel": "^5.3.1", "@rollup/plugin-commonjs": "^21.0.3", "@rollup/plugin-node-resolve": "^8.4.0", @@ -171,7 +173,6 @@ "karma-sourcemap-loader": "^0.3.8", "karma-spec-reporter": "0.0.36", "karma-webpack": "^4.0.2", - "lint-staged": "^12.3.8", "magic-string": "^0.27.0", "mini-css-extract-plugin": "~2.7.0", "mkdirp": "^0.5.0", @@ -193,7 +194,7 @@ "rollup-plugin-multi-input": "^1.3.1", "rollup-plugin-terser": "^7.0.2", "rtlcss": "^3.0.0", - "sass": "~1.57.0", + "sass": "~1.40.0", "sass-loader": "^10.0.0", "strip-comments": "^1.0.0", "style-loader": "^2.0.0", diff --git a/web-components/packages/carbon-web-components/src/components/accordion/accordion-item.ts b/web-components/packages/carbon-web-components/src/components/accordion/accordion-item.ts index 1155266b784f..0cddaf3cac38 100644 --- a/web-components/packages/carbon-web-components/src/components/accordion/accordion-item.ts +++ b/web-components/packages/carbon-web-components/src/components/accordion/accordion-item.ts @@ -7,11 +7,11 @@ * LICENSE file in the root directory of this source tree. */ -import settings from 'carbon-components/es/globals/js/settings'; import { classMap } from 'lit/directives/class-map.js'; import { LitElement, html } from 'lit'; import { property, customElement } from 'lit/decorators.js'; import ChevronRight16 from '@carbon/icons/lib/chevron--right/16'; +import { prefix } from '../../globals/settings'; import FocusMixin from '../../globals/mixins/focus'; import Handle from '../../globals/internal/handle'; import { ACCORDION_ITEM_BREAKPOINT } from './defs'; @@ -19,8 +19,6 @@ import styles from './accordion.scss'; export { ACCORDION_ITEM_BREAKPOINT }; -const { prefix } = settings; - /** * Observes resize of the given element with the given resize observer. * @@ -43,11 +41,11 @@ const observeResize = (observer: ResizeObserver, elem: Element) => { /** * Accordion item. * - * @element bx-accordion-item - * @fires bx-accordion-item-beingtoggled + * @element cds-accordion-item + * @fires cds-accordion-item-beingtoggled * The custom event fired before this accordion item is being toggled upon a user gesture. * Cancellation of this event stops the user-initiated action of toggling this accordion item. - * @fires bx-accordion-item-toggled - The custom event fired after this accordion item is toggled upon a user gesture. + * @fires cds-accordion-item-toggled - The custom event fired after this accordion item is toggled upon a user gesture. * @csspart expando The expando button. * @csspart expando-icon The expando icon. * @csspart title The title. diff --git a/web-components/packages/carbon-web-components/src/components/accordion/accordion-story.ts b/web-components/packages/carbon-web-components/src/components/accordion/accordion-story.ts index 1ea46ed65767..e5237e00264f 100644 --- a/web-components/packages/carbon-web-components/src/components/accordion/accordion-story.ts +++ b/web-components/packages/carbon-web-components/src/components/accordion/accordion-story.ts @@ -10,14 +10,15 @@ import { html } from 'lit'; import { action } from '@storybook/addon-actions'; import { boolean, select, text } from '@storybook/addon-knobs'; +import { prefix } from '../../globals/settings'; import { ACCORDION_SIZE } from './accordion'; import './accordion-item'; import storyDocs from './accordion-story.mdx'; const sizes = { - 'Regular size': null, [`Small size (${ACCORDION_SIZE.SMALL})`]: ACCORDION_SIZE.SMALL, - [`XL size (${ACCORDION_SIZE.EXTRA_LARGE})`]: ACCORDION_SIZE.EXTRA_LARGE, + [`Medium size (${ACCORDION_SIZE.MEDIUM})`]: ACCORDION_SIZE.MEDIUM, + [`Large size (${ACCORDION_SIZE.LARGE})`]: ACCORDION_SIZE.LARGE, }; const noop = () => {}; @@ -31,7 +32,9 @@ export const Default = (args) => { onBeforeToggle = noop, onToggle = noop, size, - } = args?.['bx-accordion'] ?? {}; + alignment, + isFlush, + } = args?.[`${prefix}-accordion`] ?? {}; const handleBeforeToggle = (event: CustomEvent) => { onBeforeToggle(event); if (disableToggle) { @@ -40,11 +43,13 @@ export const Default = (args) => { }; return html` - - + @@ -54,16 +59,16 @@ export const Default = (args) => { minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

- - + +

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

- - + +

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad @@ -71,8 +76,8 @@ export const Default = (args) => { aliquip ex ea commodo consequat.

${titleText} - - + + `; }; @@ -83,17 +88,23 @@ export default { parameters: { ...storyDocs.parameters, knobs: { - 'bx-accordion': () => ({ + [`${prefix}-accordion`]: () => ({ open: boolean('Open the section (open)', false), titleText: text('The title (title-text)', 'Section title'), size: select('Accordion size (size)', sizes, null), + alignment: select( + 'Accordion alignment (alignment)', + ['start', 'end'], + 'end' + ), + isFlush: boolean('isFlush', false), disabled: boolean('Disable accordion item (disabled)', false), disableToggle: boolean( - 'Disable user-initiated toggle action (Call event.preventDefault() in bx-accordion-beingtoggled event)', + `Disable user-initiated toggle action (Call event.preventDefault() in ${prefix}-accordion-beingtoggled event)`, false ), - onBeforeToggle: action('bx-accordion-item-beingtoggled'), - onToggle: action('bx-accordion-item-toggled'), + onBeforeToggle: action(`${prefix}-accordion-item-beingtoggled`), + onToggle: action(`${prefix}-accordion-item-toggled`), }), }, }, diff --git a/web-components/packages/carbon-web-components/src/components/accordion/accordion.scss b/web-components/packages/carbon-web-components/src/components/accordion/accordion.scss index 832910b32f17..505f0481066f 100644 --- a/web-components/packages/carbon-web-components/src/components/accordion/accordion.scss +++ b/web-components/packages/carbon-web-components/src/components/accordion/accordion.scss @@ -1,5 +1,5 @@ // -// Copyright IBM Corp. 2019, 2022 +// Copyright IBM Corp. 2019, 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. @@ -7,7 +7,11 @@ $css--plex: true !default; -@import 'carbon-components/scss/components/accordion/accordion'; +@use '@carbon/styles/scss/config' as *; +@use '@carbon/styles/scss/spacing' as *; +@use '@carbon/styles/scss/type' as *; +@use '@carbon/styles/scss/utilities/convert' as *; +@use '@carbon/styles/scss/components/accordion'; :host(#{$prefix}-accordion) { @extend .#{$prefix}--accordion; @@ -21,22 +25,33 @@ $css--plex: true !default; .#{$prefix}--accordion__heading { padding-top: calc( - (#{$container-03} - #{map-get($body-long-01, 'line-height')}rem) / 2 + (#{$spacing-08} - #{map-get($body-long-01, 'line-height')}rem) / 2 ); - min-height: $container-03; + min-height: $spacing-08; } - &[size='sm'] { - .#{$prefix}--accordion__heading { - min-height: rem(32px); - padding: rem(5px) 0; + .#{$prefix}--accordion__content { + @extend .#{$prefix}--accordion__content; + + ::slotted(p) { + @include type-style('body-01'); } } - &[size='xl'] { - .#{$prefix}--accordion__heading { - min-height: rem(48px); - } + &[size='sm'] { + @extend .#{$prefix}--accordion--sm; + } + + &[size='lg'] { + @extend .#{$prefix}--accordion--lg; + } + + &[alignment='start'] { + @extend .#{$prefix}--accordion--start; + } + + &[isFlush] { + @extend .#{$prefix}--accordion--flush; } } @@ -44,11 +59,11 @@ $css--plex: true !default; @extend .#{$prefix}--accordion__item--active; .#{$prefix}--accordion__content { - padding-right: $carbon--spacing-05; + padding-right: $spacing-05; } .#{$prefix}-ce--accordion__content--sm { - padding-right: $carbon--spacing-09; + padding-right: $spacing-09; } .#{$prefix}-ce--accordion__content--md { diff --git a/web-components/packages/carbon-web-components/src/components/accordion/accordion.ts b/web-components/packages/carbon-web-components/src/components/accordion/accordion.ts index c07c4d77cb57..765244e74bb3 100644 --- a/web-components/packages/carbon-web-components/src/components/accordion/accordion.ts +++ b/web-components/packages/carbon-web-components/src/components/accordion/accordion.ts @@ -9,27 +9,37 @@ import { LitElement, html } from 'lit'; import { property, customElement } from 'lit/decorators.js'; -import settings from 'carbon-components/es/globals/js/settings'; +import { prefix } from '../../globals/settings'; import { forEach } from '../../globals/internal/collection-helpers'; -import { ACCORDION_SIZE } from './defs'; +import { ACCORDION_SIZE, ACCORDION_ALIGNMENT } from './defs'; import styles from './accordion.scss'; -export { ACCORDION_SIZE }; - -const { prefix } = settings; +export { ACCORDION_SIZE, ACCORDION_ALIGNMENT }; /** * Accordion container. * - * @element bx-accordion + * @element cds-accordion */ @customElement(`${prefix}-accordion`) class BXAccordion extends LitElement { /** - * Accordion size. + * Accordion size should be sm, md, lg. + */ + @property({ reflect: true }) + size = ACCORDION_SIZE.MEDIUM; + + /** + * Specify the alignment of the accordion heading title and chevron */ @property({ reflect: true }) - size = ACCORDION_SIZE.REGULAR; + alignment = ACCORDION_ALIGNMENT.END; + + /** + * Specify whether Accordion text should be flush, default is false, does not work with align="start" + */ + @property({ type: Boolean, reflect: true }) + isFlush = false; connectedCallback() { if (!this.hasAttribute('role')) { @@ -50,6 +60,33 @@ class BXAccordion extends LitElement { } ); } + if (changedProperties.has('alignment')) { + // Propagate `alignment` attribute to descendants until `:host-context()` gets supported in all major browsers + forEach( + this.querySelectorAll( + (this.constructor as typeof BXAccordion).selectorAccordionItems + ), + (elem) => { + elem.setAttribute('alignment', this.alignment); + } + ); + } + if ( + changedProperties.has('isFlush') || + changedProperties.has('alignment') + ) { + // Propagate `isFlush` attribute to descendants until `:host-context()` gets supported in all major browsers + forEach( + this.querySelectorAll( + (this.constructor as typeof BXAccordion).selectorAccordionItems + ), + (elem) => { + this.isFlush && this.alignment !== 'start' + ? elem.setAttribute('isFlush', '') + : elem.removeAttribute('isFlush'); + } + ); + } } render() { diff --git a/web-components/packages/carbon-web-components/src/components/accordion/defs.ts b/web-components/packages/carbon-web-components/src/components/accordion/defs.ts index 75d4ee800b55..98500cf681db 100644 --- a/web-components/packages/carbon-web-components/src/components/accordion/defs.ts +++ b/web-components/packages/carbon-web-components/src/components/accordion/defs.ts @@ -1,7 +1,7 @@ /** * @license * - * Copyright IBM Corp. 2020 + * 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. @@ -23,21 +23,36 @@ export enum ACCORDION_ITEM_BREAKPOINT { } /** - * Button size. + * Accordion size. */ export enum ACCORDION_SIZE { /** - * Regular size. + * Small size. */ - REGULAR = '', + SMALL = 'sm', /** - * Small size. + * Medium size. */ - SMALL = 'sm', + MEDIUM = 'md', + + /** + * Large size. + */ + LARGE = 'lg', +} + +/** + * Specify the alignment of the accordion heading title and chevron. + */ +export enum ACCORDION_ALIGNMENT { + /** + * Alignment to the start + */ + START = 'start', /** - * X-Large size. + * Alignment to the end */ - EXTRA_LARGE = 'xl', + END = 'END', } diff --git a/web-components/packages/carbon-web-components/src/components/breadcrumb/breadcrumb-item.ts b/web-components/packages/carbon-web-components/src/components/breadcrumb/breadcrumb-item.ts index b19bbc54bbf0..03f14e8c93e0 100644 --- a/web-components/packages/carbon-web-components/src/components/breadcrumb/breadcrumb-item.ts +++ b/web-components/packages/carbon-web-components/src/components/breadcrumb/breadcrumb-item.ts @@ -9,15 +9,13 @@ import { LitElement, html } from 'lit'; import { customElement } from 'lit/decorators.js'; -import settings from 'carbon-components/es/globals/js/settings'; +import { prefix } from '../../globals/settings'; import styles from './breadcrumb.scss'; -const { prefix } = settings; - /** * Breadcrumb item. * - * @element bx-breadcrumb-item + * @element cds-breadcrumb-item */ @customElement(`${prefix}-breadcrumb-item`) class BXBreadcrumbItem extends LitElement { diff --git a/web-components/packages/carbon-web-components/src/components/breadcrumb/breadcrumb-link.ts b/web-components/packages/carbon-web-components/src/components/breadcrumb/breadcrumb-link.ts index 360664dbaf13..cea065930d03 100644 --- a/web-components/packages/carbon-web-components/src/components/breadcrumb/breadcrumb-link.ts +++ b/web-components/packages/carbon-web-components/src/components/breadcrumb/breadcrumb-link.ts @@ -8,16 +8,14 @@ */ import { customElement } from 'lit/decorators.js'; -import settings from 'carbon-components/es/globals/js/settings'; +import { prefix } from '../../globals/settings'; import BXLink from '../link/link'; import styles from './breadcrumb.scss'; -const { prefix } = settings; - /** * Link in breadcrumb. * - * @element bx-breadcrumb-link + * @element cds-breadcrumb-link */ @customElement(`${prefix}-breadcrumb-link`) class BXBreadcrumbLink extends BXLink { diff --git a/web-components/packages/carbon-web-components/src/components/breadcrumb/breadcrumb-overflow-menu.ts b/web-components/packages/carbon-web-components/src/components/breadcrumb/breadcrumb-overflow-menu.ts index 245a2722773c..b151bc6cb8b7 100644 --- a/web-components/packages/carbon-web-components/src/components/breadcrumb/breadcrumb-overflow-menu.ts +++ b/web-components/packages/carbon-web-components/src/components/breadcrumb/breadcrumb-overflow-menu.ts @@ -9,17 +9,15 @@ import { html } from 'lit'; import { customElement } from 'lit/decorators.js'; -import settings from 'carbon-components/es/globals/js/settings'; +import { prefix } from '../../globals/settings'; import OverflowMenuHorizontal16 from '@carbon/icons/lib/overflow-menu--horizontal/16'; import BXOverflowMenu from '../overflow-menu/overflow-menu'; import styles from './breadcrumb.scss'; -const { prefix } = settings; - /** * Overflow menu in breadcrumb. * - * @element bx-breadcrumb-overflow-menu + * @element cds-breadcrumb-overflow-menu */ @customElement(`${prefix}-breadcrumb-overflow-menu`) class BXBreadcrumbOverflowMenu extends BXOverflowMenu { diff --git a/web-components/packages/carbon-web-components/src/components/breadcrumb/breadcrumb-story.ts b/web-components/packages/carbon-web-components/src/components/breadcrumb/breadcrumb-story.ts index 492392f05fc3..0efde22f4d93 100644 --- a/web-components/packages/carbon-web-components/src/components/breadcrumb/breadcrumb-story.ts +++ b/web-components/packages/carbon-web-components/src/components/breadcrumb/breadcrumb-story.ts @@ -12,23 +12,24 @@ import './breadcrumb'; import './breadcrumb-item'; import './breadcrumb-link'; import './breadcrumb-overflow-menu'; +import '../overflow-menu/overflow-menu-body'; import storyDocs from './breadcrumb-story.mdx'; export const Default = () => html` - - - Breadcrumb 1 - - - Breadcrumb 2 - - - Breadcrumb 3 + + Breadcrumb 1 + + + Breadcrumb 2 + + + Breadcrumb 3 - - + + `; Default.storyName = 'Default'; @@ -41,27 +42,27 @@ export default { }; export const withOverflowMenu = () => html` - - - Breadcrumb 1 - - - Breadcrumb 2 - - - - - Option 1 - Option 2 - - - - - Breadcrumb 3 + + Breadcrumb 1 + + + Breadcrumb 2 + + + + + Option 1 + Option 2 + + + + + Breadcrumb 3 - - + + `; withOverflowMenu.storyName = 'with Overflow Menu'; diff --git a/web-components/packages/carbon-web-components/src/components/breadcrumb/breadcrumb.scss b/web-components/packages/carbon-web-components/src/components/breadcrumb/breadcrumb.scss index aeccbbcdff40..6dee805f56f4 100644 --- a/web-components/packages/carbon-web-components/src/components/breadcrumb/breadcrumb.scss +++ b/web-components/packages/carbon-web-components/src/components/breadcrumb/breadcrumb.scss @@ -7,8 +7,11 @@ $css--plex: true !default; -@import 'carbon-components/scss/components/link/link'; -@import 'carbon-components/scss/components/breadcrumb/breadcrumb'; +@use '@carbon/styles/scss/config' as *; +@use '@carbon/styles/scss/theme' as *; +@use '@carbon/styles/scss/motion' as *; +@use '@carbon/styles/scss/utilities' as *; +@use '@carbon/styles/scss/components/breadcrumb'; @import '../overflow-menu/overflow-menu'; :host(#{$prefix}-breadcrumb) { @@ -17,13 +20,6 @@ $css--plex: true !default; :host(#{$prefix}-breadcrumb-item) { @extend .#{$prefix}--breadcrumb-item; - - // TODO: see if we can remove this ::after section after v11 upgrade - &::after { - margin-left: $spacing-03; - color: $text-primary; - content: '/'; - } } :host(#{$prefix}-breadcrumb-overflow-menu) { @@ -51,7 +47,7 @@ $css--plex: true !default; background: $link-primary-hover; content: ''; opacity: 0; - transition: opacity $duration--fast-01 motion(standard, productive); + transition: opacity $duration-fast-01 motion(standard, productive); } } @@ -62,7 +58,7 @@ $css--plex: true !default; :host(#{$prefix}-breadcrumb-overflow-menu) svg { position: relative; - fill: $link-01; + fill: $link-primary; transform: translateY(4px); } @@ -77,9 +73,9 @@ $css--plex: true !default; :host(#{$prefix}-breadcrumb-link) { outline: none; - // Re-define the ruleset so this wins over `.bx--link:visited`, etc. + // Re-define the ruleset so this wins over `.#{$prefix}--link:visited`, etc. .#{$prefix}--link--disabled { - color: $disabled-02; + color: $text-disabled; } .#{$prefix}--link__icon[hidden] { @@ -88,7 +84,7 @@ $css--plex: true !default; } :host(#{$prefix}-breadcrumb-link[aria-current='page']) .#{$prefix}--link { - color: $text-01; + color: $text-primary; cursor: auto; &:hover { diff --git a/web-components/packages/carbon-web-components/src/components/breadcrumb/breadcrumb.ts b/web-components/packages/carbon-web-components/src/components/breadcrumb/breadcrumb.ts index c6fbee8721a0..0d77653c62d3 100644 --- a/web-components/packages/carbon-web-components/src/components/breadcrumb/breadcrumb.ts +++ b/web-components/packages/carbon-web-components/src/components/breadcrumb/breadcrumb.ts @@ -9,15 +9,13 @@ import { LitElement, html } from 'lit'; import { customElement } from 'lit/decorators.js'; -import settings from 'carbon-components/es/globals/js/settings'; +import { prefix } from '../../globals/settings'; import styles from './breadcrumb.scss'; -const { prefix } = settings; - /** * Breadcrumb. * - * @element bx-breadcrumb + * @element cds-breadcrumb */ @customElement(`${prefix}-breadcrumb`) class BXBreadcrumb extends LitElement { diff --git a/web-components/packages/carbon-web-components/src/components/button/button-skeleton.ts b/web-components/packages/carbon-web-components/src/components/button/button-skeleton.ts index 97582e9affad..db73356b0e1b 100644 --- a/web-components/packages/carbon-web-components/src/components/button/button-skeleton.ts +++ b/web-components/packages/carbon-web-components/src/components/button/button-skeleton.ts @@ -7,16 +7,14 @@ * LICENSE file in the root directory of this source tree. */ -import settings from 'carbon-components/es/globals/js/settings'; import { classMap } from 'lit/directives/class-map.js'; import { ifDefined } from 'lit/directives/if-defined.js'; import { html } from 'lit'; import { customElement } from 'lit/decorators.js'; +import { prefix } from '../../globals/settings'; import BXButton from './button'; import styles from './button.scss'; -const { prefix } = settings; - /** * Button skeleton. */ diff --git a/web-components/packages/carbon-web-components/src/components/button/button-story.ts b/web-components/packages/carbon-web-components/src/components/button/button-story.ts index 2bb870493f48..6d62b6050136 100644 --- a/web-components/packages/carbon-web-components/src/components/button/button-story.ts +++ b/web-components/packages/carbon-web-components/src/components/button/button-story.ts @@ -15,6 +15,7 @@ import { ifDefined } from 'lit/directives/if-defined.js'; // In our dev env, we auto-generate the file and re-map below path to to point to the generated file. // @ts-ignore import Add16 from '@carbon/web-components/es/icons/add/16'; +import { prefix } from '../../globals/settings'; import { BUTTON_KIND, BUTTON_SIZE, BUTTON_ICON_LAYOUT } from './button'; import './button-skeleton'; import textNullable from '../../../.storybook/knob-text-nullable'; @@ -60,9 +61,9 @@ export const Default = (args) => { target, type, onClick, - } = args?.['bx-btn'] ?? {}; + } = args?.[`${prefix}-btn`] ?? {}; return html` - { type="${ifDefined(type)}" @click=${onClick}> Button - + `; }; Default.parameters = { knobs: { - 'bx-btn': () => ({ + [`${prefix}-btn`]: () => ({ kind: select('Button kind (kind)', kinds, BUTTON_KIND.PRIMARY), disabled: boolean('Disabled (disabled)', false), size: select('Button size (size)', sizes, null), @@ -97,9 +98,9 @@ Default.parameters = { export const icon = (args) => { const { kind, disabled, size, href, isExpressive, onClick } = - args?.['bx-btn'] ?? {}; + args?.[`${prefix}-btn`] ?? {}; return html` - { ?isExpressive="${isExpressive}" @click=${onClick}> ${Add16({ slot: 'icon' })} - + `; }; @@ -115,9 +116,9 @@ icon.parameters = Default.parameters; export const textAndIcon = (args) => { const { kind, disabled, size, href, iconLayout, isExpressive, onClick } = - args?.['bx-btn'] ?? {}; + args?.[`${prefix}-btn`] ?? {}; return html` - { href=${ifDefined(href || undefined)} @click=${onClick}> Button ${Add16({ slot: 'icon' })} - + `; }; @@ -134,7 +135,7 @@ textAndIcon.storyName = 'Text and icon'; textAndIcon.parameters = { knobs: { - 'bx-btn': () => ({ + [`${prefix}-btn`]: () => ({ iconLayout: select('Icon layout (icon-layout)', iconLayouts, null), kind: select('Button kind (kind)', kinds, BUTTON_KIND.PRIMARY), disabled: boolean('Disabled (disabled)', false), @@ -148,15 +149,15 @@ textAndIcon.parameters = { export const skeleton = (args) => { const { disabled, size, href, isExpressive, onClick } = - args?.['bx-btn-skeleton']; + args?.[`${prefix}-btn-skeleton`]; return html` - - + `; }; @@ -165,7 +166,7 @@ skeleton.parameters = { skip: true, }, knobs: { - 'bx-btn-skeleton': () => ({ + [`${prefix}-btn-skeleton`]: () => ({ kind: select('Button kind (kind)', kinds, BUTTON_KIND.PRIMARY), disabled: boolean('Disabled (disabled)', false), size: select('Button size (size)', sizes, null), diff --git a/web-components/packages/carbon-web-components/src/components/button/button.scss b/web-components/packages/carbon-web-components/src/components/button/button.scss index ee5a9d7a9465..2b53f7697c48 100644 --- a/web-components/packages/carbon-web-components/src/components/button/button.scss +++ b/web-components/packages/carbon-web-components/src/components/button/button.scss @@ -1,5 +1,5 @@ // -// Copyright IBM Corp. 2019, 2022 +// Copyright IBM Corp. 2019, 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. @@ -7,7 +7,9 @@ $css--plex: true !default; -@import 'carbon-components/scss/components/button/button'; +@use '@carbon/styles/scss/config' as *; +@use '@carbon/styles/scss/utilities/convert' as *; +@use '@carbon/styles/scss/components/button'; :host(#{$prefix}-btn), :host(#{$prefix}-modal-footer-button) { diff --git a/web-components/packages/carbon-web-components/src/components/button/button.ts b/web-components/packages/carbon-web-components/src/components/button/button.ts index f5aecb0c4788..e0467347e495 100644 --- a/web-components/packages/carbon-web-components/src/components/button/button.ts +++ b/web-components/packages/carbon-web-components/src/components/button/button.ts @@ -7,11 +7,11 @@ * LICENSE file in the root directory of this source tree. */ -import settings from 'carbon-components/es/globals/js/settings'; import { classMap } from 'lit/directives/class-map.js'; import { ifDefined } from 'lit/directives/if-defined.js'; import { LitElement, html } from 'lit'; import { property, customElement } from 'lit/decorators.js'; +import { prefix } from '../../globals/settings'; import FocusMixin from '../../globals/mixins/focus'; import { BUTTON_KIND, BUTTON_SIZE, BUTTON_ICON_LAYOUT } from './defs'; import styles from './button.scss'; @@ -20,12 +20,10 @@ import HostListenerMixin from '../../globals/mixins/host-listener'; export { BUTTON_KIND, BUTTON_SIZE, BUTTON_ICON_LAYOUT }; -const { prefix } = settings; - /** * Button. * - * @element bx-btn + * @element cds-btn * @csspart button The button. */ @customElement(`${prefix}-btn`) diff --git a/web-components/packages/carbon-web-components/src/components/checkbox/checkbox-story.ts b/web-components/packages/carbon-web-components/src/components/checkbox/checkbox-story.ts index 4b9ba9b1ff68..65629ca94935 100644 --- a/web-components/packages/carbon-web-components/src/components/checkbox/checkbox-story.ts +++ b/web-components/packages/carbon-web-components/src/components/checkbox/checkbox-story.ts @@ -11,6 +11,7 @@ import { html } from 'lit'; import { action } from '@storybook/addon-actions'; import { boolean } from '@storybook/addon-knobs'; import { ifDefined } from 'lit/directives/if-defined.js'; +import { prefix } from '../../globals/settings'; import textNullable from '../../../.storybook/knob-text-nullable'; import './checkbox'; import storyDocs from './checkbox-story.mdx'; @@ -25,17 +26,29 @@ export const Default = (args) => { name, value, onChange, - } = args?.['bx-checkbox'] ?? {}; + } = args?.[`${prefix}-checkbox`] ?? {}; return html` - +
+ Group label + + +
`; }; @@ -46,7 +59,7 @@ export default { parameters: { ...storyDocs.parameters, knobs: { - 'bx-checkbox': () => ({ + [`${prefix}-checkbox`]: () => ({ checked: boolean('Checked (checked)', false), disabled: boolean('Disabled (disabled)', false), hideLabel: boolean('Hide label (hide-label)', false), @@ -54,7 +67,7 @@ export default { labelText: textNullable('Label text (label-text)', 'Checkbox'), name: textNullable('Name (name)', ''), value: textNullable('Value (value)', ''), - onChange: action('bx-checkbox-changed'), + onChange: action(`${prefix}-checkbox-changed`), }), }, }, diff --git a/web-components/packages/carbon-web-components/src/components/checkbox/checkbox.scss b/web-components/packages/carbon-web-components/src/components/checkbox/checkbox.scss index 193275540005..d73782e23c81 100644 --- a/web-components/packages/carbon-web-components/src/components/checkbox/checkbox.scss +++ b/web-components/packages/carbon-web-components/src/components/checkbox/checkbox.scss @@ -1,5 +1,5 @@ // -// Copyright IBM Corp. 2019, 2022 +// Copyright IBM Corp. 2019, 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. @@ -7,9 +7,10 @@ $css--plex: true !default; -@import 'carbon-components/scss/globals/scss/css--helpers'; -@import 'carbon-components/scss/components/form/form'; -@import 'carbon-components/scss/components/checkbox/checkbox'; +@use '@carbon/styles/scss/config' as *; +@use '@carbon/styles/scss/utilities'; +@use '@carbon/styles/scss/components/form'; +@use '@carbon/styles/scss/components/checkbox'; :host(#{$prefix}-checkbox) { @extend .#{$prefix}--form-item; diff --git a/web-components/packages/carbon-web-components/src/components/checkbox/checkbox.ts b/web-components/packages/carbon-web-components/src/components/checkbox/checkbox.ts index 7c7d838b43be..cfd3f0cc1fcb 100644 --- a/web-components/packages/carbon-web-components/src/components/checkbox/checkbox.ts +++ b/web-components/packages/carbon-web-components/src/components/checkbox/checkbox.ts @@ -11,18 +11,16 @@ import { classMap } from 'lit/directives/class-map.js'; import { ifDefined } from 'lit/directives/if-defined.js'; import { LitElement, html } from 'lit'; import { property, customElement, query } from 'lit/decorators.js'; -import settings from 'carbon-components/es/globals/js/settings'; +import { prefix } from '../../globals/settings'; import FocusMixin from '../../globals/mixins/focus'; import FormMixin from '../../globals/mixins/form'; import styles from './checkbox.scss'; -const { prefix } = settings; - /** * Check box. * - * @element bx-checkbox - * @fires bx-checkbox-changed - The custom event fired after this changebox changes its checked state. + * @element cds-checkbox + * @fires cds-checkbox-changed - The custom event fired after this changebox changes its checked state. * @csspart input The checkbox. * @csspart label The label. */ diff --git a/web-components/packages/carbon-web-components/src/components/code-snippet/code-snippet-skeleton.ts b/web-components/packages/carbon-web-components/src/components/code-snippet/code-snippet-skeleton.ts index ca8c666c4087..a500d1fe9830 100644 --- a/web-components/packages/carbon-web-components/src/components/code-snippet/code-snippet-skeleton.ts +++ b/web-components/packages/carbon-web-components/src/components/code-snippet/code-snippet-skeleton.ts @@ -9,12 +9,10 @@ import { LitElement, html } from 'lit'; import { property, customElement } from 'lit/decorators.js'; -import settings from 'carbon-components/es/globals/js/settings'; +import { prefix } from '../../globals/settings'; import { CODE_SNIPPET_TYPE } from './code-snippet'; import styles from './code-snippet.scss'; -const { prefix } = settings; - /** * Skeleton of code snippet. */ diff --git a/web-components/packages/carbon-web-components/src/components/code-snippet/code-snippet-story.ts b/web-components/packages/carbon-web-components/src/components/code-snippet/code-snippet-story.ts index 7846a81f28d4..147dfd61c5d3 100644 --- a/web-components/packages/carbon-web-components/src/components/code-snippet/code-snippet-story.ts +++ b/web-components/packages/carbon-web-components/src/components/code-snippet/code-snippet-story.ts @@ -8,10 +8,11 @@ */ import { html } from 'lit'; +import { ifDefined } from 'lit/directives/if-defined.js'; import { action } from '@storybook/addon-actions'; import { number, select } from '@storybook/addon-knobs'; +import { prefix } from '../../globals/settings'; import textNullable from '../../../.storybook/knob-text-nullable'; -import { ifDefined } from 'lit/directives/if-defined.js'; import { CODE_SNIPPET_COLOR_SCHEME } from './code-snippet'; import storyDocs from './code-snippet-story.mdx'; import './code-snippet-skeleton'; @@ -23,7 +24,7 @@ const colorSchemes = { }; const defaultKnobs = { - 'bx-code-snippet': () => ({ + [`${prefix}-code-snippet`]: () => ({ codeAssistiveText: textNullable( 'Assistive text for the code portion (code-assistive-text)', '' @@ -53,21 +54,21 @@ export const singleLine = (args) => { copyButtonFeedbackTimeout, colorScheme, onClick, - } = args?.['bx-code-snippet'] ?? {}; + } = args?.[`${prefix}-code-snippet`] ?? {}; const children = ` node -v Lorem ipsum dolor sit amet, consectetur adipisicing elit. Blanditiis, veritatis voluptate id incidunt molestiae officia possimus, quasi itaque alias, architecto hic, dicta fugit? Debitis delectus quidem explicabo vitae laboriosam! `; return html` - ${children}${children} `; }; @@ -88,7 +89,7 @@ export const multiLine = (args) => { expandButtonText, colorScheme, onClick, - } = args?.['bx-code-snippet'] ?? {}; + } = args?.[`${prefix}-code-snippet`] ?? {}; const children = ` @mixin grid-container { width: 100%; @@ -114,7 +115,7 @@ $z-indexes: ( `.trim(); // prettier-ignore return html` - ${children} + >${children} `; }; @@ -132,8 +133,8 @@ multiLine.storyName = 'Multi line'; multiLine.parameters = { knobs: { - 'bx-code-snippet': () => ({ - ...defaultKnobs['bx-code-snippet'](), + [`${prefix}-code-snippet`]: () => ({ + ...defaultKnobs[`${prefix}-code-snippet`](), collapseButtonText: textNullable( 'The text for the collapse button (collapse-button-text)', '' @@ -154,9 +155,9 @@ export const inline = (args) => { copyButtonFeedbackTimeout, colorScheme, onClick, - } = args?.['bx-code-snippet'] ?? {}; + } = args?.[`${prefix}-code-snippet`] ?? {}; return html` - { copy-button-feedback-timeout="${copyButtonFeedbackTimeout}" color-scheme="${ifDefined(colorScheme)}" @click="${onClick}" - >node -vnode -v `; }; @@ -176,7 +177,7 @@ inline.parameters = { }; export const skeletonSingleLine = () => - html` `; + html` `; skeletonSingleLine.storyName = 'Skeleton single line'; @@ -187,7 +188,7 @@ skeletonSingleLine.parameters = { }; export const skeletonMultiLine = () => - html` `; + html` `; skeletonMultiLine.storyName = 'Skeleton multi line'; diff --git a/web-components/packages/carbon-web-components/src/components/code-snippet/code-snippet.scss b/web-components/packages/carbon-web-components/src/components/code-snippet/code-snippet.scss index f139aaa28567..91a4f6b1067f 100644 --- a/web-components/packages/carbon-web-components/src/components/code-snippet/code-snippet.scss +++ b/web-components/packages/carbon-web-components/src/components/code-snippet/code-snippet.scss @@ -1,5 +1,5 @@ // -// Copyright IBM Corp. 2019, 2022 +// Copyright IBM Corp. 2019, 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. @@ -7,9 +7,17 @@ $css--plex: true !default; -@import 'carbon-components/scss/globals/scss/helper-mixins'; -@import 'carbon-components/scss/components/code-snippet/code-snippet'; -@import 'carbon-components/scss/components/copy-button/copy-button'; +@use '@carbon/styles/scss/config' as *; +@use '@carbon/styles/scss/theme' as *; +@use '@carbon/styles/scss/type' as *; +@use '@carbon/styles/scss/spacing' as *; +@use '@carbon/styles/scss/motion' as *; +@use '@carbon/styles/scss/utilities' as *; +@use '@carbon/styles/scss/components/code-snippet/code-snippet' as *; +@use '@carbon/styles/scss/components/copy-button/copy-button'; + +// https://github.com/carbon-design-system/carbon/issues/11408 +@include code-snippet; :host(#{$prefix}-code-snippet), :host(#{$prefix}-code-snippet-skeleton) { @@ -18,12 +26,12 @@ $css--plex: true !default; outline: none; &::after { - background-color: $ui-01; + background-color: $layer-01; background-image: none; - mask-image: linear-gradient(to right, transparent 0%, $ui-01 100%); + mask-image: linear-gradient(to right, transparent 0%, $layer-01 100%); @media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) { background-color: transparent; - background-image: linear-gradient(to right, transparent, $ui-01); + background-image: linear-gradient(to right, transparent, $layer-01); } } @@ -49,26 +57,27 @@ $css--plex: true !default; white-space: nowrap; @include type-style('code-01'); - padding-right: $spacing-xs; + padding-right: $spacing-03; } } -:host(#{$prefix}-code-snippet[color-scheme='light']) { - background-color: $ui-02; +// TODO: deprecate light color scheme +// :host(#{$prefix}-code-snippet[color-scheme='light']) { +// background-color: $layer-02; - button.#{$prefix}--btn.#{$prefix}--snippet-btn--expand { - background-color: $ui-02; - } +// button.#{$prefix}--btn.#{$prefix}--snippet-btn--expand { +// background-color: $layer-02; +// } - &:hover { - background-color: $hover-ui-light; - } +// &:hover { +// background-color: $hover-ui-light; +// } - .#{$prefix}--snippet-button:hover, - button.#{$prefix}--btn.#{$prefix}--snippet-btn--expand:hover { - background-color: $hover-ui-light; - } -} +// .#{$prefix}--snippet-button:hover, +// button.#{$prefix}--btn.#{$prefix}--snippet-btn--expand:hover { +// background-color: $hover-ui-light; +// } +// } :host(#{$prefix}-code-snippet[type='multi']), :host(#{$prefix}-code-snippet-skeleton[type='multi']) { @@ -84,12 +93,12 @@ $css--plex: true !default; bottom: rem(16px); width: 100%; height: rem(16px); - background-color: $ui-01; + background-color: $layer-01; background-image: none; - mask-image: linear-gradient(to bottom, transparent 0%, $ui-01 100%); + mask-image: linear-gradient(to bottom, transparent 0%, $layer-01 100%); @media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) { background-color: transparent; - background-image: linear-gradient(to bottom, transparent, $ui-01); + background-image: linear-gradient(to bottom, transparent, $layer-01); } } @@ -101,7 +110,7 @@ $css--plex: true !default; padding-bottom: 0; max-height: rem(238px); min-height: rem(56px); - transition: max-height $duration--moderate-01 motion(standard, productive); + transition: max-height $duration-moderate-01 motion(standard, productive); pre { overflow: hidden; @@ -122,7 +131,7 @@ $css--plex: true !default; .#{$prefix}-ce--snippet-container--expanded { max-height: rem(1500px); - transition: max-height $duration--moderate-01 motion(standard, productive); + transition: max-height $duration-moderate-01 motion(standard, productive); pre { overflow-x: auto; diff --git a/web-components/packages/carbon-web-components/src/components/code-snippet/code-snippet.ts b/web-components/packages/carbon-web-components/src/components/code-snippet/code-snippet.ts index 9babfc941693..4c1cd189faa4 100644 --- a/web-components/packages/carbon-web-components/src/components/code-snippet/code-snippet.ts +++ b/web-components/packages/carbon-web-components/src/components/code-snippet/code-snippet.ts @@ -11,7 +11,7 @@ import { classMap } from 'lit/directives/class-map.js'; import { LitElement, html, TemplateResult } from 'lit'; import { property, customElement, query } from 'lit/decorators.js'; import ChevronDown16 from '@carbon/icons/lib/chevron--down/16'; -import settings from 'carbon-components/es/globals/js/settings'; +import { prefix } from '../../globals/settings'; import FocusMixin from '../../globals/mixins/focus'; import { _createHandleFeedbackTooltip as createHandleCopyButtonFeedbackTooltip, @@ -22,8 +22,6 @@ import styles from './code-snippet.scss'; export { CODE_SNIPPET_COLOR_SCHEME, CODE_SNIPPET_TYPE }; -const { prefix } = settings; - /** * @param values The values to render. * @param values.children The child nodes. @@ -82,7 +80,7 @@ const renderCode = ({ /** * Basic code snippet. * - * @element bx-code-snippet + * @element cds-code-snippet */ @customElement(`${prefix}-code-snippet`) class BXCodeSnippet extends FocusMixin(LitElement) { diff --git a/web-components/packages/carbon-web-components/src/components/combo-box/combo-box-item.ts b/web-components/packages/carbon-web-components/src/components/combo-box/combo-box-item.ts index 0bbcc866a76f..45c307b28752 100644 --- a/web-components/packages/carbon-web-components/src/components/combo-box/combo-box-item.ts +++ b/web-components/packages/carbon-web-components/src/components/combo-box/combo-box-item.ts @@ -7,17 +7,15 @@ * LICENSE file in the root directory of this source tree. */ -import settings from 'carbon-components/es/globals/js/settings'; import { customElement } from 'lit/decorators.js'; +import { prefix } from '../../globals/settings'; import BXDropdownItem from '../dropdown/dropdown-item'; import styles from './combo-box.scss'; -const { prefix } = settings; - /** * Combo box item. * - * @element bx-combo-box-item + * @element cds-combo-box-item */ @customElement(`${prefix}-combo-box-item`) class BXComboBoxItem extends BXDropdownItem { diff --git a/web-components/packages/carbon-web-components/src/components/combo-box/combo-box-story.ts b/web-components/packages/carbon-web-components/src/components/combo-box/combo-box-story.ts index 58e6b141de9b..97908ce36163 100644 --- a/web-components/packages/carbon-web-components/src/components/combo-box/combo-box-story.ts +++ b/web-components/packages/carbon-web-components/src/components/combo-box/combo-box-story.ts @@ -18,6 +18,7 @@ import { } from './combo-box'; import './combo-box-item'; import storyDocs from './combo-box-story.mdx'; +import { prefix } from '../../globals/settings'; const colorSchemes = { [`Regular`]: null, @@ -55,7 +56,7 @@ export const Default = (args) => { onBeforeToggle, onSelect, onToggle, - } = args?.['bx-combo-box'] ?? {}; + } = args?.[`${prefix}-combo-box`] ?? {}; const handleBeforeSelect = (event: CustomEvent) => { if (onBeforeSelect) { onBeforeSelect(event); @@ -73,7 +74,7 @@ export const Default = (args) => { } }; return html` - { value=${value} trigger-content=${triggerContent} type=${ifDefined(type)} - @bx-combo-box-beingselected=${handleBeforeSelect} - @bx-combo-box-beingtoggled=${handleBeforeToggle} - @bx-combo-box-selected=${onSelect} - @bx-combo-box-toggled=${onToggle}> - Option 1 - Option 2 - Option 3 - Option 4 - Option 5 - Option 6 - Option 7 - Option 8 - + @cds-combo-box-beingselected=${handleBeforeSelect} + @cds-combo-box-beingtoggled=${handleBeforeToggle} + @cds-combo-box-selected=${onSelect} + @cds-combo-box-toggled=${onToggle}> + Option 1 + Option 2 + Option 3 + Option 4 + Option 5 + Option 6 + Option 7 + Option 8 + `; }; +Default.decorators = [ + (story) => html`
${story()}
`, +]; + Default.storyName = 'Default'; export default { @@ -108,7 +113,7 @@ export default { parameters: { ...storyDocs.parameters, knobs: { - 'bx-combo-box': () => ({ + [`${prefix}-combo-box`]: () => ({ open: boolean('Open (open)', false), colorScheme: select('Color scheme (color-scheme)', colorSchemes, null), disabled: boolean('Disabled (disabled)', false), @@ -124,17 +129,17 @@ export default { validityMessage: text('The validity message (validity-message)', ''), value: text('The value of the selected item (value)', ''), disableSelection: boolean( - 'Disable user-initiated selection change (Call event.preventDefault() in bx-combo-box-beingselected event)', + `Disable user-initiated selection change (Call event.preventDefault() in ${prefix}-combo-box-beingselected event)`, false ), disableToggle: boolean( - 'Disable user-initiated toggle of open state (Call event.preventDefault() in bx-combo-box-beingtoggled event)', + `Disable user-initiated toggle of open state (Call event.preventDefault() in ${prefix}-combo-box-beingtoggled event)`, false ), - onBeforeSelect: action('bx-combo-box-beingselected'), - onBeforeToggle: action('bx-combo-box-beingtoggled'), - onSelect: action('bx-combo-box-selected'), - onToggle: action('bx-combo-box-toggled'), + onBeforeSelect: action(`${prefix}-combo-box-beingselected`), + onBeforeToggle: action(`${prefix}-combo-box-beingtoggled`), + onSelect: action(`${prefix}-combo-box-selected`), + onToggle: action(`${prefix}-combo-box-toggled`), }), }, }, diff --git a/web-components/packages/carbon-web-components/src/components/combo-box/combo-box.scss b/web-components/packages/carbon-web-components/src/components/combo-box/combo-box.scss index 0e4247ad6faa..d2ef0cc50b80 100644 --- a/web-components/packages/carbon-web-components/src/components/combo-box/combo-box.scss +++ b/web-components/packages/carbon-web-components/src/components/combo-box/combo-box.scss @@ -1,5 +1,5 @@ // -// Copyright IBM Corp. 2019, 2022 +// Copyright IBM Corp. 2019, 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. @@ -7,9 +7,12 @@ $css--plex: true !default; -@import 'carbon-components/scss/components/combo-box/combo-box'; -@import 'carbon-components/scss/components/form/form'; -@import 'carbon-components/scss/components/text-input/text-input'; +@use '@carbon/styles/scss/config' 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/components/form'; +@use '@carbon/styles/scss/components/text-input/text-input'; :host(#{$prefix}-combo-box) { outline: none; @@ -79,7 +82,7 @@ $css--plex: true !default; :host(#{$prefix}-combo-box-item[disabled]) .#{$prefix}--list-box__menu-item__option { - color: $disabled-02; + color: $text-disabled; text-decoration: none; } @@ -92,7 +95,7 @@ $css--plex: true !default; @extend .#{$prefix}--list-box__menu-item--highlighted; .#{$prefix}--list-box__menu-item__option { - color: $text-01; + color: $text-primary; } .#{$prefix}--list-box__menu-item__selected-icon { diff --git a/web-components/packages/carbon-web-components/src/components/combo-box/combo-box.ts b/web-components/packages/carbon-web-components/src/components/combo-box/combo-box.ts index 8f306405baf5..f512fee41943 100644 --- a/web-components/packages/carbon-web-components/src/components/combo-box/combo-box.ts +++ b/web-components/packages/carbon-web-components/src/components/combo-box/combo-box.ts @@ -7,10 +7,10 @@ * LICENSE file in the root directory of this source tree. */ -import settings from 'carbon-components/es/globals/js/settings'; import { TemplateResult, html } from 'lit'; import { property, customElement, query } from 'lit/decorators.js'; import Close16 from '@carbon/icons/lib/close/16'; +import { prefix } from '../../globals/settings'; import { findIndex, forEach } from '../../globals/internal/collection-helpers'; import BXDropdown, { DROPDOWN_KEYBOARD_ACTION } from '../dropdown/dropdown'; import BXComboBoxItem from './combo-box-item'; @@ -22,20 +22,18 @@ export { DROPDOWN_TYPE, } from '../dropdown/dropdown'; -const { prefix } = settings; - /** * Combo box. * - * @element bx-combo-box - * @fires bx-combo-box-beingselected + * @element cds-combo-box + * @fires cds-combo-box-beingselected * The custom event fired before a combo box item is selected upon a user gesture. * Cancellation of this event stops changing the user-initiated selection. - * @fires bx-combo-box-beingtoggled + * @fires cds-combo-box-beingtoggled * The custom event fired before the open state of this combo box is toggled upon a user gesture. * Cancellation of this event stops the user-initiated toggling. - * @fires bx-combo-box-selected - The custom event fired after a combo box item is selected upon a user gesture. - * @fires bx-combo-box-toggled - The custom event fired after the open state of this combo box is toggled upon a user gesture. + * @fires cds-combo-box-selected - The custom event fired after a combo box item is selected upon a user gesture. + * @fires cds-combo-box-toggled - The custom event fired after the open state of this combo box is toggled upon a user gesture. */ @customElement(`${prefix}-combo-box`) class BXComboBox extends BXDropdown { diff --git a/web-components/packages/carbon-web-components/src/components/content-switcher/content-switcher-item.ts b/web-components/packages/carbon-web-components/src/components/content-switcher/content-switcher-item.ts index e21e25c41efe..3e613b4bd012 100644 --- a/web-components/packages/carbon-web-components/src/components/content-switcher/content-switcher-item.ts +++ b/web-components/packages/carbon-web-components/src/components/content-switcher/content-switcher-item.ts @@ -11,16 +11,14 @@ import { classMap } from 'lit/directives/class-map.js'; import { ifDefined } from 'lit/directives/if-defined.js'; import { LitElement, html } from 'lit'; import { property, customElement } from 'lit/decorators.js'; -import settings from 'carbon-components/es/globals/js/settings'; +import { prefix } from '../../globals/settings'; import FocusMixin from '../../globals/mixins/focus'; import styles from './content-switcher.scss'; -const { prefix } = settings; - /** * Content switcher button. * - * @element bx-content-switcher-item + * @element cds-content-switcher-item */ @customElement(`${prefix}-content-switcher-item`) class BXContentSwitcherItem extends FocusMixin(LitElement) { @@ -53,7 +51,7 @@ class BXContentSwitcherItem extends FocusMixin(LitElement) { target!: string; /** - * The `value` attribute that is set to the parent `` when this content switcher item is selected. + * The `value` attribute that is set to the parent `` when this content switcher item is selected. */ @property() value = ''; diff --git a/web-components/packages/carbon-web-components/src/components/content-switcher/content-switcher-story.ts b/web-components/packages/carbon-web-components/src/components/content-switcher/content-switcher-story.ts index 60e2e7829b30..16a9228a5dff 100644 --- a/web-components/packages/carbon-web-components/src/components/content-switcher/content-switcher-story.ts +++ b/web-components/packages/carbon-web-components/src/components/content-switcher/content-switcher-story.ts @@ -15,14 +15,14 @@ import { ifDefined } from 'lit/directives/if-defined.js'; import { CONTENT_SWITCHER_SIZE } from './content-switcher'; import './content-switcher-item'; import storyDocs from './content-switcher-story.mdx'; +import { prefix } from '../../globals/settings'; const noop = () => {}; const sizes = { - 'Regular size': null, - [`Small size (${CONTENT_SWITCHER_SIZE.SMALL})`]: CONTENT_SWITCHER_SIZE.SMALL, - [`XL size (${CONTENT_SWITCHER_SIZE.EXTRA_LARGE})`]: - CONTENT_SWITCHER_SIZE.EXTRA_LARGE, + 'Medium (md - default)': null, + [`Small (${CONTENT_SWITCHER_SIZE.SMALL})`]: CONTENT_SWITCHER_SIZE.SMALL, + [`Large (${CONTENT_SWITCHER_SIZE.LARGE})`]: CONTENT_SWITCHER_SIZE.LARGE, }; export const Default = (args) => { @@ -32,7 +32,7 @@ export const Default = (args) => { onBeforeSelect = noop, onSelect = noop, size, - } = args?.['bx-content-switcher'] ?? {}; + } = args?.[`${prefix}-content-switcher`] ?? {}; const handleBeforeSelected = (event: CustomEvent) => { onBeforeSelect(event); if (disableSelection) { @@ -40,23 +40,21 @@ export const Default = (args) => { } }; return html` - - Option 1 - Option 2First section - Option 3Second section - Option 4 - Option 5Third section - + `; }; @@ -67,15 +65,15 @@ export default { parameters: { ...storyDocs.parameters, knobs: { - 'bx-content-switcher': () => ({ + [`${prefix}-content-switcher`]: () => ({ value: textNullable('The value of the selected item (value)', ''), size: select('Button size (size)', sizes, null), disableSelection: boolean( - 'Disable user-initiated selection change (Call event.preventDefault() in bx-content-switcher-beingselected event)', + `Disable user-initiated selection change (Call event.preventDefault() in ${prefix}-content-switcher-beingselected event)`, false ), - onBeforeSelect: action('bx-content-switcher-beingselected'), - onSelect: action('bx-content-switcher-selected'), + onBeforeSelect: action(`${prefix}-content-switcher-beingselected`), + onSelect: action(`${prefix}-content-switcher-selected`), }), }, }, diff --git a/web-components/packages/carbon-web-components/src/components/content-switcher/content-switcher.scss b/web-components/packages/carbon-web-components/src/components/content-switcher/content-switcher.scss index 3c294a9b4031..650e28ce2076 100644 --- a/web-components/packages/carbon-web-components/src/components/content-switcher/content-switcher.scss +++ b/web-components/packages/carbon-web-components/src/components/content-switcher/content-switcher.scss @@ -1,5 +1,5 @@ // -// Copyright IBM Corp. 2019, 2022 +// Copyright IBM Corp. 2019, 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. @@ -7,7 +7,13 @@ $css--plex: true !default; -@import 'carbon-components/scss/components/content-switcher/content-switcher'; +@use '@carbon/styles/scss/config' as *; +@use '@carbon/styles/scss/theme' as *; +@use '@carbon/styles/scss/utilities/convert' as *; +@use '@carbon/styles/scss/components/content-switcher/content-switcher' as *; + +// https://github.com/carbon-design-system/carbon/issues/11408 +@include content-switcher; :host(#{$prefix}-content-switcher) { @extend .#{$prefix}--content-switcher; @@ -17,8 +23,8 @@ $css--plex: true !default; @extend .#{$prefix}--content-switcher--sm; } -:host(#{$prefix}-content-switcher[size='xl']) { - @extend .#{$prefix}--content-switcher--xl; +:host(#{$prefix}-content-switcher[size='lg']) { + @extend .#{$prefix}--content-switcher--lg; } :host(#{$prefix}-content-switcher-item) { @@ -40,7 +46,7 @@ $css--plex: true !default; display: block; height: rem(16px); width: rem(1px); - background-color: $content-switcher-divider; + background-color: $border-subtle; position: absolute; z-index: 2; left: 0; @@ -55,8 +61,8 @@ $css--plex: true !default; } &:disabled { - border-top-color: $ui-05; - border-bottom-color: $ui-05; + border-top-color: $border-inverse; + border-bottom-color: $border-inverse; } } } @@ -70,7 +76,7 @@ $css--plex: true !default; .#{$prefix}--content-switcher-btn { border-top-left-radius: rem(4px); border-bottom-left-radius: rem(4px); - border-left: rem(1px) solid $ui-05; + border-left: rem(1px) solid $border-inverse; &::before { content: none; @@ -85,7 +91,7 @@ $css--plex: true !default; .#{$prefix}--content-switcher-btn { border-top-right-radius: rem(4px); border-bottom-right-radius: rem(4px); - border-right: rem(1px) solid $ui-05; + border-right: rem(1px) solid $border-inverse; &.#{$prefix}--content-switcher--selected { border-right: none; diff --git a/web-components/packages/carbon-web-components/src/components/content-switcher/content-switcher.ts b/web-components/packages/carbon-web-components/src/components/content-switcher/content-switcher.ts index 9f65841adfa5..51e265efd84a 100644 --- a/web-components/packages/carbon-web-components/src/components/content-switcher/content-switcher.ts +++ b/web-components/packages/carbon-web-components/src/components/content-switcher/content-switcher.ts @@ -9,7 +9,7 @@ import { LitElement, html } from 'lit'; import { property, customElement } from 'lit/decorators.js'; -import settings from 'carbon-components/es/globals/js/settings'; +import { prefix } from '../../globals/settings'; import { forEach, indexOf } from '../../globals/internal/collection-helpers'; import { NAVIGATION_DIRECTION, CONTENT_SWITCHER_SIZE } from './defs'; import BXSwitch from './content-switcher-item'; @@ -17,8 +17,6 @@ import styles from './content-switcher.scss'; export { NAVIGATION_DIRECTION, CONTENT_SWITCHER_SIZE }; -const { prefix } = settings; - /** * @param index The index * @param length The length of the array. @@ -37,11 +35,11 @@ const capIndex = (index: number, length: number) => { /** * Content switcher. * - * @element bx-content-switcher - * @fires bx-content-switcher-beingselected + * @element cds-content-switcher + * @fires cds-content-switcher-beingselected * The custom event fired before a content switcher item is selected upon a user gesture. * Cancellation of this event stops changing the user-initiated selection. - * @fires bx-content-switcher-selected - The custom event fired after a a content switcher item is selected upon a user gesture. + * @fires cds-content-switcher-selected - The custom event fired after a a content switcher item is selected upon a user gesture. */ @customElement(`${prefix}-content-switcher`) class BXContentSwitcher extends LitElement { @@ -59,7 +57,7 @@ class BXContentSwitcher extends LitElement { : indexOf(items, (target as Element).closest(selectorItem)!); const nextIndex = index < 0 ? index : index + 1; forEach(this.querySelectorAll(selectorItem), (elem, i) => { - // Specifies child `` to hide its divider instead of using CSS, + // Specifies child `` to hide its divider instead of using CSS, // until `:host-context()` gets supported in all major browsers (elem as BXSwitch).hideDivider = i === nextIndex; }); diff --git a/web-components/packages/carbon-web-components/src/components/content-switcher/defs.ts b/web-components/packages/carbon-web-components/src/components/content-switcher/defs.ts index 2496b8c09e58..6ffc8e0ba9c4 100644 --- a/web-components/packages/carbon-web-components/src/components/content-switcher/defs.ts +++ b/web-components/packages/carbon-web-components/src/components/content-switcher/defs.ts @@ -1,7 +1,7 @@ /** * @license * - * Copyright IBM Corp. 2020 + * 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. @@ -31,6 +31,12 @@ export enum CONTENT_SWITCHER_SIZE { */ SMALL = 'sm', + /** + * Large size. + */ + LARGE = 'lg', + + // TODO: deprecate /** * X-Large size. */ diff --git a/web-components/packages/carbon-web-components/src/components/copy-button/copy-button-story.ts b/web-components/packages/carbon-web-components/src/components/copy-button/copy-button-story.ts index 132a105bb022..2ec136b70870 100644 --- a/web-components/packages/carbon-web-components/src/components/copy-button/copy-button-story.ts +++ b/web-components/packages/carbon-web-components/src/components/copy-button/copy-button-story.ts @@ -14,16 +14,17 @@ import textNullable from '../../../.storybook/knob-text-nullable'; import { ifDefined } from 'lit/directives/if-defined.js'; import './copy-button'; import storyDocs from './copy-button-story.mdx'; +import { prefix } from '../../globals/settings'; export const Default = (args) => { const { buttonAssistiveText, feedbackText, feedbackTimeout, onClick } = - args?.['bx-copy-button'] ?? {}; + args?.[`${prefix}-copy-button`] ?? {}; return html` - + @click="${onClick}"> `; }; @@ -34,7 +35,7 @@ export default { parameters: { ...storyDocs.parameters, knobs: { - 'bx-copy-button': () => ({ + [`${prefix}-copy-button`]: () => ({ buttonAssistiveText: textNullable( 'Assistive text for the button (button-assistive-text)', '' diff --git a/web-components/packages/carbon-web-components/src/components/copy-button/copy-button.scss b/web-components/packages/carbon-web-components/src/components/copy-button/copy-button.scss index d7e744825f5d..7c5e65beca67 100644 --- a/web-components/packages/carbon-web-components/src/components/copy-button/copy-button.scss +++ b/web-components/packages/carbon-web-components/src/components/copy-button/copy-button.scss @@ -1,5 +1,5 @@ // -// Copyright IBM Corp. 2019, 2022 +// Copyright IBM Corp. 2019, 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. @@ -7,15 +7,10 @@ $css--plex: true !default; -@import 'carbon-components/scss/components/code-snippet/code-snippet'; -@import 'carbon-components/scss/components/copy-button/copy-button'; +@use '@carbon/styles/scss/config' as *; +@use '@carbon/styles/scss/components/copy-button/index'; :host(#{$prefix}-copy-button) { display: inline-flex; outline: none; - - .#{$prefix}--snippet-button .#{$prefix}--btn--copy__feedback { - left: 50%; - right: auto; - } } diff --git a/web-components/packages/carbon-web-components/src/components/copy-button/copy-button.ts b/web-components/packages/carbon-web-components/src/components/copy-button/copy-button.ts index 904ea66bee91..e8d47891619d 100644 --- a/web-components/packages/carbon-web-components/src/components/copy-button/copy-button.ts +++ b/web-components/packages/carbon-web-components/src/components/copy-button/copy-button.ts @@ -12,14 +12,12 @@ import { ifDefined } from 'lit/directives/if-defined.js'; import { LitElement, html, TemplateResult } from 'lit'; import { property, customElement } from 'lit/decorators.js'; import Copy16 from '@carbon/icons/lib/copy/16'; -import settings from 'carbon-components/es/globals/js/settings'; +import { prefix } from '../../globals/settings'; import FocusMixin from '../../globals/mixins/focus'; import styles from './copy-button.scss'; -const { prefix } = settings; - /** - * Note: For `` only. The API is subject to change/removal. + * Note: For `` only. The API is subject to change/removal. * * @param update The callback function that dictates how to update the DOM with new feedback tooltip state. * @returns A function that shows the feedback tooltip for the given duration. @@ -42,7 +40,7 @@ export const _createHandleFeedbackTooltip = ( }; /** - * Note: For `` only. The API is subject to change/removal. + * Note: For `` only. The API is subject to change/removal. * * @param properties The properties to render. * @returns The template result for copy button from the given properties. @@ -52,7 +50,7 @@ export const _renderButton = ({ assistiveText, feedbackText, showFeedback = false, - className = `${prefix}--snippet-button`, + className = `${prefix}--copy-btn`, children = html` ${Copy16({ class: `${prefix}--snippet__icon` })} `, @@ -67,7 +65,8 @@ export const _renderButton = ({ }) => { const feedbackClasses = classMap({ [`${prefix}--btn--copy__feedback`]: true, - [`${prefix}--btn--copy__feedback--displayed`]: showFeedback, + [`${prefix}--assistive-text`]: true, + [`${prefix}--copy-btn--animating`]: showFeedback, }); return html`

@@ -289,14 +287,14 @@ class BXPagination extends FocusMixin(HostListenerMixin(LitElement)) { } /** - * The name of the custom event fired after the current page is changed from ``. + * The name of the custom event fired after the current page is changed from ``. */ static get eventChangePage() { return `${prefix}-pages-select-changed`; } /** - * The name of the custom event fired after the number of rows per page is changed from ``. + * The name of the custom event fired after the number of rows per page is changed from ``. */ static get eventChangePageSize() { return `${prefix}-page-sizes-select-changed`; diff --git a/web-components/packages/carbon-web-components/src/components/progress-indicator/defs.ts b/web-components/packages/carbon-web-components/src/components/progress-indicator/defs.ts index 35eb7bd109b2..f743d45456b5 100644 --- a/web-components/packages/carbon-web-components/src/components/progress-indicator/defs.ts +++ b/web-components/packages/carbon-web-components/src/components/progress-indicator/defs.ts @@ -1,7 +1,7 @@ /** * @license * - * Copyright IBM Corp. 2020 + * 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. @@ -12,9 +12,9 @@ */ export enum PROGRESS_STEP_STAT { /** - * One for future execution. + * Complete one. */ - QUEUED = 'queued', + COMPLETE = 'complete', /** * One that is being executed now. @@ -22,9 +22,9 @@ export enum PROGRESS_STEP_STAT { CURRENT = 'current', /** - * Complete one. + * One for future execution. */ - COMPLETE = 'complete', + INCOMPLETE = 'incomplete', /** * Invalid one. diff --git a/web-components/packages/carbon-web-components/src/components/progress-indicator/progress-indicator-skeleton.ts b/web-components/packages/carbon-web-components/src/components/progress-indicator/progress-indicator-skeleton.ts index 9f0cfb2be186..90b021c889c2 100644 --- a/web-components/packages/carbon-web-components/src/components/progress-indicator/progress-indicator-skeleton.ts +++ b/web-components/packages/carbon-web-components/src/components/progress-indicator/progress-indicator-skeleton.ts @@ -9,13 +9,11 @@ import { LitElement, html } from 'lit'; import { property, customElement } from 'lit/decorators.js'; -import settings from 'carbon-components/es/globals/js/settings'; +import { prefix } from '../../globals/settings'; import { forEach } from '../../globals/internal/collection-helpers'; import BXProgressStepSkeleton from './progress-step-skeleton'; import styles from './progress-indicator.scss'; -const { prefix } = settings; - /** * Skeleton of progress indicator. */ diff --git a/web-components/packages/carbon-web-components/src/components/progress-indicator/progress-indicator-story.ts b/web-components/packages/carbon-web-components/src/components/progress-indicator/progress-indicator-story.ts index 607ffa711547..9c94745e53fd 100644 --- a/web-components/packages/carbon-web-components/src/components/progress-indicator/progress-indicator-story.ts +++ b/web-components/packages/carbon-web-components/src/components/progress-indicator/progress-indicator-story.ts @@ -8,50 +8,46 @@ */ import { html } from 'lit'; +import { ifDefined } from 'lit/directives/if-defined.js'; import { boolean } from '@storybook/addon-knobs'; import textNullable from '../../../.storybook/knob-text-nullable'; -import { ifDefined } from 'lit/directives/if-defined.js'; import './progress-indicator'; import './progress-step'; import './progress-indicator-skeleton'; import './progress-step-skeleton'; import storyDocs from './progress-indicator-story.mdx'; +import { prefix } from '../../globals/settings'; export const Default = (args) => { - const { vertical } = args?.['bx-progress-indicator'] ?? {}; - const { iconLabel, labelText, secondaryLabelText } = - args?.['bx-progress-step'] ?? {}; + const { vertical } = args?.[`${prefix}-progress-indicator`] ?? {}; + const { iconLabel, secondaryLabelText } = + args?.[`${prefix}-progress-step`] ?? {}; return html` - - + - + - + - + - + - + label-text="Fifth step" + state="incomplete"> + `; }; @@ -59,12 +55,11 @@ Default.storyName = 'Default'; Default.parameters = { knobs: { - 'bx-progress-indicator': () => ({ + [`${prefix}-progress-indicator`]: () => ({ vertical: boolean('Vertical (vertical)', false), }), - 'bx-progress-step': () => ({ + [`${prefix}-progress-step`]: () => ({ iconLabel: textNullable('Icon label (icon-label)', ''), - labelText: textNullable('Primary label text (label-text)', 'Label'), secondaryLabelText: textNullable( 'Secondary label text (secondary-label-text)', 'Secondary label' @@ -74,13 +69,13 @@ Default.parameters = { }; export const skeleton = (args) => { - const { vertical } = args?.['bx-progress-indicator-skeleton']; + const { vertical } = args?.[`${prefix}-progress-indicator-skeleton`]; return html` - - - - - + + + + + `; }; @@ -89,7 +84,7 @@ skeleton.parameters = { skip: true, }, knobs: { - 'bx-progress-indicator-skeleton': () => ({ + [`${prefix}-progress-indicator-skeleton`]: () => ({ vertical: boolean('Vertical (vertical)', false), }), }, diff --git a/web-components/packages/carbon-web-components/src/components/progress-indicator/progress-indicator.scss b/web-components/packages/carbon-web-components/src/components/progress-indicator/progress-indicator.scss index f1b9fda399da..344baf486dd5 100644 --- a/web-components/packages/carbon-web-components/src/components/progress-indicator/progress-indicator.scss +++ b/web-components/packages/carbon-web-components/src/components/progress-indicator/progress-indicator.scss @@ -1,5 +1,5 @@ // -// Copyright IBM Corp. 2019, 2022 +// Copyright IBM Corp. 2019, 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. @@ -7,7 +7,14 @@ $css--plex: true !default; -@import 'carbon-components/scss/components/progress-indicator/progress-indicator'; +@use '@carbon/styles/scss/config' as *; +@use '@carbon/styles/scss/spacing' as *; +@use '@carbon/styles/scss/theme' as *; +@use '@carbon/styles/scss/utilities/skeleton' as *; +@use '@carbon/styles/scss/components/progress-indicator/progress-indicator' as *; + +// https://github.com/carbon-design-system/carbon/issues/11408 +@include progress-indicator; :host(#{$prefix}-progress-indicator), :host(#{$prefix}-progress-indicator-skeleton) { @@ -26,8 +33,8 @@ $css--plex: true !default; outline: none; - // Carbon core style has hard-coded width whose value is the same as `.bx--progress-step`. - // We override it so changing width of `` automatically changes the width here. + // Carbon core style has hard-coded width whose value is the same as `.#{$prefix}--progress-step`. + // We override it so changing width of `<#{$prefix}-progress-step>` automatically changes the width here. // https://github.com/carbon-design-system/carbon-web-components/issues/325 .#{$prefix}--progress-line { width: 100%; @@ -41,7 +48,7 @@ $css--plex: true !default; :host(#{$prefix}-progress-step[vertical]), :host(#{$prefix}-progress-step-skeleton[vertical]) { display: list-item; - min-height: 6rem; + min-height: $spacing-12; width: initial; min-width: initial; @@ -83,16 +90,24 @@ $css--plex: true !default; :host(#{$prefix}-progress-step[state='current']) { @extend .#{$prefix}--progress-step--current; + + svg { + fill: $interactive; + } } :host(#{$prefix}-progress-step[state='complete']) { @extend .#{$prefix}--progress-step--complete; svg { - fill: $interactive-01; + fill: $interactive; } } +:host(#{$prefix}-progress-step[state='incomplete']) { + @extend .#{$prefix}--progress-step--incomplete; +} + :host(#{$prefix}-progress-step-skeleton) .#{$prefix}--progress-label { @include skeleton; @@ -102,10 +117,10 @@ $css--plex: true !default; :host(#{$prefix}-progress-step-skeleton) { svg { - fill: $ui-05; + fill: $layer-selected-inverse; } .#{$prefix}--progress-line { - background-color: $ui-03; + background-color: $layer-accent-01; } } diff --git a/web-components/packages/carbon-web-components/src/components/progress-indicator/progress-indicator.ts b/web-components/packages/carbon-web-components/src/components/progress-indicator/progress-indicator.ts index 188b9745a476..3036a126b0e8 100644 --- a/web-components/packages/carbon-web-components/src/components/progress-indicator/progress-indicator.ts +++ b/web-components/packages/carbon-web-components/src/components/progress-indicator/progress-indicator.ts @@ -9,17 +9,15 @@ import { LitElement, html } from 'lit'; import { property, customElement } from 'lit/decorators.js'; -import settings from 'carbon-components/es/globals/js/settings'; +import { prefix } from '../../globals/settings'; import { forEach } from '../../globals/internal/collection-helpers'; import BXProgressStep from './progress-step'; import styles from './progress-indicator.scss'; -const { prefix } = settings; - /** * Progress indicator. * - * @element bx-progress-indicator + * @element cds-progress-indicator */ @customElement(`${prefix}-progress-indicator`) class BXProgressIndicator extends LitElement { diff --git a/web-components/packages/carbon-web-components/src/components/progress-indicator/progress-step-skeleton.ts b/web-components/packages/carbon-web-components/src/components/progress-indicator/progress-step-skeleton.ts index 1494df4463de..41c63ee86e83 100644 --- a/web-components/packages/carbon-web-components/src/components/progress-indicator/progress-step-skeleton.ts +++ b/web-components/packages/carbon-web-components/src/components/progress-indicator/progress-step-skeleton.ts @@ -9,11 +9,9 @@ import { LitElement, html } from 'lit'; import { property, customElement } from 'lit/decorators.js'; -import settings from 'carbon-components/es/globals/js/settings'; +import { prefix } from '../../globals/settings'; import styles from './progress-indicator.scss'; -const { prefix } = settings; - /** * Skeleton of progress step. */ diff --git a/web-components/packages/carbon-web-components/src/components/progress-indicator/progress-step.ts b/web-components/packages/carbon-web-components/src/components/progress-indicator/progress-step.ts index 61f394f21364..ee64bd6d8233 100644 --- a/web-components/packages/carbon-web-components/src/components/progress-indicator/progress-step.ts +++ b/web-components/packages/carbon-web-components/src/components/progress-indicator/progress-step.ts @@ -7,58 +7,33 @@ * LICENSE file in the root directory of this source tree. */ -import { LitElement, html, svg, SVGTemplateResult } from 'lit'; +import { LitElement, html, svg } from 'lit'; import { property, customElement } from 'lit/decorators.js'; import CheckmarkOutline16 from '@carbon/icons/lib/checkmark--outline/16'; +import CircleDash16 from '@carbon/icons/lib/circle-dash/16'; +import Incomplete16 from '@carbon/icons/lib/incomplete/16'; import Warning16 from '@carbon/icons/lib/warning/16'; -import settings from 'carbon-components/es/globals/js/settings'; -import spread from '../../globals/directives/spread'; +import { prefix } from '../../globals/settings'; import FocusMixin from '../../globals/mixins/focus'; import { PROGRESS_STEP_STAT } from './defs'; import styles from './progress-indicator.scss'; export { PROGRESS_STEP_STAT }; -const { prefix } = settings; - /** * Icons, keyed by state. */ const icons = { - [PROGRESS_STEP_STAT.QUEUED]: ({ - children, - attrs = {}, - }: { - children?: SVGTemplateResult; - attrs?: { [key: string]: string }; - } = {}) => - svg` - - ${children} - - - `, - [PROGRESS_STEP_STAT.CURRENT]: ({ - children, - attrs = {}, - }: { - children?: SVGTemplateResult; - attrs?: { [key: string]: string }; - } = {}) => - svg` - - ${children} - - - `, [PROGRESS_STEP_STAT.COMPLETE]: CheckmarkOutline16, + [PROGRESS_STEP_STAT.INCOMPLETE]: CircleDash16, [PROGRESS_STEP_STAT.INVALID]: Warning16, + [PROGRESS_STEP_STAT.CURRENT]: Incomplete16, }; /** * Progress step. * - * @element bx-progress-step + * @element cds-progress-step * @slot secondary-label-text - The secondary progress label. */ @customElement(`${prefix}-progress-step`) @@ -91,7 +66,7 @@ class BXProgressStep extends FocusMixin(LitElement) { * The progress state. */ @property() - state = PROGRESS_STEP_STAT.QUEUED; + state = PROGRESS_STEP_STAT.INCOMPLETE; /** * `true` if the progress step should be vertical. diff --git a/web-components/packages/carbon-web-components/src/components/radio-button/radio-button-group.ts b/web-components/packages/carbon-web-components/src/components/radio-button/radio-button-group.ts index 82f7219306fc..9f2305a78375 100644 --- a/web-components/packages/carbon-web-components/src/components/radio-button/radio-button-group.ts +++ b/web-components/packages/carbon-web-components/src/components/radio-button/radio-button-group.ts @@ -9,7 +9,7 @@ import { LitElement, html } from 'lit'; import { property, customElement } from 'lit/decorators.js'; -import settings from 'carbon-components/es/globals/js/settings'; +import { prefix } from '../../globals/settings'; import FormMixin from '../../globals/mixins/form'; import HostListenerMixin from '../../globals/mixins/host-listener'; import HostListener from '../../globals/decorators/host-listener'; @@ -20,13 +20,11 @@ import styles from './radio-button.scss'; export { RADIO_BUTTON_ORIENTATION }; -const { prefix } = settings; - /** * Radio button group. * - * @element bx-radio-button-group - * @fires bx-radio-button-group-changed - The custom event fired after this radio button group changes its selected item. + * @element cds-radio-button-group + * @fires cds-radio-button-group-changed - The custom event fired after this radio button group changes its selected item. */ @customElement(`${prefix}-radio-button-group`) class BXRadioButtonGroup extends FormMixin(HostListenerMixin(LitElement)) { diff --git a/web-components/packages/carbon-web-components/src/components/radio-button/radio-button-skeleton.ts b/web-components/packages/carbon-web-components/src/components/radio-button/radio-button-skeleton.ts index e34d3b71bb7f..ebb6b3889fcb 100644 --- a/web-components/packages/carbon-web-components/src/components/radio-button/radio-button-skeleton.ts +++ b/web-components/packages/carbon-web-components/src/components/radio-button/radio-button-skeleton.ts @@ -9,11 +9,9 @@ import { LitElement, html } from 'lit'; import { customElement } from 'lit/decorators.js'; -import settings from 'carbon-components/es/globals/js/settings'; +import { prefix } from '../../globals/settings'; import styles from './radio-button.scss'; -const { prefix } = settings; - /** * Skeleton of radio button. */ diff --git a/web-components/packages/carbon-web-components/src/components/radio-button/radio-button-story.ts b/web-components/packages/carbon-web-components/src/components/radio-button/radio-button-story.ts index 1c7a1377278d..1d299271a932 100644 --- a/web-components/packages/carbon-web-components/src/components/radio-button/radio-button-story.ts +++ b/web-components/packages/carbon-web-components/src/components/radio-button/radio-button-story.ts @@ -8,10 +8,11 @@ */ import { html } from 'lit'; +import { ifDefined } from 'lit/directives/if-defined.js'; import { action } from '@storybook/addon-actions'; import { boolean, select } from '@storybook/addon-knobs'; import textNullable from '../../../.storybook/knob-text-nullable'; -import { ifDefined } from 'lit/directives/if-defined.js'; +import { prefix } from '../../globals/settings'; import { RADIO_BUTTON_ORIENTATION } from './radio-button-group'; import { RADIO_BUTTON_LABEL_POSITION } from './radio-button'; import './radio-button-skeleton'; @@ -33,29 +34,29 @@ const labelPositions = { export const Default = (args) => { const { disabled, labelPosition, orientation, name, value, onChange } = - args?.['bx-radio-button-group'] ?? {}; - const { hideLabel, labelText } = args?.['bx-radio-button'] ?? {}; + args?.[`${prefix}-radio-button-group`] ?? {}; + const { hideLabel, labelText } = args?.[`${prefix}-radio-button`] ?? {}; return html` - - + - + - + - + value="staging"> + `; }; @@ -63,7 +64,7 @@ Default.storyName = 'Default'; Default.parameters = { knobs: { - 'bx-radio-button-group': () => ({ + [`${prefix}-radio-button-group`]: () => ({ disabled: boolean('Disabled (disabled)', false), labelPosition: select( 'Label position (label-position)', @@ -77,9 +78,9 @@ Default.parameters = { ), name: textNullable('Name (name)', 'radio-group'), value: textNullable('Value (value)', ''), - onChange: action('bx-radio-button-group-changed'), + onChange: action(`${prefix}-radio-button-group-changed`), }), - 'bx-radio-button': () => ({ + [`${prefix}-radio-button`]: () => ({ hideLabel: boolean('Hide label (hide-label)', false), labelText: textNullable('Label text (label-text)', 'Radio button'), }), @@ -87,7 +88,7 @@ Default.parameters = { }; export const skeleton = () => - html` `; + html` `; skeleton.parameters = { percy: { diff --git a/web-components/packages/carbon-web-components/src/components/radio-button/radio-button.scss b/web-components/packages/carbon-web-components/src/components/radio-button/radio-button.scss index ddd87ef8537d..069e373e9573 100644 --- a/web-components/packages/carbon-web-components/src/components/radio-button/radio-button.scss +++ b/web-components/packages/carbon-web-components/src/components/radio-button/radio-button.scss @@ -1,5 +1,5 @@ // -// Copyright IBM Corp. 2019, 2022 +// Copyright IBM Corp. 2019, 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. @@ -7,9 +7,15 @@ $css--plex: true !default; -@import 'carbon-components/scss/globals/scss/css--helpers'; -@import 'carbon-components/scss/components/form/form'; -@import 'carbon-components/scss/components/radio-button/radio-button'; +@use '@carbon/styles/scss/config' as *; +@use '@carbon/styles/scss/theme' as *; +@use '@carbon/styles/scss/spacing' as *; +@use '@carbon/styles/scss/utilities'; +@use '@carbon/styles/scss/components/form'; +@use '@carbon/styles/scss/components/radio-button/radio-button' as *; + +// https://github.com/carbon-design-system/carbon/issues/11408 +@include radio-button; :host(#{$prefix}-radio-button-group) { @extend .#{$prefix}--radio-button-group; @@ -40,15 +46,15 @@ $css--plex: true !default; :host(#{$prefix}-radio-button[disabled]) { .#{$prefix}--radio-button__label { - color: $disabled; + color: $text-disabled; cursor: not-allowed; } .#{$prefix}--radio-button__appearance { - border-color: $disabled; + border-color: $border-disabled; &::before { - background-color: $disabled; + background-color: $border-disabled; } } } @@ -60,6 +66,6 @@ $css--plex: true !default; .#{$prefix}--radio-button__appearance { margin-right: 0; - margin-left: $carbon--spacing-03; + margin-left: $spacing-03; } } diff --git a/web-components/packages/carbon-web-components/src/components/radio-button/radio-button.ts b/web-components/packages/carbon-web-components/src/components/radio-button/radio-button.ts index cfab6181c372..ea4075f4b275 100644 --- a/web-components/packages/carbon-web-components/src/components/radio-button/radio-button.ts +++ b/web-components/packages/carbon-web-components/src/components/radio-button/radio-button.ts @@ -10,7 +10,7 @@ import { classMap } from 'lit/directives/class-map.js'; import { LitElement, html } from 'lit'; import { property, customElement, query } from 'lit/decorators.js'; -import settings from 'carbon-components/es/globals/js/settings'; +import { prefix } from '../../globals/settings'; import { ifDefined } from 'lit/directives/if-defined.js'; import HostListener from '../../globals/decorators/host-listener'; import FocusMixin from '../../globals/mixins/focus'; @@ -24,8 +24,6 @@ import styles from './radio-button.scss'; export { RADIO_BUTTON_LABEL_POSITION }; -const { prefix } = settings; - /** * Map of navigation direction by key for horizontal alignment. */ @@ -103,8 +101,8 @@ class RadioButtonDelegate implements ManagedRadioButtonDelegate { /** * Radio button. * - * @element bx-radio-button - * @fires bx-radio-button-changed - The custom event fired after this radio button changes its checked state. + * @element cds-radio-button + * @fires cds-radio-button-changed - The custom event fired after this radio button changes its checked state. */ @customElement(`${prefix}-radio-button`) class BXRadioButton extends HostListenerMixin(FocusMixin(LitElement)) { diff --git a/web-components/packages/carbon-web-components/src/components/search/search-skeleton.ts b/web-components/packages/carbon-web-components/src/components/search/search-skeleton.ts index 6ef5ad63ff07..992bbecfe60b 100644 --- a/web-components/packages/carbon-web-components/src/components/search/search-skeleton.ts +++ b/web-components/packages/carbon-web-components/src/components/search/search-skeleton.ts @@ -9,12 +9,10 @@ import { LitElement, html } from 'lit'; import { property, customElement } from 'lit/decorators.js'; -import settings from 'carbon-components/es/globals/js/settings'; +import { prefix } from '../../globals/settings'; import { INPUT_SIZE } from '../input/input'; import styles from './search.scss'; -const { prefix } = settings; - /** * Skeleton of search. */ diff --git a/web-components/packages/carbon-web-components/src/components/search/search-story.ts b/web-components/packages/carbon-web-components/src/components/search/search-story.ts index da78e7842268..f9be49c4f18f 100644 --- a/web-components/packages/carbon-web-components/src/components/search/search-story.ts +++ b/web-components/packages/carbon-web-components/src/components/search/search-story.ts @@ -8,14 +8,15 @@ */ import { html } from 'lit'; +import { ifDefined } from 'lit/directives/if-defined.js'; import { action } from '@storybook/addon-actions'; import { boolean, select } from '@storybook/addon-knobs'; import textNullable from '../../../.storybook/knob-text-nullable'; -import { ifDefined } from 'lit/directives/if-defined.js'; import { INPUT_SIZE } from '../input/input'; import { SEARCH_COLOR_SCHEME } from './search'; import './search-skeleton'; import storyDocs from './search-story.mdx'; +import { prefix } from '../../globals/settings'; const colorSchemes = { [`Regular`]: null, @@ -25,7 +26,7 @@ const colorSchemes = { const sizes = { 'Regular size': null, [`Small size (${INPUT_SIZE.SMALL})`]: INPUT_SIZE.SMALL, - [`Extra large size (${INPUT_SIZE.EXTRA_LARGE})`]: INPUT_SIZE.EXTRA_LARGE, + [`Large size (${INPUT_SIZE.LARGE})`]: INPUT_SIZE.LARGE, }; export const Default = (args) => { @@ -40,9 +41,9 @@ export const Default = (args) => { type, value, onInput, - } = args?.['bx-search'] ?? {}; + } = args?.[`${prefix}-search`] ?? {}; return html` - { size="${ifDefined(size)}" type="${ifDefined(type)}" value="${ifDefined(value)}" - @bx-search-input="${onInput}"> + @cds-search-input="${onInput}"> `; }; @@ -60,7 +61,7 @@ Default.storyName = 'Default'; Default.parameters = { knobs: { - 'bx-search': () => ({ + [`${prefix}-search`]: () => ({ closeButtonAssistiveText: textNullable( 'The label text for the close button (close-button-assistive-text)', 'Clear search input' @@ -70,15 +71,16 @@ Default.parameters = { labelText: textNullable('Label text (label-text)', 'Search'), name: textNullable('Name (name)', ''), placeholder: textNullable('Placeholder text (placeholder)', ''), - size: select('Searh size (size)', sizes, null), + size: select('Search size (size)', sizes, null), type: textNullable('The type of the (type)', ''), value: textNullable('Value (value)', ''), - onInput: action('bx-search-input'), + onInput: action(`${prefix}-search-input`), }), }, }; -export const skeleton = () => html` `; +export const skeleton = () => + html` `; skeleton.parameters = { percy: { diff --git a/web-components/packages/carbon-web-components/src/components/search/search.scss b/web-components/packages/carbon-web-components/src/components/search/search.scss index 61382d74e624..54327cb9a8e1 100644 --- a/web-components/packages/carbon-web-components/src/components/search/search.scss +++ b/web-components/packages/carbon-web-components/src/components/search/search.scss @@ -1,5 +1,5 @@ // -// Copyright IBM Corp. 2019, 2022 +// Copyright IBM Corp. 2019, 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. @@ -7,9 +7,13 @@ $css--plex: true !default; -@import 'carbon-components/scss/globals/scss/helper-mixins'; -@import 'carbon-components/scss/components/form/form'; -@import 'carbon-components/scss/components/search/search'; +@use '@carbon/styles/scss/config' as *; +@use '@carbon/styles/scss/utilities' as *; +@use '@carbon/styles/scss/components/form'; +@use '@carbon/styles/scss/components/search' as *; + +// https://github.com/carbon-design-system/carbon/issues/11408 +@include search; :host(#{$prefix}-search), :host(#{$prefix}-search-skeleton) { @@ -32,10 +36,11 @@ $css--plex: true !default; @extend .#{$prefix}--search--lg; } -:host(#{$prefix}-search[size='xl']), -:host(#{$prefix}-search-skeleton[size='xl']) { - @extend .#{$prefix}--search--xl; -} +// TODO: deprecate +// :host(#{$prefix}-search[size='xl']), +// :host(#{$prefix}-search-skeleton[size='xl']) { +// @extend .#{$prefix}--search--xl; +// } :host(#{$prefix}-search[color-scheme='light']) { @extend .#{$prefix}--search--light; diff --git a/web-components/packages/carbon-web-components/src/components/search/search.ts b/web-components/packages/carbon-web-components/src/components/search/search.ts index 25bc8222ea50..fe3412bc125e 100644 --- a/web-components/packages/carbon-web-components/src/components/search/search.ts +++ b/web-components/packages/carbon-web-components/src/components/search/search.ts @@ -13,7 +13,7 @@ import { property, customElement } from 'lit/decorators.js'; import Close16 from '@carbon/icons/lib/close/16'; import Close20 from '@carbon/icons/lib/close/20'; import Search16 from '@carbon/icons/lib/search/16'; -import settings from 'carbon-components/es/globals/js/settings'; +import { prefix } from '../../globals/settings'; import ifNonEmpty from '../../globals/directives/if-non-empty'; import FocusMixin from '../../globals/mixins/focus'; import FormMixin from '../../globals/mixins/form'; @@ -23,18 +23,16 @@ import styles from './search.scss'; export { SEARCH_COLOR_SCHEME }; -const { prefix } = settings; - /** * Search box. * - * @element bx-search + * @element cds-search * @csspart search-icon The search icon. * @csspart label-text The label text. * @csspart input The input box. * @csspart close-button The close button. * @csspart close-icon The close icon. - * @fires bx-search-input - The custom event fired after the search content is changed upon a user gesture. + * @fires cds-search-input - The custom event fired after the search content is changed upon a user gesture. */ @customElement(`${prefix}-search`) class BXSearch extends FocusMixin(FormMixin(LitElement)) { diff --git a/web-components/packages/carbon-web-components/src/components/select/select-item-group.ts b/web-components/packages/carbon-web-components/src/components/select/select-item-group.ts index 85ae342750a3..2d5b5986ac64 100644 --- a/web-components/packages/carbon-web-components/src/components/select/select-item-group.ts +++ b/web-components/packages/carbon-web-components/src/components/select/select-item-group.ts @@ -9,14 +9,12 @@ import { LitElement } from 'lit'; import { property, customElement } from 'lit/decorators.js'; -import settings from 'carbon-components/es/globals/js/settings'; - -const { prefix } = settings; +import { prefix } from '../../globals/settings'; /** * An option group in select box. * - * @element bx-select-item-group + * @element cds-select-item-group */ @customElement(`${prefix}-select-item-group`) class BXSelectItemGroup extends LitElement { diff --git a/web-components/packages/carbon-web-components/src/components/select/select-item.ts b/web-components/packages/carbon-web-components/src/components/select/select-item.ts index 6f74d2c4ecf7..b6d08c7ec184 100644 --- a/web-components/packages/carbon-web-components/src/components/select/select-item.ts +++ b/web-components/packages/carbon-web-components/src/components/select/select-item.ts @@ -9,14 +9,12 @@ import { LitElement } from 'lit'; import { property, customElement } from 'lit/decorators.js'; -import settings from 'carbon-components/es/globals/js/settings'; - -const { prefix } = settings; +import { prefix } from '../../globals/settings'; /** * An option in select box. * - * @element bx-select-item + * @element cds-select-item */ @customElement(`${prefix}-select-item`) class BXSelectItem extends LitElement { diff --git a/web-components/packages/carbon-web-components/src/components/select/select-story.ts b/web-components/packages/carbon-web-components/src/components/select/select-story.ts index b9844e1180a7..ac1b16fecd6e 100644 --- a/web-components/packages/carbon-web-components/src/components/select/select-story.ts +++ b/web-components/packages/carbon-web-components/src/components/select/select-story.ts @@ -8,13 +8,14 @@ */ import { html } from 'lit'; +import { ifDefined } from 'lit/directives/if-defined.js'; import { action } from '@storybook/addon-actions'; import { boolean, select } from '@storybook/addon-knobs'; import textNullable from '../../../.storybook/knob-text-nullable'; // Below path will be there when an application installs `carbon-web-components` package. // In our dev env, we auto-generate the file and re-map below path to to point to the generated file. // @ts-ignore -import { ifDefined } from 'lit/directives/if-defined.js'; +import { prefix } from '../../globals/settings'; import { INPUT_COLOR_SCHEME, INPUT_SIZE } from '../input/input'; import './select'; import storyDocs from './select-story.mdx'; @@ -44,20 +45,20 @@ export const Default = (args) => { validityMessage, value, children = html` - - Option 1 - Option 2 - - - Option 3 - Option 4 - Option 5 - + + Option 1 + Option 2 + + + Option 3 + Option 4 + Option 5 + `, onInput, - } = args?.['bx-select'] ?? {}; + } = args?.[`${prefix}-select`] ?? {}; return html` - { size="${ifDefined(size)}" validity-message="${ifDefined(validityMessage)}" value="${ifDefined(value)}" - @bx-select-selected="${ifDefined(onInput)}"> + @cds-select-selected="${ifDefined(onInput)}"> ${children} - + `; }; Default.parameters = { knobs: { - 'bx-select': () => ({ + [`${prefix}-select`]: () => ({ colorScheme: select('Color scheme (color-scheme)', colorSchemes, null), disabled: boolean('Disabled (disabled)', false), helperText: textNullable( @@ -96,7 +97,7 @@ Default.parameters = { '' ), value: textNullable('The value of the selected item (value)', ''), - onInput: action('bx-select-selected'), + onInput: action(`${prefix}-select-selected`), }), }, }; diff --git a/web-components/packages/carbon-web-components/src/components/select/select.scss b/web-components/packages/carbon-web-components/src/components/select/select.scss index c9d6dfb95f14..b7d8d7fec7e5 100644 --- a/web-components/packages/carbon-web-components/src/components/select/select.scss +++ b/web-components/packages/carbon-web-components/src/components/select/select.scss @@ -1,5 +1,5 @@ // -// 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. @@ -7,7 +7,8 @@ $css--plex: true !default; -@import 'carbon-components/scss/components/select/select'; +@use '@carbon/styles/scss/config' as *; +@use '@carbon/styles/scss/components/select'; :host(#{$prefix}-select) { @extend .#{$prefix}--select; diff --git a/web-components/packages/carbon-web-components/src/components/select/select.ts b/web-components/packages/carbon-web-components/src/components/select/select.ts index 4b0c8253e46b..82b59956c167 100644 --- a/web-components/packages/carbon-web-components/src/components/select/select.ts +++ b/web-components/packages/carbon-web-components/src/components/select/select.ts @@ -10,9 +10,9 @@ import { LitElement, html } from 'lit'; import { property, customElement, query } from 'lit/decorators.js'; import { classMap } from 'lit/directives/class-map.js'; -import settings from 'carbon-components/es/globals/js/settings'; import ChevronDown16 from '@carbon/icons/lib/chevron--down/16'; import WarningFilled16 from '@carbon/icons/lib/warning--filled/16'; +import { prefix } from '../../globals/settings'; import { FORM_ELEMENT_COLOR_SCHEME } from '../../globals/shared-enums'; import { ifDefined } from 'lit/directives/if-defined.js'; import FormMixin from '../../globals/mixins/form'; @@ -23,12 +23,10 @@ import styles from './select.scss'; export { FORM_ELEMENT_COLOR_SCHEME as SELECT_COLOR_SCHEME } from '../../globals/shared-enums'; -const { prefix } = settings; - /** * Select box. * - * @element bx-select + * @element cds-select * @slot helper-text - The helper text. * @slot label-text - The label text. * @slot validity-message - The validity message. If present and non-empty, this input shows the UI of its invalid state. @@ -74,10 +72,10 @@ class BXSelect extends ValidityMixin(FormMixin(LitElement)) { } /** - * Handles DOM mutation of `` or `` put in ``, or their changes. - * In such event, `` creates the corresponding ``, respectively, into shadow DOM, + * Handles DOM mutation of `` or `` put in ``, or their changes. + * In such event, `` creates the corresponding ``, respectively, into shadow DOM, * with `._renderItems()`. - * Doing so allows the shadow DOM style of `` to control the style of the ``, + * Doing so allows the shadow DOM style of `` to control the style of the ``, * notably the disabled ones. */ private _handleMutation = () => { @@ -91,7 +89,7 @@ class BXSelect extends ValidityMixin(FormMixin(LitElement)) { private _renderItems(element: BXSelect | HTMLOptGroupElement) { const { selectorItem, selectorLeafItem } = this .constructor as typeof BXSelect; - // Harvests attributes from `` and ``. + // Harvests attributes from `` and ``. // Does not use properties to avoid delay in attribute to property mapping, which runs in custom element reaction cycle: // https://html.spec.whatwg.org/multipage/custom-elements.html#custom-element-reactions return html` diff --git a/web-components/packages/carbon-web-components/src/components/skeleton-placeholder/skeleton-placeholder-story.ts b/web-components/packages/carbon-web-components/src/components/skeleton-placeholder/skeleton-placeholder-story.ts index 9aa452355be1..87aaf70b68f1 100644 --- a/web-components/packages/carbon-web-components/src/components/skeleton-placeholder/skeleton-placeholder-story.ts +++ b/web-components/packages/carbon-web-components/src/components/skeleton-placeholder/skeleton-placeholder-story.ts @@ -12,7 +12,7 @@ import './skeleton-placeholder'; import storyDocs from './skeleton-placeholder-story.mdx'; export const Default = () => - html` `; + html` `; Default.storyName = 'Default'; diff --git a/web-components/packages/carbon-web-components/src/components/skeleton-placeholder/skeleton-placeholder.scss b/web-components/packages/carbon-web-components/src/components/skeleton-placeholder/skeleton-placeholder.scss index 1c2ac6845638..8da776327bb3 100644 --- a/web-components/packages/carbon-web-components/src/components/skeleton-placeholder/skeleton-placeholder.scss +++ b/web-components/packages/carbon-web-components/src/components/skeleton-placeholder/skeleton-placeholder.scss @@ -1,8 +1,8 @@ // -// Copyright IBM Corp. 2019, 2022 +// Copyright IBM Corp. 2019, 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. // -@import 'carbon-components/scss/components/skeleton/skeleton-placeholder'; +@use '@carbon/styles/scss/components/skeleton-styles'; diff --git a/web-components/packages/carbon-web-components/src/components/skeleton-placeholder/skeleton-placeholder.ts b/web-components/packages/carbon-web-components/src/components/skeleton-placeholder/skeleton-placeholder.ts index cb24955d2f45..3c33c4ce00ae 100644 --- a/web-components/packages/carbon-web-components/src/components/skeleton-placeholder/skeleton-placeholder.ts +++ b/web-components/packages/carbon-web-components/src/components/skeleton-placeholder/skeleton-placeholder.ts @@ -9,15 +9,13 @@ import { LitElement, html } from 'lit'; import { customElement } from 'lit/decorators.js'; -import settings from 'carbon-components/es/globals/js/settings'; +import { prefix } from '../../globals/settings'; import styles from './skeleton-placeholder.scss'; -const { prefix } = settings; - /** * Skeleton placeholder. * - * @element bx-skeleton-placeholder + * @element cds-skeleton-placeholder */ @customElement(`${prefix}-skeleton-placeholder`) class BXSkeletonPlaceholder extends LitElement { diff --git a/web-components/packages/carbon-web-components/src/components/skeleton-text/skeleton-text-story.ts b/web-components/packages/carbon-web-components/src/components/skeleton-text/skeleton-text-story.ts index e43604667882..284bdd28309e 100644 --- a/web-components/packages/carbon-web-components/src/components/skeleton-text/skeleton-text-story.ts +++ b/web-components/packages/carbon-web-components/src/components/skeleton-text/skeleton-text-story.ts @@ -8,8 +8,9 @@ */ import { html } from 'lit'; -import { select } from '@storybook/addon-knobs'; +import { boolean, number, select, text } from '@storybook/addon-knobs'; import { ifDefined } from 'lit/directives/if-defined.js'; +import { prefix } from '../../globals/settings'; import { SKELETON_TEXT_TYPE } from './skeleton-text'; import storyDocs from './skeleton-text-story.mdx'; @@ -19,31 +20,44 @@ const types = { }; export const Default = (args) => { - const { type } = args?.['bx-skeleton-text'] ?? {}; + const { type } = args?.[`${prefix}-skeleton-text`] ?? {}; return html` - + `; }; -Default.storyName = 'Default'; - Default.parameters = { knobs: { - 'bx-skeleton-text': () => ({ + [`${prefix}-skeleton-text`]: () => ({ type: select('Skeleton text type (type)', types, null), }), }, }; -export const lines = () => html` - - - -`; +export const Lines = (args) => { + const { paragraph, lineCount, width } = + args?.[`${prefix}-skeleton-text`] ?? {}; + return html` + + `; +}; -lines.decorators = [ - (story) => html`
${story()}
`, -]; +Lines.parameters = { + knobs: { + [`${prefix}-skeleton-text`]: () => ({ + paragraph: boolean('Use multiple lines of text (paragraph)', true), + lineCount: number('The number of lines in a paragraph (lineCount)', 3), + width: text( + 'Width (in px or %) of single line of text or max-width of paragraph lines (width)', + '100%' + ), + }), + }, +}; export default { title: 'Components/Skeleton text', diff --git a/web-components/packages/carbon-web-components/src/components/skeleton-text/skeleton-text.scss b/web-components/packages/carbon-web-components/src/components/skeleton-text/skeleton-text.scss index 2fd69cc80db4..bc9098c5043b 100644 --- a/web-components/packages/carbon-web-components/src/components/skeleton-text/skeleton-text.scss +++ b/web-components/packages/carbon-web-components/src/components/skeleton-text/skeleton-text.scss @@ -1,25 +1,14 @@ // -// Copyright IBM Corp. 2019, 2022 +// Copyright IBM Corp. 2019, 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. // -@import 'carbon-components/scss/components/skeleton/skeleton-text'; +@use '@carbon/styles/scss/config' as *; +@use '@carbon/styles/scss/components/skeleton-styles'; :host(#{$prefix}-skeleton-text) { display: block; width: 100%; } - -:host(#{$prefix}-skeleton-text[type='line']:nth-of-type(1n)) { - width: calc(100% - 73px); -} - -:host(#{$prefix}-skeleton-text[type='line']:nth-of-type(2n)) { - width: calc(100% - 11px); -} - -:host(#{$prefix}-skeleton-text[type='line']:nth-of-type(3n)) { - width: calc(100% - 43px); -} diff --git a/web-components/packages/carbon-web-components/src/components/skeleton-text/skeleton-text.ts b/web-components/packages/carbon-web-components/src/components/skeleton-text/skeleton-text.ts index d89f923c9e79..4866d5a7bc7d 100644 --- a/web-components/packages/carbon-web-components/src/components/skeleton-text/skeleton-text.ts +++ b/web-components/packages/carbon-web-components/src/components/skeleton-text/skeleton-text.ts @@ -10,18 +10,21 @@ import { classMap } from 'lit/directives/class-map.js'; import { LitElement, html } from 'lit'; import { property, customElement } from 'lit/decorators.js'; -import settings from 'carbon-components/es/globals/js/settings'; +import { prefix } from '../../globals/settings'; import { SKELETON_TEXT_TYPE } from './defs'; import styles from './skeleton-text.scss'; export { SKELETON_TEXT_TYPE }; -const { prefix } = settings; +function getRandomInt(min: number, max: number, n: number) { + const randoms = [0.973051493507435, 0.15334737213558558, 0.5671034553053769]; + return Math.floor(randoms[n % 3] * (max - min + 1)) + min; +} /** * Skeleton text. * - * @element bx-skeleton-text + * @element cds-skeleton-text */ @customElement(`${prefix}-skeleton-text`) class BXSkeletonText extends LitElement { @@ -31,13 +34,49 @@ class BXSkeletonText extends LitElement { @property({ reflect: true }) type = SKELETON_TEXT_TYPE.REGULAR; + /** + * width (in px or %) of single line of text or max-width of paragraph lines + */ + @property({ reflect: true }) + width = '100%'; + + /** + * will generate multiple lines of text + */ + + @property({ type: Boolean, reflect: true }) + paragraph = false; + + /** + * the number of lines in a paragraph + */ + @property({ type: Number, reflect: true }) + lineCount = 3; + render() { - const { type } = this; + const { paragraph, lineCount, type, width } = this; const classes = classMap({ [`${prefix}--skeleton__text`]: true, [`${prefix}--skeleton__heading`]: type === SKELETON_TEXT_TYPE.HEADING, }); - return html`

`; + if (paragraph) { + const widthNum = parseInt(this.width, 10); + const widthPx = this.width.includes('px'); + const widthPercent = this.width.includes('%'); + const lines = Array.apply(null, Array(lineCount)); + return html`${lines.map((_, i) => { + const randomWidth = + (widthPercent && `${getRandomInt(0, 75, i)}px`) || + (widthPx && `${getRandomInt(0, widthNum, i)}px`); + const style = + (widthPercent && `width: calc(${width} - ${randomWidth})`) || + (widthPx && `width: ${randomWidth}`) || + ''; + return html`

`; + })}`; + } + + return html`

`; } static styles = styles; diff --git a/web-components/packages/carbon-web-components/src/components/skip-to-content/skip-to-content-story.scss b/web-components/packages/carbon-web-components/src/components/skip-to-content/skip-to-content-story.scss index 2a1010a73277..3031775fa753 100644 --- a/web-components/packages/carbon-web-components/src/components/skip-to-content/skip-to-content-story.scss +++ b/web-components/packages/carbon-web-components/src/components/skip-to-content/skip-to-content-story.scss @@ -1,11 +1,13 @@ // -// 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. // -.bx--content { +@use '@carbon/styles/scss/config' as *; + +.#{$prefix}--content { h2 { margin: 30px 0; diff --git a/web-components/packages/carbon-web-components/src/components/skip-to-content/skip-to-content-story.ts b/web-components/packages/carbon-web-components/src/components/skip-to-content/skip-to-content-story.ts index f2196c7962bd..be303ec768a2 100644 --- a/web-components/packages/carbon-web-components/src/components/skip-to-content/skip-to-content-story.ts +++ b/web-components/packages/carbon-web-components/src/components/skip-to-content/skip-to-content-story.ts @@ -11,14 +11,15 @@ import { html } from 'lit'; import './skip-to-content'; import styles from './skip-to-content-story.scss'; import storyDocs from './skip-to-content-story.mdx'; +import { prefix } from '../../globals/settings'; export const Default = () => html` -
-
-
+
+
+

Purpose and function

The shell is perhaps the most crucial piece of any UI built with diff --git a/web-components/packages/carbon-web-components/src/components/skip-to-content/skip-to-content.scss b/web-components/packages/carbon-web-components/src/components/skip-to-content/skip-to-content.scss index c8372d6d2310..80cd10e02418 100644 --- a/web-components/packages/carbon-web-components/src/components/skip-to-content/skip-to-content.scss +++ b/web-components/packages/carbon-web-components/src/components/skip-to-content/skip-to-content.scss @@ -1,13 +1,14 @@ /** * @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. */ -@import 'carbon-components/scss/components/ui-shell/header'; +@use '@carbon/styles/scss/config' as *; +@use '@carbon/styles/scss/components/ui-shell/header'; :host(#{$prefix}-skip-to-content) { display: block; diff --git a/web-components/packages/carbon-web-components/src/components/skip-to-content/skip-to-content.ts b/web-components/packages/carbon-web-components/src/components/skip-to-content/skip-to-content.ts index e60318d68f28..7ac65fff7eb1 100644 --- a/web-components/packages/carbon-web-components/src/components/skip-to-content/skip-to-content.ts +++ b/web-components/packages/carbon-web-components/src/components/skip-to-content/skip-to-content.ts @@ -9,17 +9,15 @@ import { LitElement, html } from 'lit'; import { property, customElement } from 'lit/decorators.js'; -import settings from 'carbon-components/es/globals/js/settings.js'; +import { prefix } from '../../globals/settings'; import { ifDefined } from 'lit/directives/if-defined.js'; import FocusMixin from '../../globals/mixins/focus'; import styles from './skip-to-content.scss'; -const { prefix } = settings; - /** * Skip-to-content link. * - * @element bx-skip-to-content + * @element cds-skip-to-content */ @customElement(`${prefix}-skip-to-content`) class BXSkipToContent extends FocusMixin(LitElement) { diff --git a/web-components/packages/carbon-web-components/src/components/slider/slider-input.ts b/web-components/packages/carbon-web-components/src/components/slider/slider-input.ts index f3799c8d700b..6996748faa8e 100644 --- a/web-components/packages/carbon-web-components/src/components/slider/slider-input.ts +++ b/web-components/packages/carbon-web-components/src/components/slider/slider-input.ts @@ -10,21 +10,19 @@ import { classMap } from 'lit/directives/class-map.js'; import { LitElement, html } from 'lit'; import { property, customElement } from 'lit/decorators.js'; -import settings from 'carbon-components/es/globals/js/settings'; import { ifDefined } from 'lit/directives/if-defined.js'; +import { prefix } from '../../globals/settings'; import FocusMixin from '../../globals/mixins/focus'; import { SLIDER_INPUT_COLOR_SCHEME } from './defs'; import styles from './slider.scss'; export { SLIDER_INPUT_COLOR_SCHEME }; -const { prefix } = settings; - /** * The `` box for slider. * - * @element bx-slider-input - * @fires bx-slider-input-changed - The custom event fired after the value is changed by user gesture. + * @element cds-slider-input + * @fires cds-slider-input-changed - The custom event fired after the value is changed by user gesture. */ @customElement(`${prefix}-slider-input`) class BXSliderInput extends FocusMixin(LitElement) { diff --git a/web-components/packages/carbon-web-components/src/components/slider/slider-skeleton.ts b/web-components/packages/carbon-web-components/src/components/slider/slider-skeleton.ts index 9f9f90c2721d..3611dd240203 100644 --- a/web-components/packages/carbon-web-components/src/components/slider/slider-skeleton.ts +++ b/web-components/packages/carbon-web-components/src/components/slider/slider-skeleton.ts @@ -9,11 +9,9 @@ import { LitElement, html } from 'lit'; import { customElement } from 'lit/decorators.js'; -import settings from 'carbon-components/es/globals/js/settings'; +import { prefix } from '../../globals/settings'; import styles from './slider.scss'; -const { prefix } = settings; - /** * Skeleton of slider. */ diff --git a/web-components/packages/carbon-web-components/src/components/slider/slider-story.ts b/web-components/packages/carbon-web-components/src/components/slider/slider-story.ts index a958f4554865..13d406f9dfdb 100644 --- a/web-components/packages/carbon-web-components/src/components/slider/slider-story.ts +++ b/web-components/packages/carbon-web-components/src/components/slider/slider-story.ts @@ -15,12 +15,13 @@ import './slider'; import './slider-input'; import './slider-skeleton'; import storyDocs from './slider-story.mdx'; +import { prefix } from '../../globals/settings'; export const Default = (args) => { const { disabled, labelText, max, min, name, step, value, onChange } = - args?.['bx-slider'] || {}; + args?.[`${prefix}-slider`] || {}; return html` - { name="${ifDefined(name)}" step="${ifDefined(step)}" value="${ifDefined(value)}" - @bx-slider-changed="${onChange}"> + @cds-slider-changed="${onChange}"> `; }; @@ -36,7 +37,7 @@ Default.storyName = 'Default'; Default.parameters = { knobs: { - 'bx-slider': () => ({ + [`${prefix}-slider`]: () => ({ disabled: boolean('Disabled (disabled)', false), labelText: text('Label text (label-text)', 'Slider'), name: text('Name (name)', ''), @@ -44,16 +45,16 @@ Default.parameters = { min: number('The minimum value (min)', 0), step: number('The step (step)', 1), value: number('Value (value)', 50), - onAfterChange: action('bx-slider-changed'), + onAfterChange: action(`${prefix}-slider-changed`), }), }, }; export const withInputBox = (args) => { const { disabled, labelText, max, min, name, step, value, onChange } = - args?.['bx-slider'] || {}; + args?.[`${prefix}-slider`] || {}; return html` - { name="${ifDefined(name)}" step="${ifDefined(step)}" value="${ifDefined(value)}" - @bx-slider-changed="${onChange}"> - + - + type="number"> + `; }; @@ -75,7 +76,8 @@ withInputBox.parameters = { knobs: Default.parameters.knobs, }; -export const skeleton = () => html` `; +export const skeleton = () => + html` `; skeleton.parameters = { percy: { diff --git a/web-components/packages/carbon-web-components/src/components/slider/slider.scss b/web-components/packages/carbon-web-components/src/components/slider/slider.scss index 687c769aee3a..777f12d59fca 100644 --- a/web-components/packages/carbon-web-components/src/components/slider/slider.scss +++ b/web-components/packages/carbon-web-components/src/components/slider/slider.scss @@ -1,5 +1,5 @@ // -// Copyright IBM Corp. 2019, 2022 +// Copyright IBM Corp. 2019, 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. @@ -7,7 +7,9 @@ $css--plex: true !default; -@import 'carbon-components/scss/components/slider/slider'; +@use '@carbon/styles/scss/config' as *; +@use '@carbon/styles/scss/theme' as *; +@use '@carbon/styles/scss/components/slider'; :host(#{$prefix}-slider) { outline: none; @@ -27,7 +29,8 @@ $css--plex: true !default; .#{$prefix}--slider__thumb:focus ~ .#{$prefix}-ce--slider__filled-track-container .#{$prefix}--slider__filled-track { - background-color: $interactive-04; + // TODO: audit + background-color: $interactive; } } diff --git a/web-components/packages/carbon-web-components/src/components/slider/slider.ts b/web-components/packages/carbon-web-components/src/components/slider/slider.ts index 9a5cfd7a8f10..b32c82262ef2 100644 --- a/web-components/packages/carbon-web-components/src/components/slider/slider.ts +++ b/web-components/packages/carbon-web-components/src/components/slider/slider.ts @@ -7,11 +7,11 @@ * LICENSE file in the root directory of this source tree. */ -import { classMap } from 'lit/directives/class-map.js'; -import throttle from 'lodash-es/throttle'; import { LitElement, html } from 'lit'; import { property, customElement, query } from 'lit/decorators.js'; -import settings from 'carbon-components/es/globals/js/settings'; +import { classMap } from 'lit/directives/class-map.js'; +import throttle from 'lodash-es/throttle'; +import { prefix } from '../../globals/settings'; import FocusMixin from '../../globals/mixins/focus'; import FormMixin from '../../globals/mixins/form'; import HostListenerMixin from '../../globals/mixins/host-listener'; @@ -20,8 +20,6 @@ import ifNonEmpty from '../../globals/directives/if-non-empty'; import BXSliderInput from './slider-input'; import styles from './slider.scss'; -const { prefix } = settings; - interface Cancelable { cancel(): void; } @@ -43,11 +41,11 @@ const THUMB_DIRECTION = { /** * Slider. * - * @element bx-slider + * @element cds-slider * @slot label-text - The label text. * @slot max-text - The text for maximum value. * @slot min-text - The text for minimum value. - * @fires bx-slider-changed - The custom event fired after the value is changed by user gesture. + * @fires cds-slider-changed - The custom event fired after the value is changed by user gesture. */ @customElement(`${prefix}-slider`) class BXSlider extends HostListenerMixin(FormMixin(FocusMixin(LitElement))) { @@ -89,7 +87,7 @@ class BXSlider extends HostListenerMixin(FormMixin(FocusMixin(LitElement))) { */ private get _rate() { const { max, min, value } = this; - // Copes with out-of-range value coming programmatically or from `` + // Copes with out-of-range value coming programmatically or from `` return ( (Math.min(Number(max), Math.max(Number(min), value)) - Number(min)) / (Number(max) - Number(min)) @@ -520,7 +518,7 @@ class BXSlider extends HostListenerMixin(FormMixin(FocusMixin(LitElement))) { } /** - * The name of the custom event fired after the value is changed in `` by user gesture. + * The name of the custom event fired after the value is changed in `` by user gesture. */ static get eventChangeInput() { return `${prefix}-slider-input-changed`; diff --git a/web-components/packages/carbon-web-components/src/components/structured-list/structured-list-body.ts b/web-components/packages/carbon-web-components/src/components/structured-list/structured-list-body.ts index 10505cb331f0..c95fed8696be 100644 --- a/web-components/packages/carbon-web-components/src/components/structured-list/structured-list-body.ts +++ b/web-components/packages/carbon-web-components/src/components/structured-list/structured-list-body.ts @@ -7,17 +7,15 @@ * LICENSE file in the root directory of this source tree. */ -import settings from 'carbon-components/es/globals/js/settings'; import { LitElement, html } from 'lit'; import { customElement } from 'lit/decorators.js'; +import { prefix } from '../../globals/settings'; import styles from './structured-list.scss'; -const { prefix } = settings; - /** * Structured list body. * - * @element bx-structured-list-body + * @element cds-structured-list-body */ @customElement(`${prefix}-structured-list-body`) class BXStructuredListBody extends LitElement { diff --git a/web-components/packages/carbon-web-components/src/components/structured-list/structured-list-cell.ts b/web-components/packages/carbon-web-components/src/components/structured-list/structured-list-cell.ts index 78d591f62c74..289ff13f3889 100644 --- a/web-components/packages/carbon-web-components/src/components/structured-list/structured-list-cell.ts +++ b/web-components/packages/carbon-web-components/src/components/structured-list/structured-list-cell.ts @@ -9,15 +9,13 @@ import { LitElement, html } from 'lit'; import { customElement } from 'lit/decorators.js'; -import settings from 'carbon-components/es/globals/js/settings'; +import { prefix } from '../../globals/settings'; import styles from './structured-list.scss'; -const { prefix } = settings; - /** * Structured list cell. * - * @element bx-structured-list-cell + * @element cds-structured-list-cell */ @customElement(`${prefix}-structured-list-cell`) class BXStructuredListCell extends LitElement { diff --git a/web-components/packages/carbon-web-components/src/components/structured-list/structured-list-head.ts b/web-components/packages/carbon-web-components/src/components/structured-list/structured-list-head.ts index 2a0ca33cbe16..b751c63c2a55 100644 --- a/web-components/packages/carbon-web-components/src/components/structured-list/structured-list-head.ts +++ b/web-components/packages/carbon-web-components/src/components/structured-list/structured-list-head.ts @@ -7,17 +7,15 @@ * LICENSE file in the root directory of this source tree. */ -import settings from 'carbon-components/es/globals/js/settings'; import { LitElement, html } from 'lit'; import { customElement } from 'lit/decorators.js'; +import { prefix } from '../../globals/settings'; import styles from './structured-list.scss'; -const { prefix } = settings; - /** * Structured list header. * - * @element bx-structured-list-head + * @element cds-structured-list-head */ @customElement(`${prefix}-structured-list-head`) class BXStructuredListHeader extends LitElement { diff --git a/web-components/packages/carbon-web-components/src/components/structured-list/structured-list-header-cell-skeleton.ts b/web-components/packages/carbon-web-components/src/components/structured-list/structured-list-header-cell-skeleton.ts index 087c5525b224..a97a048f40af 100644 --- a/web-components/packages/carbon-web-components/src/components/structured-list/structured-list-header-cell-skeleton.ts +++ b/web-components/packages/carbon-web-components/src/components/structured-list/structured-list-header-cell-skeleton.ts @@ -9,11 +9,9 @@ import { LitElement, html } from 'lit'; import { customElement } from 'lit/decorators.js'; -import settings from 'carbon-components/es/globals/js/settings'; +import { prefix } from '../../globals/settings'; import styles from './structured-list.scss'; -const { prefix } = settings; - /** * Skeleton of structured list header cell. */ diff --git a/web-components/packages/carbon-web-components/src/components/structured-list/structured-list-header-cell.ts b/web-components/packages/carbon-web-components/src/components/structured-list/structured-list-header-cell.ts index e23c27218dca..10195d00df11 100644 --- a/web-components/packages/carbon-web-components/src/components/structured-list/structured-list-header-cell.ts +++ b/web-components/packages/carbon-web-components/src/components/structured-list/structured-list-header-cell.ts @@ -9,15 +9,13 @@ import { LitElement, html } from 'lit'; import { customElement } from 'lit/decorators.js'; -import settings from 'carbon-components/es/globals/js/settings'; +import { prefix } from '../../globals/settings'; import styles from './structured-list.scss'; -const { prefix } = settings; - /** * Structured list header cell. * - * @element bx-structured-list-header-cell + * @element cds-structured-list-header-cell */ @customElement(`${prefix}-structured-list-header-cell`) class BXStructuredListHeaderCell extends LitElement { diff --git a/web-components/packages/carbon-web-components/src/components/structured-list/structured-list-header-row.ts b/web-components/packages/carbon-web-components/src/components/structured-list/structured-list-header-row.ts index ac03018cf99b..4dbea15df5b2 100644 --- a/web-components/packages/carbon-web-components/src/components/structured-list/structured-list-header-row.ts +++ b/web-components/packages/carbon-web-components/src/components/structured-list/structured-list-header-row.ts @@ -7,17 +7,15 @@ * LICENSE file in the root directory of this source tree. */ -import settings from 'carbon-components/es/globals/js/settings'; import { LitElement, html } from 'lit'; import { property, customElement } from 'lit/decorators.js'; +import { prefix } from '../../globals/settings'; import styles from './structured-list.scss'; -const { prefix } = settings; - /** * Structured list header row. * - * @element bx-structured-list-header-row + * @element cds-structured-list-header-row */ @customElement(`${prefix}-structured-list-header-row`) class BXStructuredListHeaderRow extends LitElement { @@ -36,7 +34,7 @@ class BXStructuredListHeaderRow extends LitElement { } render() { - // We could look up in DOM for `bx-structured-list[hasSelection]`, + // We could look up in DOM for `${prefix}-structured-list[hasSelection]`, // but uses `hasSelection` prop to utilize attribute change callback if (this.selectionName) { return html` diff --git a/web-components/packages/carbon-web-components/src/components/structured-list/structured-list-row.ts b/web-components/packages/carbon-web-components/src/components/structured-list/structured-list-row.ts index ebcc3bf49906..e02e93345b06 100644 --- a/web-components/packages/carbon-web-components/src/components/structured-list/structured-list-row.ts +++ b/web-components/packages/carbon-web-components/src/components/structured-list/structured-list-row.ts @@ -7,11 +7,11 @@ * LICENSE file in the root directory of this source tree. */ -import settings from 'carbon-components/es/globals/js/settings'; -import { ifDefined } from 'lit/directives/if-defined.js'; import { LitElement, html } from 'lit'; import { property, customElement, query } from 'lit/decorators.js'; +import { ifDefined } from 'lit/directives/if-defined.js'; import CheckmarkFilled16 from '@carbon/icons/lib/checkmark--filled/16'; +import { prefix } from '../../globals/settings'; import HostListener from '../../globals/decorators/host-listener'; import HostListenerMixin from '../../globals/mixins/host-listener'; import RadioGroupManager, { @@ -20,8 +20,6 @@ import RadioGroupManager, { } from '../../globals/internal/radio-group-manager'; import styles from './structured-list.scss'; -const { prefix } = settings; - /** * Map of navigation direction by key. */ @@ -80,7 +78,7 @@ class StructuredListRowRadioButtonDelegate /** * Structured list row. * - * @element bx-structured-list-row + * @element cds-structured-list-row */ @customElement(`${prefix}-structured-list-row`) class BXStructuredListRow extends HostListenerMixin(LitElement) { @@ -211,13 +209,13 @@ class BXStructuredListRow extends HostListenerMixin(LitElement) { const { selected, selectionName, selectionValue, selectionIconTitle } = this; if (selectionName) { - // "Selected" style with `.bx--structured-list-td` does not work somehow - Need investigation + // "Selected" style with `.${prefix}--structured-list-td` does not work somehow - Need investigation return html` diff --git a/web-components/packages/carbon-web-components/src/components/structured-list/structured-list-story.scss b/web-components/packages/carbon-web-components/src/components/structured-list/structured-list-story.scss index 354e6794c379..d7eafc24bb99 100644 --- a/web-components/packages/carbon-web-components/src/components/structured-list/structured-list-story.scss +++ b/web-components/packages/carbon-web-components/src/components/structured-list/structured-list-story.scss @@ -1,18 +1,20 @@ /** * @license * - * Copyright IBM Corp. 2019, 2022 + * Copyright IBM Corp. 2019, 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. */ +@use '@carbon/styles/scss/config' as *; + /* stylelint-disable selector-type-no-unknown */ -bx-structured-list { +#{$prefix}-structured-list { width: 100%; } -bx-structured-list-header-skeleton { +#{$prefix}-structured-list-header-skeleton { width: 25%; &:nth-of-type(3n) { diff --git a/web-components/packages/carbon-web-components/src/components/structured-list/structured-list-story.ts b/web-components/packages/carbon-web-components/src/components/structured-list/structured-list-story.ts index 38ceda24928d..574d1636a840 100644 --- a/web-components/packages/carbon-web-components/src/components/structured-list/structured-list-story.ts +++ b/web-components/packages/carbon-web-components/src/components/structured-list/structured-list-story.ts @@ -20,9 +20,10 @@ import './structured-list-cell'; import './structured-list-header-cell-skeleton'; import storyDocs from './structured-list-story.mdx'; import styles from './structured-list-story.scss'; +import { prefix } from '../../globals/settings'; export const Default = (args) => { - const { hasSelection } = args?.['bx-structured-list'] ?? {}; + const { hasSelection } = args?.[`${prefix}-structured-list`] ?? {}; const selectionName = !hasSelection ? undefined : 'structured-list-selection'; const selectionValues = !hasSelection ? [] @@ -32,53 +33,53 @@ export const Default = (args) => { 'structured-list-selection-2', ]; return html` - - - - ColumnA + + + ColumnA - ColumnBColumnB - ColumnCColumnC - - - - + + + - Row 1 - Row 1 - Row 1 + Row 1 + Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc dui magna, finibus id tortor sed, aliquet bibendum augue. Aenean posuere - sem vel euismod dignissim. - - + - Row 2 - Row 2 - Row 2 + Row 2 + Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc dui magna, finibus id tortor sed, aliquet bibendum augue. Aenean posuere - sem vel euismod dignissim. - - + - Row 3 - Row 3 - Row 3 + Row 3 + Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc dui magna, finibus id tortor sed, aliquet bibendum augue. Aenean posuere - sem vel euismod dignissim. - - - + + + `; }; @@ -86,7 +87,7 @@ Default.storyName = 'Default'; Default.parameters = { knobs: { - 'bx-structured-list': () => ({ + [`${prefix}-structured-list`]: () => ({ hasSelection: boolean( 'Supports selection feature (has-selection)', false @@ -99,32 +100,32 @@ export const skeleton = () => html` - - - - - - - - - - - - - - - - - - - - - - - - - - + + + + + + + + + + + + + + + + + + + + + + + + + + `; skeleton.parameters = { diff --git a/web-components/packages/carbon-web-components/src/components/structured-list/structured-list.scss b/web-components/packages/carbon-web-components/src/components/structured-list/structured-list.scss index c779d6729bcb..31ec272565e6 100644 --- a/web-components/packages/carbon-web-components/src/components/structured-list/structured-list.scss +++ b/web-components/packages/carbon-web-components/src/components/structured-list/structured-list.scss @@ -1,5 +1,5 @@ // -// Copyright IBM Corp. 2019, 2022 +// Copyright IBM Corp. 2019, 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. @@ -7,8 +7,14 @@ $css--plex: true !default; -@import 'carbon-components/scss/globals/scss/helper-mixins'; -@import 'carbon-components/scss/components/structured-list/structured-list'; +@use '@carbon/styles/scss/config' as *; +@use '@carbon/styles/scss/colors' as *; +@use '@carbon/styles/scss/utilities' as *; +@use '@carbon/styles/scss/theme' as *; +@use '@carbon/styles/scss/components/structured-list/structured-list' as *; + +// https://github.com/carbon-design-system/carbon/issues/11408 +@include structured-list; .#{$prefix}--structured-list ::slotted(#{$prefix}-structured-list-head) { @extend .#{$prefix}--structured-list-thead; @@ -42,7 +48,8 @@ $css--plex: true !default; } :host(#{$prefix}-structured-list-row:hover) .#{$prefix}--structured-list-svg { - fill: $ibm-color__gray-40; + // TODO: audit + fill: $gray-40; } :host(#{$prefix}-structured-list-row) @@ -55,11 +62,11 @@ $css--plex: true !default; @extend .#{$prefix}--structured-list-content--nowrap; } -// "Selected" style with `.bx--structured-list-td` does not work somehow - Need investigation +// "Selected" style with `.#{$prefix}--structured-list-td` does not work somehow - Need investigation .#{$prefix}--structured-list-input:checked + .#{$prefix}--structured-list-cell .#{$prefix}--structured-list-svg { - fill: $text-01; + fill: $text-primary; } :host(#{$prefix}-structured-list-header-cell-skeleton) span { diff --git a/web-components/packages/carbon-web-components/src/components/structured-list/structured-list.ts b/web-components/packages/carbon-web-components/src/components/structured-list/structured-list.ts index ab9f0c1b635d..852dbc02c82d 100644 --- a/web-components/packages/carbon-web-components/src/components/structured-list/structured-list.ts +++ b/web-components/packages/carbon-web-components/src/components/structured-list/structured-list.ts @@ -7,21 +7,19 @@ * LICENSE file in the root directory of this source tree. */ -import settings from 'carbon-components/es/globals/js/settings'; import { classMap } from 'lit/directives/class-map.js'; import { LitElement, html } from 'lit'; import { property, customElement } from 'lit/decorators.js'; +import { prefix } from '../../globals/settings'; import { forEach } from '../../globals/internal/collection-helpers'; import FocusMixin from '../../globals/mixins/focus'; import BXStructuredListRow from './structured-list-row'; import styles from './structured-list.scss'; -const { prefix } = settings; - /** * Structured list wrapper. * - * @element bx-structured-list + * @element cds-structured-list */ @customElement(`${prefix}-structured-list`) class BXStructuredList extends FocusMixin(LitElement) { diff --git a/web-components/packages/carbon-web-components/src/components/tabs/coding-conventions.md b/web-components/packages/carbon-web-components/src/components/tabs/coding-conventions.md index 241c1176a496..c3f798198b9a 100644 --- a/web-components/packages/carbon-web-components/src/components/tabs/coding-conventions.md +++ b/web-components/packages/carbon-web-components/src/components/tabs/coding-conventions.md @@ -31,8 +31,8 @@ following reasons: narrow mode requires space/enter to select an item. And thus no `highlighted` state. -| | Normal | Hover | Focus | -| -------- | ------------------------------------------------------------------------------------ | ------------------------------------------------------------- | --------------------------------------------------------- | -| Normal | Light text (`$text-02`), light gray thick underline (`$ui-03`) | Light text (`$text-02`), dark gray thick underline (`$ui-04`) | (Focused means selected) | -| Disabled | Ultra-light text (`$disabled-01`), ultra-light gray thick underline (`$disabled-02`) | (No reaction to hover) | (No reaction to focus) | -| Selected | Blue thick underline (`$interactive-01`/`$focus`), dark bold text | (No reaction to hover) | Blue outline (`$interactive-01`/`$focus`), dark bold text | +| | Normal | Hover | Focus | +| -------- | -------------------------------------------------------------------------------- | ------------------------------------------------------------------------------- | --------------------------------------------------------- | +| Normal | Light text (`$text-secondary`), light gray thick underline (`$border-subtle-01`) | Light text (`$text-secondary`), dark gray thick underline (`$border-strong-01`) | (Focused means selected) | +| Disabled | Ultra-light gray thick underline (`$text-disabledx`) | (No reaction to hover) | (No reaction to focus) | +| Selected | Blue thick underline (`$interactive-01`/`$focus`), dark bold text | (No reaction to hover) | Blue outline (`$interactive-01`/`$focus`), dark bold text | diff --git a/web-components/packages/carbon-web-components/src/components/tabs/tab-skeleton.ts b/web-components/packages/carbon-web-components/src/components/tabs/tab-skeleton.ts index b7d2f9de4a4a..7032eb01f320 100644 --- a/web-components/packages/carbon-web-components/src/components/tabs/tab-skeleton.ts +++ b/web-components/packages/carbon-web-components/src/components/tabs/tab-skeleton.ts @@ -9,11 +9,9 @@ import { LitElement, html } from 'lit'; import { customElement } from 'lit/decorators.js'; -import settings from 'carbon-components/es/globals/js/settings'; +import { prefix } from '../../globals/settings'; import styles from './tabs.scss'; -const { prefix } = settings; - /** * Skeleton of tab. */ diff --git a/web-components/packages/carbon-web-components/src/components/tabs/tab.ts b/web-components/packages/carbon-web-components/src/components/tabs/tab.ts index 922b0b33476d..e8084516cf92 100644 --- a/web-components/packages/carbon-web-components/src/components/tabs/tab.ts +++ b/web-components/packages/carbon-web-components/src/components/tabs/tab.ts @@ -9,23 +9,21 @@ import { html } from 'lit'; import { property, customElement } from 'lit/decorators.js'; -import settings from 'carbon-components/es/globals/js/settings'; +import { prefix } from '../../globals/settings'; import BXContentSwitcherItem from '../content-switcher/content-switcher-item'; import { TABS_TYPE } from './tabs'; import styles from './tabs.scss'; -const { prefix } = settings; - /** * Basic tab. * - * @element bx-tab + * @element cds-tab */ @customElement(`${prefix}-tab`) class BXTab extends BXContentSwitcherItem { /** * `true` if this tab should be highlighted. - * If `true`, parent `` selects/deselects this tab upon keyboard interaction. + * If `true`, parent `` selects/deselects this tab upon keyboard interaction. * * @private */ diff --git a/web-components/packages/carbon-web-components/src/components/tabs/tabs-skeleton.ts b/web-components/packages/carbon-web-components/src/components/tabs/tabs-skeleton.ts index ee0485daa280..ed921ef68280 100644 --- a/web-components/packages/carbon-web-components/src/components/tabs/tabs-skeleton.ts +++ b/web-components/packages/carbon-web-components/src/components/tabs/tabs-skeleton.ts @@ -9,11 +9,9 @@ import { LitElement, html } from 'lit'; import { customElement } from 'lit/decorators.js'; -import settings from 'carbon-components/es/globals/js/settings'; +import { prefix } from '../../globals/settings'; import styles from './tabs.scss'; -const { prefix } = settings; - /** * Skeleton of tabs. */ diff --git a/web-components/packages/carbon-web-components/src/components/tabs/tabs-story.scss b/web-components/packages/carbon-web-components/src/components/tabs/tabs-story.scss index 2bdd1baa574b..9e1c687e1459 100644 --- a/web-components/packages/carbon-web-components/src/components/tabs/tabs-story.scss +++ b/web-components/packages/carbon-web-components/src/components/tabs/tabs-story.scss @@ -1,16 +1,17 @@ // -// Copyright IBM Corp. 2019, 2022 +// Copyright IBM Corp. 2019, 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. // -@import 'carbon-components/scss/globals/scss/spacing'; -@import 'carbon-components/scss/globals/scss/theme-tokens'; +@use '@carbon/styles/scss/config' as *; +@use '@carbon/styles/scss/spacing' as *; +@use '@carbon/styles/scss/theme' as *; -.bx-ce-demo-devenv--tab-panels { +.#{$prefix}-ce-demo-devenv--tab-panels { flex: 1; - padding: $carbon--spacing-05; + padding: $spacing-05; align-self: stretch; - background-color: $ui-01; + background-color: $layer-01; } diff --git a/web-components/packages/carbon-web-components/src/components/tabs/tabs-story.ts b/web-components/packages/carbon-web-components/src/components/tabs/tabs-story.ts index 55867137afac..93fd563f99ef 100644 --- a/web-components/packages/carbon-web-components/src/components/tabs/tabs-story.ts +++ b/web-components/packages/carbon-web-components/src/components/tabs/tabs-story.ts @@ -18,6 +18,7 @@ import './tabs-skeleton'; import './tab-skeleton'; import styles from './tabs-story.scss'; import storyDocs from './tabs-story.mdx'; +import { prefix } from '../../globals/settings'; const noop = () => {}; @@ -40,7 +41,7 @@ export const Default = (args) => { disableSelection, onBeforeSelect = noop, onSelect = noop, - } = args?.['bx-tabs'] || {}; + } = args?.[`${prefix}-tabs`] || {}; const handleBeforeSelected = (event: CustomEvent) => { onBeforeSelect(event); if (disableSelection) { @@ -51,30 +52,30 @@ export const Default = (args) => { - - Option 1 - + Option 1 + Option 2Option 2 - Option 3Option 3 - Option 4 - Option 5Option 4 + Option 5 - -

+ +
{}; @@ -24,15 +25,15 @@ const sizes = { }; export const Default = (args) => { - const { size, type, title, disabled } = args?.['bx-tag'] ?? {}; + const { size, type, title, disabled } = args?.[`${prefix}-tag`] ?? {}; return html` - This is a tag - + `; }; @@ -40,7 +41,7 @@ Default.storyName = 'Default'; Default.parameters = { knobs: { - 'bx-tag': () => ({ + [`${prefix}-tag`]: () => ({ disabled: boolean('Disabled (disabled)', false), title: textNullable('Title (title)', 'Clear Selection'), size: select('Tag size (size)', sizes, null), @@ -70,7 +71,7 @@ export const filter = (args) => { onClick, onBeforeClose = noop, onClose = noop, - } = args?.['bx-filter-tag'] ?? {}; + } = args?.[`${prefix}-filter-tag`] ?? {}; const handleBeforeClose = (event: CustomEvent) => { onBeforeClose(event); if (disableClose) { @@ -78,32 +79,32 @@ export const filter = (args) => { } }; return html` - + @cds-filter-tag-beingclosed="${handleBeforeClose}" + @cds-filter-tag-closed="${onClose}"> This is a tag - + `; }; filter.parameters = { knobs: { - 'bx-filter-tag': () => ({ - ...Default.parameters.knobs['bx-tag'](), + [`${prefix}-filter-tag`]: () => ({ + ...Default.parameters.knobs[`${prefix}-tag`](), open: boolean('Open (open)', true), disableClose: boolean( - 'Disable user-initiated close action (Call event.preventDefault() in bx-filter-tag-beingclosed event)', + `Disable user-initiated close action (Call event.preventDefault() in ${prefix}-filter-tag-beingclosed event)`, false ), onClick: action('click'), - onBeforeClose: action('bx-filter-tag-beingclosed'), - onClose: action('bx-filter-tag-closed'), + onBeforeClose: action(`${prefix}-filter-tag-beingclosed`), + onClose: action(`${prefix}-filter-tag-closed`), }), }, }; diff --git a/web-components/packages/carbon-web-components/src/components/tag/tag.scss b/web-components/packages/carbon-web-components/src/components/tag/tag.scss index 43a7d3a4bb82..b2c9e694c671 100644 --- a/web-components/packages/carbon-web-components/src/components/tag/tag.scss +++ b/web-components/packages/carbon-web-components/src/components/tag/tag.scss @@ -1,5 +1,5 @@ // -// Copyright IBM Corp. 2019, 2022 +// Copyright IBM Corp. 2019, 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. @@ -7,7 +7,10 @@ $css--plex: true !default; -@import 'carbon-components/scss/components/tag/tag'; +@use '@carbon/styles/scss/config' as *; +@use '@carbon/styles/scss/utilities' as *; +@use '@carbon/styles/scss/breakpoint' as *; +@use '@carbon/styles/scss/components/tag'; :host(#{$prefix}-tag) { @extend .#{$prefix}--tag; diff --git a/web-components/packages/carbon-web-components/src/components/tag/tag.ts b/web-components/packages/carbon-web-components/src/components/tag/tag.ts index 02095be5e42a..f70f9397831d 100644 --- a/web-components/packages/carbon-web-components/src/components/tag/tag.ts +++ b/web-components/packages/carbon-web-components/src/components/tag/tag.ts @@ -9,18 +9,16 @@ import { LitElement, html } from 'lit'; import { property, customElement } from 'lit/decorators.js'; -import settings from 'carbon-components/es/globals/js/settings'; +import { prefix } from '../../globals/settings'; import { TAG_SIZE, TAG_TYPE } from './defs'; import styles from './tag.scss'; export { TAG_SIZE, TAG_TYPE }; -const { prefix } = settings; - /** * Tag. * - * @element bx-tag + * @element cds-tag */ @customElement(`${prefix}-tag`) class BXTag extends LitElement { diff --git a/web-components/packages/carbon-web-components/src/components/textarea/textarea-skeleton.ts b/web-components/packages/carbon-web-components/src/components/textarea/textarea-skeleton.ts index 19cc5ea2c62e..3ab119e6fff3 100644 --- a/web-components/packages/carbon-web-components/src/components/textarea/textarea-skeleton.ts +++ b/web-components/packages/carbon-web-components/src/components/textarea/textarea-skeleton.ts @@ -9,11 +9,9 @@ import { LitElement, html } from 'lit'; import { customElement } from 'lit/decorators.js'; -import settings from 'carbon-components/es/globals/js/settings'; +import { prefix } from '../../globals/settings'; import styles from './textarea.scss'; -const { prefix } = settings; - /** * Skeleton of text area. */ diff --git a/web-components/packages/carbon-web-components/src/components/textarea/textarea-story.ts b/web-components/packages/carbon-web-components/src/components/textarea/textarea-story.ts index cd4beff5bc61..bc3d328017c4 100644 --- a/web-components/packages/carbon-web-components/src/components/textarea/textarea-story.ts +++ b/web-components/packages/carbon-web-components/src/components/textarea/textarea-story.ts @@ -8,14 +8,15 @@ */ import { html } from 'lit'; +import { ifDefined } from 'lit/directives/if-defined.js'; import * as knobs from '@storybook/addon-knobs'; import textNullable from '../../../.storybook/knob-text-nullable'; -import { ifDefined } from 'lit/directives/if-defined.js'; import './textarea'; import './textarea-skeleton'; import '../form/form-item'; import createProps from './stories/helpers'; import storyDocs from './textarea-story.mdx'; +import { prefix } from '../../globals/settings'; export const Default = (args) => { const { @@ -36,9 +37,9 @@ export const Default = (args) => { onInput, rows, cols, - } = args?.['bx-textarea'] ?? {}; + } = args?.[`${prefix}-textarea`] ?? {}; return html` - { @input="${onInput}" rows="${ifDefined(rows)}" cols="${ifDefined(cols)}"> - + `; }; @@ -64,7 +65,7 @@ Default.storyName = 'Default'; Default.parameters = { knobs: { - 'bx-textarea': () => createProps({ ...knobs, textNullable }), + [`${prefix}-textarea`]: () => createProps({ ...knobs, textNullable }), }, }; @@ -78,10 +79,10 @@ export const formItem = (args) => { onInput, rows, cols, - } = args?.['bx-textarea'] ?? {}; + } = args?.[`${prefix}-textarea`] ?? {}; return html` - - + { Optional helper text Something isn't right ${value} - - + + `; }; @@ -103,7 +104,7 @@ formItem.storyName = 'Form item'; formItem.parameters = { knobs: { - 'bx-textarea': () => createProps({ ...knobs, textNullable }), + [`${prefix}-textarea`]: () => createProps({ ...knobs, textNullable }), }, }; @@ -117,9 +118,9 @@ export const withoutFormItemWrapper = (args) => { onInput, rows, cols, - } = args?.['bx-textarea'] ?? {}; + } = args?.[`${prefix}-textarea`] ?? {}; return html` - { Optional helper text Something isn't right ${value} - + `; }; @@ -140,12 +141,12 @@ withoutFormItemWrapper.storyName = 'Without form item wrapper'; withoutFormItemWrapper.parameters = { knobs: { - 'bx-textarea': () => createProps({ ...knobs, textNullable }), + [`${prefix}-textarea`]: () => createProps({ ...knobs, textNullable }), }, }; export const skeleton = () => - html` `; + html` `; skeleton.parameters = { percy: { diff --git a/web-components/packages/carbon-web-components/src/components/textarea/textarea.scss b/web-components/packages/carbon-web-components/src/components/textarea/textarea.scss index 1ea6b33e8ed0..c087ca32dadc 100644 --- a/web-components/packages/carbon-web-components/src/components/textarea/textarea.scss +++ b/web-components/packages/carbon-web-components/src/components/textarea/textarea.scss @@ -1,12 +1,13 @@ // -// Copyright IBM Corp. 2019, 2022 +// Copyright IBM Corp. 2019, 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. // $css--plex: true !default; -@import 'carbon-components/scss/components/text-area/text-area'; +@use '@carbon/styles/scss/config' as *; +@use '@carbon/styles/scss/components/text-area/index'; :host(#{$prefix}-textarea) { outline: none; diff --git a/web-components/packages/carbon-web-components/src/components/textarea/textarea.ts b/web-components/packages/carbon-web-components/src/components/textarea/textarea.ts index 86a62b6acae9..05ec21894402 100644 --- a/web-components/packages/carbon-web-components/src/components/textarea/textarea.ts +++ b/web-components/packages/carbon-web-components/src/components/textarea/textarea.ts @@ -10,8 +10,8 @@ import { LitElement, html } from 'lit'; import { property, customElement, query } from 'lit/decorators.js'; import { classMap } from 'lit/directives/class-map.js'; -import settings from 'carbon-components/es/globals/js/settings'; import WarningFilled16 from '@carbon/icons/lib/warning--filled/16'; +import { prefix } from '../../globals/settings'; import ifNonEmpty from '../../globals/directives/if-non-empty'; import { ifDefined } from 'lit/directives/if-defined.js'; import FormMixin from '../../globals/mixins/form'; @@ -21,12 +21,10 @@ import styles from './textarea.scss'; export { TEXTAREA_COLOR_SCHEME }; -const { prefix } = settings; - /** * Text area. * - * @element bx-textarea + * @element cds-textarea * @slot helper-text - The helper text. * @slot label-text - The label text. * @slot validity-message - The validity message. If present and non-empty, this input shows the UI of its invalid state. diff --git a/web-components/packages/carbon-web-components/src/components/tile/clickable-tile.ts b/web-components/packages/carbon-web-components/src/components/tile/clickable-tile.ts index 7a57de7a0665..50f848f390a1 100644 --- a/web-components/packages/carbon-web-components/src/components/tile/clickable-tile.ts +++ b/web-components/packages/carbon-web-components/src/components/tile/clickable-tile.ts @@ -7,19 +7,17 @@ * LICENSE file in the root directory of this source tree. */ -import settings from 'carbon-components/es/globals/js/settings'; import { classMap } from 'lit/directives/class-map.js'; import { property, customElement } from 'lit/decorators.js'; +import { prefix } from '../../globals/settings'; import BXLink from '../link/link'; import { TILE_COLOR_SCHEME } from './defs'; import styles from './tile.scss'; -const { prefix } = settings; - /** * Clickable tile. * - * @element bx-clickable-tile + * @element cds-clickable-tile */ @customElement(`${prefix}-clickable-tile`) class BXClickableTile extends BXLink { diff --git a/web-components/packages/carbon-web-components/src/components/tile/expandable-tile.ts b/web-components/packages/carbon-web-components/src/components/tile/expandable-tile.ts index 037b21abe6f0..04ddb9dec31d 100644 --- a/web-components/packages/carbon-web-components/src/components/tile/expandable-tile.ts +++ b/web-components/packages/carbon-web-components/src/components/tile/expandable-tile.ts @@ -11,23 +11,21 @@ import { LitElement, html } from 'lit'; import { property, customElement } from 'lit/decorators.js'; import { ifDefined } from 'lit/directives/if-defined.js'; import ChevronDown16 from '@carbon/icons/lib/chevron--down/16'; -import settings from 'carbon-components/es/globals/js/settings'; +import { prefix } from '../../globals/settings'; import HostListener from '../../globals/decorators/host-listener'; import FocusMixin from '../../globals/mixins/focus'; import HostListenerMixin from '../../globals/mixins/host-listener'; import { TILE_COLOR_SCHEME } from './defs'; import styles from './tile.scss'; -const { prefix } = settings; - /** * Expandable tile. * - * @element bx-expandable-tile - * @fires bx-expandable-tile-beingtoggled + * @element cds-expandable-tile + * @fires cds-expandable-tile-beingtoggled * The custom event fired before the expanded state is changed upon a user gesture. * Cancellation of this event stops changing the user-initiated change in expanded state. - * @fires bx-expandable-tile-toggled - The custom event fired after a the expanded state is changed upon a user gesture. + * @fires cds-expandable-tile-toggled - The custom event fired after a the expanded state is changed upon a user gesture. */ @customElement(`${prefix}-expandable-tile`) class BXExpandableTile extends HostListenerMixin(FocusMixin(LitElement)) { diff --git a/web-components/packages/carbon-web-components/src/components/tile/radio-tile.ts b/web-components/packages/carbon-web-components/src/components/tile/radio-tile.ts index 1a35bed8508d..b19010c0737e 100644 --- a/web-components/packages/carbon-web-components/src/components/tile/radio-tile.ts +++ b/web-components/packages/carbon-web-components/src/components/tile/radio-tile.ts @@ -7,16 +7,18 @@ * LICENSE file in the root directory of this source tree. */ -import settings from 'carbon-components/es/globals/js/settings'; +import { html, svg } from 'lit'; +import { classMap } from 'lit-html/directives/class-map'; +import { ifDefined } from 'lit/directives/if-defined'; import { customElement } from 'lit/decorators.js'; +import { prefix } from '../../globals/settings'; import HostListener from '../../globals/decorators/host-listener'; import HostListenerMixin from '../../globals/mixins/host-listener'; import RadioGroupManager, { NAVIGATION_DIRECTION, } from '../../globals/internal/radio-group-manager'; import SelectableTile from './selectable-tile'; - -const { prefix } = settings; +import CheckmarkFilled16 from '@carbon/icons/lib/checkmark--filled/16'; /** * Map of navigation direction by key. @@ -31,7 +33,7 @@ const navigationDirectionForKey = { /** * Single-selectable tile. * - * @element bx-radio-tile + * @element cds-radio-tile */ @customElement(`${prefix}-radio-tile`) class BXRadioTile extends HostListenerMixin(SelectableTile) { @@ -122,6 +124,45 @@ class BXRadioTile extends HostListenerMixin(SelectableTile) { this._attachManager(); } } + + render() { + const { + colorScheme, + checkmarkLabel, + name, + selected, + value, + _inputType: inputType, + _handleChange: handleChange, + } = this; + const classes = classMap({ + [`${prefix}--tile`]: true, + [`${prefix}--tile--selectable`]: true, + [`${prefix}--tile--is-selected`]: selected, + [`${prefix}--tile--${colorScheme}`]: colorScheme, + }); + return html` + + + `; + } } export default BXRadioTile; diff --git a/web-components/packages/carbon-web-components/src/components/tile/selectable-tile.ts b/web-components/packages/carbon-web-components/src/components/tile/selectable-tile.ts index bcfc2dabed88..f9984c5e1c4d 100644 --- a/web-components/packages/carbon-web-components/src/components/tile/selectable-tile.ts +++ b/web-components/packages/carbon-web-components/src/components/tile/selectable-tile.ts @@ -7,23 +7,22 @@ * LICENSE file in the root directory of this source tree. */ -import settings from 'carbon-components/es/globals/js/settings'; import { classMap } from 'lit/directives/class-map.js'; import { LitElement, html, svg } from 'lit'; import { property, customElement, query } from 'lit/decorators.js'; -import CheckmarkFilled16 from '@carbon/icons/lib/checkmark--filled/16'; import { ifDefined } from 'lit/directives/if-defined.js'; +import Checkbox16 from '@carbon/icons/lib/checkbox/16'; +import CheckboxCheckedFilled16 from '@carbon/icons/lib/checkbox--checked--filled/16'; +import { prefix } from '../../globals/settings'; import FocusMixin from '../../globals/mixins/focus'; import { TILE_COLOR_SCHEME } from './defs'; import styles from './tile.scss'; -const { prefix } = settings; - /** * Multi-selectable tile. * - * @element bx-selectable-tile - * @fires bx-selectable-tile-changed - The custom event fired after this selectable tile changes its selected state. + * @element cds-selectable-tile + * @fires cds-selectable-tile-changed - The custom event fired after this selectable tile changes its selected state. */ @customElement(`${prefix}-selectable-tile`) class BXSelectableTile extends FocusMixin(LitElement) { @@ -54,6 +53,25 @@ class BXSelectableTile extends FocusMixin(LitElement) { ); } + /** + * Handles the rendering of the icon. + */ + protected _renderIcon() { + const { selected, checkmarkLabel } = this; + + return html` ${selected + ? CheckboxCheckedFilled16({ + children: !checkmarkLabel + ? undefined + : svg`${checkmarkLabel}`, + }) + : Checkbox16({ + children: !checkmarkLabel + ? undefined + : svg`${checkmarkLabel}`, + })}`; + } + /** * The a11y text for the checkmark icon of the selected state. */ @@ -86,7 +104,6 @@ class BXSelectableTile extends FocusMixin(LitElement) { render() { const { - checkmarkLabel, colorScheme, name, selected, @@ -97,6 +114,7 @@ class BXSelectableTile extends FocusMixin(LitElement) { const classes = classMap({ [`${prefix}--tile`]: true, [`${prefix}--tile--selectable`]: true, + [`${prefix}--tile--is-selected`]: selected, [`${prefix}--tile--${colorScheme}`]: colorScheme, }); return html` @@ -110,12 +128,9 @@ class BXSelectableTile extends FocusMixin(LitElement) { .checked=${selected} @change=${handleChange} />
- ${CheckmarkFilled16({ - children: !checkmarkLabel - ? undefined - : svg`${checkmarkLabel}`, - })} +
+ ${this._renderIcon()}
diff --git a/web-components/packages/carbon-web-components/src/components/tile/tile-group.ts b/web-components/packages/carbon-web-components/src/components/tile/tile-group.ts index 19bed46c968f..7ae0b688b469 100644 --- a/web-components/packages/carbon-web-components/src/components/tile/tile-group.ts +++ b/web-components/packages/carbon-web-components/src/components/tile/tile-group.ts @@ -9,15 +9,13 @@ import { LitElement, html } from 'lit'; import { customElement } from 'lit/decorators.js'; -import settings from 'carbon-components/es/globals/js/settings'; +import { prefix } from '../../globals/settings'; import styles from './tile.scss'; -const { prefix } = settings; - /** * Tile group. * - * @element bx-tile-group + * @element cds-tile-group */ @customElement(`${prefix}-tile-group`) class BXTileGroup extends LitElement { @@ -29,7 +27,10 @@ class BXTileGroup extends LitElement { } render() { - return html` `; + return html` + + + `; } static styles = styles; // `styles` here is a `CSSResult` generated by custom WebPack loader diff --git a/web-components/packages/carbon-web-components/src/components/tile/tile-story.ts b/web-components/packages/carbon-web-components/src/components/tile/tile-story.ts index a4833e395fc9..17e88c89d01e 100644 --- a/web-components/packages/carbon-web-components/src/components/tile/tile-story.ts +++ b/web-components/packages/carbon-web-components/src/components/tile/tile-story.ts @@ -8,15 +8,13 @@ */ import { html } from 'lit'; +import { ifDefined } from 'lit/directives/if-defined.js'; import { action } from '@storybook/addon-actions'; import { boolean, select } from '@storybook/addon-knobs'; +import { prefix } from '../../globals/settings'; import textNullable from '../../../.storybook/knob-text-nullable'; -import { ifDefined } from 'lit/directives/if-defined.js'; import { TILE_COLOR_SCHEME } from './tile'; -import './clickable-tile'; -import './radio-tile'; -import './selectable-tile'; -import './expandable-tile'; +import './index'; import storyDocs from './tile-story.mdx'; const colorSchemes = { @@ -25,38 +23,22 @@ const colorSchemes = { }; export const Default = (args) => { - const { colorScheme } = args?.['bx-tile'] ?? {}; + const { colorScheme } = args?.[`${prefix}-tile`] ?? {}; return html` - Default tile + + Default tile + Link + `; }; Default.storyName = 'Default'; -Default.parameters = { - knobs: { - 'bx-tile': () => ({ - colorScheme: select('Color scheme (color-scheme)', colorSchemes, null), - }), - }, -}; - export const clickable = (args) => { - const { - colorScheme, - disabled, - download, - href, - hreflang, - ping, - rel, - target, - type, - } = args?.['bx-clickable-tile'] ?? {}; + const { download, href, hreflang, ping, rel, target, type } = + args?.[`${prefix}-clickable-tile`] ?? {}; return html` - { target="${ifDefined(target)}" type="${ifDefined(type)}"> Clickable tile - + `; }; clickable.parameters = { knobs: { - 'bx-clickable-tile': () => ({ - colorScheme: select('Color scheme (color-scheme)', colorSchemes, null), - disabled: boolean('Disabled (disabled)', false), - href: textNullable('Href for clickable UI (href)', ''), + [`${prefix}-clickable-tile`]: () => ({ + href: textNullable('Href for clickable UI (href)', 'https://example.com'), }), }, }; -export const singleSelectable = (args) => { +export const Radio = (args) => { const { checkmarkLabel, colorScheme, name, value, onInput } = - args?.['bx-radio-tile'] ?? {}; + args?.[`${prefix}-radio-tile`] ?? {}; return html` -
- Single-select tiles - + Single-select tiles + - Single-select Tile - - + - Single-select Tile - - + - Single-select Tile - -
+ Option 3 + + `; }; -singleSelectable.storyName = 'Single-selectable'; +Radio.storyName = 'Radio'; -singleSelectable.parameters = { +Radio.parameters = { knobs: { - 'bx-radio-tile': () => ({ + [`${prefix}-radio-tile`]: () => ({ checkmarkLabel: textNullable( 'Label text for the checkmark icon (checkmark-label)', '' @@ -132,26 +112,46 @@ singleSelectable.parameters = { export const multiSelectable = (args) => { const { checkmarkLabel, colorScheme, name, selected, value, onInput } = - args?.['bx-selectable-tile'] ?? {}; + args?.[`${prefix}-selectable-tile`] ?? {}; return html` - - Multi-select Tile - +
+ + Option 1 + + + Option 2 + + + Option 3 + +
`; }; -multiSelectable.storyName = 'Multi-selectable'; +multiSelectable.storyName = 'Multi Select'; multiSelectable.parameters = { knobs: { - 'bx-selectable-tile': () => ({ - ...singleSelectable.parameters.knobs['bx-radio-tile'](), + [`${prefix}-selectable-tile`]: () => ({ + ...Radio.parameters.knobs[`${prefix}-radio-tile`](), selected: boolean('Selected (selected)', false), }), }, @@ -159,7 +159,7 @@ multiSelectable.parameters = { export const expandable = (args) => { const { colorScheme, expanded, disableChange, onBeforeChange, onChange } = - args?.['bx-expandable-tile'] ?? {}; + args?.[`${prefix}-expandable-tile`] ?? {}; const handleBeforeChanged = (event: CustomEvent) => { onBeforeChange(event); if (disableChange) { @@ -167,39 +167,45 @@ export const expandable = (args) => { } }; return html` - - + Above the fold content here - - + + Below the fold content here - - + + `; }; expandable.parameters = { knobs: { - 'bx-expandable-tile': () => ({ + [`${prefix}-expandable-tile`]: () => ({ colorScheme: select('Color scheme (color-scheme)', colorSchemes, null), expanded: boolean('Expanded (expanded)', false), disableChange: boolean( 'Disable user-initiated change in expanded state ' + - '(Call event.preventDefault() in bx-expandable-tile-beingchanged event)', + '(Call event.preventDefault() in cds-expandable-tile-beingchanged event)', false ), - onBeforeChange: action('bx-expandable-tile-beingchanged'), - onChange: action('bx-expandable-tile-changed'), + onBeforeChange: action('cds-expandable-tile-beingchanged'), + onChange: action('cds-expandable-tile-changed'), }), }, }; +export const Selectable = () => { + return html` Default tile `; +}; + +Selectable.storyName = 'Selectable'; + export default { title: 'Components/Tile', decorators: [(story) => html`
${story()}
`], diff --git a/web-components/packages/carbon-web-components/src/components/tile/tile.scss b/web-components/packages/carbon-web-components/src/components/tile/tile.scss index 17de37a94096..2d4d7a41dbfe 100644 --- a/web-components/packages/carbon-web-components/src/components/tile/tile.scss +++ b/web-components/packages/carbon-web-components/src/components/tile/tile.scss @@ -1,5 +1,5 @@ // -// Copyright IBM Corp. 2019, 2022 +// Copyright IBM Corp. 2019, 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. @@ -7,11 +7,24 @@ $css--plex: true !default; -@import 'carbon-components/scss/components/tile/tile'; -@import 'carbon-components/scss/components/link/link'; +@use '@carbon/styles/scss/config' as *; +@use '@carbon/styles/scss/spacing' as *; +@use '@carbon/styles/scss/utilities/focus-outline' as *; +@use '@carbon/styles/scss/motion' as *; +@use '@carbon/styles/scss/components/tile/index' as *; +@use '@carbon/styles/scss/components/link/index' as *; +@use '@carbon/styles/scss/components/form/index' as *; :host(#{$prefix}-tile) { @extend .#{$prefix}--tile; + + ::slotted(.#{$prefix}--link) { + @extend .#{$prefix}--link; + } +} + +:host(#{$prefix}-tile-group) { + @extend .#{$prefix}--tile-group; } :host(#{$prefix}-clickable-tile) { @@ -24,13 +37,14 @@ $css--plex: true !default; .#{$prefix}--tile { // Overrides what `.#{$prefix}--link` defines - padding: $carbon--spacing-05; + padding: $spacing-05; outline: 2px solid transparent; } .#{$prefix}--tile--clickable { + @extend .#{$prefix}--tile--clickable; // Overrides what `.#{$prefix}--link` defines - transition: $duration--moderate-01 motion(standard, productive); + transition: $duration-moderate-01 motion(standard, productive); &:focus { @include focus-outline('outline'); @@ -39,13 +53,19 @@ $css--plex: true !default; } :host(#{$prefix}-radio-tile) { - display: content; + display: block; outline: none; + + margin-bottom: $spacing-03; } :host(#{$prefix}-selectable-tile) { display: content; outline: none; + + .#{$prefix}--tile__chevron { + @extend .#{$prefix}--tile__chevron; + } } :host(#{$prefix}-radio-tile), @@ -63,6 +83,13 @@ $css--plex: true !default; position: relative; + .#{$prefix}--tile__chevron { + background: none; + border: none; + outline: none; + cursor: pointer; + } + ::slotted(#{$prefix}-tile-above-the-fold-content) { @extend .#{$prefix}--tile-content__above-the-fold; } @@ -73,7 +100,7 @@ $css--plex: true !default; .#{$prefix}-ce--expandable-tile--below-the-fold-content { max-height: 0; - transition: max-height $duration--fast-02 motion(standard, productive); + transition: max-height $duration-fast-02 motion(standard, productive); } } @@ -82,7 +109,7 @@ $css--plex: true !default; ::slotted(#{$prefix}-tile-below-the-fold-content) { opacity: 1; - transition: $duration--fast-02 motion(standard, productive); + transition: $duration-fast-02 motion(standard, productive); } } diff --git a/web-components/packages/carbon-web-components/src/components/tile/tile.ts b/web-components/packages/carbon-web-components/src/components/tile/tile.ts index 2cdd09e32a61..48d250432f69 100644 --- a/web-components/packages/carbon-web-components/src/components/tile/tile.ts +++ b/web-components/packages/carbon-web-components/src/components/tile/tile.ts @@ -7,20 +7,18 @@ * LICENSE file in the root directory of this source tree. */ -import settings from 'carbon-components/es/globals/js/settings'; import { LitElement, html } from 'lit'; import { property, customElement } from 'lit/decorators.js'; +import { prefix } from '../../globals/settings'; import { TILE_COLOR_SCHEME } from './defs'; import styles from './tile.scss'; export { TILE_COLOR_SCHEME }; -const { prefix } = settings; - /** * Basic tile. * - * @element bx-tile + * @element cds-tile */ @customElement(`${prefix}-tile`) class BXTile extends LitElement { @@ -30,6 +28,16 @@ class BXTile extends LitElement { @property({ attribute: 'color-scheme', reflect: true }) colorScheme = TILE_COLOR_SCHEME.REGULAR; + updated() { + const anchorTag = this.querySelector('a'); + + if (anchorTag) { + anchorTag?.classList.add(`${prefix}--link`); + anchorTag.before(document.createElement('br')); + anchorTag.before(document.createElement('br')); + } + } + render() { return html` `; } diff --git a/web-components/packages/carbon-web-components/src/components/toggle-tip/toggletip-story.mdx b/web-components/packages/carbon-web-components/src/components/toggle-tip/toggletip-story.mdx new file mode 100644 index 000000000000..356fd3814e34 --- /dev/null +++ b/web-components/packages/carbon-web-components/src/components/toggle-tip/toggletip-story.mdx @@ -0,0 +1,107 @@ +import { Props, Description } from '@storybook/addon-docs/blocks'; +import { cdnJs, cdnCss } from '../../globals/internal/storybook-cdn'; + +# Tooltip + +> 💡 Check our +> [CodeSandbox](https://codesandbox.io/s/github/carbon-design-system/carbon-for-ibm-dotcom/tree/main/packages/carbon-web-components/examples/codesandbox/basic/components/tooltip) +> example implementation. + +[![Edit carbon-web-components](https://codesandbox.io/static/img/play-codesandbox.svg)](https://codesandbox.io/s/github/carbon-design-system/carbon-for-ibm-dotcom/tree/main/packages/carbon-web-components/examples/codesandbox/basic/components/tooltip) + +Tooltips provide additional information upon hover or focus. The information +should be contextual, useful, and nonessential information. Keep tooltips short. + +## Getting started + +Here's a quick example to get you started. + +### JS (via import) + +```javascript +import '@carbon/web-components/es/components/tooltip/index.js'; +``` + + + + +### HTML + +```html + + +

+ This is some tooltip text. This box shows the maximum amount of text that + should appear inside. If more room is needed please use a modal instead. +

+ + Learn MoreCreate + + + +``` + +## Interactive tooltip (default) + +Interactive tooltips may contain rich text and other interactive elements like +buttons or links. In general, hiding interactive content in a tooltip is +discouraged. Interactive tooltips are best used for onboarding experiences and +product tours. + +- If a user may need to visit an external resource, like while using a form, + include a link in your interactive tooltip +- Don’t use without a label. Consider the context a user needs before clicking a + link + +### `` attributes and properties + +Note: For `boolean` attributes, `true` means simply setting the attribute (e.g. +``) and `false` means not setting the attribute (e.g. +`` without `open` attribute). + + + +## Definition tooltip + +The definition tooltip provides additional help or defines an item or term. It +may be used on the label of a UI element, or on a word embedded in a paragraph. + +- Should contain brief, read-only text +- Use on proper nouns, technical terms, or acronyms with two letters or more +- Do not use a definition tooltip on words with fewer than two letters + +```html + + Definition Tooltip + +``` + +### `` attributes and properties + + + +## Icon tooltip + +An icon tooltip is used to clarify the action or name of an interactive icon +button. + +- The tooltip content should only contain one or two words. + +```html + + ${Filter16()} + +``` + +### `` attributes and properties + + diff --git a/web-components/packages/carbon-web-components/src/components/toggle-tip/toggletip-story.ts b/web-components/packages/carbon-web-components/src/components/toggle-tip/toggletip-story.ts new file mode 100644 index 000000000000..cb71915e102c --- /dev/null +++ b/web-components/packages/carbon-web-components/src/components/toggle-tip/toggletip-story.ts @@ -0,0 +1,74 @@ +/** + * @license + * + * Copyright IBM Corp. 2019, 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. + */ + +import { html } from 'lit-element'; +import { select } from '@storybook/addon-knobs'; +// Below path will be there when an application installs `carbon-web-components` package. +// In our dev env, we auto-generate the file and re-map below path to to point to the generated file. +// @ts-ignore +import Filter16 from 'carbon-web-components/es/icons/filter/16'; +import textNullable from '../../../.storybook/knob-text-nullable'; +import { ifDefined } from 'lit/directives/if-defined'; +import { prefix } from '../../globals/settings'; +import './toggletip'; +import '../button'; +import { TOOLTIP_ALIGNMENT } from '../tooltip/defs'; +import storyDocs from './toggletip-story.mdx'; + +const tooltipAlignments = { + [`top`]: TOOLTIP_ALIGNMENT.TOP, + [`top-left`]: TOOLTIP_ALIGNMENT.TOP_LEFT, + [`top-right`]: TOOLTIP_ALIGNMENT.TOP_RIGHT, + [`bottom`]: TOOLTIP_ALIGNMENT.BOTTOM, + [`bottom-left`]: TOOLTIP_ALIGNMENT.BOTTOM_LEFT, + [`bottom-right`]: TOOLTIP_ALIGNMENT.BOTTOM_RIGHT, + [`left`]: TOOLTIP_ALIGNMENT.LEFT, + [`left-bottom`]: TOOLTIP_ALIGNMENT.LEFT_BOTTOM, + [`left-top`]: TOOLTIP_ALIGNMENT.LEFT_TOP, + [`right`]: TOOLTIP_ALIGNMENT.RIGHT, + [`right-bottom`]: TOOLTIP_ALIGNMENT.RIGHT_BOTTOM, + [`right-top`]: TOOLTIP_ALIGNMENT.RIGHT_TOP, +}; + +export const Default = (args) => { + const { alignment, bodyText } = args?.[`${prefix}-toggletip`] ?? {}; + return html` + + Toggletip label + +

${bodyText}

+ Test + Button + + `; +}; + +Default.parameters = { + knobs: { + [`${prefix}-toggletip`]: () => ({ + alignment: select( + 'Toggletip alignment to trigger button (alignment)', + tooltipAlignments, + TOOLTIP_ALIGNMENT.BOTTOM + ), + bodyText: textNullable( + 'Toggletip content (bodyText)', + `Lorem ipsum dolor sit amet, di os consectetur adipiscing elit, + sed do eiusmod tempor incididunt ut fsil labore et dolore magna aliqua.` + ), + }), + }, +}; + +export default { + title: 'Components/Toggletip', + parameters: { + ...storyDocs.parameters, + }, +}; diff --git a/web-components/packages/carbon-web-components/src/components/toggle-tip/toggletip.scss b/web-components/packages/carbon-web-components/src/components/toggle-tip/toggletip.scss new file mode 100644 index 000000000000..ee20ccfe30dc --- /dev/null +++ b/web-components/packages/carbon-web-components/src/components/toggle-tip/toggletip.scss @@ -0,0 +1,33 @@ +/** + * @license + * + * Copyright IBM Corp. 2019, 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. + */ + +@use '@carbon/styles/scss/config' as *; +@use '@carbon/styles/scss/type' as *; +@use '@carbon/styles/scss/utilities'; +@use '@carbon/styles/scss/spacing' as *; +@use '@carbon/styles/scss/theme' as *; +@use '@carbon/styles/scss/components/toggletip/index' as *; +@use '@carbon/styles/scss/components/tooltip/index' as *; +@use '@carbon/styles/scss/components/popover/index' as *; +@use '@carbon/styles/scss/utilities/button-reset'; + +:host(#{$prefix}-toggletip) { + // TODO: audit + @extend .#{$prefix}--toggletip; + + display: flex; + align-items: center; + justify-content: center; + + outline: none; + + .#{$prefix}--popover-caret { + background-color: $background-inverse; + } +} diff --git a/web-components/packages/carbon-web-components/src/components/toggle-tip/toggletip.ts b/web-components/packages/carbon-web-components/src/components/toggle-tip/toggletip.ts new file mode 100644 index 000000000000..d68c8d2a2b74 --- /dev/null +++ b/web-components/packages/carbon-web-components/src/components/toggle-tip/toggletip.ts @@ -0,0 +1,90 @@ +/** + * @license + * + * Copyright IBM Corp. 2019, 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. + */ + +import { classMap } from 'lit-html/directives/class-map'; +import { html, property, customElement, LitElement } from 'lit-element'; +import Information16 from '@carbon/icons/lib/information/16'; +import { prefix } from '../../globals/settings'; +import FocusMixin from '../../globals/mixins/focus'; +import { TOOLTIP_ALIGNMENT } from '../tooltip/defs'; +import styles from './toggletip.scss'; + +/** + * Definition tooltip. + * + * @element cds-toggletip + */ +@customElement(`${prefix}-toggletip`) +class BXToggletip extends FocusMixin(LitElement) { + /** + * How the tooltip is aligned to the trigger button. + */ + @property() + alignment = TOOLTIP_ALIGNMENT.TOP; + + @property({ type: Boolean, reflect: true }) + open = false; + + private _handleClick = () => { + this.open = !this.open; + }; + + createRenderRoot() { + return this.attachShadow({ + mode: 'open', + delegatesFocus: + Number((/Safari\/(\d+)/.exec(navigator.userAgent) ?? ['', 0])[1]) <= + 537, + }); + } + + render() { + const { alignment, id, open } = this; + const classes = classMap({ + [`${prefix}--popover-container`]: true, + [`${prefix}--popover--caret`]: true, + [`${prefix}--popover--high-contrast`]: true, + [`${prefix}--popover--open`]: open, + [`${prefix}--popover--${alignment}`]: alignment, + [`${prefix}--toggletip`]: true, + [`${prefix}--toggletip--open`]: open, + }); + return html` + + + + + + + + + +
+ +
+ +
+
+ + + + + + + `; + } + + static styles = styles; +} + +export default BXToggletip; diff --git a/web-components/packages/carbon-web-components/src/components/toggle/defs.ts b/web-components/packages/carbon-web-components/src/components/toggle/defs.ts index baac9d5913a2..debf14bae4bd 100644 --- a/web-components/packages/carbon-web-components/src/components/toggle/defs.ts +++ b/web-components/packages/carbon-web-components/src/components/toggle/defs.ts @@ -1,7 +1,7 @@ /** * @license * - * Copyright IBM Corp. 2020 + * 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. @@ -19,5 +19,5 @@ export enum TOGGLE_SIZE { /** * Small size. */ - SMALL = 'small', + SMALL = 'sm', } diff --git a/web-components/packages/carbon-web-components/src/components/toggle/toggle-story.ts b/web-components/packages/carbon-web-components/src/components/toggle/toggle-story.ts index 784ea05d2adb..03340fef1f25 100644 --- a/web-components/packages/carbon-web-components/src/components/toggle/toggle-story.ts +++ b/web-components/packages/carbon-web-components/src/components/toggle/toggle-story.ts @@ -8,10 +8,11 @@ */ import { html } from 'lit'; +import { ifDefined } from 'lit/directives/if-defined.js'; import { action } from '@storybook/addon-actions'; import { boolean, select } from '@storybook/addon-knobs'; import textNullable from '../../../.storybook/knob-text-nullable'; -import { ifDefined } from 'lit/directives/if-defined.js'; +import { prefix } from '../../globals/settings'; import { TOGGLE_SIZE } from './toggle'; import storyDocs from './toggle-story.mdx'; @@ -31,9 +32,9 @@ export const Default = (args) => { uncheckedText, value, onChange, - } = args?.['bx-toggle'] ?? {}; + } = args?.[`${prefix}-toggle`] ?? {}; return html` - { size="${ifDefined(size)}" unchecked-text="${ifDefined(uncheckedText)}" value="${ifDefined(value)}" - @bx-toggle-changed="${onChange}"> + @cds-toggle-changed="${onChange}"> `; }; @@ -53,7 +54,7 @@ export default { parameters: { ...storyDocs.parameters, knobs: { - 'bx-toggle': () => ({ + [`${prefix}-toggle`]: () => ({ checked: boolean('Checked (checked)', false), checkedText: textNullable( 'Text for checked state (checked-text)', @@ -68,7 +69,7 @@ export default { 'Off' ), value: textNullable('Value (value)', ''), - onChange: action('bx-toggle-changed'), + onChange: action(`${prefix}-toggle-changed`), }), }, }, diff --git a/web-components/packages/carbon-web-components/src/components/toggle/toggle.scss b/web-components/packages/carbon-web-components/src/components/toggle/toggle.scss index 539ed1c8965a..bd62c9160b90 100644 --- a/web-components/packages/carbon-web-components/src/components/toggle/toggle.scss +++ b/web-components/packages/carbon-web-components/src/components/toggle/toggle.scss @@ -1,5 +1,5 @@ // -// Copyright IBM Corp. 2019, 2022 +// Copyright IBM Corp. 2019, 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. @@ -7,13 +7,17 @@ $css--plex: true !default; -@import 'carbon-components/scss/components/toggle/toggle'; +@use '@carbon/styles/scss/components/toggle/index' as *; +@use '@carbon/styles/scss/config' as *; :host(#{$prefix}-toggle) { outline: none; - .#{$prefix}-toggle--check { - width: 6px; - height: 5px; + &[disabled] { + @extend .#{$prefix}--toggle--disabled !optional; + + .#{$prefix}--toggle__appearance { + cursor: not-allowed; + } } } diff --git a/web-components/packages/carbon-web-components/src/components/toggle/toggle.ts b/web-components/packages/carbon-web-components/src/components/toggle/toggle.ts index 76d45d7e0acd..9ec879b12e12 100644 --- a/web-components/packages/carbon-web-components/src/components/toggle/toggle.ts +++ b/web-components/packages/carbon-web-components/src/components/toggle/toggle.ts @@ -9,28 +9,64 @@ import { classMap } from 'lit/directives/class-map.js'; import { html } from 'lit'; -import { property, customElement } from 'lit/decorators.js'; -import settings from 'carbon-components/es/globals/js/settings'; +import { property, customElement, query } from 'lit/decorators.js'; import { ifDefined } from 'lit/directives/if-defined.js'; +import { prefix } from '../../globals/settings'; import BXCheckbox from '../checkbox/checkbox'; import { TOGGLE_SIZE } from './defs'; import styles from './toggle.scss'; +import HostListener from '../../globals/decorators/host-listener'; +import HostListenerMixin from '../../globals/mixins/host-listener'; export { TOGGLE_SIZE }; -const { prefix } = settings; - /** * Basic toggle. * - * @element bx-toggle + * @element cds-toggle * @slot label-text - The label text. * @slot checked-text - The text for the checked state. * @slot unchecked-text - The text for the unchecked state. - * @fires bx-toggle-changed - The custom event fired after this changebox changes its checked state. + * @fires cds-toggle-changed - The custom event fired after this changebox changes its checked state. */ @customElement(`${prefix}-toggle`) -class BXToggle extends BXCheckbox { +class BXToggle extends HostListenerMixin(BXCheckbox) { + @query('button') + protected _checkboxNode!: HTMLInputElement; + + /** + * Handles `click` event on the ` + `; } diff --git a/web-components/packages/carbon-web-components/src/components/tooltip/defs.ts b/web-components/packages/carbon-web-components/src/components/tooltip/defs.ts index 21799443764d..073a9a6f1980 100644 --- a/web-components/packages/carbon-web-components/src/components/tooltip/defs.ts +++ b/web-components/packages/carbon-web-components/src/components/tooltip/defs.ts @@ -1,7 +1,7 @@ /** * @license * - * Copyright IBM Corp. 2020 + * 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. @@ -14,17 +14,62 @@ export enum TOOLTIP_ALIGNMENT { /** * Align the top/left position tooltip body to the one of its trigger button. */ - START = 'start', + TOP = 'top', + + /** + * Align the top-left position tooltip body to the one of its trigger button. + */ + TOP_LEFT = 'top-left', + + /** + * Align the top right position tooltip body to the one of its trigger button. + */ + TOP_RIGHT = 'top-right', + + /** + * Align the bottom position tooltip body to the one of its trigger button. + */ + BOTTOM = 'bottom', + + /** + * Align the bottom left position tooltip body to the one of its trigger button. + */ + BOTTOM_LEFT = 'bottom-left', + + /** + * Align the bottom right position tooltip body to the one of its trigger button. + */ + BOTTOM_RIGHT = 'bottom-right', + + /** + * Align the left position tooltip body to the one of its trigger button. + */ + LEFT = 'left', + + /** + * Align the left bottom position tooltip body to the one of its trigger button. + */ + LEFT_BOTTOM = 'left-bottom', + + /** + * Align the left top position tooltip body to the one of its trigger button. + */ + LEFT_TOP = 'left-top', + + /** + * Align the right position tooltip body to the one of its trigger button. + */ + RIGHT = 'right', /** - * Align the center position tooltip body to the one of its trigger button. + * Align the right bottom position tooltip body to the one of its trigger button. */ - CENTER = 'center', + RIGHT_BOTTOM = 'right-bottom', /** - * Align the bottom/right position tooltip body to the one of its trigger button. + * Align the right top position tooltip body to the one of its trigger button. */ - END = 'end', + RIGHT_TOP = 'right-top,', } /** diff --git a/web-components/packages/carbon-web-components/src/components/tooltip/index.ts b/web-components/packages/carbon-web-components/src/components/tooltip/index.ts index f552ea7f2efe..12948ef07aa2 100644 --- a/web-components/packages/carbon-web-components/src/components/tooltip/index.ts +++ b/web-components/packages/carbon-web-components/src/components/tooltip/index.ts @@ -1,7 +1,7 @@ /** * @license * - * Copyright IBM Corp. 2021 + * Copyright IBM Corp. 2021, 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. @@ -9,6 +9,5 @@ import './tooltip'; import './tooltip-body'; -import './tooltip-definition'; +import '../toggle-tip/toggletip'; import './tooltip-footer'; -import './tooltip-icon'; diff --git a/web-components/packages/carbon-web-components/src/components/tooltip/tooltip-body.ts b/web-components/packages/carbon-web-components/src/components/tooltip/tooltip-body.ts index 034fcdc72d45..14294175ffd7 100644 --- a/web-components/packages/carbon-web-components/src/components/tooltip/tooltip-body.ts +++ b/web-components/packages/carbon-web-components/src/components/tooltip/tooltip-body.ts @@ -7,9 +7,9 @@ * LICENSE file in the root directory of this source tree. */ -import settings from 'carbon-components/es/globals/js/settings'; import { html } from 'lit'; import { property, customElement } from 'lit/decorators.js'; +import { prefix } from '../../globals/settings'; import HostListener from '../../globals/decorators/host-listener'; import BXFloatingMenu, { FLOATING_MENU_ALIGNMENT, @@ -18,8 +18,6 @@ import BXFloatingMenu, { } from '../floating-menu/floating-menu'; import styles from './tooltip.scss'; -const { prefix } = settings; - /** * Tooltip body. */ diff --git a/web-components/packages/carbon-web-components/src/components/tooltip/tooltip-definition.ts b/web-components/packages/carbon-web-components/src/components/tooltip/tooltip-definition.ts deleted file mode 100644 index a81f60a4ffe7..000000000000 --- a/web-components/packages/carbon-web-components/src/components/tooltip/tooltip-definition.ts +++ /dev/null @@ -1,74 +0,0 @@ -/** - * @license - * - * Copyright IBM Corp. 2019, 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. - */ - -import { classMap } from 'lit/directives/class-map.js'; -import { LitElement, html } from 'lit'; -import { property, customElement } from 'lit/decorators.js'; -import settings from 'carbon-components/es/globals/js/settings'; -import FocusMixin from '../../globals/mixins/focus'; -import { TOOLTIP_ALIGNMENT, TOOLTIP_DIRECTION } from './defs'; -import styles from './tooltip.scss'; - -export { TOOLTIP_ALIGNMENT, TOOLTIP_DIRECTION }; - -const { prefix } = settings; - -/** - * Definition tooltip. - * - * @element bx-tooltip-definition - * @slot body - The tooltip body content. - */ -@customElement(`${prefix}-tooltip-definition`) -class BXTooltipDefinition extends FocusMixin(LitElement) { - /** - * How the tooltip is aligned to the trigger button. - */ - @property() - alignment = TOOLTIP_ALIGNMENT.CENTER; - - /** - * The text for the tooltip body. - */ - @property({ attribute: 'body-text' }) - bodyText = ''; - - /** - * The tooltip direction. - */ - @property() - direction = TOOLTIP_DIRECTION.BOTTOM; - - render() { - const { alignment, bodyText, direction } = this; - const classes = classMap({ - [`${prefix}--tooltip__trigger`]: true, - [`${prefix}--tooltip--a11y`]: true, - [`${prefix}--tooltip__trigger--definition`]: true, - [`${prefix}--tooltip--${direction}`]: direction, - [`${prefix}--tooltip--align-${alignment}`]: alignment, - }); - return html` - - - `; - } - - static shadowRootOptions = { - ...LitElement.shadowRootOptions, - delegatesFocus: true, - }; - static styles = styles; -} - -export default BXTooltipDefinition; diff --git a/web-components/packages/carbon-web-components/src/components/tooltip/tooltip-footer.ts b/web-components/packages/carbon-web-components/src/components/tooltip/tooltip-footer.ts index 553c594446e2..469a5e5527b1 100644 --- a/web-components/packages/carbon-web-components/src/components/tooltip/tooltip-footer.ts +++ b/web-components/packages/carbon-web-components/src/components/tooltip/tooltip-footer.ts @@ -7,13 +7,11 @@ * LICENSE file in the root directory of this source tree. */ -import settings from 'carbon-components/es/globals/js/settings'; import { LitElement, html } from 'lit'; import { customElement } from 'lit/decorators.js'; +import { prefix } from '../../globals/settings'; import styles from './tooltip.scss'; -const { prefix } = settings; - /** * Tooltip footer. */ diff --git a/web-components/packages/carbon-web-components/src/components/tooltip/tooltip-icon.ts b/web-components/packages/carbon-web-components/src/components/tooltip/tooltip-icon.ts deleted file mode 100644 index 28937fb3ffbc..000000000000 --- a/web-components/packages/carbon-web-components/src/components/tooltip/tooltip-icon.ts +++ /dev/null @@ -1,48 +0,0 @@ -/** - * @license - * - * Copyright IBM Corp. 2019, 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. - */ - -import { classMap } from 'lit/directives/class-map.js'; -import { html } from 'lit'; -import { customElement } from 'lit/decorators.js'; -import settings from 'carbon-components/es/globals/js/settings'; -import BXTooltipDefintion from './tooltip-definition'; - -const { prefix } = settings; - -/** - * Icon tooltip. - * - * @element bx-tooltip-icon - * @slot body - The tooltip body content. - */ -@customElement(`${prefix}-tooltip-icon`) -class BXTooltipIcon extends BXTooltipDefintion { - render() { - const { alignment, bodyText, direction } = this; - const classes = classMap({ - [`${prefix}--tooltip__trigger`]: true, - [`${prefix}--tooltip--a11y`]: true, - [`${prefix}--tooltip--${direction}`]: direction, - [`${prefix}--tooltip--align-${alignment}`]: alignment, - }); - return html` - - `; - } -} - -export default BXTooltipIcon; diff --git a/web-components/packages/carbon-web-components/src/components/tooltip/tooltip-story.scss b/web-components/packages/carbon-web-components/src/components/tooltip/tooltip-story.scss index 46551e235e93..dea2c85f7f24 100644 --- a/web-components/packages/carbon-web-components/src/components/tooltip/tooltip-story.scss +++ b/web-components/packages/carbon-web-components/src/components/tooltip/tooltip-story.scss @@ -1,27 +1,31 @@ // -// Copyright IBM Corp. 2019, 2022 +// Copyright IBM Corp. 2019, 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. // -@import 'carbon-components/scss/components/link/link'; +@use '@carbon/styles/scss/config' as *; +@use '@carbon/styles/scss/components/link'; +@use '@carbon/styles/scss/type' as *; +@use '@carbon/styles/scss/theme' as *; +@use '@carbon/styles/scss/utilities/button-reset'; /* stylelint-disable selector-type-no-unknown */ -bx-tooltip-body { +#{$prefix}-tooltip-body { p { @include type-style('body-short-01'); } - .bx--link { - color: $inverse-link; + .#{$prefix}--link { + color: $link-inverse; &:focus { - outline-color: $inverse-focus-ui; + outline-color: $focus-inverse; } } } -.bx-ce-demo-devenv--container { +.#{$prefix}-ce-demo-devenv--container { justify-content: center; } diff --git a/web-components/packages/carbon-web-components/src/components/tooltip/tooltip-story.ts b/web-components/packages/carbon-web-components/src/components/tooltip/tooltip-story.ts index dab1e8ab4582..3289879d3ba3 100644 --- a/web-components/packages/carbon-web-components/src/components/tooltip/tooltip-story.ts +++ b/web-components/packages/carbon-web-components/src/components/tooltip/tooltip-story.ts @@ -8,62 +8,52 @@ */ import { html } from 'lit'; -import { boolean, select } from '@storybook/addon-knobs'; +import { boolean, number, select } from '@storybook/addon-knobs'; // Below path will be there when an application installs `@carbon/web-components` package. // In our dev env, we auto-generate the file and re-map below path to to point to the generated file. // @ts-ignore import Filter16 from '@carbon/web-components/es/icons/filter/16'; -import textNullable from '../../../.storybook/knob-text-nullable'; -import { ifDefined } from 'lit/directives/if-defined.js'; import '../button/button'; import './tooltip'; -import { FLOATING_MENU_DIRECTION } from '../floating-menu/floating-menu'; import './tooltip-body'; import './tooltip-footer'; -import { TOOLTIP_ALIGNMENT, TOOLTIP_DIRECTION } from './tooltip-definition'; -import './tooltip-icon'; +import { TOOLTIP_ALIGNMENT } from './defs'; +import { prefix } from '../../globals/settings'; import styles from './tooltip-story.scss'; import storyDocs from './tooltip-story.mdx'; -const tooltipBodyDirections = { - [`Top (${FLOATING_MENU_DIRECTION.TOP})`]: FLOATING_MENU_DIRECTION.TOP, - [`Right (${FLOATING_MENU_DIRECTION.RIGHT})`]: FLOATING_MENU_DIRECTION.RIGHT, - [`Bottom (${FLOATING_MENU_DIRECTION.BOTTOM})`]: - FLOATING_MENU_DIRECTION.BOTTOM, - [`Left (${FLOATING_MENU_DIRECTION.LEFT})`]: FLOATING_MENU_DIRECTION.LEFT, -}; - const tooltipAlignments = { - [`Start (${TOOLTIP_ALIGNMENT.START})`]: TOOLTIP_ALIGNMENT.START, - [`Center (${TOOLTIP_ALIGNMENT.CENTER})`]: TOOLTIP_ALIGNMENT.CENTER, - [`End (${TOOLTIP_ALIGNMENT.END})`]: TOOLTIP_ALIGNMENT.END, -}; - -const tooltipDefinitionDirections = { - [`Top (${TOOLTIP_DIRECTION.TOP})`]: TOOLTIP_DIRECTION.TOP, - [`Right (${TOOLTIP_DIRECTION.RIGHT})`]: TOOLTIP_DIRECTION.RIGHT, - [`Bottom (${TOOLTIP_DIRECTION.BOTTOM})`]: TOOLTIP_DIRECTION.BOTTOM, - [`Left (${TOOLTIP_DIRECTION.LEFT})`]: TOOLTIP_DIRECTION.LEFT, + [`top`]: TOOLTIP_ALIGNMENT.TOP, + [`top-left`]: TOOLTIP_ALIGNMENT.TOP_LEFT, + [`top-right`]: TOOLTIP_ALIGNMENT.TOP_RIGHT, + [`bottom`]: TOOLTIP_ALIGNMENT.BOTTOM, + [`bottom-left`]: TOOLTIP_ALIGNMENT.BOTTOM_LEFT, + [`bottom-right`]: TOOLTIP_ALIGNMENT.BOTTOM_RIGHT, + [`left`]: TOOLTIP_ALIGNMENT.LEFT, + [`left-bottom`]: TOOLTIP_ALIGNMENT.LEFT_BOTTOM, + [`left-top`]: TOOLTIP_ALIGNMENT.LEFT_TOP, + [`right`]: TOOLTIP_ALIGNMENT.RIGHT, + [`right-bottom`]: TOOLTIP_ALIGNMENT.RIGHT_BOTTOM, + [`right-top`]: TOOLTIP_ALIGNMENT.RIGHT_TOP, }; export const Default = (args) => { - const { open } = args?.['bx-tooltip'] ?? {}; - const { alignment, direction } = args?.['bx-tooltip-body'] ?? {}; + const { open } = args?.['cds-tooltip'] ?? {}; + const { alignment, direction, enterDelay, exitDelay } = + args?.[`${prefix}-tooltip`] ?? {}; return html` - - -

- This is some tooltip text. This box shows the maximum amount of text - that should appear inside. If more room is needed please use a modal - instead. -

- - + + This is some tooltip text. This box shows the maximum amount of text that + should appear inside. If more room is needed please use a modal instead. + `; }; @@ -71,80 +61,19 @@ Default.storyName = 'Default'; Default.parameters = { knobs: { - 'bx-tooltip': () => ({ + [`${prefix}-tooltip`]: () => ({ open: boolean('Open (open)', false), - }), - 'bx-tooltip-body': () => ({ alignment: select( 'Tooltip alignment to trigger button (alignment)', tooltipAlignments, - TOOLTIP_ALIGNMENT.CENTER - ), - direction: select( - 'Direction (direction in )', - tooltipBodyDirections, - FLOATING_MENU_DIRECTION.BOTTOM + TOOLTIP_ALIGNMENT.TOP ), + enterDelay: number('Enter delay (in ms)', 100), + exitDelay: number('Exit delay (in ms)', 300), }), }, }; -export const definition = (args) => { - const { alignment, bodyText, direction } = - args?.['bx-tooltip-definition'] ?? {}; - return html` - - Definition Tooltip - - `; -}; - -definition.storyName = 'Definition tooltip'; - -definition.parameters = { - knobs: { - 'bx-tooltip-definition': () => ({ - alignment: select( - 'Tooltip alignment to trigger button (alignment)', - tooltipAlignments, - TOOLTIP_ALIGNMENT.CENTER - ), - bodyText: textNullable( - 'Tooltip content (bodyText)', - 'Brief description of the dotted, underlined word above.' - ), - direction: select( - 'Tooltip direction (direction)', - tooltipDefinitionDirections, - TOOLTIP_DIRECTION.BOTTOM - ), - }), - }, -}; - -export const icon = (args) => { - const { alignment, bodyText, direction } = args?.['bx-tooltip-icon'] ?? {}; - return html` - - ${Filter16()} - - `; -}; - -icon.storyName = 'Icon tooltip'; - -icon.parameters = { - knobs: { - 'bx-tooltip-icon': definition.parameters.knobs['bx-tooltip-definition'], - }, -}; - export default { title: 'Components/Tooltip', parameters: { diff --git a/web-components/packages/carbon-web-components/src/components/tooltip/tooltip.scss b/web-components/packages/carbon-web-components/src/components/tooltip/tooltip.scss index b1f787ebff8b..af237c6fd154 100644 --- a/web-components/packages/carbon-web-components/src/components/tooltip/tooltip.scss +++ b/web-components/packages/carbon-web-components/src/components/tooltip/tooltip.scss @@ -1,24 +1,49 @@ -// -// Copyright IBM Corp. 2019, 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. -// +/** + * @license + * + * Copyright IBM Corp. 2019, 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. + */ $css--plex: true !default; // `@include reset` with `variable-exists(css--reset) == false or $css--reset == false` breaks the dotted underline // TODO: Determine how to deal with `$css--reset` across components -$css--reset: true !default; +// $css--reset: true !default; // Caret's original size was 13.75px square $caret-size: 6.875px; $caret-horizontal-position: calc(#{$caret-size * (-1)} + 1px); -@import 'carbon-components/scss/globals/scss/css--helpers'; -@import 'carbon-components/scss/globals/scss/layout'; -@import 'carbon-components/scss/components/tooltip/tooltip'; +@use '@carbon/styles/scss/config' as *; +@use '@carbon/styles/scss/type' as *; +@use '@carbon/styles/scss/utilities'; +@use '@carbon/styles/scss/spacing' as *; +@use '@carbon/styles/scss/theme' as *; +@use '@carbon/styles/scss/components/tooltip/index' as *; +@use '@carbon/styles/scss/components/popover/index' as *; +@use '@carbon/styles/scss/utilities/button-reset'; + +// https://github.com/carbon-design-system/carbon/issues/11408 +// @include tooltip; :host(#{$prefix}-tooltip) { @extend .#{$prefix}--tooltip__trigger; + + .sb-tooltip-trigger { + @include button-reset.reset(); + + display: flex; + align-items: center; + justify-content: center; + width: 2rem; + height: 2rem; + border: 1px solid $border-subtle; + } + + .sb-tooltip-trigger svg { + fill: $background-inverse; + } } :host(#{$prefix}-tooltip-body) { @@ -110,14 +135,8 @@ $caret-horizontal-position: calc(#{$caret-size * (-1)} + 1px); } :host(#{$prefix}-tooltip-body[open]) { - @extend .#{$prefix}--tooltip--shown; -} - -:host(#{$prefix}-tooltip-definition) { - @extend .#{$prefix}--tooltip--definition; - @extend .#{$prefix}--tooltip--a11y; - - outline: none; + // TODO: audit + @extend .#{$prefix}--tooltip--shown !optional; } :host(#{$prefix}-tooltip-icon) { diff --git a/web-components/packages/carbon-web-components/src/components/tooltip/tooltip.ts b/web-components/packages/carbon-web-components/src/components/tooltip/tooltip.ts index bf4aa8f6b5c7..b487fb690d3e 100644 --- a/web-components/packages/carbon-web-components/src/components/tooltip/tooltip.ts +++ b/web-components/packages/carbon-web-components/src/components/tooltip/tooltip.ts @@ -7,10 +7,11 @@ * LICENSE file in the root directory of this source tree. */ -import settings from 'carbon-components/es/globals/js/settings'; import { LitElement, html } from 'lit'; import { property, customElement, query } from 'lit/decorators.js'; +import { classMap } from 'lit-html/directives/class-map'; import Information16 from '@carbon/icons/lib/information/16'; +import { prefix } from '../../globals/settings'; import HostListener from '../../globals/decorators/host-listener'; import HostListenerMixin from '../../globals/mixins/host-listener'; import { find } from '../../globals/internal/collection-helpers'; @@ -18,12 +19,10 @@ import BXFloatingMenu from '../floating-menu/floating-menu'; import BXFloatingMenuTrigger from '../floating-menu/floating-menu-trigger'; import styles from './tooltip.scss'; -const { prefix } = settings; - /** * Trigger button of tooltip. * - * @element bx-tooltip + * @element cds-tooltip */ @customElement(`${prefix}-tooltip`) class BXTooltip @@ -41,50 +40,61 @@ class BXTooltip @query('#trigger') private _triggerNode!: HTMLElement; + @property({ reflect: true, type: String }) + align = 'bottom'; + + @property({ reflect: true, type: String }) + duration; + + @property({ attribute: 'enter-delay-ms', type: Number }) + enterDelayMs = 100; + + @property({ attribute: 'exit-delay-ms', type: Number }) + exitDelayMs = 300; + /** * Handles `click` event on this element. * * @param {undefined|boolean} forceState if set, will be cast to boolean and force tooltip to open or close. */ - @HostListener('click') + @HostListener('mouseover') // @ts-ignore: The decorator refers to this method but TS thinks this method is not referred to - private _handleClick = async ( - forceState: undefined | boolean = undefined - ) => { - if (forceState === undefined) { + private _handleOver = async () => { + setTimeout(async () => { this.open = !this.open; - } else { - this.open = Boolean(forceState); - } - const { open, updateComplete } = this; - if (open) { - await updateComplete; - const { _menuBody: menuBody } = this; - menuBody?.focus(); - } + const { open, updateComplete } = this; + if (open) { + await updateComplete; + const { _menuBody: menuBody } = this; + menuBody?.focus(); + } + }, this.enterDelayMs); }; /** * Handles `keydown` event on this element. - * Space & enter will toggle state, Escape will only close. */ - @HostListener('keydown') + @HostListener('mouseout') // @ts-ignore: The decorator refers to this method but TS thinks this method is not referred to - private _handleKeydown = async (event) => { - if ([' ', 'Enter'].includes(event.key)) { - this._handleClick(); - } else if (event.key === 'Escape') { - this._handleClick(false); - } + private _handleHoverOut = async () => { + setTimeout(async () => { + const { open } = this; + if (open) { + this.open = !this.open; + } + }, this.exitDelayMs); }; /** - * Closes tooltip on `focusout` event + * Handles `keydown` event on this element. + * Space & enter will toggle state, Escape will only close. */ - @HostListener('focusout') + @HostListener('keydown') // @ts-ignore: The decorator refers to this method but TS thinks this method is not referred to - private _handleFocusout = async () => { - this._handleClick(false); + private _handleKeydown = async (event) => { + if (event.key === ' ' || event.key === 'Enter') { + this._handleOver(); + } }; /** @@ -140,9 +150,26 @@ class BXTooltip } render() { + const buttonClasses = classMap({ + [`${prefix}--popover-container`]: true, + [`${prefix}--popover--caret`]: true, + [`${prefix}--popover--high-contrast`]: true, + [`${prefix}--tooltip`]: true, + [`${prefix}--popover--open`]: this.open, + [`${prefix}--popover--${this.align}`]: true, + }); return html` - ${Information16({ id: 'trigger' })} - + + + + + + + + + `; } diff --git a/web-components/packages/carbon-web-components/src/components/ui-shell/header-menu-button.ts b/web-components/packages/carbon-web-components/src/components/ui-shell/header-menu-button.ts index 29e0ddd593d2..a62c32b53b76 100644 --- a/web-components/packages/carbon-web-components/src/components/ui-shell/header-menu-button.ts +++ b/web-components/packages/carbon-web-components/src/components/ui-shell/header-menu-button.ts @@ -7,26 +7,24 @@ * LICENSE file in the root directory of this source tree. */ -import settings from 'carbon-components/es/globals/js/settings'; import { classMap } from 'lit/directives/class-map.js'; import { LitElement, html } from 'lit'; import { property, customElement } from 'lit/decorators.js'; import Close20 from '@carbon/icons/lib/close/20'; import Menu20 from '@carbon/icons/lib/menu/20'; import { ifDefined } from 'lit/directives/if-defined.js'; +import { prefix } from '../../globals/settings'; import FocusMixin from '../../globals/mixins/focus'; import { SIDE_NAV_COLLAPSE_MODE, SIDE_NAV_USAGE_MODE } from './side-nav'; import styles from './header.scss'; -const { prefix } = settings; - /** * The trigger button for side nav in header nav. * - * @element bx-header-menu-button + * @element cds-header-menu-button * @csspart button The button. * @csspart toggle-icon The toggle icon. - * @fires bx-header-menu-button-toggled - The custom event fired after this header menu button is toggled upon a user gesture. + * @fires cds-header-menu-button-toggled - The custom event fired after this header menu button is toggled upon a user gesture. */ @customElement(`${prefix}-header-menu-button`) class BXHeaderMenuButton extends FocusMixin(LitElement) { diff --git a/web-components/packages/carbon-web-components/src/components/ui-shell/header-menu-item.ts b/web-components/packages/carbon-web-components/src/components/ui-shell/header-menu-item.ts index 1bcf80279366..1ecac7bc66e8 100644 --- a/web-components/packages/carbon-web-components/src/components/ui-shell/header-menu-item.ts +++ b/web-components/packages/carbon-web-components/src/components/ui-shell/header-menu-item.ts @@ -7,16 +7,14 @@ * LICENSE file in the root directory of this source tree. */ -import settings from 'carbon-components/es/globals/js/settings'; import { customElement } from 'lit/decorators.js'; +import { prefix } from '../../globals/settings'; import BXHeaderNavItem from './header-nav-item'; -const { prefix } = settings; - /** * Header submenu item. * - * @element bx-header-menu-item + * @element cds-header-menu-item */ @customElement(`${prefix}-header-menu-item`) class BXHeaderMenuItem extends BXHeaderNavItem {} diff --git a/web-components/packages/carbon-web-components/src/components/ui-shell/header-menu.ts b/web-components/packages/carbon-web-components/src/components/ui-shell/header-menu.ts index d2a3550a7f1b..3924bc3d0dc6 100644 --- a/web-components/packages/carbon-web-components/src/components/ui-shell/header-menu.ts +++ b/web-components/packages/carbon-web-components/src/components/ui-shell/header-menu.ts @@ -7,23 +7,21 @@ * LICENSE file in the root directory of this source tree. */ -import settings from 'carbon-components/es/globals/js/settings'; import { ifDefined } from 'lit/directives/if-defined.js'; import { LitElement, html } from 'lit'; import { property, customElement, query } from 'lit/decorators.js'; import ChevronDownGlyph from '@carbon/icons/lib/chevron--down/16'; +import { prefix } from '../../globals/settings'; import FocusMixin from '../../globals/mixins/focus'; import HostListenerMixin from '../../globals/mixins/host-listener'; import HostListener from '../../globals/decorators/host-listener'; import { forEach } from '../../globals/internal/collection-helpers'; import styles from './header.scss'; -const { prefix } = settings; - /** * Header menu. * - * @element bx-header-menu + * @element cds-header-menu * @csspart trigger The trigger button. * @csspart trigger-icon The trigger button icon. * @csspart menu-body The menu body. diff --git a/web-components/packages/carbon-web-components/src/components/ui-shell/header-name.ts b/web-components/packages/carbon-web-components/src/components/ui-shell/header-name.ts index 669c50b594f5..c09db055493f 100644 --- a/web-components/packages/carbon-web-components/src/components/ui-shell/header-name.ts +++ b/web-components/packages/carbon-web-components/src/components/ui-shell/header-name.ts @@ -7,19 +7,17 @@ * LICENSE file in the root directory of this source tree. */ -import settings from 'carbon-components/es/globals/js/settings'; import { ifDefined } from 'lit/directives/if-defined.js'; import { LitElement, html } from 'lit'; import { property, customElement } from 'lit/decorators.js'; +import { prefix } from '../../globals/settings'; import FocusMixin from '../../globals/mixins/focus'; import styles from './header.scss'; -const { prefix } = settings; - /** * The product name UI in header nav. * - * @element bx-header-name + * @element cds-header-name * @csspart link The link. * @csspart prefix The prefix content. */ diff --git a/web-components/packages/carbon-web-components/src/components/ui-shell/header-nav-item.ts b/web-components/packages/carbon-web-components/src/components/ui-shell/header-nav-item.ts index 17e1de999e40..f7aa660db260 100644 --- a/web-components/packages/carbon-web-components/src/components/ui-shell/header-nav-item.ts +++ b/web-components/packages/carbon-web-components/src/components/ui-shell/header-nav-item.ts @@ -7,19 +7,17 @@ * LICENSE file in the root directory of this source tree. */ -import settings from 'carbon-components/es/globals/js/settings'; import { ifDefined } from 'lit/directives/if-defined.js'; import { LitElement, html } from 'lit'; import { property, customElement } from 'lit/decorators.js'; +import { prefix } from '../../globals/settings'; import FocusMixin from '../../globals/mixins/focus'; import styles from './header.scss'; -const { prefix } = settings; - /** * Header nav item. * - * @element bx-header-nav-item + * @element cds-header-nav-item * @csspart link The link. * @csspart title The title. */ diff --git a/web-components/packages/carbon-web-components/src/components/ui-shell/header-nav.ts b/web-components/packages/carbon-web-components/src/components/ui-shell/header-nav.ts index 1b0990607c7b..3a359a5146f1 100644 --- a/web-components/packages/carbon-web-components/src/components/ui-shell/header-nav.ts +++ b/web-components/packages/carbon-web-components/src/components/ui-shell/header-nav.ts @@ -7,17 +7,15 @@ * LICENSE file in the root directory of this source tree. */ -import settings from 'carbon-components/es/globals/js/settings'; import { LitElement, html } from 'lit'; import { property, customElement } from 'lit/decorators.js'; +import { prefix } from '../../globals/settings'; import styles from './header.scss'; -const { prefix } = settings; - /** * Header. * - * @element bx-header-nav + * @element cds-header-nav * @csspart menu-body The menu body. * @csspart divider The divider. */ diff --git a/web-components/packages/carbon-web-components/src/components/ui-shell/header.scss b/web-components/packages/carbon-web-components/src/components/ui-shell/header.scss index cfb61d4dc61c..56207f4a9a23 100644 --- a/web-components/packages/carbon-web-components/src/components/ui-shell/header.scss +++ b/web-components/packages/carbon-web-components/src/components/ui-shell/header.scss @@ -1,5 +1,5 @@ // -// Copyright IBM Corp. 2019, 2022 +// Copyright IBM Corp. 2019, 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. @@ -7,7 +7,11 @@ $css--plex: true !default; -@import 'carbon-components/scss/components/ui-shell/header'; +@use '@carbon/styles/scss/config' as *; +@use '@carbon/styles/scss/breakpoint' as *; +@use '@carbon/styles/scss/spacing' as *; +@use '@carbon/styles/scss/theme' as *; +@use '@carbon/styles/scss/components/ui-shell/header'; :host(#{$prefix}-header) { @extend .#{$prefix}--header; @@ -23,7 +27,7 @@ $css--plex: true !default; transform: translateY(-50%); height: rem(24px); width: rem(1px); - background-color: $shell-header-border-01; + background-color: $border-subtle; } } @@ -41,15 +45,15 @@ $css--plex: true !default; outline: none; a.#{$prefix}--header__menu-item { - height: mini-units(6); + height: $spacing-09; &:hover { - background-color: $shell-header-bg-04; - color: $shell-header-text-01; + background-color: $background-hover; + color: $text-primary; } &:active { - background-color: $shell-header-bg-03; + background-color: $background-active; } } } @@ -58,7 +62,7 @@ $css--plex: true !default; display: content; outline: none; - @include carbon--breakpoint('lg') { + @include breakpoint('lg') { display: none; } } @@ -68,7 +72,7 @@ $css--plex: true !default; } :host(#{$prefix}-header-menu-button[collapse-mode='rail']) { - @include carbon--breakpoint('lg') { + @include breakpoint('lg') { display: block; } } diff --git a/web-components/packages/carbon-web-components/src/components/ui-shell/header.ts b/web-components/packages/carbon-web-components/src/components/ui-shell/header.ts index dea031beb69e..0feed39cdf8a 100644 --- a/web-components/packages/carbon-web-components/src/components/ui-shell/header.ts +++ b/web-components/packages/carbon-web-components/src/components/ui-shell/header.ts @@ -7,17 +7,15 @@ * LICENSE file in the root directory of this source tree. */ -import settings from 'carbon-components/es/globals/js/settings'; import { LitElement, html } from 'lit'; import { customElement } from 'lit/decorators.js'; +import { prefix } from '../../globals/settings'; import styles from './header.scss'; -const { prefix } = settings; - /** * Header. * - * @element bx-header + * @element cds-header */ @customElement(`${prefix}-header`) class BXHeader extends LitElement { diff --git a/web-components/packages/carbon-web-components/src/components/ui-shell/side-nav-divider.ts b/web-components/packages/carbon-web-components/src/components/ui-shell/side-nav-divider.ts index 68430cce0aba..f07b34cc2b9f 100644 --- a/web-components/packages/carbon-web-components/src/components/ui-shell/side-nav-divider.ts +++ b/web-components/packages/carbon-web-components/src/components/ui-shell/side-nav-divider.ts @@ -7,17 +7,15 @@ * LICENSE file in the root directory of this source tree. */ -import settings from 'carbon-components/es/globals/js/settings'; import { LitElement } from 'lit'; import { customElement } from 'lit/decorators.js'; +import { prefix } from '../../globals/settings'; import styles from './side-nav.scss'; -const { prefix } = settings; - /** * A divider in side nav. * - * @element bx-side-nav-divider + * @element cds-side-nav-divider */ @customElement(`${prefix}-side-nav-divider`) class BXSideNavDivider extends LitElement { diff --git a/web-components/packages/carbon-web-components/src/components/ui-shell/side-nav-items.ts b/web-components/packages/carbon-web-components/src/components/ui-shell/side-nav-items.ts index 8891bd99b60b..6350cd2a3582 100644 --- a/web-components/packages/carbon-web-components/src/components/ui-shell/side-nav-items.ts +++ b/web-components/packages/carbon-web-components/src/components/ui-shell/side-nav-items.ts @@ -7,17 +7,15 @@ * LICENSE file in the root directory of this source tree. */ -import settings from 'carbon-components/es/globals/js/settings'; import { LitElement, html } from 'lit'; import { customElement } from 'lit/decorators.js'; +import { prefix } from '../../globals/settings'; import styles from './side-nav.scss'; -const { prefix } = settings; - /** * Side nav items. * - * @element bx-side-nav-items + * @element cds-side-nav-items */ @customElement(`${prefix}-side-nav-items`) class BXSideNavItems extends LitElement { diff --git a/web-components/packages/carbon-web-components/src/components/ui-shell/side-nav-link.ts b/web-components/packages/carbon-web-components/src/components/ui-shell/side-nav-link.ts index 8c283d8614e6..5740800f39d4 100644 --- a/web-components/packages/carbon-web-components/src/components/ui-shell/side-nav-link.ts +++ b/web-components/packages/carbon-web-components/src/components/ui-shell/side-nav-link.ts @@ -7,19 +7,17 @@ * LICENSE file in the root directory of this source tree. */ -import settings from 'carbon-components/es/globals/js/settings'; import { classMap } from 'lit/directives/class-map.js'; import { LitElement, html } from 'lit'; import { property, customElement, query } from 'lit/decorators.js'; +import { prefix } from '../../globals/settings'; import FocusMixin from '../../globals/mixins/focus'; import styles from './side-nav.scss'; -const { prefix } = settings; - /** * Side nav menu item. * - * @element bx-side-nav-link + * @element cds-side-nav-link * @slot link - The link. * @slot title - The title. * @slot title-icon-container - The title icon container. diff --git a/web-components/packages/carbon-web-components/src/components/ui-shell/side-nav-menu-item.ts b/web-components/packages/carbon-web-components/src/components/ui-shell/side-nav-menu-item.ts index 660dae1797ff..453f276524fe 100644 --- a/web-components/packages/carbon-web-components/src/components/ui-shell/side-nav-menu-item.ts +++ b/web-components/packages/carbon-web-components/src/components/ui-shell/side-nav-menu-item.ts @@ -7,20 +7,18 @@ * LICENSE file in the root directory of this source tree. */ -import settings from 'carbon-components/es/globals/js/settings'; import { classMap } from 'lit/directives/class-map.js'; import { LitElement, html } from 'lit'; import { property, customElement } from 'lit/decorators.js'; +import { prefix } from '../../globals/settings'; import FocusMixin from '../../globals/mixins/focus'; import BXSideNavMenu from './side-nav-menu'; import styles from './side-nav.scss'; -const { prefix } = settings; - /** * Side nav menu item. * - * @element bx-side-nav-menu-item + * @element cds-side-nav-menu-item * @csspart link The link. * @csspart title The title. */ diff --git a/web-components/packages/carbon-web-components/src/components/ui-shell/side-nav-menu.ts b/web-components/packages/carbon-web-components/src/components/ui-shell/side-nav-menu.ts index 50db9173787f..54c9d2e4b9b3 100644 --- a/web-components/packages/carbon-web-components/src/components/ui-shell/side-nav-menu.ts +++ b/web-components/packages/carbon-web-components/src/components/ui-shell/side-nav-menu.ts @@ -7,20 +7,18 @@ * LICENSE file in the root directory of this source tree. */ -import settings from 'carbon-components/es/globals/js/settings'; import { LitElement, html } from 'lit'; import { property, customElement, query } from 'lit/decorators.js'; import ChevronDown20 from '@carbon/icons/lib/chevron--down/20'; +import { prefix } from '../../globals/settings'; import { forEach } from '../../globals/internal/collection-helpers'; import FocusMixin from '../../globals/mixins/focus'; import styles from './side-nav.scss'; -const { prefix } = settings; - /** * Side nav menu. * - * @element bx-side-nav-menu + * @element cds-side-nav-menu * @slot title-icon - The icon. * @csspart expando The expando. * @csspart expando-icon-container The expando icon container. diff --git a/web-components/packages/carbon-web-components/src/components/ui-shell/side-nav.scss b/web-components/packages/carbon-web-components/src/components/ui-shell/side-nav.scss index d2ba404bafb3..95e313370aaf 100644 --- a/web-components/packages/carbon-web-components/src/components/ui-shell/side-nav.scss +++ b/web-components/packages/carbon-web-components/src/components/ui-shell/side-nav.scss @@ -1,5 +1,5 @@ // -// Copyright IBM Corp. 2019, 2022 +// Copyright IBM Corp. 2019, 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. @@ -7,7 +7,11 @@ $css--plex: true !default; -@import 'carbon-components/scss/components/ui-shell/side-nav'; +@use '@carbon/styles/scss/config' as *; +@use '@carbon/styles/scss/breakpoint' as *; +@use '@carbon/styles/scss/spacing' as *; +@use '@carbon/styles/scss/theme' as *; +@use '@carbon/styles/scss/components/ui-shell/side-nav'; :host(#{$prefix}-side-nav) { @extend .#{$prefix}--side-nav; @@ -19,14 +23,16 @@ $css--plex: true !default; :host(#{$prefix}-side-nav[collapse-mode='fixed']) { // TODO: Consider making `@extend .#{$prefix}--side-nav--fixed` work, possibly caused by `:not()` styles - width: mini-units(32); + width: 16rem; } :host(#{$prefix}-side-nav[collapse-mode='rail']) { - width: mini-units(6); + // TODO: audit + width: $spacing-09; &:hover { - width: mini-units(32); + // TODO: audit + width: 16rem; } } @@ -42,8 +48,9 @@ $css--plex: true !default; :host(#{$prefix}-side-nav[expanded][usage-mode='header-nav']), :host(#{$prefix}-side-nav[collapse-mode][expanded][usage-mode='header-nav']) { - @include carbon--breakpoint-down('lg') { - width: mini-units(32); + @include breakpoint-down('lg') { + // TODO: audit + width: 16rem; } } @@ -60,7 +67,8 @@ $css--plex: true !default; height: auto; .#{$prefix}--side-nav__icon { - color: $shell-side-nav-text-01; + // TODO: audit + color: $text-primary; &[hidden] { display: none; @@ -90,8 +98,9 @@ $css--plex: true !default; :host(#{$prefix}-side-nav-menu[active]) { @extend .#{$prefix}--side-nav__item--active; - background-color: $shell-side-nav-bg-04; - color: $ibm-color__gray-100; + // TODO: audit + background-color: $background-selected; + color: $text-primary; position: relative; &::before { @@ -101,7 +110,7 @@ $css--plex: true !default; bottom: 0; left: 0; width: 4px; - background-color: $shell-side-nav-accent-01; + background-color: $border-interactive; } } @@ -128,21 +137,24 @@ $css--plex: true !default; height: auto; a.#{$prefix}--side-nav__link { - height: mini-units(4); - min-height: mini-units(4); - padding-left: mini-units(4); + // TODO: audit + height: $spacing-05; + min-height: $spacing-05; + padding-left: $spacing-05; font-weight: 400; } } :host(#{$prefix}-side-nav-menu-item[parent-has-icon]) a.#{$prefix}--side-nav__link { - padding-left: mini-units(9); + // TODO: audit + padding-left: rem(72px); } :host(#{$prefix}-side-nav-item) .#{$prefix}--side-nav__link:hover, :host(#{$prefix}-side-nav-menu) .#{$prefix}--side-nav__submenu:hover, :host(#{$prefix}-side-nav-menu-item) .#{$prefix}--side-nav__link:hover { - background-color: $shell-side-nav-bg-04; - color: $ibm-color__gray-100; + // TODO: audit + background-color: $background-hover; + color: $text-primary; } diff --git a/web-components/packages/carbon-web-components/src/components/ui-shell/side-nav.ts b/web-components/packages/carbon-web-components/src/components/ui-shell/side-nav.ts index bf385e010206..ddb0b94cff9d 100644 --- a/web-components/packages/carbon-web-components/src/components/ui-shell/side-nav.ts +++ b/web-components/packages/carbon-web-components/src/components/ui-shell/side-nav.ts @@ -9,8 +9,8 @@ import { LitElement, html } from 'lit'; import { property, customElement } from 'lit/decorators.js'; -import settings from 'carbon-components/es/globals/js/settings'; import on from 'carbon-components/es/globals/js/misc/on'; +import { prefix } from '../../globals/settings'; import HostListenerMixin from '../../globals/mixins/host-listener'; import HostListener from '../../globals/decorators/host-listener'; import { forEach } from '../../globals/internal/collection-helpers'; @@ -22,12 +22,10 @@ import styles from './side-nav.scss'; export { SIDE_NAV_COLLAPSE_MODE, SIDE_NAV_USAGE_MODE }; -const { prefix } = settings; - /** * Side nav. * - * @element bx-side-nav + * @element cds-side-nav */ @customElement(`${prefix}-side-nav`) class BXSideNav extends HostListenerMixin(LitElement) { diff --git a/web-components/packages/carbon-web-components/src/components/ui-shell/ui-shell-story.scss b/web-components/packages/carbon-web-components/src/components/ui-shell/ui-shell-story.scss index 0d52b2d2cab7..4c5501feb58d 100644 --- a/web-components/packages/carbon-web-components/src/components/ui-shell/ui-shell-story.scss +++ b/web-components/packages/carbon-web-components/src/components/ui-shell/ui-shell-story.scss @@ -1,41 +1,45 @@ // -// 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. // -@import 'carbon-components/scss/globals/scss/vendor/@carbon/elements/scss/layout/breakpoint'; -@import 'carbon-components/scss/components/ui-shell/functions'; +@use '@carbon/styles/scss/config' as *; +@use '@carbon/styles/scss/breakpoint' as *; +@use '@carbon/styles/scss/spacing' as *; +@use '@carbon/styles/scss/components/ui-shell/functions'; /* stylelint-disable selector-type-no-unknown */ -bx-header ~ bx-side-nav { +#{$prefix}-header ~ #{$prefix}-side-nav { margin-top: 3rem; height: calc(100% - 3rem); } -.bx-ce-demo-devenv--container { +.#{$prefix}-ce-demo-devenv--container { // Ref: https://github.com/carbon-design-system/carbon/blob/v10.10.0/packages/components/src/components/ui-shell/_side-nav.scss#L82 will-change: margin-left; transition: margin-left 0.11s cubic-bezier(0.2, 0, 1, 0.9); - @include carbon--breakpoint('lg') { - margin-left: mini-units(32); + @include breakpoint('lg') { + margin-left: 16rem; } } -.bx-ce-demo-devenv--with-rail .bx-ce-demo-devenv--container { - margin-left: mini-units(6); +.#{$prefix}-ce-demo-devenv--with-rail .#{$prefix}-ce-demo-devenv--container { + margin-left: $spacing-09; } -.bx-ce-demo-devenv--rail-expanded .bx-ce-demo-devenv--container { - @include carbon--breakpoint('lg') { - margin-left: mini-units(32); +.#{$prefix}-ce-demo-devenv--rail-expanded + .#{$prefix}-ce-demo-devenv--container { + @include breakpoint('lg') { + margin-left: 16rem; } } -.bx-ce-demo-devenv--with-side-nav-for-header .bx-ce-demo-devenv--container { - @include carbon--breakpoint('lg') { +.#{$prefix}-ce-demo-devenv--with-side-nav-for-header + .#{$prefix}-ce-demo-devenv--container { + @include breakpoint('lg') { margin-left: 0; } } diff --git a/web-components/packages/carbon-web-components/src/components/ui-shell/ui-shell-story.ts b/web-components/packages/carbon-web-components/src/components/ui-shell/ui-shell-story.ts index 77030ba1fa85..110ce2df1439 100644 --- a/web-components/packages/carbon-web-components/src/components/ui-shell/ui-shell-story.ts +++ b/web-components/packages/carbon-web-components/src/components/ui-shell/ui-shell-story.ts @@ -13,7 +13,7 @@ import { boolean, select } from '@storybook/addon-knobs'; // In our dev env, we auto-generate the file and re-map below path to to point to the generated file. // @ts-ignore import Fade16 from '@carbon/web-components/es/icons/fade/16'; -import contentStyles from 'carbon-components/scss/components/ui-shell/_content.scss'; +import contentStyles from '@carbon/styles/scss/components/ui-shell/content/_content.scss'; import textNullable from '../../../.storybook/knob-text-nullable'; import { ifDefined } from 'lit/directives/if-defined.js'; import { SIDE_NAV_COLLAPSE_MODE, SIDE_NAV_USAGE_MODE } from './side-nav'; @@ -31,6 +31,7 @@ import './header-menu-button'; import './header-name'; import styles from './ui-shell-story.scss'; import storyDocs from './ui-shell-story.mdx'; +import { prefix } from '../../globals/settings'; const collapseModes = { Responsive: null, @@ -50,15 +51,15 @@ const updateRailExpanded = ({ usageMode = SIDE_NAV_USAGE_MODE.REGULAR, }) => { document.body.classList.toggle( - 'bx-ce-demo-devenv--with-rail', + `${prefix}-ce-demo-devenv--with-rail`, collapseMode === SIDE_NAV_COLLAPSE_MODE.RAIL ); document.body.classList.toggle( - 'bx-ce-demo-devenv--rail-expanded', + `${prefix}-ce-demo-devenv--rail-expanded`, collapseMode === SIDE_NAV_COLLAPSE_MODE.RAIL && expanded ); document.body.classList.toggle( - 'bx-ce-demo-devenv--with-side-nav-for-header', + `${prefix}-ce-demo-devenv--with-side-nav-for-header`, usageMode === SIDE_NAV_USAGE_MODE.HEADER_NAV ); }; @@ -67,10 +68,10 @@ const StoryContent = () => html` -
-
-
-
+
+
+
+

Purpose and function

The shell is perhaps the most crucial piece of any UI built with @@ -121,59 +122,59 @@ const StoryContent = () => html` `; export const sideNav = (args) => { - const { collapseMode, expanded } = args?.['bx-side-nav'] ?? {}; - const { href } = args?.['bx-side-nav-menu-item'] ?? {}; + const { collapseMode, expanded } = args?.[`${prefix}-side-nav`] ?? {}; + const { href } = args?.[`${prefix}-side-nav-menu-item`] ?? {}; updateRailExpanded({ collapseMode, expanded }); const result = html` - - - - + + + L0 menu item - - + + L0 menu item - - + + L0 menu item - - - - + + + + L0 menu item - - + L0 menu item - - + + L0 menu item - - - - + + + + L0 menu item - - + + L0 menu item - - + + L0 menu item - - - - L0 link - L0 link - - + + + + L0 link + L0 link + + ${StoryContent()} `; (result as any).hasMainTag = true; @@ -184,7 +185,7 @@ sideNav.storyName = 'Side nav'; sideNav.parameters = { knobs: { - 'bx-side-nav': () => ({ + [`${prefix}-side-nav`]: () => ({ expanded: boolean('Expanded (expanded)', true), collapseMode: select( 'Collapse mode (collapse-mode)', @@ -192,73 +193,73 @@ sideNav.parameters = { null ), }), - 'bx-side-nav-menu-item': () => ({ + [`${prefix}-side-nav-menu-item`]: () => ({ href: textNullable('Link href (href)', 'javascript:void 0'), // eslint-disable-line no-script-url }), }, }; export const sideNavWithIcons = (args) => { - const { collapseMode, expanded } = args?.['bx-side-nav'] ?? {}; - const { href } = args?.['bx-side-nav-menu-item'] ?? {}; + const { collapseMode, expanded } = args?.[`${prefix}-side-nav`] ?? {}; + const { href } = args?.[`${prefix}-side-nav-menu-item`] ?? {}; updateRailExpanded({ collapseMode, expanded }); const result = html` - - - + + ${Fade16({ slot: 'title-icon' })} - + L0 menu item - - + + L0 menu item - - + + L0 menu item - - - + + + ${Fade16({ slot: 'title-icon' })} - + L0 menu item - - + L0 menu item - - + + L0 menu item - - - + + + ${Fade16({ slot: 'title-icon' })} - + L0 menu item - - + + L0 menu item - - + + L0 menu item - - - - ${Fade16({ slot: 'title-icon' })}L0 link + + + ${Fade16({ slot: 'title-icon' })}L0 link - ${Fade16({ slot: 'title-icon' })}L0 link${Fade16({ slot: 'title-icon' })}L0 link - - + + ${StoryContent()} `; (result as any).hasMainTag = true; @@ -272,8 +273,9 @@ sideNavWithIcons.parameters = { }; export const header = (args) => { - const { collapseMode, expanded, usageMode } = args?.['bx-side-nav'] ?? {}; - const { href } = args?.['bx-side-nav-menu-item'] ?? {}; + const { collapseMode, expanded, usageMode } = + args?.[`${prefix}-side-nav`] ?? {}; + const { href } = args?.[`${prefix}-side-nav-menu-item`] ?? {}; updateRailExpanded({ collapseMode, expanded, usageMode }); const handleButtonToggle = (event) => { updateRailExpanded({ @@ -286,85 +288,91 @@ export const header = (args) => { - - + - [Platform] + [Platform] - - Link 1 - Link 2 - Link 3 - - Sub-link 1 + Link 1 + Link 2 + Link 3 + + Sub-link 1 - Sub-link 2Sub-link 2 - Sub-link 3Sub-link 3 - - - - + + + - - + + ${Fade16({ slot: 'title-icon' })} - + L0 menu item - - + + L0 menu item - - + + L0 menu item - - - + + + ${Fade16({ slot: 'title-icon' })} - + L0 menu item - - + L0 menu item - - + + L0 menu item - - - + + + ${Fade16({ slot: 'title-icon' })} - + L0 menu item - - + + L0 menu item - - + + L0 menu item - - - - ${Fade16({ slot: 'title-icon' })}L0 link + + + ${Fade16({ slot: 'title-icon' })}L0 link - ${Fade16({ slot: 'title-icon' })}L0 link${Fade16({ slot: 'title-icon' })}L0 link - - + + ${StoryContent()} `; (result as any).hasMainTag = true; @@ -373,11 +381,12 @@ export const header = (args) => { header.parameters = { knobs: { - 'bx-side-nav': () => ({ - ...sideNav.parameters.knobs['bx-side-nav'](), + [`${prefix}-side-nav`]: () => ({ + ...sideNav.parameters.knobs[`${prefix}-side-nav`](), usageMode: select('Usage mode (usage-mode)', usageModes, null), }), - 'bx-side-nav-menu-item': sideNav.parameters.knobs['bx-side-nav-menu-item'], + [`${prefix}-side-nav-menu-item`]: + sideNav.parameters.knobs[`${prefix}-side-nav-menu-item`], }, }; diff --git a/web-components/packages/carbon-web-components/src/globals/settings.ts b/web-components/packages/carbon-web-components/src/globals/settings.ts index 8532978f63d9..0b003f9c5ed5 100644 --- a/web-components/packages/carbon-web-components/src/globals/settings.ts +++ b/web-components/packages/carbon-web-components/src/globals/settings.ts @@ -1,15 +1,13 @@ /** * @license * - * Copyright IBM Corp. 2019, 2022 + * Copyright IBM Corp. 2019, 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. */ -import settings from 'carbon-components/es/globals/js/settings'; - -const { prefix } = settings; +const prefix = 'cds'; /** * A selector selecting tabbable nodes. @@ -73,4 +71,4 @@ const selectorTabbable = ` `; // Because we're going to have a bunch of exports -export { selectorTabbable }; +export { prefix, selectorTabbable }; diff --git a/web-components/packages/carbon-web-components/src/globals/wrappers/createReactCustomElementType.ts b/web-components/packages/carbon-web-components/src/globals/wrappers/createReactCustomElementType.ts index 8bdd9e00090a..6a0f85c181be 100644 --- a/web-components/packages/carbon-web-components/src/globals/wrappers/createReactCustomElementType.ts +++ b/web-components/packages/carbon-web-components/src/globals/wrappers/createReactCustomElementType.ts @@ -1,7 +1,7 @@ /** * @license * - * Copyright IBM Corp. 2019, 2022 + * Copyright IBM Corp. 2019, 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. @@ -183,7 +183,7 @@ const attachEventListeners = ( * import { render } from 'react-dom'; * import createCustomElementType, { booleanSerializer } from '/path/to/createCustomElementType'; * - * const BXDropdown = createCustomElementType('bx-dropdown', { + * const BXDropdown = createCustomElementType(`${prefix}-dropdown`, { * disabled: { * // Sets `disabled` attribute when the React prop value is truthy, unsets otherwise * serialize: booleanSerializer, @@ -193,8 +193,8 @@ const attachEventListeners = ( * attribute: 'helper-text', * }, * onBeforeSelect: { - * // Sets `onBeforeSelect` React prop value as a listener of `bx-dropdown-beingselected` custom event - * event: 'bx-dropdown-beingselected', + * // Sets `onBeforeSelect` React prop value as a listener of `cds-dropdown-beingselected` custom event + * event: `${prefix}-dropdown-beingselected`, * }, * }); * @@ -203,10 +203,10 @@ const attachEventListeners = ( * { console.log('bx-dropdown-beingselected is fired!', event); }}> - * Option 1 - * Option 2 - * Option 3 + * onBeforeSelect={event => { console.log(`${prefix}-dropdown-beingselected is fired!`, event); }}> + * Option 1 + * Option 2 + * Option 3 * * ) * document.body diff --git a/web-components/packages/carbon-web-components/src/index.ts b/web-components/packages/carbon-web-components/src/index.ts index d3f74f89e91b..0200af624865 100644 --- a/web-components/packages/carbon-web-components/src/index.ts +++ b/web-components/packages/carbon-web-components/src/index.ts @@ -1,7 +1,7 @@ /** * @license * - * Copyright IBM Corp. 2019, 2020 + * Copyright IBM Corp. 2019, 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. @@ -102,9 +102,8 @@ export { default as BXTileGroup } from './components/tile/tile-group'; export { default as BXToggle } from './components/toggle/toggle'; export { default as BXTooltip } from './components/tooltip/tooltip'; export { default as BXTooltipBody } from './components/tooltip/tooltip-body'; -export { default as BXTooltipDefinition } from './components/tooltip/tooltip-definition'; +export { default as BXTooltipDefinition } from './components/toggle-tip/toggletip'; export { default as BXTooltipFooter } from './components/tooltip/tooltip-footer'; -export { default as BXTooltipIcon } from './components/tooltip/tooltip-icon'; export { default as BXHeader } from './components/ui-shell/header'; export { default as BXHeaderMenu } from './components/ui-shell/header-menu'; export { default as BXHeaderMenuButton } from './components/ui-shell/header-menu-button'; diff --git a/web-components/packages/carbon-web-components/tests/spec/tooltip_spec.ts b/web-components/packages/carbon-web-components/tests/spec/tooltip_spec.ts index 7f45ff7eba1e..7831208385fd 100644 --- a/web-components/packages/carbon-web-components/tests/spec/tooltip_spec.ts +++ b/web-components/packages/carbon-web-components/tests/spec/tooltip_spec.ts @@ -14,7 +14,7 @@ import BXTooltipBody from '../../src/components/tooltip/tooltip-body'; import { TOOLTIP_ALIGNMENT, TOOLTIP_DIRECTION, -} from '../../src/components/tooltip/tooltip-definition'; +} from '../../src/components/toggle-tip/toggletip'; import { definition, icon } from '../../src/components/tooltip/tooltip-story'; const bodyTemplate = () => html` `; diff --git a/web-components/packages/carbon-web-components/tools/babel-plugin-create-react-custom-element-type-def.js b/web-components/packages/carbon-web-components/tools/babel-plugin-create-react-custom-element-type-def.js index 7c7b54f4d4c5..75f925449542 100644 --- a/web-components/packages/carbon-web-components/tools/babel-plugin-create-react-custom-element-type-def.js +++ b/web-components/packages/carbon-web-components/tools/babel-plugin-create-react-custom-element-type-def.js @@ -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. @@ -86,7 +86,7 @@ module.exports = function generateCreateReactCustomElementType(api) { ${events.join('\n')} ${parentDescriptorSource ? '' : '[prop: string]: unknown;'} } - ${classComments.map(({ value }) => `/*${value}*/`).join('\n')} + ${classComments.map((value) => `/*${value}*/`).join('\n')} declare class ${className} extends Component {} export default ${className}; `, diff --git a/web-components/packages/carbon-web-components/tools/babel-plugin-create-react-custom-element-type.js b/web-components/packages/carbon-web-components/tools/babel-plugin-create-react-custom-element-type.js index ac03e49cdf28..44e1cae5dc44 100644 --- a/web-components/packages/carbon-web-components/tools/babel-plugin-create-react-custom-element-type.js +++ b/web-components/packages/carbon-web-components/tools/babel-plugin-create-react-custom-element-type.js @@ -1,7 +1,7 @@ /** * @license * - * Copyright IBM Corp. 2019, 2022 + * Copyright IBM Corp. 2019, 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. @@ -163,7 +163,11 @@ function createMetadataVisitor(api) { } const leadingComments = path.get('leadingComments'); if (leadingComments) { - context.classComments = leadingComments.map((item) => item.node); + context.classComments = ( + Array.isArray(leadingComments) ? leadingComments : [leadingComments] + ) + .map((item) => item.node) + .filter(Boolean); } context.className = path.get('id.name').node; }, @@ -188,7 +192,9 @@ function createMetadataVisitor(api) { if (leadingComments) { metadata.comments = ( Array.isArray(leadingComments) ? leadingComments : [leadingComments] - ).map((item) => item.node); + ) + .map((item) => item.node) + .filter(Boolean); } customEvents[name] = metadata; } @@ -211,7 +217,9 @@ function createMetadataVisitor(api) { if (leadingComments) { metadata.comments = ( Array.isArray(leadingComments) ? leadingComments : [leadingComments] - ).map((item) => item.node); + ) + .map((item) => item.node) + .filter(Boolean); } customEvents[name] = metadata; }