From d6ea43d2f18f7cb2aaafd72463a79aef9f7678a0 Mon Sep 17 00:00:00 2001 From: ariellalgilmore Date: Thu, 14 Sep 2023 09:08:48 -0700 Subject: [PATCH] feat(callout-with-media): v2 styles updates --- docs/dotcom-v2-migration.md | 6 ++++++ .../callout-with-media/_callout-with-media.scss | 11 +++++++++-- packages/styles/scss/internal/callout/_callout.scss | 2 ++ .../__stories__/callout-with-media.stories.ts | 4 +--- 4 files changed, 18 insertions(+), 5 deletions(-) diff --git a/docs/dotcom-v2-migration.md b/docs/dotcom-v2-migration.md index 3957b356883..afa46835026 100644 --- a/docs/dotcom-v2-migration.md +++ b/docs/dotcom-v2-migration.md @@ -18,6 +18,7 @@ For Carbon v11 migration guidance, see their | back-to-top | View changes [here](#backtotop) | | background-media | No API changes. | | button | This component is deprecated in v2 in favor for Carbon's core Button | +| callout-with-media | View changes [here](#callout-with-media) | | callout-quote | View changes [here](#callout-quote) | | card | View changes [here] (#card) | | card-group-card-link-item | This component is deprecated in v2 in favor for default card or with content-item | @@ -51,6 +52,11 @@ For Carbon v11 migration guidance, see their - +### Callout with media + +- New options for `color-scheme` property: `REGULAR = 'regular'`, `INVERSE = 'inverse'` `LAYER = 'layer'`, `CYAN = 'cyan'`, `PURPLE = 'purple'` +- New callout style tokens + ### Callout quote - New options for `color-scheme` property: `REGULAR = 'regular'`, `INVERSE = 'inverse'` `LAYER = 'layer'`, `CYAN = 'cyan'`, `PURPLE = 'purple'` diff --git a/packages/styles/scss/components/callout-with-media/_callout-with-media.scss b/packages/styles/scss/components/callout-with-media/_callout-with-media.scss index 9fd2d3a95e3..4d08107d597 100644 --- a/packages/styles/scss/components/callout-with-media/_callout-with-media.scss +++ b/packages/styles/scss/components/callout-with-media/_callout-with-media.scss @@ -10,6 +10,7 @@ @use '@carbon/styles/scss/spacing' as *; @use '@carbon/styles/scss/theme' as *; @use '@carbon/styles/scss/type' as *; +@use '@carbon/styles/scss/utilities' as *; @use '../../globals/vars' as *; @use '../../internal/callout/callout' as *; @use '../../internal/content-block'; @@ -23,14 +24,20 @@ :host(#{$c4d-prefix}-callout-with-media) { @extend :host(#{$c4d-prefix}-callout); - display: block; + display: flex; ::slotted([slot='heading']) { margin-bottom: $spacing-07; + margin-left: 0; } ::slotted([slot='copy']) { - margin-bottom: $spacing-07; + margin-bottom: $spacing-05; + margin-left: 0; + } + + ::slotted([slot='media']) { + margin: 0 0 $spacing-07; } } diff --git a/packages/styles/scss/internal/callout/_callout.scss b/packages/styles/scss/internal/callout/_callout.scss index 5e38f0ca42f..3a99581ad73 100644 --- a/packages/styles/scss/internal/callout/_callout.scss +++ b/packages/styles/scss/internal/callout/_callout.scss @@ -76,6 +76,8 @@ @include make-col-ready; } .#{$prefix}--callout__content { + box-sizing: border-box; + @include breakpoint(sm) { padding-top: $layout-03; } diff --git a/packages/web-components/src/components/callout-with-media/__stories__/callout-with-media.stories.ts b/packages/web-components/src/components/callout-with-media/__stories__/callout-with-media.stories.ts index 4b976044e71..f4ad40a1e3b 100644 --- a/packages/web-components/src/components/callout-with-media/__stories__/callout-with-media.stories.ts +++ b/packages/web-components/src/components/callout-with-media/__stories__/callout-with-media.stories.ts @@ -8,8 +8,6 @@ */ import '../index'; -import '../callout-with-media-image'; -import '../callout-with-media-video'; import { html } from 'lit'; import { select } from '@storybook/addon-knobs'; import { CONTENT_BLOCK_COPY_SIZE } from '../../content-block/content-block-copy'; @@ -86,7 +84,7 @@ export default { colorScheme: select( 'Color scheme:', colorSchemeTypes, - COLOR_SCHEME.REGULAR + COLOR_SCHEME.INVERSE ), }), },