feat(modal): add animation mixin, adapt tests and base close method o…

…n animationend event
ovh · Jul 29, 2024 · b7dcf11 · b7dcf11
1 parent f8561c5
commit b7dcf11
Show file tree

Hide file tree

Showing 5 changed files with 37 additions and 36 deletions.
diff --git a/packages/ods/src/components/modal/src/components/ods-modal/ods-modal.scss b/packages/ods/src/components/modal/src/components/ods-modal/ods-modal.scss
@@ -1,26 +1,8 @@
-@keyframes modal-open {
-  from {
-    transform: scale(0.8);
-    opacity: 0;
-  }
-
-  to {
-    transform: scale(1);
-    opacity: 1;
-  }
-}
+@use '../../../../../style/modal';
+@use '../../../../../style/focus';
 
-@keyframes modal-close {
-  from {
-    transform: scale(1);
-    opacity: 1;
-  }
-
-  to {
-    transform: scale(0.9);
-    opacity: 0;
-  }
-}
+@include modal.animation-mixin(modal-open);
+@include modal.animation-mixin(modal-close);
 
 :host(.ods-modal) {
   display: none;

diff --git a/packages/ods/src/components/modal/src/components/ods-modal/ods-modal.tsx b/packages/ods/src/components/modal/src/components/ods-modal/ods-modal.tsx
@@ -27,10 +27,13 @@ export class OdsModal {
     if (this.modalDialog) {
       this.modalDialog.classList.add('ods-modal__dialog--close-animation');
 
-      setTimeout(() => {
+      const onAnimationEnd = () => {
         this.isOpen = false;
         this.modalDialog.classList.remove('ods-modal__dialog--close-animation');
-      }, 100);
+        this.modalDialog.removeEventListener('animationend', onAnimationEnd);
+      };
+
+      this.modalDialog.addEventListener('animationend', onAnimationEnd);
     } else {
       this.isOpen = false;
     }

diff --git a/packages/ods/src/components/modal/tests/behaviour/ods-modal.e2e.ts b/packages/ods/src/components/modal/tests/behaviour/ods-modal.e2e.ts
@@ -62,16 +62,10 @@ describe('ods-modal behaviour', () => {
     const modal = await page.find('ods-modal');
     await modal.callMethod('close');
 
-    // Wait for the dialog to close
-    await new Promise((resolve) => setTimeout(resolve, 200));
-
     await page.waitForChanges();
 
-    const isOpen = await page.evaluate(() => {
-      const dialog = document.querySelector('ods-modal')?.shadowRoot?.querySelector('.ods-modal__dialog') as HTMLDialogElement;
-      return dialog && dialog.hasAttribute('open');
-    });
+    const closeAnimation = await page.find('ods-modal >>> .ods-modal__dialog--close-animation');
 
-    expect(isOpen).toBe(false);
+    expect(closeAnimation).not.toBeNull();
   });
 });
diff --git a/packages/ods/src/components/modal/tests/behaviour/ods-modal.spec.ts b/packages/ods/src/components/modal/tests/behaviour/ods-modal.spec.ts
@@ -29,9 +29,8 @@ describe('ods-modal behaviour', () => {
     await modal.close();
     await page.waitForChanges();
 
-    // Wait for the dialog to close
-    await new Promise((resolve) => setTimeout(resolve, 200));
+    const closeAnimation = page.root?.shadowRoot?.querySelector('.ods-modal__dialog--close-animation');
 
-    expect(modal.isOpen).toBe(false);
+    expect(closeAnimation).not.toBeNull();
   });
 });
diff --git a/packages/ods/src/style/_modal.scss b/packages/ods/src/style/_modal.scss
@@ -1,5 +1,29 @@
 $ods-modal-border-radius: var(--ods-border-radius-sm);
 
+@mixin animation-mixin($name) {
+  @keyframes modal-open {
+    0% {
+      transform: scale(0.8);
+      opacity: 0;
+    }
+    100% {
+      transform: scale(1);
+      opacity: 1;
+    }
+  }
+
+  @keyframes modal-close {
+    0% {
+      transform: scale(1);
+      opacity: 1;
+    }
+    100% {
+      transform: scale(0.9);
+      opacity: 0;
+    }
+  }
+}
+
 @mixin ods-modal() {
   position: fixed;
   z-index: 1;
@@ -11,7 +35,6 @@ $ods-modal-border-radius: var(--ods-border-radius-sm);
   width: 100%;
   max-width: 512px;
   overflow: hidden;
-  animation: modal-open 0.2s ease-in-out;
 
   &::backdrop {
     opacity: 0.75;