feat(Modal): add pop from center animation

mondaycom · Oct 10, 2024 · 2db54e9 · 2db54e9
1 parent 153d94f
commit 2db54e9
Show file tree

Hide file tree

Showing 3 changed files with 89 additions and 34 deletions.
diff --git a/packages/core/src/components/ModalNew/Modal/Modal.module.scss b/packages/core/src/components/ModalNew/Modal/Modal.module.scss
@@ -8,7 +8,6 @@
   position: fixed;
   top: 50%;
   left: 50%;
-  transform: translate(-50%, -50%);
 
   display: flex;
   flex-direction: column;

diff --git a/packages/core/src/components/ModalNew/Modal/Modal.tsx b/packages/core/src/components/ModalNew/Modal/Modal.tsx
@@ -2,6 +2,7 @@ import React, { forwardRef, useCallback, useMemo, useState } from "react";
 import cx from "classnames";
 import { RemoveScroll } from "react-remove-scroll";
 import FocusLock from "react-focus-lock";
+import { motion, AnimatePresence } from "framer-motion";
 import { getTestId } from "../../../tests/test-ids-utils";
 import { ComponentDefaultTestId } from "../../../tests/constants";
 import styles from "./Modal.module.scss";
@@ -13,6 +14,7 @@ import { ModalProvider } from "../context/ModalContext";
 import { ModalContextProps } from "../context/ModalContext.types";
 import useKeyEvent from "../../../hooks/useKeyEvent";
 import { keyCodes } from "../../../constants";
+import { modalAnimationCenterPopVariants, overlayAnimationVariants } from "../utils/animationVariants";
 
 const Modal = forwardRef(
   (
@@ -67,41 +69,54 @@ const Modal = forwardRef(
       keys: [keyCodes.ESCAPE]
     });
 
-    if (!show) {
-      return null;
-    }
-
     return (
-      <ModalProvider value={contextValue}>
-        <RemoveScroll>
-          <div
-            data-testid={getTestId(ComponentDefaultTestId.MODAL_NEXT_OVERLAY, id)}
-            className={styles.overlay}
-            onClick={onBackdropClick}
-            aria-hidden
-          />
-          <FocusLock returnFocus>
-            <div
-              ref={ref}
-              className={cx(styles.modal, getStyle(styles, camelCase("size-" + size)), className)}
-              id={id}
-              data-testid={dataTestId || getTestId(ComponentDefaultTestId.MODAL_NEXT, id)}
-              role="dialog"
-              aria-modal
-              aria-labelledby={titleId}
-              aria-describedby={descriptionId}
-            >
-              <ModalTopActions
-                renderAction={renderHeaderAction}
-                color={closeButtonTheme}
-                closeButtonAriaLabel={closeButtonAriaLabel}
-                onClose={onClose}
+      <AnimatePresence>
+        {show && (
+          <ModalProvider value={contextValue}>
+            <RemoveScroll>
+              <motion.div
+                variants={overlayAnimationVariants}
+                initial="exit"
+                animate="enter"
+                exit="exit"
+                data-testid={getTestId(ComponentDefaultTestId.MODAL_NEXT_OVERLAY, id)}
+                className={styles.overlay}
+                onClick={onBackdropClick}
+                aria-hidden
               />
-              {children}
-            </div>
-          </FocusLock>
-        </RemoveScroll>
-      </ModalProvider>
+              <FocusLock returnFocus>
+                <motion.div
+                  variants={modalAnimationCenterPopVariants}
+                  initial="exit"
+                  animate="enter"
+                  exit="exit"
+                  ref={ref}
+                  className={cx(
+                    styles.modal,
+                    getStyle(styles, camelCase("size-" + size)),
+                    { [styles.withHeaderAction]: !!renderHeaderAction },
+                    className
+                  )}
+                  id={id}
+                  data-testid={dataTestId || getTestId(ComponentDefaultTestId.MODAL_NEXT, id)}
+                  role="dialog"
+                  aria-modal
+                  aria-labelledby={titleId}
+                  aria-describedby={descriptionId}
+                >
+                  <ModalTopActions
+                    renderAction={renderHeaderAction}
+                    color={closeButtonTheme}
+                    closeButtonAriaLabel={closeButtonAriaLabel}
+                    onClose={onClose}
+                  />
+                  {children}
+                </motion.div>
+              </FocusLock>
+            </RemoveScroll>
+          </ModalProvider>
+        )}
+      </AnimatePresence>
     );
   }
 );

diff --git a/packages/core/src/components/ModalNew/utils/animationVariants.ts b/packages/core/src/components/ModalNew/utils/animationVariants.ts
@@ -0,0 +1,41 @@
+import { Variants } from "framer-motion";
+
+const easeInOut = [0, 0, 0.4, 1];
+
+const modalEnterTransition = {
+  duration: 0.15,
+  ease: easeInOut
+};
+
+const modalExitTransition = {
+  duration: 0.1,
+  ease: easeInOut
+};
+
+export const overlayAnimationVariants: Variants = {
+  enter: {
+    opacity: 1,
+    transition: modalEnterTransition
+  },
+  exit: {
+    opacity: 0,
+    transition: modalExitTransition
+  }
+};
+
+export const modalAnimationCenterPopVariants: Variants = {
+  enter: {
+    opacity: 1,
+    scale: 1,
+    x: "-50%",
+    y: "-50%",
+    transition: modalEnterTransition
+  },
+  exit: {
+    opacity: 0,
+    scale: 0.65,
+    x: "-50%",
+    y: "-50%",
+    transition: modalExitTransition
+  }
+};