diff --git a/web-components/packages/carbon-web-components/examples/codesandbox/basic/components/tearsheet/.babelrc b/web-components/packages/carbon-web-components/examples/codesandbox/basic/components/tearsheet/.babelrc new file mode 100644 index 000000000000..74450eed94be --- /dev/null +++ b/web-components/packages/carbon-web-components/examples/codesandbox/basic/components/tearsheet/.babelrc @@ -0,0 +1,22 @@ +{ + "presets": [ + [ + "@babel/preset-env", + { + "modules": false, + "targets": [ + "last 1 version", + "Firefox ESR", + "not opera > 0", + "not op_mini > 0", + "not op_mob > 0", + "not android > 0", + "not edge > 0", + "not ie > 0", + "not ie_mob > 0" + ] + } + ] + ], + "plugins": [["@babel/plugin-transform-runtime", { "version": "7.3.0" }]] +} diff --git a/web-components/packages/carbon-web-components/examples/codesandbox/basic/components/tearsheet/.gitignore b/web-components/packages/carbon-web-components/examples/codesandbox/basic/components/tearsheet/.gitignore new file mode 100644 index 000000000000..d94d6e13e948 --- /dev/null +++ b/web-components/packages/carbon-web-components/examples/codesandbox/basic/components/tearsheet/.gitignore @@ -0,0 +1,22 @@ +# See https://help.github.com/ignore-files/ for more about ignoring files. + +# dependencies +/node_modules + +# testing +/coverage + +# production +/build + +# misc +.DS_Store +.cache +.env.local +.env.development.local +.env.test.local +.env.production.local + +npm-debug.log* +yarn-debug.log* +yarn-error.log* diff --git a/web-components/packages/carbon-web-components/examples/codesandbox/basic/components/tearsheet/.sassrc b/web-components/packages/carbon-web-components/examples/codesandbox/basic/components/tearsheet/.sassrc new file mode 100644 index 000000000000..956b9e0a3d8a --- /dev/null +++ b/web-components/packages/carbon-web-components/examples/codesandbox/basic/components/tearsheet/.sassrc @@ -0,0 +1,6 @@ +{ + "includePaths": [ + "node_modules", + "../../node_modules" + ] +} \ No newline at end of file diff --git a/web-components/packages/carbon-web-components/examples/codesandbox/basic/components/tearsheet/cdn.html b/web-components/packages/carbon-web-components/examples/codesandbox/basic/components/tearsheet/cdn.html new file mode 100644 index 000000000000..236d62d8502d --- /dev/null +++ b/web-components/packages/carbon-web-components/examples/codesandbox/basic/components/tearsheet/cdn.html @@ -0,0 +1,122 @@ + + + + + @carbon/ibmdotcom-web-components example + + + + + + + + + + + + + + Toggle tearsheet + + + +
+
Section
+
+ + +
+
+ + +
+
+ + + +
+
+ + + Optional label for context + + + Title used to designate the overarching flow of the tearsheet. + + + Description used to describe the flow if need be. + + + + Ghost + + + Secondary + + + Primary + + + + +
+

AI Explained

+

84%

+

Confidence score

+

+ Lorem ipsum dolor sit amet, di os consectetur adipiscing elit, sed + do eiusmod tempor incididunt ut fsil labore et dolore magna aliqua. +

+
+

Model type

+

Foundation model

+
+ + + +
+ + Tab 1 + Tab 2 + Tab 3 + Tab 4 + +
+ + + + diff --git a/web-components/packages/carbon-web-components/examples/codesandbox/basic/components/tearsheet/index.html b/web-components/packages/carbon-web-components/examples/codesandbox/basic/components/tearsheet/index.html new file mode 100644 index 000000000000..643d2b966358 --- /dev/null +++ b/web-components/packages/carbon-web-components/examples/codesandbox/basic/components/tearsheet/index.html @@ -0,0 +1,117 @@ + + + + + carbon-web-components example + + + + + + + + + Toggle tearsheet + + + +
+
Section
+
+ + +
+
+ + +
+
+ + + +
+
+ + + Optional label for context + + + Title used to designate the overarching flow of the tearsheet. + + + Description used to describe the flow if need be. + + + + Ghost + + + Secondary + + + Primary + + + + +
+

AI Explained

+

84%

+

Confidence score

+

+ Lorem ipsum dolor sit amet, di os consectetur adipiscing elit, sed + do eiusmod tempor incididunt ut fsil labore et dolore magna aliqua. +

