fix(sbb-alert): refactor animation to properly work in Safari (#2394)

BREAKING CHANGE: renamed `willPresent` event to `willOpen` and `didPresent` to `didOpen`. Closes #2389
sbb-design-systems · Feb 8, 2024 · 30bf7c1 · 30bf7c1
1 parent 211b357
commit 30bf7c1
Show file tree

Hide file tree

Showing 8 changed files with 293 additions and 214 deletions.
diff --git a/src/components/alert/alert-group/alert-group.spec.ts b/src/components/alert/alert-group/alert-group.spec.ts
@@ -19,7 +19,7 @@ describe('sbb-alert-group', () => {
     expect(root).dom.to.be.equal(
       `
         <sbb-alert-group accessibility-title='Disruptions' accessibility-level='3' role='status'>
-          <sbb-alert title-content='Interruption between Genève and Lausanne' href='https://www.sbb.ch' size="m">
+          <sbb-alert title-content='Interruption between Genève and Lausanne' href='https://www.sbb.ch' size="m" data-state="opening">
             The rail traffic between Allaman and Morges is interrupted. All trains are cancelled.
           </sbb-alert>
         </sbb-alert-group>
@@ -46,6 +46,7 @@ describe('sbb-alert-group', () => {
         <sbb-alert
           title-content="Interruption between Genève and Lausanne"
           href="https://www.sbb.ch"
+          data-state="opening"
         >
           The rail traffic between Allaman and Morges is interrupted. All trains are cancelled.
         </sbb-alert>
@@ -58,7 +59,7 @@ describe('sbb-alert-group', () => {
           <span slot="accessibility-title">
             Interruptions
           </span>
-          <sbb-alert title-content='Interruption between Genève and Lausanne' href='https://www.sbb.ch' size="m">
+          <sbb-alert title-content='Interruption between Genève and Lausanne' href='https://www.sbb.ch' size="m" data-state="opening">
             The rail traffic between Allaman and Morges is interrupted. All trains are cancelled.
           </sbb-alert>
         </sbb-alert-group>

diff --git a/src/components/alert/alert/__snapshots__/alert.spec.snap.js b/src/components/alert/alert/__snapshots__/alert.spec.snap.js
@@ -0,0 +1,140 @@
+/* @web/test-runner snapshot v1 */
+export const snapshots = {};
+
+snapshots["sbb-alert should render default properties"] = 
+`<div class="sbb-alert__transition-wrapper">
+  <div class="sbb-alert__transition-sub-wrapper">
+    <div class="sbb-alert">
+      <span class="sbb-alert__icon">
+        <slot name="icon">
+          <sbb-icon
+            aria-hidden="true"
+            data-namespace="default"
+            name="info"
+            role="img"
+          >
+          </sbb-icon>
+        </slot>
+      </span>
+      <span class="sbb-alert__content">
+        <sbb-title
+          aria-level="3"
+          class="sbb-alert__title"
+          level="3"
+          negative=""
+          role="heading"
+          visual-level="5"
+        >
+          <slot name="title">
+            Interruption
+          </slot>
+        </sbb-title>
+        <p class="sbb-alert__content-slot">
+          <slot>
+          </slot>
+        </p>
+      </span>
+      <span class="sbb-alert__close-button-wrapper">
+        <sbb-divider
+          aria-orientation="vertical"
+          class="sbb-alert__close-button-divider"
+          negative=""
+          orientation="vertical"
+          role="separator"
+        >
+        </sbb-divider>
+        <sbb-button
+          aria-label="Close message"
+          class="sbb-alert__close-button"
+          dir="ltr"
+          icon-name="cross-small"
+          negative=""
+          role="button"
+          size="m"
+          tabindex="0"
+          variant="transparent"
+        >
+        </sbb-button>
+      </span>
+    </div>
+  </div>
+</div>
+`;
+/* end snapshot sbb-alert should render default properties */
+
+snapshots["sbb-alert should render customized properties"] = 
+`<div class="sbb-alert__transition-wrapper">
+  <div class="sbb-alert__transition-sub-wrapper">
+    <div class="sbb-alert">
+      <span class="sbb-alert__icon">
+        <slot name="icon">
+          <sbb-icon
+            aria-hidden="true"
+            data-namespace="default"
+            name="disruption"
+            role="img"
+          >
+          </sbb-icon>
+        </slot>
+      </span>
+      <span class="sbb-alert__content">
+        <sbb-title
+          aria-level="2"
+          class="sbb-alert__title"
+          level="2"
+          negative=""
+          role="heading"
+          visual-level="3"
+        >
+          <slot name="title">
+            Interruption
+          </slot>
+        </sbb-title>
+        <p class="sbb-alert__content-slot">
+          <slot>
+          </slot>
+        </p>
+        <sbb-link
+          aria-label="label"
+          data-slot-names="unnamed"
+          dir="ltr"
+          href="https://www.sbb.ch"
+          negative=""
+          rel="noopener"
+          role="link"
+          size="s"
+          tabindex="0"
+          target="_blank"
+          variant="inline"
+        >
+          Show much more
+        </sbb-link>
+      </span>
+      <span class="sbb-alert__close-button-wrapper">
+        <sbb-divider
+          aria-orientation="vertical"
+          class="sbb-alert__close-button-divider"
+          negative=""
+          orientation="vertical"
+          role="separator"
+        >
+        </sbb-divider>
+        <sbb-button
+          aria-label="Close message"
+          class="sbb-alert__close-button"
+          dir="ltr"
+          icon-name="cross-small"
+          negative=""
+          role="button"
+          size="m"
+          tabindex="0"
+          variant="transparent"
+        >
+        </sbb-button>
+      </span>
+    </div>
+  </div>
+</div>
+`;
+/* end snapshot sbb-alert should render customized properties */
+
diff --git a/src/components/alert/alert/alert.e2e.ts b/src/components/alert/alert/alert.e2e.ts
@@ -14,14 +14,14 @@ describe('sbb-alert', () => {
   });
 
   it('should fire animation events', async () => {
-    const willPresentSpy = new EventSpy(SbbAlertElement.events.willPresent);
-    const didPresentSpy = new EventSpy(SbbAlertElement.events.didPresent);
+    const willOpenSpy = new EventSpy(SbbAlertElement.events.willOpen);
+    const didOpenSpy = new EventSpy(SbbAlertElement.events.didOpen);
 
     await fixture(html`<sbb-alert title-content="disruption">Interruption</sbb-alert>`);
 
-    await waitForCondition(() => willPresentSpy.events.length === 1);
-    expect(willPresentSpy.count).to.be.equal(1);
-    await waitForCondition(() => didPresentSpy.events.length === 1);
-    expect(didPresentSpy.count).to.be.equal(1);
+    await waitForCondition(() => willOpenSpy.events.length === 1);
+    expect(willOpenSpy.count).to.be.equal(1);
+    await waitForCondition(() => didOpenSpy.events.length === 1);
+    expect(didOpenSpy.count).to.be.equal(1);
   });
 });
diff --git a/src/components/alert/alert/alert.scss b/src/components/alert/alert/alert.scss
@@ -1,5 +1,11 @@
 @use '../../core/styles' as sbb;
 
+// Open/Close animation vars
+$open-anim-rows-from: 0fr;
+$open-anim-rows-to: 1fr;
+$open-anim-opacity-from: 0;
+$open-anim-opacity-to: 1;
+
 // Default component properties, defined for :host. Properties which can not
 // travel the shadow boundary are defined through this mixin
 @include sbb.host-component-properties;
@@ -13,6 +19,7 @@
   --sbb-alert-icon-size: #{sbb.px-to-rem-build(20)};
   --sbb-alert-close-icon-size: var(--sbb-size-icon-ui-small);
   --sbb-alert-gap: var(--sbb-spacing-fixed-2x) var(--sbb-spacing-responsive-xs);
+  --sbb-alert-animation-duration: var(--sbb-animation-duration-6x);
 
   @include sbb.mq($from: medium) {
     --sbb-alert-icon-size: #{sbb.px-to-rem-build(28)};
@@ -26,16 +33,39 @@
   }
 }
 
+:host([disable-animation]) {
+  // To avoid flickering, we need 0 instead of 0.1ms here.
+  --sbb-alert-animation-duration: 0ms;
+}
+
 :host([size='l']) {
-  --sbb-alert-icon-size: #{sbb.px-to-rem-build(24)};
+  --sbb-alert-icon-size: var(--sbb-size-icon-ui-small);
 
   @include sbb.mq($from: medium) {
     --sbb-alert-icon-size: #{sbb.px-to-rem-build(34)};
   }
 }
 
 .sbb-alert__transition-wrapper {
-  transition: height var(--sbb-animation-duration-6x) ease-in;
+  display: grid;
+  grid-template-rows: #{$open-anim-rows-from};
+  opacity: #{$open-anim-opacity-from};
+
+  :host([data-state='opened']) & {
+    grid-template-rows: #{$open-anim-rows-to};
+    opacity: #{$open-anim-opacity-to};
+  }
+
+  :host([data-state='opening']) & {
+    animation-name: open, open-opacity;
+    animation-fill-mode: forwards;
+    animation-duration: var(--sbb-alert-animation-duration);
+    animation-timing-function: ease-in;
+    animation-delay: 0s, var(--sbb-alert-animation-duration);
+  }
+}
+
+.sbb-alert__transition-sub-wrapper {
   overflow: hidden;
 }
 
@@ -52,7 +82,6 @@
   color: var(--sbb-alert-color);
   background-color: var(--sbb-alert-background-color);
   border-radius: var(--sbb-alert-border-radius);
-  transition: opacity var(--sbb-animation-duration-6x) ease-in;
 
   @include sbb.mq($from: small) {
     grid-template-columns: auto 1fr auto;
@@ -114,3 +143,23 @@
     height: calc(100% - (var(--sbb-spacing-fixed-1x) * 2));
   }
 }
+
+@keyframes open {
+  from {
+    grid-template-rows: #{$open-anim-rows-from};
+  }
+
+  to {
+    grid-template-rows: #{$open-anim-rows-to};
+  }
+}
+
+@keyframes open-opacity {
+  from {
+    opacity: #{$open-anim-opacity-from};
+  }
+
+  to {
+    opacity: #{$open-anim-opacity-to};
+  }
+}
diff --git a/src/components/alert/alert/alert.spec.ts b/src/components/alert/alert/alert.spec.ts
@@ -19,41 +19,13 @@ describe('sbb-alert', () => {
 
     expect(element).dom.to.be.equal(
       `
-        <sbb-alert disable-animation title-content="Interruption" size="m">
+        <sbb-alert disable-animation title-content="Interruption" size="m" data-state="opening">
            Alert content
         </sbb-alert>
       `,
     );
-    expect(element).shadowDom.to.be.equal(
-      `
-        <div class="sbb-alert__transition-wrapper">
-          <div class="sbb-alert">
-            <span class="sbb-alert__icon">
-              <slot name="icon">
-                <sbb-icon
-                  aria-hidden="true"
-                  data-namespace="default"
-                  name="info"
-                  role="img"
-                ></sbb-icon>
-              </slot>
-            </span>
-            <span class="sbb-alert__content">
-              <sbb-title class="sbb-alert__title" aria-level="3" level="3" negative visual-level="5" role="heading">
-                <slot name="title">Interruption</slot>
-              </sbb-title>
-              <p class="sbb-alert__content-slot">
-                <slot></slot>
-              </p>
-            </span>
-            <span class="sbb-alert__close-button-wrapper">
-            <sbb-divider aria-orientation="vertical" role="separator" class="sbb-alert__close-button-divider" negative="" orientation="vertical" aria-orientation="vertical"></sbb-divider>
-            <sbb-button aria-label="Close message" dir="ltr" class="sbb-alert__close-button" icon-name="cross-small" negative role="button" size="m" tabindex="0" variant="transparent"></sbb-button>
-            </span>
-          </div>
-        </div>
-      `,
-    );
+
+    await expect(element).shadowDom.to.equalSnapshot();
   });
 
   it('should render customized properties', async () => {
@@ -77,44 +49,23 @@ describe('sbb-alert', () => {
 
     expect(element).dom.to.be.equal(
       `
-        <sbb-alert title-content="Interruption" title-level="2" size="l" disable-animation icon-name="disruption" accessibility-label="label" href="https://www.sbb.ch" rel="noopener" target="_blank" link-content="Show much more">
+        <sbb-alert
+          title-content="Interruption"
+          title-level="2"
+          size="l"
+          disable-animation
+          icon-name="disruption"
+          accessibility-label="label"
+          href="https://www.sbb.ch"
+          rel="noopener" target="_blank"
+          link-content="Show much more"
+          data-state="opening"
+        >
            Alert content
         </sbb-alert>
       `,
     );
-    expect(element).shadowDom.to.be.equal(
-      `
-        <div class="sbb-alert__transition-wrapper">
-          <div class="sbb-alert">
-            <span class="sbb-alert__icon">
-              <slot name="icon">
-                <sbb-icon
-                  aria-hidden="true"
-                  data-namespace="default"
-                  name="disruption"
-                  role="img"
-                ></sbb-icon>
-              </slot>
-            </span>
-            <span class="sbb-alert__content">
-              <sbb-title class="sbb-alert__title" aria-level="2" role="heading" level="2" negative visual-level="3">
-                <slot name="title">Interruption</slot>
-              </sbb-title>
-              <p class="sbb-alert__content-slot">
-                <slot></slot>
-              </p>
-              <sbb-link negative variant="inline" aria-label="label" dir="ltr" role="link" size="s" tabindex="0" href="https://www.sbb.ch" rel="noopener" target="_blank" data-slot-names="unnamed">
-                Show much more
-              </sbb-link>
-            </span>
-            <span class="sbb-alert__close-button-wrapper">
-            <sbb-divider class="sbb-alert__close-button-divider" negative aria-orientation="vertical" orientation="vertical" role="separator"></sbb-divider>
-            <sbb-button aria-label="Close message" class="sbb-alert__close-button" dir="ltr" icon-name="cross-small" negative size="m" role="button" tabindex="0" variant="transparent"></sbb-button>
-            </span>
-          </div>
-        </div>
-      `,
-    );
+    await expect(element).shadowDom.to.equalSnapshot();
   });
 
   it('should hide close button in readonly mode', async () => {

diff --git a/src/components/alert/alert/alert.stories.ts b/src/components/alert/alert/alert.stories.ts
@@ -218,8 +218,8 @@ const meta: Meta = {
   parameters: {
     actions: {
       handles: [
-        SbbAlertElement.events.willPresent,
-        SbbAlertElement.events.didPresent,
+        SbbAlertElement.events.willOpen,
+        SbbAlertElement.events.didOpen,
         SbbAlertElement.events.dismissalRequested,
       ],
     },