feat(Modal): export new Modal component to /next (#2641)

Author: YossiSaadi

packages/core/.storybook/manager.jsx

@@ -16,7 +16,7 @@ addons.setConfig({
       const [statusMatch, statusType] = statusRegex.exec(name) || [];
 
       if (statusMatch) {
-        return <SidebarItem status={statusType}>{name.replace(statusMatch, "").trim()}</SidebarItem>;
+        return <SidebarItem status={statusType.toLowerCase()}>{name.replace(statusMatch, "").trim()}</SidebarItem>;
       }
 
       const { status: storyStatus } = parameters;

packages/core/src/__tests__/__snapshots__/exports.test.ts.snap

@@ -110,4 +110,16 @@ exports[`exports should export all components 1`] = `
 ]
 `;
 
-exports[`exports should export next all components 1`] = `[]`;
+exports[`exports should export next all components 1`] = `
+[
+  "Modal",
+  "ModalBasicLayout",
+  "ModalContent",
+  "ModalFooter",
+  "ModalFooterWizard",
+  "ModalHeader",
+  "ModalMedia",
+  "ModalMediaLayout",
+  "ModalSideBySideLayout",
+]
+`;

packages/core/src/components/LegacyModal/__stories__/LegacyModal.mdx

@@ -53,7 +53,7 @@ const modalTemplate = ({ onClose, ...modalProps }: ModalProps) => {
 };
 
 export default {
-  title: "Components/Modal",
+  title: "Components/Modal [Deprecated]",
   component: Modal,
   subcomponents: {
     ModalHeader,

packages/core/src/components/LegacyModal/__stories__/LegacyModal.stories.tsx

@@ -2,7 +2,7 @@
   --monday-modal-z-index: 10000;
   position: fixed;
   inset: 0;
-  background-color: rgba(41, 47, 76, 0.7);
+  background-color: var(--color-surface);
   z-index: var(--monday-modal-z-index);
 }
 

packages/core/src/components/ModalNew/Modal/Modal.module.scss renamed to packages/core/src/components/Modal/Modal/Modal.module.scss

@@ -98,7 +98,7 @@ const Modal = forwardRef(
                   <motion.div
                     ref={overlayRef}
                     variants={modalAnimationOverlayVariants}
-                    initial={false}
+                    initial="initial"
                     animate="enter"
                     exit="exit"
                     data-testid={getTestId(ComponentDefaultTestId.MODAL_NEXT_OVERLAY, id)}

packages/core/src/components/ModalNew/Modal/Modal.tsx renamed to packages/core/src/components/Modal/Modal/Modal.tsx

@@ -4,7 +4,6 @@ import { StorybookLink, Tip } from "vibe-storybook-components";
 import { useAfterFirstRender } from "../../../../hooks";
 import cx from "classnames";
 import styles from "./Modal.stories.module.scss";
-import { createPortal } from "react-dom";
 import { getStyle } from "../../../../helpers/typesciptCssModulesHelper";
 
 export const OpenedModalPreview = forwardRef(
@@ -25,14 +24,14 @@ export const OpenedModalPreview = forwardRef(
     const isAfterFirstRender = useAfterFirstRender();
     return (
       <div
-        className={cx(styles.preview, getStyle(styles, size))}
+        className={cx(styles.preview, { [getStyle(styles, size)]: isDocsView })}
         ref={ref}
         // workaround to prevent modal from autofocusing on page load
         // autofocus would work as expected when modal closes and reopens
         {...(!isAfterFirstRender.current && isDocsView && { "data-no-autofocus": true })}
       >
         <Button onClick={onOpenModalClick}>Open Modal</Button>
-        {isDocsView ? modal : createPortal(modal, document.body)}
+        {modal}
       </div>
     );
   }

packages/core/src/components/ModalNew/Modal/Modal.types.tsx renamed to packages/core/src/components/Modal/Modal/Modal.types.tsx

@@ -7,7 +7,7 @@
 .preview {
   padding-inline-start: 32px;
   padding-block-start: 40px;
-  height: 360px;
+  height: 100vh;
   width: 100%;
   container-type: inline-size;
 

packages/core/src/components/ModalNew/Modal/__stories__/Modal.mdx renamed to packages/core/src/components/Modal/Modal/__stories__/Modal.mdx

@@ -0,0 +1,2 @@
+export { default as Modal } from "./Modal";
+export { ModalProps } from "./Modal.types";

packages/core/src/components/ModalNew/Modal/__stories__/Modal.stories.helpers.tsx renamed to packages/core/src/components/Modal/Modal/__stories__/Modal.stories.helpers.tsx

@@ -0,0 +1,2 @@
+export { default as ModalContent } from "./ModalContent";
+export { ModalContentProps } from "./ModalContent.types";

packages/core/src/components/ModalNew/Modal/__stories__/Modal.stories.module.scss renamed to packages/core/src/components/Modal/Modal/__stories__/Modal.stories.module.scss

@@ -0,0 +1,2 @@
+export { default as ModalHeader } from "./ModalHeader";
+export { ModalHeaderProps } from "./ModalHeader.types";

packages/core/src/components/ModalNew/Modal/__stories__/assets/backdrop-do.png renamed to packages/core/src/components/Modal/Modal/__stories__/assets/backdrop-do.png

@@ -0,0 +1,2 @@
+export { default as ModalMedia } from "./ModalMedia";
+export { ModalMediaProps } from "./ModalMedia.types";

packages/core/src/components/ModalNew/Modal/__stories__/assets/backdrop-dont.png renamed to packages/core/src/components/Modal/Modal/__stories__/assets/backdrop-dont.png

@@ -0,0 +1,5 @@
+export { default as ModalFooter } from "./ModalFooter/ModalFooter";
+export { ModalFooterProps } from "./ModalFooter/ModalFooter.types";
+
+export { default as ModalFooterWizard } from "./ModalFooterWizard/ModalFooterWizard";
+export { ModalFooterWizardProps } from "./ModalFooterWizard/ModalFooterWizard.types";

packages/core/src/components/ModalNew/Modal/__stories__/assets/cta-do.png renamed to packages/core/src/components/Modal/Modal/__stories__/assets/cta-do.png

@@ -0,0 +1,6 @@
+export * from "./footers";
+export * from "./layouts";
+export * from "./Modal";
+export * from "./ModalHeader";
+export * from "./ModalContent";
+export * from "./ModalMedia";

packages/core/src/components/ModalNew/Modal/__stories__/assets/cta-dont.png renamed to packages/core/src/components/Modal/Modal/__stories__/assets/cta-dont.png

@@ -25,12 +25,14 @@ const metaSettings = createStoryMetaSettingsDecorator({
 });
 
 export default {
-  title: "Internal/Components/Modal [New]/Basic modal",
+  title: "Components/Modal [New]/Basic modal",
   component: Modal,
   subcomponents: { ModalBasicLayout, ModalHeader, ModalContent, ModalFooter, ModalFooterWizard, TransitionView },
   argTypes: metaSettings.argTypes,
   decorators: metaSettings.decorators,
-  tags: ["internal"]
+  parameters: {
+    layout: "fullscreen"
+  }
 } satisfies Meta<typeof Modal>;
 
 export const Overview: Story = {
@@ -165,7 +167,9 @@ export const AlertModal: Story = {
         <ModalBasicLayout>
           <ModalHeader title="Alert modal" />
           <ModalContent>
-            This will allow closing the modal only by the close buttons and not by ESC or by clicking outside.
+            <Text type="text1" align="inherit" element="p">
+              This will allow closing the modal only by the close buttons and not by ESC or by clicking outside.
+            </Text>
           </ModalContent>
         </ModalBasicLayout>
         <ModalFooter
@@ -181,7 +185,14 @@ export const Scroll: Story = {
   decorators: [(Story, context) => withOpenedModalPreview(Story, { isDocsView: context.viewMode === "docs" })],
   render: (_, { show, setShow, container }) => {
     return (
-      <Modal id="modal-basic" show={show} size="medium" onClose={() => setShow(false)} container={container}>
+      <Modal
+        id="modal-basic"
+        show={show}
+        size="medium"
+        onClose={() => setShow(false)}
+        container={container}
+        style={{ height: 400 }}
+      >
         <ModalBasicLayout>
           <ModalHeader title="Scrollable modal" />
           <ModalContent>

packages/core/src/components/ModalNew/Modal/__stories__/assets/loading-do.png renamed to packages/core/src/components/Modal/Modal/__stories__/assets/loading-do.png

@@ -4,7 +4,7 @@ import Modal from "../../../Modal/Modal";
 import { createStoryMetaSettingsDecorator } from "../../../../../storybook";
 import ModalHeader from "../../../ModalHeader/ModalHeader";
 import ModalContent from "../../../ModalContent/ModalContent";
-import ModalMedia from "../../ModalMedia";
+import ModalMedia from "../../../ModalMedia/ModalMedia";
 import mediaImage from "./assets/media-image.png";
 import ModalFooter from "../../../footers/ModalFooter/ModalFooter";
 import ModalMediaLayout from "../ModalMediaLayout";
@@ -26,7 +26,7 @@ const metaSettings = createStoryMetaSettingsDecorator({
 });
 
 export default {
-  title: "Internal/Components/Modal [New]/Media modal",
+  title: "Components/Modal [New]/Media modal",
   component: Modal,
   subcomponents: {
     ModalMediaLayout,
@@ -39,7 +39,9 @@ export default {
   },
   argTypes: metaSettings.argTypes,
   decorators: metaSettings.decorators,
-  tags: ["internal"]
+  parameters: {
+    layout: "fullscreen"
+  }
 } satisfies Meta<typeof Modal>;
 
 export const Overview: Story = {

packages/core/src/components/ModalNew/Modal/__stories__/assets/loading-dont.png renamed to packages/core/src/components/Modal/Modal/__stories__/assets/loading-dont.png

@@ -6,7 +6,7 @@ import { withOpenedModalPreview } from "../../../Modal/__stories__/Modal.stories
 import ModalHeader from "../../../ModalHeader/ModalHeader";
 import ModalContent from "../../../ModalContent/ModalContent";
 import ModalSideBySideLayout from "../ModalSideBySideLayout";
-import ModalMedia from "../../ModalMedia";
+import ModalMedia from "../../../ModalMedia/ModalMedia";
 import mediaImage from "./assets/media-image.png";
 import useWizard from "../../../../../hooks/useWizard/useWizard";
 import TransitionView from "../../../../TransitionView/TransitionView";
@@ -29,7 +29,7 @@ const metaSettings = createStoryMetaSettingsDecorator({
 });
 
 export default {
-  title: "Internal/Components/Modal [New]/Side by side modal",
+  title: "Components/Modal [New]/Side by side modal",
   component: Modal,
   subcomponents: {
     ModalSideBySideLayout,
@@ -42,7 +42,9 @@ export default {
   },
   argTypes: metaSettings.argTypes,
   decorators: metaSettings.decorators,
-  tags: ["internal"]
+  parameters: {
+    layout: "fullscreen"
+  }
 } satisfies Meta<typeof Modal>;
 
 export const Overview: Story = {

packages/core/src/components/ModalNew/Modal/__tests__/Modal.test.tsx renamed to packages/core/src/components/Modal/Modal/__tests__/Modal.test.tsx

@@ -0,0 +1,8 @@
+export { default as ModalBasicLayout } from "./ModalBasicLayout/ModalBasicLayout";
+export { ModalBasicLayoutProps } from "./ModalBasicLayout/ModalBasicLayout.types";
+
+export { default as ModalMediaLayout } from "./ModalMediaLayout/ModalMediaLayout";
+export { ModalMediaLayoutProps } from "./ModalMediaLayout/ModalMediaLayout.types";
+
+export { default as ModalSideBySideLayout } from "./ModalSideBySideLayout/ModalSideBySideLayout";
+export { ModalSideBySideLayoutProps } from "./ModalSideBySideLayout/ModalSideBySideLayout.types";

packages/core/src/components/Modal/Modal/index.ts

@@ -2,26 +2,35 @@ import { Variants } from "framer-motion";
 import { RefObject } from "react";
 
 export const modalAnimationOverlayVariants: Variants = {
+  initial: {
+    opacity: 0
+  },
   enter: {
-    opacity: 1,
+    opacity: 0.7,
     transition: {
-      duration: 0.2,
+      duration: 0.1,
       ease: [0.0, 0.0, 0.4, 1.0]
     }
   },
   exit: {
     opacity: 0,
     transition: {
-      duration: 0.15,
-      ease: [0.0, 0.0, 0.4, 1.0]
+      duration: 0.1,
+      ease: [0.6, 0.0, 1.0, 1.0]
     }
   }
 };
 
 export const modalAnimationCenterPopVariants: Variants = {
+  initial: {
+    opacity: 1,
+    scale: 1,
+    x: "-50%",
+    y: "-50%"
+  },
   enter: {
     opacity: [0, 1, 1],
-    scale: [0.65, 1, 1],
+    scale: [0.8, 1, 1],
     x: "-50%",
     y: "-50%",
     transition: {
@@ -32,30 +41,46 @@ export const modalAnimationCenterPopVariants: Variants = {
   },
   exit: {
     opacity: [1, 1, 0],
-    scale: [1, 1, 0.65],
+    scale: [1, 1, 0.8],
     x: "-50%",
     y: "-50%",
     transition: {
       duration: 0.1,
-      ease: [0.0, 0.0, 0.4, 1.0],
+      ease: [0.6, 0.0, 1.0, 1.0],
       times: [0, 0.5, 1]
     }
   }
 };
 
 export const modalAnimationAnchorPopVariants: Variants = {
+  initial: (anchorElementRef: RefObject<HTMLElement>) => {
+    const anchorRect = anchorElementRef.current.getBoundingClientRect();
+    const anchorCenterX = anchorRect.left + anchorRect.width / 2;
+    const anchorCenterY = anchorRect.top + anchorRect.height / 2;
+
+    const x = `calc(-50% + ${anchorCenterX}px)`;
+    const y = `calc(-50% + ${anchorCenterY}px)`;
+
+    return {
+      opacity: 0,
+      scale: 0.8,
+      top: "50%",
+      left: "50%",
+      x,
+      y
+    };
+  },
   enter: {
-    opacity: [0, 1, 1],
-    scale: [0.65, 0.65, 1],
+    opacity: [0, 0, 1],
+    scale: [0.8, 0.8, 1],
     top: "50%",
     left: "50%",
     x: "-50%",
     y: "-50%",
     transition: {
-      delay: 0.05,
       duration: 0.2,
       ease: [0.0, 0.0, 0.4, 1.0],
-      times: [0, 0.2, 1]
+      times: [0, 0.4, 1]
     }
   },
   exit: (anchorElementRef: RefObject<HTMLElement>) => {
@@ -67,16 +92,16 @@ export const modalAnimationAnchorPopVariants: Variants = {
     const y = `calc(-50% + ${anchorCenterY}px)`;
 
     return {
-      opacity: [1, 1, 0],
-      scale: [1, 1, 0.75],
+      opacity: [1, 0, 0],
+      scale: [1, 0.8, 0.8],
       top: 0,
       left: 0,
       x,
       y,
       transition: {
         duration: 0.15,
         ease: [0.6, 0.0, 1.0, 1.0],
-        times: [0, 0.33, 1]
+        times: [0, 0.6, 1]
       }
     };
   }

packages/core/src/components/ModalNew/ModalContent/ModalContent.tsx renamed to packages/core/src/components/Modal/ModalContent/ModalContent.tsx

@@ -1 +1 @@
-export {};
+export * from "./Modal";

packages/core/src/components/ModalNew/ModalContent/ModalContent.types.ts renamed to packages/core/src/components/Modal/ModalContent/ModalContent.types.ts

@@ -59,9 +59,9 @@ import { BoxDescription } from "./descriptions/box-description";
 import { TableDescription } from "./descriptions/table-description";
 import { VirtualizedGridDescription } from "./descriptions/virtualized-grid-description/virtualized-grid-description";
 import { MenuGridItemDescription } from "./descriptions/menu-grid-item-description";
-import { ModalMediaLayoutRelatedComponent } from "../../../components/ModalNew/layouts/ModalMediaLayout/__stories__/ModalMediaLayoutRelatedComponent";
-import { ModalSideBySideLayoutRelatedComponent } from "../../../components/ModalNew/layouts/ModalSideBySideLayout/__stories__/ModalSideBySideLayoutRelatedComponent";
-import { ModalBasicLayoutRelatedComponent } from "../../../components/ModalNew/layouts/ModalBasicLayout/__stories__/ModalBasicLayoutRelatedComponent";
+import { ModalMediaLayoutRelatedComponent } from "../../../components/Modal/layouts/ModalMediaLayout/__stories__/ModalMediaLayoutRelatedComponent";
+import { ModalSideBySideLayoutRelatedComponent } from "../../../components/Modal/layouts/ModalSideBySideLayout/__stories__/ModalSideBySideLayoutRelatedComponent";
+import { ModalBasicLayoutRelatedComponent } from "../../../components/Modal/layouts/ModalBasicLayout/__stories__/ModalBasicLayoutRelatedComponent";
 
 export const SPLIT_BUTTON = "split-button";
 export const BUTTON_GROUP = "button-group";

packages/core/src/components/Modal/ModalContent/index.ts

@@ -21,6 +21,7 @@ export const Types: Story = {
     <Flex direction={Flex.directions.COLUMN} gap={Flex.gaps.MEDIUM} align={Flex.align.START}>
       <StatusTag type="alpha" />
       <StatusTag type="beta" />
+      <StatusTag type="new" />
       <StatusTag type="deprecated" />
     </Flex>
   ),