fix(sbb-notification): avoid resizeObserver loop warning

src/elements/notification/notification.stories.ts

@@ -47,10 +47,10 @@ const animation: InputType = {
 
 const basicArgTypes: ArgTypes = {
   'title-content': titleContent,
-  type: type,
-  size: size,
-  readonly: readonly,
-  animation: animation,
+  type,
+  size,
+  readonly,
+  animation,
 };
 
 const basicArgs: Args = {

src/elements/notification/notification.ts

@@ -50,19 +50,13 @@ export class SbbNotificationElement extends LitElement {
     didClose: 'didClose',
   } as const;
 
-  /**
-   * The type of the notification.
-   */
+  /** The type of the notification. */
   @property({ reflect: true }) public type: 'info' | 'success' | 'warn' | 'error' = 'info';
 
-  /**
-   * Content of title.
-   */
+  /** Content of title. */
   @property({ attribute: 'title-content', reflect: true }) public titleContent?: string;
 
-  /**
-   * Level of title, it will be rendered as heading tag (e.g. h3). Defaults to level 3.
-   */
+  /** Level of title, it will be rendered as heading tag (e.g. h3). Defaults to level 3. */
   @property({ attribute: 'title-level' }) public titleLevel: SbbTitleLevel = '3';
 
   /**
@@ -74,14 +68,10 @@ export class SbbNotificationElement extends LitElement {
   /** Size variant, either s or m. */
   @property({ reflect: true }) public size: 'm' | 's' = 'm';
 
-  /**
-   * The enabled animations.
-   */
+  /** The enabled animations. */
   @property({ reflect: true }) public animation: 'open' | 'close' | 'all' | 'none' = 'all';
 
-  /**
-   * The state of the notification.
-   */
+  /** The state of the notification. */
   private set _state(state: SbbOpenedClosedState) {
     this.setAttribute('data-state', state);
   }
@@ -175,14 +165,15 @@ export class SbbNotificationElement extends LitElement {
       clearTimeout(this._resizeObserverTimeout);
     }
 
-    this.toggleAttribute('data-resize-disable-animation', true);
-    this._setNotificationHeight();
-
     // Disable the animation when resizing the notification to avoid strange height transition effects.
+    this.toggleAttribute('data-resize-disable-animation', true);
     this._resizeObserverTimeout = setTimeout(
       () => this.removeAttribute('data-resize-disable-animation'),
       DEBOUNCE_TIME,
     );
+
+    // To avoid ResizeObserver loops, we set the height a tick later.
+    setTimeout(() => this._setNotificationHeight());
   }
 
   private _onNotificationAnimationEnd(event: AnimationEvent): void {

src/elements/notification/notification.visual.spec.ts

@@ -0,0 +1,84 @@
+import { html, nothing, type TemplateResult } from 'lit';
+import { repeat } from 'lit/directives/repeat.js';
+
+import { describeEach, describeViewports, visualDiffDefault } from '../core/testing/private.js';
+
+import '../link/link.js';
+import './notification.js';
+
+describe(`sbb-notification`, () => {
+  const defaultArgs = {
+    type: 'info',
+    size: 'm',
+    readonly: false,
+    title: true,
+    slotted: false,
+  };
+
+  const notificationTemplate = ({
+    type,
+    size,
+    readonly,
+    title,
+    slotted,
+  }: typeof defaultArgs): TemplateResult => html`
+    <sbb-notification
+      title-content=${title && !slotted ? 'Title' : nothing}
+      size=${size}
+      ?readonly=${readonly}
+      type=${type}
+      style="--sbb-notification-margin: 0 0 var(--sbb-spacing-fixed-4x) 0;"
+    >
+      ${title && slotted ? html`<span slot="title">Slotted title</span>` : nothing} The quick brown
+      fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog.&nbsp;
+      <sbb-link href="/">Link one</sbb-link>
+      <sbb-link href="/">Link two</sbb-link>
+      <sbb-link href="/">Link three</sbb-link>
+    </sbb-notification>
+  `;
+
+  const textTemplate = html`
+    <p style="margin: 0;">
+      Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut
+      labore et dolore magna aliqua. <sbb-link href="/"> Link </sbb-link>
+    </p>
+  `;
+
+  const states = {
+    readonly: [false, true],
+    slottedTitle: [false, true],
+  };
+
+  const types = ['info', 'success', 'warn', 'error'];
+  const visualStates = {
+    state: [...types.map((type) => ({ type, multiple: false })), { multiple: true, type: 'all' }],
+    size: ['s', 'm'],
+  };
+
+  describeViewports({ viewports: ['zero', 'small', 'medium'] }, () => {
+    describeEach(states, ({ readonly, slottedTitle }) => {
+      it(
+        visualDiffDefault.name,
+        visualDiffDefault.with(async (setup) => {
+          const args = { ...defaultArgs, readonly, title: slottedTitle, slotted: slottedTitle };
+          await setup.withFixture(html`${notificationTemplate(args)} ${textTemplate}`);
+        }),
+      );
+    });
+
+    describeEach(visualStates, ({ state, size }) => {
+      it(
+        visualDiffDefault.name,
+        visualDiffDefault.with(async (setup) => {
+          await setup.withFixture(html`
+            ${repeat(
+              state.multiple ? types : [state.type],
+              (type: string) => html`${notificationTemplate({ ...defaultArgs, type, size })}`,
+            )}
+            ${textTemplate}
+          `);
+        }),
+      );
+    });
+  });
+});

tools/web-test-runner/preload-icons.ts

@@ -28,6 +28,7 @@ const preloadIconList = [
   'chevron-small-right-small',
   'chevron-small-up-small',
   'circle-cross-small',
+  'circle-exclamation-point-small',
   'circle-information-large',
   'circle-information-medium',
   'circle-information-small',