feat(Modal): add full-view size for Modal

Author: YossiSaadi

packages/core/src/components/Modal/Modal/Modal.module.scss

@@ -1,3 +1,5 @@
+$full-view-margin: 40px;
+
 .container {
   position: fixed;
   inset: 0;
@@ -12,7 +14,8 @@
 }
 
 .modal {
-  --top-actions-spacing: var(--spacing-large);
+  --top-actions-margin-inline: var(--spacing-large);
+  --top-actions-margin-block: var(--spacing-large);
   --top-actions-width: var(--spacing-xl);
   --modal-inline-padding: var(--spacing-xl);
 
@@ -28,6 +31,7 @@
   overflow: hidden;
   border-radius: var(--border-radius-big);
   box-shadow: var(--box-shadow-large);
+  outline: none;
 
   &.withHeaderAction {
     --top-actions-width: calc(var(--spacing-xl) * 2);
@@ -47,4 +51,20 @@
     --modal-max-height: 80%;
     --modal-width: 840px;
   }
+
+  &.sizeFullView {
+    --top-actions-margin-inline: var(--spacing-xl);
+    --modal-max-height: 100%;
+    --modal-width: auto;
+
+    position: fixed;
+    inset: 0;
+    height: calc(100% - $full-view-margin);
+
+    margin-inline: $full-view-margin;
+    margin-block-start: $full-view-margin;
+
+    border-end-start-radius: unset;
+    border-end-end-radius: unset;
+  }
 }

packages/core/src/components/Modal/Modal/Modal.tsx

@@ -16,6 +16,7 @@ import { keyCodes } from "../../../constants";
 import {
   modalAnimationAnchorPopVariants,
   modalAnimationCenterPopVariants,
+  modalAnimationFullViewVariants,
   modalAnimationOverlayVariants
 } from "../utils/animationVariants";
 import { createPortal } from "react-dom";
@@ -98,9 +99,12 @@ const Modal = forwardRef(
       [alertModal, onClose, show]
     );
 
-    const modalAnimationVariants = anchorElementRef?.current
-      ? modalAnimationAnchorPopVariants
-      : modalAnimationCenterPopVariants;
+    const modalAnimationVariants =
+      size === "full-view"
+        ? modalAnimationFullViewVariants
+        : anchorElementRef?.current
+        ? modalAnimationAnchorPopVariants
+        : modalAnimationCenterPopVariants;
 
     const zIndexStyle = zIndex ? ({ "--monday-modal-z-index": zIndex } as React.CSSProperties) : {};
 

packages/core/src/components/Modal/Modal/Modal.types.tsx

@@ -3,7 +3,7 @@ import React from "react";
 import { ModalTopActionsProps } from "../ModalTopActions/ModalTopActions.types";
 import { PortalTarget } from "../hooks/usePortalTarget/usePortalTarget.types";
 
-export type ModalSize = "small" | "medium" | "large";
+export type ModalSize = "small" | "medium" | "large" | "full-view";
 
 export type ModalCloseEvent =
   | React.MouseEvent<HTMLDivElement | HTMLButtonElement>

packages/core/src/components/Modal/ModalTopActions/ModalTopActions.module.scss

@@ -2,6 +2,6 @@
   display: flex;
   align-items: center;
   position: absolute;
-  right: var(--top-actions-spacing);
-  top: var(--top-actions-spacing);
+  right: var(--top-actions-margin-inline);
+  top: var(--top-actions-margin-block);
 }

packages/core/src/components/Modal/layouts/ModalBasicLayout/ModalBasicLayout.module.scss

@@ -6,7 +6,7 @@
   .header {
     width: 100%;
     margin-block: var(--spacing-xl) var(--spacing-large);
-    padding-inline-end: calc(var(--top-actions-spacing) + var(--top-actions-width) + var(--spacing-medium));
+    padding-inline-end: calc(var(--top-actions-margin-inline) + var(--top-actions-width) + var(--spacing-medium));
     padding-inline-start: var(--modal-inline-padding);
   }
 

packages/core/src/components/Modal/utils/animationVariants.ts

@@ -1,6 +1,9 @@
 import { Variants } from "framer-motion";
 import { RefObject } from "react";
 
+const enterEase = [0.0, 0.0, 0.4, 1.0];
+const exitEase = [0.6, 0.0, 1.0, 1.0];
+
 export const modalAnimationOverlayVariants: Variants = {
   initial: {
     opacity: 0
@@ -9,14 +12,14 @@ export const modalAnimationOverlayVariants: Variants = {
     opacity: 0.7,
     transition: {
       duration: 0.1,
-      ease: [0.0, 0.0, 0.4, 1.0]
+      ease: enterEase
     }
   },
   exit: {
     opacity: 0,
     transition: {
       duration: 0.1,
-      ease: [0.6, 0.0, 1.0, 1.0]
+      ease: exitEase
     }
   }
 };
@@ -35,7 +38,7 @@ export const modalAnimationCenterPopVariants: Variants = {
     y: "-50%",
     transition: {
       duration: 0.15,
-      ease: [0.0, 0.0, 0.4, 1.0],
+      ease: enterEase,
       times: [0, 0.5, 1]
     }
   },
@@ -46,7 +49,7 @@ export const modalAnimationCenterPopVariants: Variants = {
     y: "-50%",
     transition: {
       duration: 0.1,
-      ease: [0.6, 0.0, 1.0, 1.0],
+      ease: exitEase,
       times: [0, 0.5, 1]
     }
   }
@@ -79,7 +82,7 @@ export const modalAnimationAnchorPopVariants: Variants = {
     y: "-50%",
     transition: {
       duration: 0.2,
-      ease: [0.0, 0.0, 0.4, 1.0],
+      ease: enterEase,
       times: [0, 0.4, 1]
     }
   },
@@ -100,9 +103,29 @@ export const modalAnimationAnchorPopVariants: Variants = {
       y,
       transition: {
         duration: 0.15,
-        ease: [0.6, 0.0, 1.0, 1.0],
+        ease: exitEase,
         times: [0, 0.6, 1]
       }
     };
   }
 };
+
+export const modalAnimationFullViewVariants: Variants = {
+  enter: {
+    opacity: [0.3, 1, 1],
+    y: [24, 24, 0],
+    transition: {
+      duration: 0.2,
+      ease: enterEase,
+      times: [0, 0.33, 1]
+    }
+  },
+  exit: {
+    opacity: 0,
+    y: 24,
+    transition: {
+      duration: 0.1,
+      ease: exitEase
+    }
+  }
+};