[No-JIRA] Add animation when opening BpkModalV2 (#2877)

* [NO-JIRA] Update BpkModalV2 * fn * update snaps * showHeader * showHeader * test name * refactor tests * show header * unused show header * and another one * [NO-JIRA] Add animation to BpkModalV2 * fix stylelint * dumb * add css for polyfill * ease-in-out * mistake * fix backdrop click for polyfill * ternaries * modal
Skyscanner · Jun 15, 2023 · d0d72a1 · d0d72a1
1 parent 153454f
commit d0d72a1
Show file tree

Hide file tree

Showing 2 changed files with 49 additions and 32 deletions.
diff --git a/packages/bpk-component-modal/src/BpkModalV2/BpKModal.module.scss b/packages/bpk-component-modal/src/BpkModalV2/BpKModal.module.scss
@@ -18,13 +18,6 @@
 
 @import '~bpk-mixins/index.scss';
 
-@mixin center-dialog {
-  top: 50%;
-  transform: translateY(-50%);
-  border-radius: $bpk-border-radius-md;
-  inset-block-start: 50%;
-}
-
 @mixin header {
   display: flex;
   min-height: bpk-spacing-lg();
@@ -33,6 +26,26 @@
   align-items: center;
 }
 
+@keyframes bpk-modal-scrim {
+  0% {
+    opacity: $bpk-modal-initial-opacity;
+  }
+
+  100% {
+    opacity: $bpk-modal-opacity;
+  }
+}
+
+@keyframes bpk-modal-scale {
+  0% {
+    transform: scale(0.9);
+  }
+
+  100% {
+    transform: scale(1);
+  }
+}
+
 .bpk-modal-wrapper.bpk-modal-polyfill {
   .bpk-modal-backdrop {
     position: fixed;
@@ -41,7 +54,9 @@
     bottom: 0;
     left: 0;
     z-index: 0;
+    margin: 0 auto;
     background-color: $bpk-scrim-day;
+    animation: bpk-modal-scrim $bpk-duration-sm ease-in-out;
     inset: 0;
     inset-block-end: 0;
     inset-inline: 0;
@@ -50,8 +65,12 @@
 
   .bpk-modal {
     position: fixed;
+    top: 50%;
+    left: 50%;
     display: block;
     z-index: 1;
+    transform: translate(-50%, -50%) scale(1);
+    transition: transform $bpk-duration-sm ease-in-out $bpk-duration-sm;
   }
 
   .bpk-modal:not([data-open='true']),
@@ -61,21 +80,11 @@
 }
 
 .bpk-modal {
-  top: 0;
-  right: 0;
-  left: 0;
-  width: 100%;
-  max-width: 100%;
-  height: 100%;
-  max-height: 100%;
-  margin: 0 auto;
   padding: 0;
   border: none;
+  border-radius: $bpk-border-radius-md;
   background: $bpk-modal-background-color;
   overflow-y: scroll;
-  inset-block-start: 0;
-  inset-inline: 0;
-  inset-inline-end: 0;
   scrollbar-width: none;
 
   @include bpk-box-shadow-xl;
@@ -86,8 +95,6 @@
     height: fit-content;
     max-height: 90%;
 
-    @include center-dialog;
-
     &--full-screen-desktop {
       width: 100%;
       height: 100%;
@@ -100,14 +107,16 @@
     }
   }
 
+  &[open] {
+    animation: bpk-modal-scale $bpk-duration-sm ease-in-out;
+  }
+
   &--no-full-screen-mobile {
     width: 90%;
     max-width: none;
     height: fit-content;
     max-height: 90%;
 
-    @include center-dialog;
-
     @include bpk-breakpoint-above-mobile {
       width: $bpk-modal-max-width;
       max-width: none;
@@ -117,6 +126,7 @@
   &::backdrop {
     position: fixed;
     background-color: $bpk-scrim-day;
+    animation: bpk-modal-scrim $bpk-duration-sm ease-in-out;
     inset: 0;
     inset-block-end: 0;
     inset-inline: 0;

diff --git a/packages/bpk-component-modal/src/BpkModalV2/BpkModal.tsx b/packages/bpk-component-modal/src/BpkModalV2/BpkModal.tsx
@@ -116,22 +116,29 @@ export const BpkModalV2 = (props: Props) => {
       ref.current?.showModal?.();
 
       const dialog = document.getElementById(`${id}`);
-      if (dialog) {
-        dialog.addEventListener('click', (event: Event) => {
-          const { target } = event;
-
-          if (target instanceof HTMLElement && target.id === `${id}`) {
-            ref.current?.close?.();
-          }
-        });
-      }
+      const dialogWithPolyfill = document.getElementById(`${id}-polyfill`);
+
+      const handleBackdropClick = (modal: HTMLElement | null) => {
+        if (modal) {
+          modal.addEventListener('click', (event: Event) => {
+            const { target } = event;
+
+            if (target === modal) {
+              modal === dialog ? ref.current?.close?.() : onClose();
+            }
+          });
+        }
+      };
+
+      handleBackdropClick(dialog);
+      handleBackdropClick(dialogWithPolyfill);
     } else {
       ref.current?.close?.();
     }
 
     setPageProperties({ isDialogOpen: isOpen });
     return () => setPageProperties({ isDialogOpen: false });
-  }, [id, isOpen]);
+  }, [id, isOpen, onClose]);
 
   const classNames = getClassName(
     'bpk-modal',