From 545bb7927c5a419c1c2b417904d7d5f6a778a6ad Mon Sep 17 00:00:00 2001 From: Tommmaso Menga Date: Thu, 18 Apr 2024 16:54:06 +0200 Subject: [PATCH 1/9] feat(notification): add size 's' --- src/components/notification/notification.scss | 20 ++++++++++++++++++- .../notification/notification.spec.ts | 8 ++++---- .../notification/notification.stories.ts | 16 +++++++++++++++ src/components/notification/notification.ts | 14 +++++++++++-- 4 files changed, 51 insertions(+), 7 deletions(-) diff --git a/src/components/notification/notification.scss b/src/components/notification/notification.scss index 6f82326efc..54fcc35f26 100644 --- a/src/components/notification/notification.scss +++ b/src/components/notification/notification.scss @@ -30,6 +30,8 @@ border var(--sbb-notification-animation-duration) var(--sbb-animation-duration-2x) var(--sbb-notification-timing-function), opacity var(--sbb-notification-animation-duration) var(--sbb-notification-timing-function); + --sbb-notification-content-padding-inline: var(--sbb-spacing-responsive-xxxs) + var(--sbb-spacing-responsive-xs); // As the notification has always a light background, we have to fix the focus outline color // to default color for cases where the notification is used in a negative context. @@ -82,6 +84,18 @@ --sbb-notification-type-color-sass: #{color.mix(sbb-tokens.$sbb-color-red, white, 5%)}; } +:host([size='s']) { + --sbb-notification-padding-block: var(--sbb-spacing-responsive-xxxs); + --sbb-notification-padding-inline: var(--sbb-spacing-responsive-xxs); + --sbb-notification-content-padding-inline: var(--sbb-spacing-responsive-xxxs) + var(--sbb-spacing-responsive-xxs); + + @include sbb.mq($to: small) { + --sbb-notification-padding-inline: var(--sbb-spacing-responsive-xxs) + var(--sbb-spacing-responsive-xxxs); + } +} + .sbb-notification__wrapper { position: relative; margin: var(--sbb-notification-margin); @@ -138,6 +152,10 @@ grid-template-columns: auto 1fr auto; align-items: flex-start; } + + :host([size='s']) & { + @include sbb.text-xs--regular; + } } .sbb-notification__icon { @@ -178,7 +196,7 @@ order: initial; grid-area: initial; margin-block-start: 0; - padding-inline: var(--sbb-spacing-responsive-xxxs) var(--sbb-spacing-responsive-xs); + padding-inline: var(--sbb-notification-content-padding-inline); } } diff --git a/src/components/notification/notification.spec.ts b/src/components/notification/notification.spec.ts index dd90189916..ee22cc1ea8 100644 --- a/src/components/notification/notification.spec.ts +++ b/src/components/notification/notification.spec.ts @@ -17,7 +17,7 @@ describe(`sbb-notification`, () => { expect(root).dom.to.be.equal( ` - + The quick brown fox jumps over the lazy dog. `, ); @@ -33,7 +33,7 @@ describe(`sbb-notification`, () => { expect(root).dom.to.be.equal( ` - + The quick brown fox jumps over the lazy dog. `, ); @@ -50,7 +50,7 @@ describe(`sbb-notification`, () => { expect(root).dom.to.be.equal( ` - + Slotted title @@ -69,7 +69,7 @@ describe(`sbb-notification`, () => { expect(root).dom.to.be.equal( ` - + The quick brown fox jumps over the lazy dog. `, ); diff --git a/src/components/notification/notification.stories.ts b/src/components/notification/notification.stories.ts index be12078f64..dee022d7a5 100644 --- a/src/components/notification/notification.stories.ts +++ b/src/components/notification/notification.stories.ts @@ -27,6 +27,13 @@ const type: InputType = { options: ['info', 'success', 'warn', 'error'], }; +const size: InputType = { + control: { + type: 'inline-radio', + }, + options: ['s', 'm'], +}; + const readonly: InputType = { control: { type: 'boolean', @@ -42,6 +49,7 @@ const disableAnimation: InputType = { const basicArgTypes: ArgTypes = { 'title-content': titleContent, type: type, + size: size, readonly: readonly, 'disable-animation': disableAnimation, }; @@ -49,6 +57,7 @@ const basicArgTypes: ArgTypes = { const basicArgs: Args = { 'title-content': 'Title', type: type.options[0], + size: size.options[1], readonly: false, 'disable-animation': isChromatic(), }; @@ -62,6 +71,7 @@ const appendNotification = (event: Event, args: Args): void => { newNotification.titleContent = args['title-content']; newNotification.type = args['type']; newNotification.readonly = args['readonly']; + newNotification.size = args['size']; newNotification.disableAnimation = args['disable-animation']; newNotification.innerHTML = 'Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet.'; @@ -207,6 +217,12 @@ export const Readonly: StoryObj = { args: { ...basicArgs, readonly: true }, }; +export const SizeS: StoryObj = { + render: DefaultTemplate, + argTypes: basicArgTypes, + args: { ...basicArgs, size: 's' }, +}; + export const NoTitle: StoryObj = { render: DefaultTemplate, argTypes: basicArgTypes, diff --git a/src/components/notification/notification.ts b/src/components/notification/notification.ts index 6cf243f5bb..0df5599eb0 100644 --- a/src/components/notification/notification.ts +++ b/src/components/notification/notification.ts @@ -67,6 +67,12 @@ export class SbbNotificationElement extends LitElement { */ @property({ reflect: true, type: Boolean }) public readonly = false; + /** + * Whether the notification is readonly. + * In readonly mode, there is no dismiss button offered to the user. + */ + @property({ reflect: true }) public size: 'm' | 's' = 'm'; + /** * Whether the animation is enabled. */ @@ -224,7 +230,11 @@ export class SbbNotificationElement extends LitElement { > - + ${this.titleContent} @@ -234,7 +244,7 @@ export class SbbNotificationElement extends LitElement { ? html` this.close()} aria-label=${i18nCloseNotification[this._language.current]} From 99fe2eb46dc0873e8495916ff5b24de8ca4dc535 Mon Sep 17 00:00:00 2001 From: Tommmaso Menga Date: Mon, 22 Apr 2024 09:49:06 +0200 Subject: [PATCH 2/9] docs(notification): add size 's' --- src/components/notification/readme.md | 1 + 1 file changed, 1 insertion(+) diff --git a/src/components/notification/readme.md b/src/components/notification/readme.md index 95331f5837..41601e917e 100644 --- a/src/components/notification/readme.md +++ b/src/components/notification/readme.md @@ -81,6 +81,7 @@ This ensures that users who rely on screen readers are promptly informed of any | `titleContent` | `title-content` | public | `string \| undefined` | | Content of title. | | `titleLevel` | `title-level` | public | `SbbTitleLevel` | `'3'` | Level of title, it will be rendered as heading tag (e.g. h3). Defaults to level 3. | | `readonly` | `readonly` | public | `boolean` | `false` | Whether the notification is readonly. In readonly mode, there is no dismiss button offered to the user. | +| `size` | `size` | public | `'m' \| 's'` | `'m'` | Whether the notification is readonly. In readonly mode, there is no dismiss button offered to the user. | | `disableAnimation` | `disable-animation` | public | `boolean` | `false` | Whether the animation is enabled. | ## Methods From 8a8ef008fe6b0edc6dae8c2328e6c6f9d79e6d8b Mon Sep 17 00:00:00 2001 From: Tommmaso Menga Date: Mon, 22 Apr 2024 10:12:25 +0200 Subject: [PATCH 3/9] feat(notification): update tests --- .../__snapshots__/notification.spec.snap.js | 318 ++++++++++++++++++ .../notification/notification.spec.ts | 156 +++++---- 2 files changed, 412 insertions(+), 62 deletions(-) diff --git a/src/components/notification/__snapshots__/notification.spec.snap.js b/src/components/notification/__snapshots__/notification.spec.snap.js index ea2dd63639..e46e14cb32 100644 --- a/src/components/notification/__snapshots__/notification.spec.snap.js +++ b/src/components/notification/__snapshots__/notification.spec.snap.js @@ -239,3 +239,321 @@ snapshots["sbb-notification A11y tree Firefox"] = `; /* end snapshot sbb-notification A11y tree Firefox */ +snapshots["sbb-notification renders Dom"] = +` + The quick brown fox jumps over the lazy dog. + +`; +/* end snapshot sbb-notification renders Dom */ + +snapshots["sbb-notification renders ShadowDom"] = +`
+
+ + + + + + + + + + + + + + + +
+
+`; +/* end snapshot sbb-notification renders ShadowDom */ + +snapshots["sbb-notification renders with a title Dom"] = +` + The quick brown fox jumps over the lazy dog. + +`; +/* end snapshot sbb-notification renders with a title Dom */ + +snapshots["sbb-notification renders with a title ShadowDom"] = +`
+
+ + + + + Title + + + + + + + + + + + +
+
+`; +/* end snapshot sbb-notification renders with a title ShadowDom */ + +snapshots["sbb-notification renders with a slotted title Dom"] = +` + + Slotted title + + The quick brown fox jumps over the lazy dog. + +`; +/* end snapshot sbb-notification renders with a slotted title Dom */ + +snapshots["sbb-notification renders with a slotted title ShadowDom"] = +`
+
+ + + + + + + + + + + + + + + +
+
+`; +/* end snapshot sbb-notification renders with a slotted title ShadowDom */ + +snapshots["sbb-notification renders without the close button Dom"] = +` + The quick brown fox jumps over the lazy dog. + +`; +/* end snapshot sbb-notification renders without the close button Dom */ + +snapshots["sbb-notification renders without the close button ShadowDom"] = +`
+
+ + + + + Title + + + + + +
+
+`; +/* end snapshot sbb-notification renders without the close button ShadowDom */ + +snapshots["sbb-notification renders size s Dom"] = +` + The quick brown fox jumps over the lazy dog. + +`; +/* end snapshot sbb-notification renders size s Dom */ + +snapshots["sbb-notification renders size s ShadowDom"] = +`
+
+ + + + + Title + + + + + + + + + + + +
+
+`; +/* end snapshot sbb-notification renders size s ShadowDom */ + diff --git a/src/components/notification/notification.spec.ts b/src/components/notification/notification.spec.ts index ee22cc1ea8..f3b9b6076e 100644 --- a/src/components/notification/notification.spec.ts +++ b/src/components/notification/notification.spec.ts @@ -2,78 +2,110 @@ import { expect } from '@open-wc/testing'; import { html } from 'lit/static-html.js'; import { fixture, testA11yTreeSnapshot } from '../core/testing/private.js'; -import { waitForLitRender } from '../core/testing.js'; +import type { SbbNotificationElement } from './notification.js'; import './notification.js'; describe(`sbb-notification`, () => { - it('renders', async () => { - const root = await fixture( - html`The quick brown fox jumps over the lazy dog.`, - ); - await waitForLitRender(root); - - expect(root).dom.to.be.equal( - ` - - The quick brown fox jumps over the lazy dog. - `, - ); - await expect(root).shadowDom.to.be.equalSnapshot(); + describe('renders', () => { + let element: SbbNotificationElement; + + beforeEach(async () => { + element = await fixture( + html`The quick brown fox jumps over the lazy dog.`, + ); + }); + + it('Dom', async () => { + await expect(element).dom.to.be.equalSnapshot(); + }); + + it('ShadowDom', async () => { + await expect(element).shadowDom.to.be.equalSnapshot(); + }); }); - it('renders with a title', async () => { - const root = await fixture( - html`The quick brown fox jumps over the lazy dog.`, - ); - - expect(root).dom.to.be.equal( - ` - - The quick brown fox jumps over the lazy dog. - `, - ); - await expect(root).shadowDom.to.be.equalSnapshot(); + describe('renders with a title', () => { + let element: SbbNotificationElement; + + beforeEach(async () => { + element = await fixture( + html`The quick brown fox jumps over the lazy dog.`, + ); + }); + + it('Dom', async () => { + await expect(element).dom.to.be.equalSnapshot(); + }); + + it('ShadowDom', async () => { + await expect(element).shadowDom.to.be.equalSnapshot(); + }); }); - it('renders with a slotted title', async () => { - const root = await fixture( - html`Slotted title - The quick brown fox jumps over the lazy dog. - `, - ); - - expect(root).dom.to.be.equal( - ` - - - Slotted title - - The quick brown fox jumps over the lazy dog. - `, - ); - await expect(root).shadowDom.to.be.equalSnapshot(); + describe('renders with a slotted title', () => { + let element: SbbNotificationElement; + + beforeEach(async () => { + element = await fixture( + html`Slotted title + The quick brown fox jumps over the lazy dog. + `, + ); + }); + + it('Dom', async () => { + await expect(element).dom.to.be.equalSnapshot(); + }); + + it('ShadowDom', async () => { + await expect(element).shadowDom.to.be.equalSnapshot(); + }); }); - it('renders without the close button', async () => { - const root = await fixture( - html`The quick brown fox jumps over the lazy dog.`, - ); - - expect(root).dom.to.be.equal( - ` - - The quick brown fox jumps over the lazy dog. - `, - ); - await expect(root).shadowDom.to.be.equalSnapshot(); + describe('renders without the close button', () => { + let element: SbbNotificationElement; + + beforeEach(async () => { + element = await fixture( + html`The quick brown fox jumps over the lazy dog.`, + ); + }); + + it('Dom', async () => { + await expect(element).dom.to.be.equalSnapshot(); + }); + + it('ShadowDom', async () => { + await expect(element).shadowDom.to.be.equalSnapshot(); + }); + }); + + describe('renders size s', () => { + let element: SbbNotificationElement; + + beforeEach(async () => { + element = await fixture( + html`The quick brown fox jumps over the lazy dog.`, + ); + }); + + it('Dom', async () => { + await expect(element).dom.to.be.equalSnapshot(); + }); + + it('ShadowDom', async () => { + await expect(element).shadowDom.to.be.equalSnapshot(); + }); }); testA11yTreeSnapshot( From 9f2910bbbcb48390bba8f52389c63ccbf29b0597 Mon Sep 17 00:00:00 2001 From: Tommmaso Menga Date: Mon, 22 Apr 2024 10:17:31 +0200 Subject: [PATCH 4/9] docs(notification): add size 's' --- src/components/notification/notification.ts | 5 +---- src/components/notification/readme.md | 2 +- 2 files changed, 2 insertions(+), 5 deletions(-) diff --git a/src/components/notification/notification.ts b/src/components/notification/notification.ts index 0df5599eb0..6c7dfde355 100644 --- a/src/components/notification/notification.ts +++ b/src/components/notification/notification.ts @@ -67,10 +67,7 @@ export class SbbNotificationElement extends LitElement { */ @property({ reflect: true, type: Boolean }) public readonly = false; - /** - * Whether the notification is readonly. - * In readonly mode, there is no dismiss button offered to the user. - */ + /** Size variant, either s or m. */ @property({ reflect: true }) public size: 'm' | 's' = 'm'; /** diff --git a/src/components/notification/readme.md b/src/components/notification/readme.md index 41601e917e..f69019f3cb 100644 --- a/src/components/notification/readme.md +++ b/src/components/notification/readme.md @@ -81,7 +81,7 @@ This ensures that users who rely on screen readers are promptly informed of any | `titleContent` | `title-content` | public | `string \| undefined` | | Content of title. | | `titleLevel` | `title-level` | public | `SbbTitleLevel` | `'3'` | Level of title, it will be rendered as heading tag (e.g. h3). Defaults to level 3. | | `readonly` | `readonly` | public | `boolean` | `false` | Whether the notification is readonly. In readonly mode, there is no dismiss button offered to the user. | -| `size` | `size` | public | `'m' \| 's'` | `'m'` | Whether the notification is readonly. In readonly mode, there is no dismiss button offered to the user. | +| `size` | `size` | public | `'m' \| 's'` | `'m'` | Size variant, either s or m. | | `disableAnimation` | `disable-animation` | public | `boolean` | `false` | Whether the animation is enabled. | ## Methods From 5d5dd52840e402d80c56bd69e0246c3729e1fb00 Mon Sep 17 00:00:00 2001 From: Tommmaso Menga Date: Mon, 22 Apr 2024 15:10:58 +0200 Subject: [PATCH 5/9] feat(notification): fix icon placing on size 's' --- src/components/notification/notification.scss | 4 ++++ 1 file changed, 4 insertions(+) diff --git a/src/components/notification/notification.scss b/src/components/notification/notification.scss index 54fcc35f26..471cd0aa90 100644 --- a/src/components/notification/notification.scss +++ b/src/components/notification/notification.scss @@ -175,6 +175,10 @@ ) / 2 ); } + + :host([size='s']) & { + margin-block-start: 0; + } } } From 8d27de7170256ef907e28b424a4a583c8b85cb12 Mon Sep 17 00:00:00 2001 From: Tommmaso Menga Date: Mon, 22 Apr 2024 17:06:45 +0200 Subject: [PATCH 6/9] style(notification): pr feedbacks --- src/components/notification/notification.scss | 48 +++++++++---------- 1 file changed, 24 insertions(+), 24 deletions(-) diff --git a/src/components/notification/notification.scss b/src/components/notification/notification.scss index 471cd0aa90..084f03c841 100644 --- a/src/components/notification/notification.scss +++ b/src/components/notification/notification.scss @@ -86,13 +86,32 @@ :host([size='s']) { --sbb-notification-padding-block: var(--sbb-spacing-responsive-xxxs); - --sbb-notification-padding-inline: var(--sbb-spacing-responsive-xxs); + --sbb-notification-padding-inline: var(--sbb-spacing-responsive-xxs) + var(--sbb-spacing-responsive-xxxs); --sbb-notification-content-padding-inline: var(--sbb-spacing-responsive-xxxs) var(--sbb-spacing-responsive-xxs); +} + +@include sbb.mq($from: small) { + :host { + --sbb-notification-icon-margin-block-start: calc( + ((1em * var(--sbb-typo-line-height-body-text)) - var(--sbb-size-icon-ui-small)) / 2 + ); + } + + :host(:where([data-slot-names~='title'], [title-content])) { + --sbb-notification-icon-margin-block-start: calc( + ( + (var(--sbb-font-size-title-5) * var(--sbb-typo-line-height-body-text)) - var( + --sbb-size-icon-ui-small + ) + ) / 2 + ); + } - @include sbb.mq($to: small) { - --sbb-notification-padding-inline: var(--sbb-spacing-responsive-xxs) - var(--sbb-spacing-responsive-xxxs); + :host([size='s']) { + --sbb-notification-padding-inline: var(--sbb-spacing-responsive-xxs); + --sbb-notification-icon-margin-block-start: 0; } } @@ -160,26 +179,7 @@ .sbb-notification__icon { color: var(--sbb-notification-icon-color); - - @include sbb.mq($from: small) { - margin-block-start: calc( - ((1em * var(--sbb-typo-line-height-body-text)) - var(--sbb-size-icon-ui-small)) / 2 - ); - - :host(:where([data-slot-names~='title'], [title-content])) & { - margin-block-start: calc( - ( - (var(--sbb-font-size-title-5) * var(--sbb-typo-line-height-body-text)) - var( - --sbb-size-icon-ui-small - ) - ) / 2 - ); - } - - :host([size='s']) & { - margin-block-start: 0; - } - } + margin-block-start: var(--sbb-notification-icon-margin-block-start, 'initial'); } .sbb-notification__title { From e7e6eb64ee21bbb2ae7db066478703a278bffb29 Mon Sep 17 00:00:00 2001 From: Tommmaso Menga Date: Tue, 23 Apr 2024 09:29:28 +0200 Subject: [PATCH 7/9] style(notification): pr feedbacks --- src/components/notification/notification.scss | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/src/components/notification/notification.scss b/src/components/notification/notification.scss index 084f03c841..d534a8220d 100644 --- a/src/components/notification/notification.scss +++ b/src/components/notification/notification.scss @@ -13,6 +13,7 @@ --sbb-notification-padding-inline: var(--sbb-spacing-responsive-xs); --sbb-notification-color: var(--sbb-color-charcoal); --sbb-notification-icon-color: var(--sbb-notification-type-color); + --sbb-notification-icon-margin-block-start: 0; --sbb-notification-border-width: var(--sbb-border-width-1x); --sbb-notification-border: var(--sbb-notification-border-width) solid var(--sbb-notification-type-color); @@ -179,7 +180,7 @@ .sbb-notification__icon { color: var(--sbb-notification-icon-color); - margin-block-start: var(--sbb-notification-icon-margin-block-start, 'initial'); + margin-block-start: var(--sbb-notification-icon-margin-block-start); } .sbb-notification__title { From fc3d11257fb7dcd79e9af1fbf2424cd1ff66a81e Mon Sep 17 00:00:00 2001 From: Tommmaso Menga Date: Wed, 24 Apr 2024 08:56:08 +0200 Subject: [PATCH 8/9] chore: udpate snapshots --- .../__snapshots__/notification.spec.snap.js | 30 +++++++++---------- 1 file changed, 15 insertions(+), 15 deletions(-) diff --git a/src/components/notification/__snapshots__/notification.spec.snap.js b/src/components/notification/__snapshots__/notification.spec.snap.js index e46e14cb32..25415331b8 100644 --- a/src/components/notification/__snapshots__/notification.spec.snap.js +++ b/src/components/notification/__snapshots__/notification.spec.snap.js @@ -241,11 +241,11 @@ snapshots["sbb-notification A11y tree Firefox"] = snapshots["sbb-notification renders Dom"] = ` The quick brown fox jumps over the lazy dog. @@ -307,11 +307,11 @@ snapshots["sbb-notification renders ShadowDom"] = snapshots["sbb-notification renders with a title Dom"] = ` @@ -375,11 +375,11 @@ snapshots["sbb-notification renders with a title ShadowDom"] = snapshots["sbb-notification renders with a slotted title Dom"] = ` @@ -444,12 +444,12 @@ snapshots["sbb-notification renders with a slotted title ShadowDom"] = snapshots["sbb-notification renders without the close button Dom"] = ` @@ -491,11 +491,11 @@ snapshots["sbb-notification renders without the close button ShadowDom"] = snapshots["sbb-notification renders size s Dom"] = ` From 1d045e6473dde080681c5f3da37602f02e59c9aa Mon Sep 17 00:00:00 2001 From: Tommmaso Menga Date: Wed, 24 Apr 2024 09:16:20 +0200 Subject: [PATCH 9/9] chore: udpate snapshots --- .../__snapshots__/notification.spec.snap.js | 193 ------------------ .../notification/notification.spec.ts | 10 +- 2 files changed, 5 insertions(+), 198 deletions(-) diff --git a/src/components/notification/__snapshots__/notification.spec.snap.js b/src/components/notification/__snapshots__/notification.spec.snap.js index 25415331b8..125eb322ca 100644 --- a/src/components/notification/__snapshots__/notification.spec.snap.js +++ b/src/components/notification/__snapshots__/notification.spec.snap.js @@ -1,194 +1,6 @@ /* @web/test-runner snapshot v1 */ export const snapshots = {}; -snapshots["sbb-notification renders"] = -`
-
- - - - - - - - - - - - - - - -
-
-`; -/* end snapshot sbb-notification renders */ - -snapshots["sbb-notification renders with a title"] = -`
-
- - - - - Title - - - - - - - - - - - -
-
-`; -/* end snapshot sbb-notification renders with a title */ - -snapshots["sbb-notification renders with a slotted title"] = -`
-
- - - - - - - - - - - - - - - -
-
-`; -/* end snapshot sbb-notification renders with a slotted title */ - -snapshots["sbb-notification renders without the close button"] = -`
-
- - - - - Title - - - - - -
-
-`; -/* end snapshot sbb-notification renders without the close button */ - snapshots["sbb-notification A11y tree Chrome"] = `

{ @@ -245,7 +57,6 @@ snapshots["sbb-notification renders Dom"] = data-slot-names="unnamed" data-state="opening" size="m" - style="--sbb-notification-height: 76px;" type="info" > The quick brown fox jumps over the lazy dog. @@ -311,7 +122,6 @@ snapshots["sbb-notification renders with a title Dom"] = data-slot-names="unnamed" data-state="opening" size="m" - style="--sbb-notification-height: 88px;" title-content="Title" type="info" > @@ -379,7 +189,6 @@ snapshots["sbb-notification renders with a slotted title Dom"] = data-slot-names="title unnamed" data-state="opening" size="m" - style="--sbb-notification-height: 88px;" type="info" > @@ -449,7 +258,6 @@ snapshots["sbb-notification renders without the close button Dom"] = data-state="opening" readonly="" size="m" - style="--sbb-notification-height: 88px;" title-content="Title" type="info" > @@ -495,7 +303,6 @@ snapshots["sbb-notification renders size s Dom"] = data-slot-names="unnamed" data-state="opening" size="s" - style="--sbb-notification-height: 70px;" title-content="Title" type="info" > diff --git a/src/components/notification/notification.spec.ts b/src/components/notification/notification.spec.ts index 0769496247..3cb04fdb27 100644 --- a/src/components/notification/notification.spec.ts +++ b/src/components/notification/notification.spec.ts @@ -17,7 +17,7 @@ describe(`sbb-notification`, () => { }); it('Dom', async () => { - await expect(element).dom.to.be.equalSnapshot(); + await expect(element).dom.to.be.equalSnapshot({ ignoreAttributes: ['style'] }); }); it('ShadowDom', async () => { @@ -37,7 +37,7 @@ describe(`sbb-notification`, () => { }); it('Dom', async () => { - await expect(element).dom.to.be.equalSnapshot(); + await expect(element).dom.to.be.equalSnapshot({ ignoreAttributes: ['style'] }); }); it('ShadowDom', async () => { @@ -58,7 +58,7 @@ describe(`sbb-notification`, () => { }); it('Dom', async () => { - await expect(element).dom.to.be.equalSnapshot(); + await expect(element).dom.to.be.equalSnapshot({ ignoreAttributes: ['style'] }); }); it('ShadowDom', async () => { @@ -78,7 +78,7 @@ describe(`sbb-notification`, () => { }); it('Dom', async () => { - await expect(element).dom.to.be.equalSnapshot(); + await expect(element).dom.to.be.equalSnapshot({ ignoreAttributes: ['style'] }); }); it('ShadowDom', async () => { @@ -98,7 +98,7 @@ describe(`sbb-notification`, () => { }); it('Dom', async () => { - await expect(element).dom.to.be.equalSnapshot(); + await expect(element).dom.to.be.equalSnapshot({ ignoreAttributes: ['style'] }); }); it('ShadowDom', async () => {