diff --git a/src/elements/core/styles/core.scss b/src/elements/core/styles/core.scss index 220a7f68e3..f89152ad15 100644 --- a/src/elements/core/styles/core.scss +++ b/src/elements/core/styles/core.scss @@ -196,6 +196,14 @@ sbb-lead-container { } } +// TODO: Move back to the sbb-message components when the global CSS refactoring happens +sbb-message { + > [slot='image']:is(sbb-image, img), + > [slot='image'] :is(sbb-image, img) { + border-radius: var(--sbb-message-image-border-radius); + } +} + // Target the slotted `sbb-image` which are generally wrapped by a
(therefore are not reachable with the :slotted) // Apply the brightness effect on mouse hover // TODO: Move back to the teaser components when the global css refactoring happens diff --git a/src/elements/message/message.scss b/src/elements/message/message.scss index 62c14cf321..d54d86adbf 100644 --- a/src/elements/message/message.scss +++ b/src/elements/message/message.scss @@ -6,6 +6,7 @@ :host { --sbb-message-subtitle-color: var(--sbb-color-granite); --sbb-message-image-margin-block: 0 var(--sbb-spacing-responsive-s); + --sbb-message-image-border-radius: var(--sbb-border-radius-4x); --sbb-message-legend-margin-block: var(--sbb-spacing-responsive-xxxs) 0; --sbb-message-action-margin-block: var(--sbb-spacing-responsive-xxxs) 0; @@ -26,7 +27,8 @@ } ::slotted([slot='image']) { - margin-block: var(--sbb-message-image-margin-block); + display: block; + margin-block: var(--sbb-message-image-margin-block) !important; // overrides '.sbb-figure' margin width: 100%; } diff --git a/src/elements/message/message.visual.spec.ts b/src/elements/message/message.visual.spec.ts index 156b928829..dfab902ca9 100644 --- a/src/elements/message/message.visual.spec.ts +++ b/src/elements/message/message.visual.spec.ts @@ -4,32 +4,66 @@ import { describeViewports, visualDiffDefault } from '../core/testing/private.js import { waitForImageReady } from '../core/testing.js'; import './message.js'; +import '../chip-label.js'; import '../image.js'; import '../button/secondary-button.js'; const imageUrl = import.meta.resolve('../core/testing/assets/placeholder-image.png'); +const imgTestCases = [ + { + title: 'with sbb-image', + imgSelector: 'sbb-image', + imgTemplate: () => html``, + }, + { + title: 'with img tag', + imgSelector: 'img', + imgTemplate: () => html``, + }, + { + title: 'with figure_sbb-image', + imgSelector: 'sbb-image', + imgTemplate: () => + html`
+ + AI generated +
`, + }, + { + title: 'with figure_img', + imgSelector: 'img', + imgTemplate: () => + html`
+ + AI generated +
`, + }, +]; + describe(`sbb-message`, () => { describeViewports({ viewports: ['zero', 'medium'] }, () => { - it( - 'default', - visualDiffDefault.with(async (setup) => { - await setup.withFixture(html` - - -

Please reload the page or try your search again later.

-

Error code: 0001

- -
- `); + for (const testCase of imgTestCases) { + it( + `default ${testCase.title}`, + visualDiffDefault.with(async (setup) => { + await setup.withFixture(html` + + ${testCase.imgTemplate()} +

Please reload the page or try your search again later.

+

Error code: 0001

+ +
+ `); - await waitForImageReady(setup.snapshotElement.querySelector('sbb-image')!); - }), - ); + await waitForImageReady(setup.snapshotElement.querySelector(testCase.imgSelector)!); + }), + ); + } it( 'no image',