+
+

Model type

+

Foundation model

+
+ + + +
+ + Tab 1 + Tab 2 + Tab 3 + Tab 4 + +
+ + + + diff --git a/web-components/packages/carbon-web-components/examples/codesandbox/basic/components/tearsheet/package.json b/web-components/packages/carbon-web-components/examples/codesandbox/basic/components/tearsheet/package.json new file mode 100644 index 000000000000..fcc7244ec319 --- /dev/null +++ b/web-components/packages/carbon-web-components/examples/codesandbox/basic/components/tearsheet/package.json @@ -0,0 +1,25 @@ +{ + "name": "carbon-web-components-tearsheet-example", + "version": "0.1.0", + "private": true, + "description": "Sample project for getting started with the Web Components from Carbon.", + "license": "Apache-2", + "main": "index.html", + "scripts": { + "build": "parcel build *.html --no-minify --public-url ./", + "clean": "rimraf node_modules dist .cache", + "start": "parcel index.html --port=9000 --no-hmr" + }, + "dependencies": { + "@carbon/styles": "^1.34.0", + "@carbon/web-components": "latest", + "sass": "^1.64.1" + }, + "devDependencies": { + "@babel/core": "^7.0.0-0", + "@babel/plugin-transform-runtime": "^7.24.3", + "@babel/preset-env": "^7.24.5", + "parcel-bundler": "1.12.3", + "rimraf": "^3.0.2" + } +} diff --git a/web-components/packages/carbon-web-components/examples/codesandbox/basic/components/tearsheet/sandbox.config.json b/web-components/packages/carbon-web-components/examples/codesandbox/basic/components/tearsheet/sandbox.config.json new file mode 100644 index 000000000000..a4df8557d7bf --- /dev/null +++ b/web-components/packages/carbon-web-components/examples/codesandbox/basic/components/tearsheet/sandbox.config.json @@ -0,0 +1,3 @@ +{ + "template": "node" +} diff --git a/web-components/packages/carbon-web-components/examples/codesandbox/basic/components/tearsheet/src/index.js b/web-components/packages/carbon-web-components/examples/codesandbox/basic/components/tearsheet/src/index.js new file mode 100644 index 000000000000..bcd182156ddf --- /dev/null +++ b/web-components/packages/carbon-web-components/examples/codesandbox/basic/components/tearsheet/src/index.js @@ -0,0 +1,15 @@ +/** + * @license + * + * Copyright IBM Corp. 2020, 2024 + * + * This source code is licensed under the Apache-2.0 license found in the + * LICENSE file in the root directory of this source tree. + */ + +import '@carbon/web-components/es/components/tearsheet/index.js'; +import '@carbon/web-components/es/components/button/index.js'; +import '@carbon/web-components/es/components/text-input/index.js'; +import '@carbon/web-components/es/components/textarea/index.js'; +import '@carbon/web-components/es/components/slug/index.js'; +import '@carbon/web-components/es/components/tabs/index.js'; diff --git a/web-components/packages/carbon-web-components/examples/codesandbox/basic/components/tearsheet/src/styles.scss b/web-components/packages/carbon-web-components/examples/codesandbox/basic/components/tearsheet/src/styles.scss new file mode 100644 index 000000000000..e44f676edaf2 --- /dev/null +++ b/web-components/packages/carbon-web-components/examples/codesandbox/basic/components/tearsheet/src/styles.scss @@ -0,0 +1,16 @@ +/** + * Copyright IBM Corp. 2024 + * + * 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/reset'; +@use '@carbon/styles/scss/theme'; +@use '@carbon/styles/scss/themes'; + +:root { + @include theme.theme(themes.$white); + background-color: var(--cds-background); + color: var(--cds-text-primary); +} diff --git a/web-components/packages/carbon-web-components/src/components/tearsheet/tearsheet-story.ts b/web-components/packages/carbon-web-components/src/components/tearsheet/tearsheet-story.ts index b4d244994f24..a55d2891ca48 100644 --- a/web-components/packages/carbon-web-components/src/components/tearsheet/tearsheet-story.ts +++ b/web-components/packages/carbon-web-components/src/components/tearsheet/tearsheet-story.ts @@ -9,13 +9,13 @@ import { TemplateResult, html } from 'lit'; import { boolean, select, text } from '@storybook/addon-knobs'; -import '../button/button'; import { TEARSHEET_INFLUENCER_PLACEMENT, TEARSHEET_INFLUENCER_WIDTH, TEARSHEET_WIDTH, } from './tearsheet'; import './index'; +import '../button/button'; import '../text-input/index'; import '../textarea/index'; import storyDocs from './tearsheet-story.mdx'; diff --git a/web-components/packages/carbon-web-components/src/components/tearsheet/tearsheet.scss b/web-components/packages/carbon-web-components/src/components/tearsheet/tearsheet.scss index 1b6f17b56b23..c6da3a73cb13 100644 --- a/web-components/packages/carbon-web-components/src/components/tearsheet/tearsheet.scss +++ b/web-components/packages/carbon-web-components/src/components/tearsheet/tearsheet.scss @@ -39,282 +39,284 @@ $motion-duration: $duration-moderate-02; @extend .#{$prefix}--modal; @extend .#{$prefix}--tearsheet; - &[open] { - --overlay-color: #{$overlay}; - --overlay-opacity: 1; - - z-index: utilities.z('modal'); - align-items: flex-end; - background: initial; - opacity: 1; - - // stylelint-disable-next-line carbon/motion-duration-use, carbon/motion-easing-use - transition: visibility 0s linear; - visibility: inherit; - - .#{$prefix}--tearsheet__container { - transform: translate3d(0, 0, 0); - transition: transform $duration-moderate-02 motion(entrance, expressive); - } + .#{$block-class}__header, + .#{$block-class}__content, + .#{$block-class}__influencer { + padding: var(--content-padding); + } - @media (prefers-reduced-motion: reduce) { - transition: none; - } + .#{$block-class}__container { + /* lower prop is deprecated but the default in ibm products */ + @extend .#{$block-class}__container--lower; - &::before { - position: absolute; - display: block; - background: var(--overlay-color); - content: ''; - inset: 0; - opacity: var(--overlay-opacity); - - transition: background-color $motion-duration motion(exit, expressive), - opacity $motion-duration motion(exit, expressive); - - @media (prefers-reduced-motion: reduce) { - transition: none; - } - - &[stack-position='1'][stack-depth='2'] { - --overlay-opacity: 0.67; - } - - &[stack-position='1'][stack-depth='3'] { - --overlay-opacity: 0.22; - } - - &[stack-position='2'][stack-depth='3'] { - --overlay-opacity: 0.5; - } - - &[stack-position='2'][stack-depth='2'], - &[stack-position='3'][stack-depth='3'] { - --overlay-opacity: 0.5; - } - } + max-block-size: calc(100% - (#{$spacing-09} + #{$spacing-08})); } - [hidden] { - @extend .#{$prefix}--visually-hidden; + .#{$block-class}__container[stack-position='1'][stack-depth='2'], + .#{$block-class}__container[stack-position='2'][stack-depth='3'] { + max-block-size: calc( + 100% - (#{$spacing-09} + #{$spacing-08}) + #{$spacing-05} + ); + transform: scale(var(--#{$block-class}--stacking-scale-factor-single)); } - .#{$block-class}__header, - .#{$block-class}__content, - .#{$block-class}__influencer { - padding: var(--content-padding); + .#{$block-class}__container[stack-position='1'][stack-depth='3'] { + max-block-size: calc( + 100% - (#{$spacing-09} + #{$spacing-08}) + (2 * #{$spacing-05}) + ); + transform: scale(var(--#{$block-class}--stacking-scale-factor-double)); } - &[slug] { - --overlay-color: #{$ai-overlay}; - - .#{$block-class}__container { - border: 1px solid transparent; - - /* override carbon ai removing background gradient */ - background: linear-gradient(to top, var(--cds-layer), var(--cds-layer)) - padding-box, - linear-gradient( - to bottom, - var(--cds-ai-border-start, #78a9ff), - var(--cds-ai-border-end, #d0e2ff) - ) - border-box, - linear-gradient(to top, var(--cds-layer), var(--cds-layer)) border-box; - border-block-end: 0; - box-shadow: 0 24px 40px -24px $ai-drop-shadow; - } + .#{$block-class}__buttons { + @extend .#{$block-class}__button-container; + @extend .#{$block-class-action-set}; - .#{$block-class}__content { - @include utilities.ai-popover-gradient('default', 0); + display: flex; + background: $background; + inline-size: 100%; + } - box-shadow: inset 0 -80px 70px -65px $ai-inner-shadow; - } + .#{$block-class}__buttons[hidden] { + @extend .#{$prefix}--visually-hidden; - /* stylelint-disable-next-line selector-type-no-unknown */ - [has-actions] ::slotted(#{$prefix}-slug) { - inset-inline-end: 0; - } + display: none; } - .#{$block-class}__container { - /* lower prop is deprecated but the default in ibm products */ - @extend .#{$block-class}__container--lower; + .#{$block-class}__buttons ::slotted(#{$prefix}-button) { + @extend .#{$block-class-action-set}__action-button; - &[stack-position='1'][stack-depth='2'], - &[stack-position='2'][stack-depth='3'] { - max-block-size: calc( - 100% - (#{$spacing-09} + #{$spacing-08}) + #{$spacing-05} - ); - transform: scale(var(--#{$block-class}--stacking-scale-factor-single)); - } + flex: 0 1 25%; + block-size: $spacing-11; + max-inline-size: to-rem(232px); + } - &[stack-position='1'][stack-depth='3'] { - max-block-size: calc( - 100% - (#{$spacing-09} + #{$spacing-08}) + (2 * #{$spacing-05}) - ); - transform: scale(var(--#{$block-class}--stacking-scale-factor-double)); - } + .#{$block-class}__buttons ::slotted(#{$prefix}-button[kind='ghost']) { + flex: 1 1 25%; + max-inline-size: none; } - &[stack-position='1'][stack-depth='2'], - &[stack-position='2'][stack-depth='3'] { - z-index: utilities.z('modal') - 1; + .#{$block-class}__buttons ::slotted(#{$prefix}-button[hidden]) { + @extend .#{$prefix}--visually-hidden; + + display: none; } - &[stack-position='1'][stack-depth='3'] { - z-index: utilities.z('modal') - 2; + .#{$block-class}__influencer[wide] { + @extend .#{$block-class}__influencer--wide; } +} - &[width='narrow'] { - .#{$block-class}__header { - margin: 0; - background-color: $layer; - border-block-end: 1px solid $border-subtle-01; - } +:host(#{$prefix}-tearsheet[open]) { + --overlay-color: #{$overlay}; + --overlay-opacity: 1; - .#{$block-class}__header-description { - margin-block-start: $spacing-03; - max-inline-size: 80%; - } + z-index: utilities.z('modal'); + align-items: flex-end; + background: initial; + opacity: 1; - .#{$block-class}__main { - background-color: $layer; - } - } + // stylelint-disable-next-line carbon/motion-duration-use, carbon/motion-easing-use + transition: visibility 0s linear; + visibility: inherit; - &[width='wide'] { - --content-padding: #{$spacing-06 $spacing-07}; + .#{$prefix}--tearsheet__container { + transform: translate3d(0, 0, 0); + transition: transform $duration-moderate-02 motion(entrance, expressive); + } - .#{$block-class}__header { - margin: 0; - background-color: $layer; - border-block-end: 1px solid $border-subtle-01; - } + @media (prefers-reduced-motion: reduce) { + transition: none; + } - .#{$block-class}__header[has-navigation] { - padding-block-end: 0; - } + &::before { + position: absolute; + display: block; + background: var(--overlay-color); + content: ''; + inset: 0; + opacity: var(--overlay-opacity); - .#{$block-class}__container { - inline-size: 100%; + transition: background-color $motion-duration motion(exit, expressive), + opacity $motion-duration motion(exit, expressive); - @include breakpoint(md) { - inline-size: calc(100% - (2 * #{$spacing-10})); - } + @media (prefers-reduced-motion: reduce) { + transition: none; } - .#{$prefix}--modal-header__heading.#{$block-class}__heading { - @include type.type-style('heading-04'); + &[stack-position='1'][stack-depth='2'] { + --overlay-opacity: 0.67; } - .#{$block-class}__header[has-close-icon], - .#{$block-class}__header[has-slug] { - padding-inline-end: $spacing-11; + &[stack-position='1'][stack-depth='3'] { + --overlay-opacity: 0.22; } - .#{$block-class}__header[has-close-icon][has-slug] { - padding-inline-end: calc(#{$spacing-11 + $spacing-09}); + &[stack-position='2'][stack-depth='3'] { + --overlay-opacity: 0.5; } - .#{$block-class}__header-navigation { - margin-inline-start: calc(-1 * #{$spacing-05}); - max-block-size: $spacing-08; /* #{$prefix}-tabs too tall */ + &[stack-position='2'][stack-depth='2'], + &[stack-position='3'][stack-depth='3'] { + --overlay-opacity: 0.5; } + } +} - .#{$block-class}__content { - // Revert background color overridden by Carbon's modal - https://github.com/carbon-design-system/carbon/blob/main/packages/styles/scss/components/modal/_modal.scss#L54 - .#{$prefix}--pagination, - .#{$prefix}--pagination__control-buttons, - .#{$prefix}--text-input, - .#{$prefix}--text-area, - .#{$prefix}--search-input, - .#{$prefix}--select-input, - .#{$prefix}--dropdown, - .#{$prefix}--dropdown-list, - .#{$prefix}--number input[type='number'], - .#{$prefix}--date-picker__input { - background-color: $field; - } - - .#{$prefix}--select--inline .#{$prefix}--select-input { - background-color: transparent; - } - - // and restore the 'light' prop in case light fields are wanted - .#{$prefix}--text-input--light, - .#{$prefix}--text-area--light, - .#{$prefix}--search--light .#{$prefix}--search-input, - .#{$prefix}--select--light .#{$prefix}--select-input, - .#{$prefix}--dropdown--light, - .#{$prefix}--dropdown--light .#{$prefix}--dropdown-list, - /* stylelint-disable-next-line prettier/prettier */ - .#{$prefix}--number--light input[type='number'], - .#{$prefix}--date-picker--light - .#{$prefix}--date-picker__input { - background-color: $field-02; - } - } +:host(#{$prefix}-tearsheet[hidden]) { + @extend .#{$prefix}--visually-hidden; +} - .#{$pkg-prefix}--action-set - .#{$pkg-prefix}--action-set__action-button.#{$pkg-prefix}--action-set__action-button--expressive { - block-size: $spacing-11; - } +:host(#{$prefix}-tearsheet[slug]) { + --overlay-color: #{$ai-overlay}; + + .#{$block-class}__container { + border: 1px solid transparent; + + /* override carbon ai removing background gradient */ + background: linear-gradient(to top, var(--cds-layer), var(--cds-layer)) + padding-box, + linear-gradient( + to bottom, + var(--cds-ai-border-start, #78a9ff), + var(--cds-ai-border-end, #d0e2ff) + ) + border-box, + linear-gradient(to top, var(--cds-layer), var(--cds-layer)) border-box; + border-block-end: 0; + box-shadow: 0 24px 40px -24px $ai-drop-shadow; } - .#{$block-class}__buttons { - @extend .#{$block-class}__button-container; - @extend .#{$block-class-action-set}; + .#{$block-class}__content { + @include utilities.ai-popover-gradient('default', 0); - display: flex; - background: $background; - inline-size: 100%; + box-shadow: inset 0 -80px 70px -65px $ai-inner-shadow; + } +} - &[hidden] { - @extend .#{$prefix}--visually-hidden; +:host(#{$prefix}-tearsheet[slug]) + .#{$prefix}--tearsheet__header[has-actions] + ::slotted(#{$prefix}-slug) { + inset-inline-end: 0; +} - display: none; - } +:host(#{$prefix}-tearsheet[stack-position='1'][stack-depth='2']), +:host(#{$prefix}-tearsheet[stack-position='2'][stack-depth='3']) { + z-index: utilities.z('modal') - 1; +} - /* stylelint-disable-next-line selector-type-no-unknown */ - ::slotted(#{$prefix}-button) { - @extend .#{$block-class-action-set}__action-button; +:host(#{$prefix}-tearsheet[stack-position='1'][stack-depth='3']) { + z-index: utilities.z('modal') - 2; +} - flex: 0 1 25%; - block-size: $spacing-11; - max-inline-size: to-rem(232px); - } +:host(#{$prefix}-tearsheet[width='narrow']) { + .#{$block-class}__header { + margin: 0; + background-color: $layer; + border-block-end: 1px solid $border-subtle-01; + } - /* stylelint-disable-next-line selector-type-no-unknown */ - ::slotted(#{$prefix}-button[kind='ghost']) { - flex: 1 1 25%; - max-inline-size: none; - } + .#{$block-class}__header-description { + margin-block-start: $spacing-03; + max-inline-size: 80%; + } - ::slotted(#{$prefix}-button[hidden]) { - @extend .#{$prefix}--visually-hidden; + .#{$block-class}__main { + background-color: $layer; + } +} + +:host(#{$prefix}-tearsheet[width='wide']) { + --content-padding: #{$spacing-06 $spacing-07}; + + .#{$block-class}__header { + margin: 0; + background-color: $layer; + border-block-end: 1px solid $border-subtle-01; + } - display: none; + .#{$block-class}__header[has-navigation] { + padding-block-end: 0; + } + + .#{$block-class}__container { + inline-size: 100%; + + @include breakpoint(md) { + inline-size: calc(100% - (2 * #{$spacing-10})); } } - [width='narrow'] .#{$block-class}__buttons { - /* stylelint-disable selector-type-no-unknown */ - &[actions-multiple='single'] ::slotted(#{$prefix}-button), - &[actions-multiple='double'] ::slotted(#{$prefix}-button) { - /* stylelint-enable selector-type-no-unknown */ - // double and single on lg use 50% - flex: 0 1 50%; - max-inline-size: none; + .#{$prefix}--modal-header__heading.#{$block-class}__heading { + @include type.type-style('heading-04'); + } + + .#{$block-class}__header[has-close-icon], + .#{$block-class}__header[has-slug] { + padding-inline-end: $spacing-11; + } + + .#{$block-class}__header[has-close-icon][has-slug] { + padding-inline-end: calc(#{$spacing-11 + $spacing-09}); + } + + .#{$block-class}__header-navigation { + margin-inline-start: calc(-1 * #{$spacing-05}); + max-block-size: $spacing-08; /* #{$prefix}-tabs too tall */ + } + + .#{$block-class}__content { + // Revert background color overridden by Carbon's modal - https://github.com/carbon-design-system/carbon/blob/main/packages/styles/scss/components/modal/_modal.scss#L54 + .#{$prefix}--pagination, + .#{$prefix}--pagination__control-buttons, + .#{$prefix}--text-input, + .#{$prefix}--text-area, + .#{$prefix}--search-input, + .#{$prefix}--select-input, + .#{$prefix}--dropdown, + .#{$prefix}--dropdown-list, + .#{$prefix}--number input[type='number'], + .#{$prefix}--date-picker__input { + background-color: $field; + } + + .#{$prefix}--select--inline .#{$prefix}--select-input { + background-color: transparent; } - /* stylelint-disable-next-line selector-type-no-unknown */ - ::slotted(#{$prefix}-button) { - block-size: $spacing-10; + // and restore the 'light' prop in case light fields are wanted + .#{$prefix}--text-input--light, + .#{$prefix}--text-area--light, + .#{$prefix}--search--light .#{$prefix}--search-input, + .#{$prefix}--select--light .#{$prefix}--select-input, + .#{$prefix}--dropdown--light, + .#{$prefix}--dropdown--light .#{$prefix}--dropdown-list, + /* stylelint-disable-next-line prettier/prettier */ + .#{$prefix}--number--light input[type='number'], + .#{$prefix}--date-picker--light + .#{$prefix}--date-picker__input { + background-color: $field-02; } } - .#{$block-class}__influencer[wide] { - @extend .#{$block-class}__influencer--wide; + .#{$pkg-prefix}--action-set + .#{$pkg-prefix}--action-set__action-button.#{$pkg-prefix}--action-set__action-button--expressive { + block-size: $spacing-11; } } + +:host(#{$prefix}-tearsheet[width='narrow']) + .#{$block-class}__buttons[actions-multiple='single'] + ::slotted(#{$prefix}-button), +:host(#{$prefix}-tearsheet[width='narrow']) + .#{$block-class}__buttons[actions-multiple='double'] + ::slotted(#{$prefix}-button) { + // double and single on lg use 50% + flex: 0 1 50%; + max-inline-size: none; +} + +:host(#{$prefix}-tearsheet[width='narrow']) + .#{$block-class}__buttons + ::slotted(#{$prefix}-button) { + block-size: $spacing-10; +} diff --git a/web-components/packages/carbon-web-components/src/components/tearsheet/tearsheet.ts b/web-components/packages/carbon-web-components/src/components/tearsheet/tearsheet.ts index 6837ba5441dd..55a05072d404 100644 --- a/web-components/packages/carbon-web-components/src/components/tearsheet/tearsheet.ts +++ b/web-components/packages/carbon-web-components/src/components/tearsheet/tearsheet.ts @@ -23,6 +23,7 @@ import { carbonElement as customElement } from '../../globals/decorators/carbon- import '../button/index'; import '../layer/index'; import '../button/button-set-base'; +import '../modal/index'; import { TEARSHEET_INFLUENCER_PLACEMENT, TEARSHEET_INFLUENCER_WIDTH,