From 1b17d3f9572b74e37481e133b44b49aaec95f34a Mon Sep 17 00:00:00 2001 From: David Menendez Date: Wed, 15 Jan 2025 14:06:41 -0600 Subject: [PATCH 1/3] fix: component token style import --- .../__snapshots__/styles.test.js.snap | 57 +++++++++++++------ .../styles/_conditionBuilderItem.scss | 2 +- 2 files changed, 42 insertions(+), 17 deletions(-) diff --git a/packages/ibm-products-styles/src/__tests__/__snapshots__/styles.test.js.snap b/packages/ibm-products-styles/src/__tests__/__snapshots__/styles.test.js.snap index da590c0057..ac54dd2f5a 100644 --- a/packages/ibm-products-styles/src/__tests__/__snapshots__/styles.test.js.snap +++ b/packages/ibm-products-styles/src/__tests__/__snapshots__/styles.test.js.snap @@ -2592,7 +2592,7 @@ p.c4p--about-modal__copyright-text:first-child { left: 0; border-right: 1px solid var(--cds-border-subtle-02, #e0e0e0); } -.c4p--side-panel.c4p--side-panel.c4p--side-panel--has-slug, .c4p--side-panel.c4p--side-panel.c4p--side-panel--has-ai-label { +.c4p--side-panel.c4p--side-panel.c4p--side-panel--has-slug, .c4p--side-panel.c4p--side-panel.c4p--side-panel--has-ai-label, .c4p--side-panel.c4p--side-panel.c4p--side-panel--has-decorator { border-color: transparent; box-shadow: inset 0 -80px 70px -65px var(--cds-ai-inner-shadow, rgba(69, 137, 255, 0.1)), 0 4px 10px 2px var(--cds-ai-drop-shadow, rgba(15, 98, 254, 0.1)); } @@ -2657,10 +2657,10 @@ p.c4p--about-modal__copyright-text:first-child { .c4p--side-panel .c4p--side-panel__header:not(.c4p--side-panel__header--has-title)::before { background-color: transparent; } -.c4p--side-panel.c4p--side-panel:has(.c4p--side-panel__action-toolbar), .c4p--side-panel.c4p--side-panel--has-action-toolbar, .c4p--side-panel.c4p--side-panel--has-slug, .c4p--side-panel.c4p--side-panel--has-ai-label { +.c4p--side-panel.c4p--side-panel:has(.c4p--side-panel__action-toolbar), .c4p--side-panel.c4p--side-panel--has-action-toolbar, .c4p--side-panel.c4p--side-panel--has-slug, .c4p--side-panel.c4p--side-panel--has-ai-label, .c4p--side-panel.c4p--side-panel--has-decorator { --c4p--side-panel--title-padding-right: 4rem; } -.c4p--side-panel.c4p--side-panel:has(.c4p--side-panel__action-toolbar).c4p--side-panel--has-slug, .c4p--side-panel.c4p--side-panel:has(.c4p--side-panel__action-toolbar).c4p--side-panel--has-ai-label, .c4p--side-panel.c4p--side-panel--has-action-toolbar.c4p--side-panel--has-slug, .c4p--side-panel.c4p--side-panel--has-action-toolbar.c4p--side-panel--has-ai-label { +.c4p--side-panel.c4p--side-panel:has(.c4p--side-panel__action-toolbar).c4p--side-panel--has-slug, .c4p--side-panel.c4p--side-panel:has(.c4p--side-panel__action-toolbar).c4p--side-panel--has-ai-label, .c4p--side-panel.c4p--side-panel:has(.c4p--side-panel__action-toolbar).c4p--side-panel--has-decorator, .c4p--side-panel.c4p--side-panel--has-action-toolbar.c4p--side-panel--has-slug, .c4p--side-panel.c4p--side-panel--has-action-toolbar.c4p--side-panel--has-ai-label, .c4p--side-panel.c4p--side-panel--has-action-toolbar.c4p--side-panel--has-decorator { --c4p--side-panel--title-padding-right: 5rem; } .c4p--side-panel .c4p--side-panel__animated-scroll-wrapper { @@ -2756,7 +2756,7 @@ p.c4p--about-modal__copyright-text:first-child { .c4p--side-panel .c4p--side-panel__header--has-action-toolbar + .c4p--side-panel__inner-content { padding-top: 0.5rem; } -.c4p--side-panel.c4p--side-panel--has-slug .c4p--side-panel--scrolls, .c4p--side-panel.c4p--side-panel--has-ai-label .c4p--side-panel--scrolls { +.c4p--side-panel.c4p--side-panel--has-slug .c4p--side-panel--scrolls, .c4p--side-panel.c4p--side-panel--has-ai-label .c4p--side-panel--scrolls, .c4p--side-panel.c4p--side-panel--has-decorator .c4p--side-panel--scrolls { background: linear-gradient(to top, var(--cds-layer, var(--cds-ai-popover-background, #ffffff)) 0%, var(--cds-ai-aura-start, rgba(69, 137, 255, 0.1)) 0%, 15%, var(--cds-ai-aura-end, rgba(255, 255, 255, 0)) 50%) padding-box, linear-gradient(to top, var(--cds-layer, var(--cds-ai-popover-background, #ffffff)), var(--cds-layer, var(--cds-ai-popover-background, #ffffff))) padding-box, linear-gradient(to bottom, var(--cds-ai-border-start, rgba(166, 200, 255, 0.64)), var(--cds-ai-border-end, #78a9ff)) border-box, linear-gradient(to top, var(--cds-layer, var(--cds-ai-popover-background, #ffffff)), var(--cds-layer, var(--cds-ai-popover-background, #ffffff))) border-box; box-shadow: inset 0 -80px 70px -65px var(--cds-ai-inner-shadow, rgba(69, 137, 255, 0.1)), 0 4px 10px 2px var(--cds-ai-drop-shadow, rgba(15, 98, 254, 0.1)); } @@ -2805,7 +2805,8 @@ p.c4p--about-modal__copyright-text:first-child { height: 2.5rem; } .c4p--side-panel .c4p--side-panel__slug-and-close, -.c4p--side-panel .c4p--side-panel__ai-label-and-close { +.c4p--side-panel .c4p--side-panel__ai-label-and-close, +.c4p--side-panel .c4p--side-panel__decorator-and-close { position: absolute; z-index: 10; /* must be higher than title container border bottom */ top: 0; @@ -2815,7 +2816,8 @@ p.c4p--about-modal__copyright-text:first-child { } @media (prefers-reduced-motion) { .c4p--side-panel .c4p--side-panel__slug-and-close, - .c4p--side-panel .c4p--side-panel__ai-label-and-close { + .c4p--side-panel .c4p--side-panel__ai-label-and-close, + .c4p--side-panel .c4p--side-panel__decorator-and-close { position: absolute; } } @@ -2899,8 +2901,10 @@ p.c4p--about-modal__copyright-text:first-child { inset: 0; } +/* stylelint-disable-next-line carbon/theme-token-use */ .c4p--side-panel--has-slug + .c4p--side-panel__overlay, -.c4p--side-panel--has-ai-label + .c4p--side-panel__overlay { +.c4p--side-panel--has-ai-label + .c4p--side-panel__overlay, +.c4p--side-panel--has-decorator + .c4p--side-panel__overlay { background-color: var(--cds-ai-overlay, rgba(0, 17, 65, 0.5)); } @@ -5825,25 +5829,38 @@ th.c4p--datagrid__select-all-toggle-on.button { position: relative; } -.c4p--card .cds--slug { +.c4p--card .cds--slug, +.c4p--card .cds--ai-label { position: absolute; top: 1rem; right: 1rem; } +.c4p--card__header__inner-wrapper--decorator { + position: absolute; + top: 1rem; + right: 1rem; +} +.c4p--card__header__inner-wrapper--decorator .cds--slug, +.c4p--card__header__inner-wrapper--decorator .cds--ai-label { + position: relative; + top: unset; + right: unset; +} + .c4p--card__header-container--has-slug, -.c4p--card__header-container--has-ai-label { +.c4p--card__header-container--has-decorator { width: 100%; padding-right: 2rem; } .c4p--card__header-container--has-slug.c4p--card__header-container--has-actions, -.c4p--card__header-container--has-ai-label.c4p--card__header-container--has-actions { +.c4p--card__header-container--has-decorator.c4p--card__header-container--has-actions { padding-right: 2.5rem; } .c4p--card__header-container--has-slug.c4p--card__header-container--large-tile-or-label, -.c4p--card__header-container--has-ai-label.c4p--card__header-container--large-tile-or-label { +.c4p--card__header-container--has-decorator.c4p--card__header-container--large-tile-or-label { padding-right: 3rem; } @@ -9420,12 +9437,7 @@ button.c4p--add-select__global-filter-toggle--open { visibility: hidden; } .c4p--page-header .c4p--page-header__subtitle-row { - display: -webkit-box; - overflow: hidden; - max-width: 100%; margin-top: 0.5rem; - -webkit-box-orient: vertical; - -webkit-line-clamp: 2; } @media (min-width: 42rem) { .c4p--page-header .c4p--page-header__subtitle-row { @@ -9441,6 +9453,19 @@ button.c4p--add-select__global-filter-toggle--open { line-height: var(--cds-body-01-line-height, 1.42857); letter-spacing: var(--cds-body-01-letter-spacing, 0.16px); } +.c4p--page-header .c4p--page-header__subtitle-tooltip .cds--definition-term { + border-bottom: 0; + letter-spacing: inherit; +} +.c4p--page-header .c4p--page-header__subtitle-tooltip .cds--popover-content.cds--definition-tooltip { + max-inline-size: fit-content; +} +.c4p--page-header .c4p--page-header__subtitle-text { + display: -webkit-box; + overflow: hidden; + -webkit-box-orient: vertical; + -webkit-line-clamp: 2; +} .c4p--page-header .c4p--page-header__available-row { font-size: var(--cds-body-01-font-size, 0.875rem); font-weight: var(--cds-body-01-font-weight, 400); diff --git a/packages/ibm-products-styles/src/components/ConditionBuilder/styles/_conditionBuilderItem.scss b/packages/ibm-products-styles/src/components/ConditionBuilder/styles/_conditionBuilderItem.scss index 0d018a6872..69a1c51834 100644 --- a/packages/ibm-products-styles/src/components/ConditionBuilder/styles/_conditionBuilderItem.scss +++ b/packages/ibm-products-styles/src/components/ConditionBuilder/styles/_conditionBuilderItem.scss @@ -15,7 +15,7 @@ @use '@carbon/react/scss/utilities'; @use '@carbon/react/scss/motion' as *; @use '@carbon/react/scss/utilities/focus-outline'; -@use '@carbon/styles/scss/components/tag'; +@use '@carbon/styles/scss/components/tag' as *; @use '@carbon/styles/scss/type' as *; @use '@carbon/react/scss/colors' as *; From d033453ec78f321f54a9f2ad8b445b82b4e70d49 Mon Sep 17 00:00:00 2001 From: David Menendez Date: Wed, 15 Jan 2025 14:10:06 -0600 Subject: [PATCH 2/3] fix: tokens --- .../ConditionBuilder/styles/_conditionBuilderCondition.scss | 2 +- .../ConditionBuilder/styles/_conditionBuilderItem.scss | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/packages/ibm-products-styles/src/components/ConditionBuilder/styles/_conditionBuilderCondition.scss b/packages/ibm-products-styles/src/components/ConditionBuilder/styles/_conditionBuilderCondition.scss index 42afda3f3a..d8a90899b2 100644 --- a/packages/ibm-products-styles/src/components/ConditionBuilder/styles/_conditionBuilderCondition.scss +++ b/packages/ibm-products-styles/src/components/ConditionBuilder/styles/_conditionBuilderCondition.scss @@ -8,7 +8,7 @@ @use '@carbon/react/scss/theme' as *; @use '@carbon/react/scss/spacing' as *; @use '@carbon/react/scss/motion' as *; -@use '@carbon/styles/scss/components/tag' as *; +@use '@carbon/styles/scss/components/tag/tokens' as *; @use '@carbon/styles/scss/utilities/focus-outline'; @use '../../../global/styles/project-settings' as c4p-settings; @use '@carbon/styles/scss/type'; diff --git a/packages/ibm-products-styles/src/components/ConditionBuilder/styles/_conditionBuilderItem.scss b/packages/ibm-products-styles/src/components/ConditionBuilder/styles/_conditionBuilderItem.scss index 69a1c51834..370b01ac04 100644 --- a/packages/ibm-products-styles/src/components/ConditionBuilder/styles/_conditionBuilderItem.scss +++ b/packages/ibm-products-styles/src/components/ConditionBuilder/styles/_conditionBuilderItem.scss @@ -15,7 +15,7 @@ @use '@carbon/react/scss/utilities'; @use '@carbon/react/scss/motion' as *; @use '@carbon/react/scss/utilities/focus-outline'; -@use '@carbon/styles/scss/components/tag' as *; +@use '@carbon/styles/scss/components/tag/tokens' as *; @use '@carbon/styles/scss/type' as *; @use '@carbon/react/scss/colors' as *; From af601faa9fb81d0c3c4844a791ca712506d6f569 Mon Sep 17 00:00:00 2001 From: David Menendez Date: Wed, 15 Jan 2025 14:44:00 -0600 Subject: [PATCH 3/3] fix: carbon style import updates --- .../__snapshots__/styles.test.js.snap | 617 ------------------ .../EditTearsheet/_carbon-imports.scss | 9 + .../EditTearsheet/_edit-tearsheet.scss | 6 +- .../EditTearsheet/_index-with-carbon.scss | 9 + .../src/components/EditTearsheet/_index.scss | 2 +- .../components/UserAvatar/_user-avatar.scss | 13 +- .../_index-released-only-with-carbon.scss | 1 + .../src/components/_index-with-carbon.scss | 1 + 8 files changed, 23 insertions(+), 635 deletions(-) create mode 100644 packages/ibm-products-styles/src/components/EditTearsheet/_carbon-imports.scss create mode 100644 packages/ibm-products-styles/src/components/EditTearsheet/_index-with-carbon.scss diff --git a/packages/ibm-products-styles/src/__tests__/__snapshots__/styles.test.js.snap b/packages/ibm-products-styles/src/__tests__/__snapshots__/styles.test.js.snap index ac54dd2f5a..fd7c51b331 100644 --- a/packages/ibm-products-styles/src/__tests__/__snapshots__/styles.test.js.snap +++ b/packages/ibm-products-styles/src/__tests__/__snapshots__/styles.test.js.snap @@ -11372,623 +11372,6 @@ button.c4p--add-select__global-filter-toggle--open { width: calc(100vw - 40rem); } -:root { - --cds-layer: var(--cds-layer-01, #f4f4f4); - --cds-layer-active: var(--cds-layer-active-01, #c6c6c6); - --cds-layer-hover: var(--cds-layer-hover-01, #e8e8e8); - --cds-layer-selected: var(--cds-layer-selected-01, #e0e0e0); - --cds-layer-selected-hover: var(--cds-layer-selected-hover-01, #d1d1d1); - --cds-layer-accent: var(--cds-layer-accent-01, #e0e0e0); - --cds-layer-accent-hover: var(--cds-layer-accent-hover-01, #d1d1d1); - --cds-layer-accent-active: var(--cds-layer-accent-active-01, #a8a8a8); - --cds-field: var(--cds-field-01, #f4f4f4); - --cds-field-hover: var(--cds-field-hover-01, #e8e8e8); - --cds-border-subtle: var(--cds-border-subtle-00, #e0e0e0); - --cds-border-subtle-selected: var(--cds-border-subtle-selected-01, #c6c6c6); - --cds-border-strong: var(--cds-border-strong-01, #8d8d8d); - --cds-border-tile: var(--cds-border-tile-01, #c6c6c6); -} - -.cds--layer-one { - --cds-layer: var(--cds-layer-01, #f4f4f4); - --cds-layer-active: var(--cds-layer-active-01, #c6c6c6); - --cds-layer-hover: var(--cds-layer-hover-01, #e8e8e8); - --cds-layer-selected: var(--cds-layer-selected-01, #e0e0e0); - --cds-layer-selected-hover: var(--cds-layer-selected-hover-01, #d1d1d1); - --cds-layer-accent: var(--cds-layer-accent-01, #e0e0e0); - --cds-layer-accent-hover: var(--cds-layer-accent-hover-01, #d1d1d1); - --cds-layer-accent-active: var(--cds-layer-accent-active-01, #a8a8a8); - --cds-field: var(--cds-field-01, #f4f4f4); - --cds-field-hover: var(--cds-field-hover-01, #e8e8e8); - --cds-border-subtle: var(--cds-border-subtle-00, #e0e0e0); - --cds-border-subtle-selected: var(--cds-border-subtle-selected-01, #c6c6c6); - --cds-border-strong: var(--cds-border-strong-01, #8d8d8d); - --cds-border-tile: var(--cds-border-tile-01, #c6c6c6); -} - -.cds--layer-two { - --cds-layer: var(--cds-layer-02, #ffffff); - --cds-layer-active: var(--cds-layer-active-02, #c6c6c6); - --cds-layer-hover: var(--cds-layer-hover-02, #e8e8e8); - --cds-layer-selected: var(--cds-layer-selected-02, #e0e0e0); - --cds-layer-selected-hover: var(--cds-layer-selected-hover-02, #d1d1d1); - --cds-layer-accent: var(--cds-layer-accent-02, #e0e0e0); - --cds-layer-accent-hover: var(--cds-layer-accent-hover-02, #d1d1d1); - --cds-layer-accent-active: var(--cds-layer-accent-active-02, #a8a8a8); - --cds-field: var(--cds-field-02, #ffffff); - --cds-field-hover: var(--cds-field-hover-02, #e8e8e8); - --cds-border-subtle: var(--cds-border-subtle-01, #c6c6c6); - --cds-border-subtle-selected: var(--cds-border-subtle-selected-02, #c6c6c6); - --cds-border-strong: var(--cds-border-strong-02, #8d8d8d); - --cds-border-tile: var(--cds-border-tile-02, #a8a8a8); -} - -.cds--layer-three { - --cds-layer: var(--cds-layer-03, #f4f4f4); - --cds-layer-active: var(--cds-layer-active-03, #c6c6c6); - --cds-layer-hover: var(--cds-layer-hover-03, #e8e8e8); - --cds-layer-selected: var(--cds-layer-selected-03, #e0e0e0); - --cds-layer-selected-hover: var(--cds-layer-selected-hover-03, #d1d1d1); - --cds-layer-accent: var(--cds-layer-accent-03, #e0e0e0); - --cds-layer-accent-hover: var(--cds-layer-accent-hover-03, #d1d1d1); - --cds-layer-accent-active: var(--cds-layer-accent-active-03, #a8a8a8); - --cds-field: var(--cds-field-03, #f4f4f4); - --cds-field-hover: var(--cds-field-hover-03, #e8e8e8); - --cds-border-subtle: var(--cds-border-subtle-02, #e0e0e0); - --cds-border-subtle-selected: var(--cds-border-subtle-selected-03, #c6c6c6); - --cds-border-strong: var(--cds-border-strong-03, #8d8d8d); - --cds-border-tile: var(--cds-border-tile-03, #c6c6c6); -} - -.cds--popover-container { - display: inline-block; -} - -.cds--popover-container:not(.cds--popover--auto-align) { - position: relative; -} - -.cds--popover--high-contrast .cds--popover { - --cds-popover-background-color: var(--cds-background-inverse, #393939); - --cds-popover-text-color: var(--cds-text-inverse, #ffffff); -} - -.cds--popover--drop-shadow .cds--popover > .cds--popover-content { - filter: drop-shadow(0 2px 2px rgba(0, 0, 0, 0.2)); -} - -.cds--popover--caret { - --cds-popover-offset: 0.625rem; -} - -.cds--popover { - position: absolute; - z-index: 6000; - filter: var(--cds-popover-drop-shadow, none); - inset: 0; - pointer-events: none; -} - -.cds--popover-content { - --cds-layout-size-height-sm: 2rem; - --cds-layout-size-height-md: 2.5rem; - --cds-layout-size-height-lg: 3rem; - box-sizing: border-box; - padding: 0; - border: 0; - margin: 0; - font-family: inherit; - font-size: 100%; - vertical-align: baseline; - position: absolute; - z-index: 6000; - display: none; - border-radius: var(--cds-popover-border-radius, 2px); - background-color: var(--cds-popover-background-color, var(--cds-layer)); - color: var(--cds-popover-text-color, var(--cds-text-primary, #161616)); - inline-size: max-content; - max-inline-size: 23rem; - pointer-events: auto; -} -.cds--layout--size-sm .cds--popover-content { - --cds-layout-size-height: var(--cds-layout-size-height-sm); -} -.cds--layout--size-md .cds--popover-content { - --cds-layout-size-height: var(--cds-layout-size-height-md); -} -.cds--layout--size-lg .cds--popover-content { - --cds-layout-size-height: var(--cds-layout-size-height-lg); -} -.cds--popover-content *, -.cds--popover-content *::before, -.cds--popover-content *::after { - box-sizing: inherit; -} - -.cds--popover--open > .cds--popover > .cds--popover-content { - display: block; -} - -.cds--popover-content::before { - position: absolute; - display: none; - content: ""; -} - -.cds--popover--open > .cds--popover > .cds--popover-content::before { - display: block; -} - -.cds--popover-caret, -.cds--popover--auto-align.cds--popover-caret { - position: absolute; - z-index: 6000; - display: none; - background-color: var(--cds-popover-background-color, var(--cds-layer)); - will-change: transform; -} - -.cds--popover--caret.cds--popover--open > .cds--popover > .cds--popover-caret { - display: block; -} - -.cds--popover--auto-align.cds--popover--caret.cds--popover--open > .cds--popover > .cds--popover-content > .cds--popover-caret { - display: block; -} - -.cds--popover--tab-tip > .cds--popover > .cds--popover-caret { - display: none; -} - -.cds--popover--bottom:not(.cds--popover--auto-align) > .cds--popover > .cds--popover-content { - inset-block-end: 0; - inset-inline-start: 50%; - transform: translate(-50%, calc(100% + var(--cds-popover-offset, 0rem))); -} - -[dir=rtl] .cds--popover--bottom:not(.cds--popover--auto-align) > .cds--popover > .cds--popover-content { - transform: translate(50%, calc(100% + var(--cds-popover-offset, 0rem))); -} - -.cds--popover--bottom-left:not(.cds--popover--auto-align) > .cds--popover > .cds--popover-content, -.cds--popover--bottom-start:not(.cds--popover--auto-align) > .cds--popover > .cds--popover-content { - inset-block-end: 0; - inset-inline-start: 0; - transform: translate(calc(-1 * var(--cds-popover-offset, 0rem)), calc(100% + var(--cds-popover-offset, 0rem))); -} - -[dir=rtl] .cds--popover--bottom-left:not(.cds--popover--auto-align) > .cds--popover > .cds--popover-content, -[dir=rtl] .cds--popover--bottom-start:not(.cds--popover--auto-align) > .cds--popover > .cds--popover-content { - inset-inline-end: 0; - inset-inline-start: initial; -} - -.cds--popover--bottom-right:not(.cds--popover--auto-align) > .cds--popover > .cds--popover-content, -.cds--popover--bottom-end:not(.cds--popover--auto-align) > .cds--popover > .cds--popover-content { - inset-block-end: 0; - inset-inline-end: 0; - transform: translate(var(--cds-popover-offset, 0rem), calc(100% + var(--cds-popover-offset, 0rem))); -} - -[dir=rtl] .cds--popover--bottom-right:not(.cds--popover--auto-align) > .cds--popover > .cds--popover-content, -[dir=rtl] .cds--popover--bottom-end:not(.cds--popover--auto-align) > .cds--popover > .cds--popover-content { - inset-inline-start: 0; -} - -.cds--popover--bottom > .cds--popover > .cds--popover-content::before, -.cds--popover--bottom-left > .cds--popover > .cds--popover-content::before, -.cds--popover--bottom-start > .cds--popover > .cds--popover-content::before, -.cds--popover--bottom-right > .cds--popover > .cds--popover-content::before, -.cds--popover--bottom-end > .cds--popover > .cds--popover-content::before { - block-size: var(--cds-popover-offset, 0rem); - inset-block-start: 0; - inset-inline: 0; - transform: translateY(-100%); -} - -.cds--popover--bottom > .cds--popover > .cds--popover-caret, -.cds--popover--bottom-left > .cds--popover > .cds--popover-caret, -.cds--popover--bottom-start > .cds--popover > .cds--popover-caret, -.cds--popover--bottom-right > .cds--popover > .cds--popover-caret, -.cds--popover--bottom-end > .cds--popover > .cds--popover-caret { - block-size: var(--cds-popover-caret-height, 0.375rem); - clip-path: polygon(0% 100%, 50% 0%, 100% 100%); - inline-size: var(--cds-popover-caret-width, 0.75rem); - inset-block-end: 0; - inset-inline-start: 50%; - transform: translate(-50%, var(--cds-popover-offset, 0rem)); -} - -[dir=rtl] .cds--popover--bottom > .cds--popover > .cds--popover-caret, -[dir=rtl] .cds--popover--bottom-left > .cds--popover > .cds--popover-caret, -[dir=rtl] .cds--popover--bottom-start > .cds--popover > .cds--popover-caret, -[dir=rtl] .cds--popover--bottom-right > .cds--popover > .cds--popover-caret, -[dir=rtl] .cds--popover--bottom-end > .cds--popover > .cds--popover-caret { - transform: translate(50%, var(--cds-popover-offset, 0rem)); -} - -.cds--popover--bottom.cds--popover--auto-align > .cds--popover > .cds--popover-content > .cds--popover-caret, -.cds--popover--bottom-left.cds--popover--auto-align > .cds--popover > .cds--popover-content > .cds--popover-caret, -.cds--popover--bottom-start.cds--popover--auto-align > .cds--popover > .cds--popover-content > .cds--popover-caret, -.cds--popover--bottom-right.cds--popover--auto-align > .cds--popover > .cds--popover-content > .cds--popover-caret, -.cds--popover--bottom-end.cds--popover--auto-align > .cds--popover > .cds--popover-content > .cds--popover-caret { - block-size: var(--cds-popover-caret-height, 0.375rem); - clip-path: polygon(0% 100%, 50% 0%, 100% 100%); - inline-size: var(--cds-popover-caret-width, 0.75rem); -} - -.cds--popover--top:not(.cds--popover--auto-align) > .cds--popover > .cds--popover-content { - inset-block-start: 0; - inset-inline-start: 50%; - transform: translate(-50%, calc(-100% - var(--cds-popover-offset, 0rem))); -} - -[dir=rtl] .cds--popover--top:not(.cds--popover--auto-align) > .cds--popover > .cds--popover-content { - transform: translate(50%, calc(-100% - var(--cds-popover-offset, 0rem))); -} - -.cds--popover--top-left:not(.cds--popover--auto-align) > .cds--popover > .cds--popover-content, -.cds--popover--top-start:not(.cds--popover--auto-align) > .cds--popover > .cds--popover-content { - inset-block-start: 0; - inset-inline-start: 0; - transform: translate(calc(-1 * var(--cds-popover-offset, 0rem)), calc(-100% - var(--cds-popover-offset, 0rem))); -} - -[dir=rtl] .cds--popover--top-left:not(.cds--popover--auto-align) > .cds--popover > .cds--popover-content, -[dir=rtl] .cds--popover--top-start:not(.cds--popover--auto-align) > .cds--popover > .cds--popover-content { - inset-inline-end: 0; - inset-inline-start: initial; -} - -.cds--popover--top-right:not(.cds--popover--auto-align) > .cds--popover > .cds--popover-content, -.cds--popover--top-end:not(.cds--popover--auto-align) > .cds--popover > .cds--popover-content { - inset-block-start: 0; - inset-inline-end: 0; - transform: translate(var(--cds-popover-offset, 0rem), calc(-100% - var(--cds-popover-offset, 0rem))); -} - -[dir=rtl] .cds--popover--top-right:not(.cds--popover--auto-align) > .cds--popover > .cds--popover-content, -[dir=rtl] .cds--popover--top-end:not(.cds--popover--auto-align) > .cds--popover > .cds--popover-content { - inset-inline-start: 0; -} - -.cds--popover--top > .cds--popover > .cds--popover-content::before, -.cds--popover--top-left > .cds--popover > .cds--popover-content::before, -.cds--popover--top-start > .cds--popover > .cds--popover-content::before, -.cds--popover--top-right > .cds--popover > .cds--popover-content::before, -.cds--popover--top-end > .cds--popover > .cds--popover-content::before { - block-size: var(--cds-popover-offset, 0rem); - inset-block-end: 0; - inset-inline: 0; - transform: translateY(100%); -} - -.cds--popover--top > .cds--popover > .cds--popover-caret, -.cds--popover--top-left > .cds--popover > .cds--popover-caret, -.cds--popover--top-start > .cds--popover > .cds--popover-caret, -.cds--popover--top-right > .cds--popover > .cds--popover-caret, -.cds--popover--top-end > .cds--popover > .cds--popover-caret { - block-size: var(--cds-popover-caret-height, 0.375rem); - clip-path: polygon(0% 0%, 50% 100%, 100% 0%); - inline-size: var(--cds-popover-caret-width, 0.75rem); - inset-block-start: 0; - inset-inline-start: 50%; - transform: translate(-50%, calc(-1 * var(--cds-popover-offset, 0rem))); -} - -[dir=rtl] .cds--popover--top:not(.cds--popover--auto-align) > .cds--popover > .cds--popover-caret, -[dir=rtl] .cds--popover--top-left:not(.cds--popover--auto-align) > .cds--popover > .cds--popover-caret, -[dir=rtl] .cds--popover--top-start:not(.cds--popover--auto-align) > .cds--popover > .cds--popover-caret, -[dir=rtl] .cds--popover--top-right:not(.cds--popover--auto-align) > .cds--popover > .cds--popover-caret, -[dir=rtl] .cds--popover--top-end:not(.cds--popover--auto-align) > .cds--popover > .cds--popover-caret { - transform: translate(50%, calc(-1 * var(--cds-popover-offset, 0rem))); -} - -.cds--popover--top.cds--popover--auto-align > .cds--popover > .cds--popover-content > .cds--popover-caret, -.cds--popover--top-left.cds--popover--auto-align > .cds--popover > .cds--popover-content > .cds--popover-caret, -.cds--popover--top-start.cds--popover--auto-align > .cds--popover > .cds--popover-content > .cds--popover-caret, -.cds--popover--top-right.cds--popover--auto-align > .cds--popover > .cds--popover-content > .cds--popover-caret, -.cds--popover--top-end.cds--popover--auto-align > .cds--popover > .cds--popover-content > .cds--popover-caret { - block-size: var(--cds-popover-caret-height, 0.375rem); - clip-path: polygon(0% 0%, 50% 100%, 100% 0%); - inline-size: var(--cds-popover-caret-width, 0.75rem); -} - -.cds--popover--right:not(.cds--popover--auto-align) > .cds--popover > .cds--popover-content { - inset-block-start: 50%; - inset-inline-start: 100%; - transform: translate(var(--cds-popover-offset, 0rem), -50%); -} - -.cds--popover--right-top:not(.cds--popover--auto-align) > .cds--popover > .cds--popover-content, -.cds--popover--right-start:not(.cds--popover--auto-align) > .cds--popover > .cds--popover-content { - inset-block-start: 50%; - inset-inline-start: 100%; - transform: translate(var(--cds-popover-offset, 0rem), calc(0.5 * var(--cds-popover-offset, 0rem) * -1 - 16px)); -} - -.cds--popover--right-bottom:not(.cds--popover--auto-align) > .cds--popover > .cds--popover-content, -.cds--popover--right-end:not(.cds--popover--auto-align) > .cds--popover > .cds--popover-content { - inset-block-end: 50%; - inset-inline-start: 100%; - transform: translate(var(--cds-popover-offset, 0rem), calc(0.5 * var(--cds-popover-offset, 0rem) + 16px)); -} - -[dir=rtl] .cds--popover--right:not(.cds--popover--auto-align) > .cds--popover > .cds--popover-content, -[dir=rtl] .cds--popover--right-bottom:not(.cds--popover--auto-align) > .cds--popover > .cds--popover-content, -[dir=rtl] .cds--popover--right-end:not(.cds--popover--auto-align) > .cds--popover > .cds--popover-content, -[dir=rtl] .cds--popover--right-top:not(.cds--popover--auto-align) > .cds--popover > .cds--popover-content, -[dir=rtl] .cds--popover--right-start:not(.cds--popover--auto-align) > .cds--popover > .cds--popover-content { - inset-inline-end: 100%; - inset-inline-start: initial; -} - -.cds--popover--right > .cds--popover > .cds--popover-content::before, -.cds--popover--right-top > .cds--popover > .cds--popover-content::before, -.cds--popover--right-start > .cds--popover > .cds--popover-content::before, -.cds--popover--right-bottom > .cds--popover > .cds--popover-content::before, -.cds--popover--right-end > .cds--popover > .cds--popover-content::before { - inline-size: var(--cds-popover-offset, 0rem); - inset-block: 0; - inset-inline-start: 0; - transform: translateX(-100%); -} - -.cds--popover--right:not(.cds--popover--auto-align) > .cds--popover > .cds--popover-caret, -.cds--popover--right-top:not(.cds--popover--auto-align) > .cds--popover > .cds--popover-caret, -.cds--popover--right-start:not(.cds--popover--auto-align) > .cds--popover > .cds--popover-caret, -.cds--popover--right-bottom:not(.cds--popover--auto-align) > .cds--popover > .cds--popover-caret, -.cds--popover--right-end:not(.cds--popover--auto-align) > .cds--popover > .cds--popover-caret { - block-size: var(--cds-popover-caret-width, 0.75rem); - clip-path: polygon(0% 50%, 100% 0%, 100% 100%); - inline-size: var(--cds-popover-caret-height, 0.375rem); - inset-block-start: 50%; - inset-inline-start: 100%; - transform: translate(calc(var(--cds-popover-offset, 0rem) - 100%), -50%); -} - -[dir=rtl] .cds--popover--right:not(.cds--popover--auto-align) > .cds--popover > .cds--popover-caret, -[dir=rtl] .cds--popover--right-top:not(.cds--popover--auto-align) > .cds--popover > .cds--popover-caret, -[dir=rtl] .cds--popover--right-start:not(.cds--popover--auto-align) > .cds--popover > .cds--popover-caret, -[dir=rtl] .cds--popover--right-bottom:not(.cds--popover--auto-align) > .cds--popover > .cds--popover-caret, -[dir=rtl] .cds--popover--right-end:not(.cds--popover--auto-align) > .cds--popover > .cds--popover-caret { - inset-inline-end: 100%; - inset-inline-start: initial; -} - -.cds--popover--right.cds--popover--auto-align > .cds--popover > .cds--popover-content > .cds--popover-caret, -.cds--popover--right-top.cds--popover--auto-align > .cds--popover > .cds--popover-content > .cds--popover-caret, -.cds--popover--right-start.cds--popover--auto-align > .cds--popover > .cds--popover-content > .cds--popover-caret, -.cds--popover--right-bottom.cds--popover--auto-align > .cds--popover > .cds--popover-content > .cds--popover-caret, -.cds--popover--right-end.cds--popover--auto-align > .cds--popover > .cds--popover-content > .cds--popover-caret { - block-size: var(--cds-popover-caret-width, 0.75rem); - clip-path: polygon(0% 50%, 100% 0%, 100% 100%); - inline-size: var(--cds-popover-caret-height, 0.375rem); -} - -.cds--popover--left:not(.cds--popover--auto-align) > .cds--popover > .cds--popover-content { - inset-block-start: 50%; - inset-inline-end: 100%; - transform: translate(calc(-1 * var(--cds-popover-offset, 0rem) + 0.1px), -50%); -} - -.cds--popover--left-top:not(.cds--popover--auto-align) > .cds--popover > .cds--popover-content, -.cds--popover--left-start:not(.cds--popover--auto-align) > .cds--popover > .cds--popover-content { - inset-block-start: 50%; - inset-inline-end: 100%; - transform: translate(calc(-1 * var(--cds-popover-offset, 0rem)), calc(-0.5 * var(--cds-popover-offset, 0rem) - 16px)); -} - -.cds--popover--left-bottom:not(.cds--popover--auto-align) > .cds--popover > .cds--popover-content, -.cds--popover--left-end:not(.cds--popover--auto-align) > .cds--popover > .cds--popover-content { - inset-block-end: 50%; - inset-inline-end: 100%; - transform: translate(calc(-1 * var(--cds-popover-offset, 0rem)), calc(0.5 * var(--cds-popover-offset, 0rem) + 16px)); -} - -[dir=rtl] .cds--popover--left:not(.cds--popover--auto-align) > .cds--popover > .cds--popover-content, -[dir=rtl] .cds--popover--left-bottom:not(.cds--popover--auto-align) > .cds--popover > .cds--popover-content, -[dir=rtl] .cds--popover--left-end:not(.cds--popover--auto-align) > .cds--popover > .cds--popover-content, -[dir=rtl] .cds--popover--left-top:not(.cds--popover--auto-align) > .cds--popover > .cds--popover-content, -[dir=rtl] .cds--popover--left-start:not(.cds--popover--auto-align) > .cds--popover > .cds--popover-content { - inset-inline-end: initial; - inset-inline-start: 100%; -} - -.cds--popover--left > .cds--popover > .cds--popover-content::before, -.cds--popover--left-top > .cds--popover > .cds--popover-content::before, -.cds--popover--left-start > .cds--popover > .cds--popover-content::before, -.cds--popover--left-bottom > .cds--popover > .cds--popover-content::before, -.cds--popover--left-end > .cds--popover > .cds--popover-content::before { - inline-size: var(--cds-popover-offset, 0rem); - inset-block: 0; - inset-inline-end: 0; - transform: translateX(100%); -} - -.cds--popover--left:not(.cds--popover--auto-align) > .cds--popover > .cds--popover-caret, -.cds--popover--left-top:not(.cds--popover--auto-align) > .cds--popover > .cds--popover-caret, -.cds--popover--left-start:not(.cds--popover--auto-align) > .cds--popover > .cds--popover-caret, -.cds--popover--left-bottom:not(.cds--popover--auto-align) > .cds--popover > .cds--popover-caret, -.cds--popover--left-end:not(.cds--popover--auto-align) > .cds--popover > .cds--popover-caret { - block-size: var(--cds-popover-caret-width, 0.75rem); - clip-path: polygon(0% 0%, 100% 50%, 0% 100%); - inline-size: var(--cds-popover-caret-height, 0.375rem); - inset-block-start: 50%; - inset-inline-end: 100%; - transform: translate(calc(-1 * var(--cds-popover-offset, 0rem) + 100%), -50%); -} - -[dir=rtl] .cds--popover--left:not(.cds--popover--auto-align) > .cds--popover > .cds--popover-caret, -[dir=rtl] .cds--popover--left-top:not(.cds--popover--auto-align) > .cds--popover > .cds--popover-caret, -[dir=rtl] .cds--popover--left-start:not(.cds--popover--auto-align) > .cds--popover > .cds--popover-caret, -[dir=rtl] .cds--popover--left-bottom:not(.cds--popover--auto-align) > .cds--popover > .cds--popover-caret, -[dir=rtl] .cds--popover--left-end:not(.cds--popover--auto-align) > .cds--popover > .cds--popover-caret { - inset-inline-end: initial; - inset-inline-start: 100%; -} - -.cds--popover--left.cds--popover--auto-align > .cds--popover > .cds--popover-content > .cds--popover-caret, -.cds--popover--left-top.cds--popover--auto-align > .cds--popover > .cds--popover-content > .cds--popover-caret, -.cds--popover--left-start.cds--popover--auto-align > .cds--popover > .cds--popover-content > .cds--popover-caret, -.cds--popover--left-bottom.cds--popover--auto-align > .cds--popover > .cds--popover-content > .cds--popover-caret, -.cds--popover--left-end.cds--popover--auto-align > .cds--popover > .cds--popover-content > .cds--popover-caret { - block-size: var(--cds-popover-caret-width, 0.75rem); - clip-path: polygon(0% 0%, 100% 50%, 0% 100%); - inline-size: var(--cds-popover-caret-height, 0.375rem); -} - -.cds--popover--tab-tip > .cds--popover > .cds--popover-content { - border-radius: 0; -} - -.cds--popover--tab-tip .cds--popover { - will-change: filter; -} - -.cds--popover--tab-tip__button { - box-sizing: border-box; - padding: 0; - border: 0; - margin: 0; - font-family: inherit; - font-size: 100%; - vertical-align: baseline; - display: inline-block; - padding: 0; - border: 0; - appearance: none; - background: none; - cursor: pointer; - text-align: start; - inline-size: 100%; - position: relative; - display: inline-flex; - align-items: center; - justify-content: center; - block-size: 2rem; - inline-size: 2rem; -} -.cds--popover--tab-tip__button *, -.cds--popover--tab-tip__button *::before, -.cds--popover--tab-tip__button *::after { - box-sizing: inherit; -} -.cds--popover--tab-tip__button::-moz-focus-inner { - border: 0; -} -.cds--popover--tab-tip__button:focus { - outline: 2px solid var(--cds-focus, #0f62fe); - outline-offset: -2px; -} -@media screen and (prefers-contrast) { - .cds--popover--tab-tip__button:focus { - outline-style: dotted; - } -} -.cds--popover--tab-tip__button:hover { - background-color: var(--cds-layer-hover); -} - -.cds--popover--tab-tip.cds--popover--open .cds--popover--tab-tip__button { - background: var(--cds-layer); - box-shadow: 0 2px 2px rgba(0, 0, 0, 0.2); -} - -.cds--popover--tab-tip.cds--popover--open .cds--popover--tab-tip__button:not(:focus)::after { - position: absolute; - z-index: 6001; - background: var(--cds-layer); - block-size: 2px; - content: ""; - inline-size: 100%; - inset-block-end: 0; -} - -.cds--popover--tab-tip__button svg { - fill: var(--cds-icon-primary, #161616); -} - -.cds--tooltip { - --cds-popover-offset: 12px; -} - -.cds--tooltip-content { - font-size: var(--cds-body-01-font-size, 0.875rem); - font-weight: var(--cds-body-01-font-weight, 400); - line-height: var(--cds-body-01-line-height, 1.42857); - letter-spacing: var(--cds-body-01-letter-spacing, 0.16px); - padding: var(--cds-tooltip-padding-block, 1rem) var(--cds-tooltip-padding-inline, 1rem); - color: var(--cds-text-inverse, #ffffff); - max-inline-size: 18rem; -} - -.cds--icon-tooltip { - --cds-tooltip-padding-block: 0.125rem; - --cds-popover-caret-width: 0.5rem; - --cds-popover-caret-height: 0.25rem; - --cds-popover-offset: 0.5rem; -} - -.cds--icon-tooltip .cds--tooltip-content { - font-size: var(--cds-body-compact-01-font-size, 0.875rem); - font-weight: var(--cds-body-compact-01-font-weight, 400); - line-height: var(--cds-body-compact-01-line-height, 1.28572); - letter-spacing: var(--cds-body-compact-01-letter-spacing, 0.16px); -} - -.cds--definition-term { - box-sizing: border-box; - padding: 0; - border: 0; - margin: 0; - font-family: inherit; - font-size: 100%; - vertical-align: baseline; - display: inline-block; - padding: 0; - border: 0; - appearance: none; - background: none; - cursor: pointer; - text-align: start; - inline-size: 100%; - border-radius: 0; - border-block-end: 1px dotted var(--cds-border-strong); - color: var(--cds-text-primary, #161616); -} -.cds--definition-term *, -.cds--definition-term *::before, -.cds--definition-term *::after { - box-sizing: inherit; -} -.cds--definition-term::-moz-focus-inner { - border: 0; -} - -.cds--definition-term:focus { - outline: 1px solid var(--cds-focus, #0f62fe); - border-block-end-color: var(--cds-border-interactive, #0f62fe); -} -@media screen and (prefers-contrast) { - .cds--definition-term:focus { - outline-style: dotted; - } -} - -.cds--definition-term:hover { - border-block-end-color: var(--cds-border-interactive, #0f62fe); -} - -.cds--definition-tooltip { - font-size: var(--cds-body-01-font-size, 0.875rem); - font-weight: var(--cds-body-01-font-weight, 400); - line-height: var(--cds-body-01-line-height, 1.42857); - letter-spacing: var(--cds-body-01-letter-spacing, 0.16px); - padding: 0.5rem 1rem; - max-inline-size: 11rem; -} - .c4p--user-avatar { position: relative; display: flex; diff --git a/packages/ibm-products-styles/src/components/EditTearsheet/_carbon-imports.scss b/packages/ibm-products-styles/src/components/EditTearsheet/_carbon-imports.scss new file mode 100644 index 0000000000..211d0c39af --- /dev/null +++ b/packages/ibm-products-styles/src/components/EditTearsheet/_carbon-imports.scss @@ -0,0 +1,9 @@ +// +// Copyright IBM Corp. 2025, 2025 +// +// 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/react/scss/components/toggle/toggle'; +@use '@carbon/react/scss/components/ui-shell/side-nav'; diff --git a/packages/ibm-products-styles/src/components/EditTearsheet/_edit-tearsheet.scss b/packages/ibm-products-styles/src/components/EditTearsheet/_edit-tearsheet.scss index 897161f761..01ed82b813 100644 --- a/packages/ibm-products-styles/src/components/EditTearsheet/_edit-tearsheet.scss +++ b/packages/ibm-products-styles/src/components/EditTearsheet/_edit-tearsheet.scss @@ -1,5 +1,5 @@ // -// Copyright IBM Corp. 2022, 2022 +// Copyright IBM Corp. 2022, 2025 // // This source code is licensed under the Apache-2.0 license found in the // LICENSE file in the root directory of this source tree. @@ -17,10 +17,6 @@ // Other Carbon settings. @use '@carbon/react/scss/grid' as *; -// EditTearsheet uses the following Carbon components: -@use '@carbon/react/scss/components/toggle/toggle'; -@use '@carbon/react/scss/components/ui-shell/side-nav'; - // EditTearsheet uses the following IBM Products components: // TearsheetShell @use '../Tearsheet/tearsheet'; diff --git a/packages/ibm-products-styles/src/components/EditTearsheet/_index-with-carbon.scss b/packages/ibm-products-styles/src/components/EditTearsheet/_index-with-carbon.scss new file mode 100644 index 0000000000..8f3a992f70 --- /dev/null +++ b/packages/ibm-products-styles/src/components/EditTearsheet/_index-with-carbon.scss @@ -0,0 +1,9 @@ +// +// Copyright IBM Corp. 2025, 2025 +// +// 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-imports'; +@use './edit-tearsheet'; diff --git a/packages/ibm-products-styles/src/components/EditTearsheet/_index.scss b/packages/ibm-products-styles/src/components/EditTearsheet/_index.scss index d655783349..4f46308b45 100644 --- a/packages/ibm-products-styles/src/components/EditTearsheet/_index.scss +++ b/packages/ibm-products-styles/src/components/EditTearsheet/_index.scss @@ -1,5 +1,5 @@ // -// Copyright IBM Corp. 2022, 2022 +// Copyright IBM Corp. 2022, 2025 // // This source code is licensed under the Apache-2.0 license found in the // LICENSE file in the root directory of this source tree. diff --git a/packages/ibm-products-styles/src/components/UserAvatar/_user-avatar.scss b/packages/ibm-products-styles/src/components/UserAvatar/_user-avatar.scss index b97008d239..e1dfbde100 100644 --- a/packages/ibm-products-styles/src/components/UserAvatar/_user-avatar.scss +++ b/packages/ibm-products-styles/src/components/UserAvatar/_user-avatar.scss @@ -1,5 +1,5 @@ // -// Copyright IBM Corp. 2024, 2024 +// Copyright IBM Corp. 2024, 2025 // // This source code is licensed under the Apache-2.0 license found in the // LICENSE file in the root directory of this source tree. @@ -15,17 +15,6 @@ @use '@carbon/styles/scss/spacing' as *; @use '@carbon/styles/scss/type'; -// Other Carbon settings if needed -// TODO: @use '@carbon/styles/scss/grid'; -// or -// TODO: @use '@carbon/react/scss/grid'; - -// UserAvatar uses the following Carbon for IBM Products components: -// TODO: @use(s) of IBM Products component styles used by UserAvatar -@use '@carbon/react/scss/components/tooltip'; - -// The block part of our conventional BEM class names (blockClass__E--M). - $block-class: #{$pkg-prefix}--user-avatar; $sizes: ( diff --git a/packages/ibm-products-styles/src/components/_index-released-only-with-carbon.scss b/packages/ibm-products-styles/src/components/_index-released-only-with-carbon.scss index 2b9226ffd8..0d70301fcb 100644 --- a/packages/ibm-products-styles/src/components/_index-released-only-with-carbon.scss +++ b/packages/ibm-products-styles/src/components/_index-released-only-with-carbon.scss @@ -20,6 +20,7 @@ @use './CreateTearsheet/index-with-carbon' as *; @use './Datagrid/index-with-carbon' as *; @use './EditInPlace/index-with-carbon' as *; +@use './EditTearsheet/index-with-carbon' as *; @use './EmptyStates/index-with-carbon' as *; @use './ExportModal/index-with-carbon' as *; @use './ExpressiveCard/index-with-carbon' as *; diff --git a/packages/ibm-products-styles/src/components/_index-with-carbon.scss b/packages/ibm-products-styles/src/components/_index-with-carbon.scss index f816182334..6bd006892c 100644 --- a/packages/ibm-products-styles/src/components/_index-with-carbon.scss +++ b/packages/ibm-products-styles/src/components/_index-with-carbon.scss @@ -44,6 +44,7 @@ @use './EditSidePanel/index-with-carbon' as *; @use './OptionsTile/index-with-carbon' as *; @use './EditInPlace/index-with-carbon' as *; +@use './EditTearsheet/index-with-carbon' as *; @use './DataSpreadsheet/index-with-carbon' as *; @use './Datagrid/index-with-carbon' as *; @use './EditUpdateCards/index-with-carbon' as *;