feat(Modal): css and html structure improvements, add footer shadow for layouts

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

@@ -73,14 +73,14 @@ const Modal = forwardRef(
 
     return (
       <ModalProvider value={contextValue}>
-        <RemoveScroll>
-          <div
-            data-testid={getTestId(ComponentDefaultTestId.MODAL_NEXT_OVERLAY, id)}
-            className={styles.overlay}
-            onClick={onBackdropClick}
-            aria-hidden
-          />
-          <FocusLock returnFocus>
+        <div
+          data-testid={getTestId(ComponentDefaultTestId.MODAL_NEXT_OVERLAY, id)}
+          className={styles.overlay}
+          onClick={onBackdropClick}
+          aria-hidden
+        />
+        <FocusLock returnFocus>
+          <RemoveScroll>
             <div
               ref={ref}
               className={cx(
@@ -96,16 +96,16 @@ const Modal = forwardRef(
               aria-labelledby={titleId}
               aria-describedby={descriptionId}
             >
+              {children}
               <ModalTopActions
                 renderAction={renderHeaderAction}
                 color={closeButtonTheme}
                 closeButtonAriaLabel={closeButtonAriaLabel}
                 onClose={onClose}
               />
-              {children}
             </div>
-          </FocusLock>
-        </RemoveScroll>
+          </RemoveScroll>
+        </FocusLock>
       </ModalProvider>
     );
   }

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

@@ -181,17 +181,18 @@ describe("Modal", () => {
         <button type="button">Focusable 2</button>
       </Modal>
     );
-    const closeButton = getByLabelText(closeButtonAriaLabel);
-    expect(closeButton).toHaveFocus();
-
-    userEvent.tab();
     expect(getByText("Focusable 1")).toHaveFocus();
 
     userEvent.tab();
     expect(getByText("Focusable 2")).toHaveFocus();
 
     userEvent.tab();
+
+    const closeButton = getByLabelText(closeButtonAriaLabel);
     expect(closeButton).toHaveFocus();
+
+    userEvent.tab();
+    expect(getByText("Focusable 1")).toHaveFocus();
   });
 
   it.todo("renders the correct aria-labelledby");

packages/core/src/components/ModalNew/ModalContent/ModalContent.tsx

@@ -1,32 +1,19 @@
-import React, { forwardRef, UIEventHandler, useCallback } from "react";
-import cx from "classnames";
+import React, { forwardRef } from "react";
 import { getTestId } from "../../../tests/test-ids-utils";
 import { ComponentDefaultTestId } from "../../../tests/constants";
-import styles from "./ModalContent.module.scss";
 import { ModalContentProps } from "./ModalContent.types";
-import { useModal } from "../context/ModalContext";
 
 const ModalContent = forwardRef(
   (
     { children, className, id, "data-testid": dataTestId }: ModalContentProps,
     ref: React.ForwardedRef<HTMLDivElement>
   ) => {
-    const { setContentScrolled } = useModal();
-
-    const onScroll: UIEventHandler<HTMLDivElement> = useCallback(
-      e => {
-        setContentScrolled(e.currentTarget?.scrollTop > 0);
-      },
-      [setContentScrolled]
-    );
-
     return (
       <div
         ref={ref}
-        className={cx(styles.content, className)}
+        className={className}
         id={id}
         data-testid={dataTestId || getTestId(ComponentDefaultTestId.MODAL_NEXT_CONTENT, id)}
-        onScroll={onScroll}
       >
         {children}
       </div>

packages/core/src/components/ModalNew/ModalHeader/__tests__/ModalHeader.test.tsx

@@ -3,6 +3,7 @@ import { render } from "@testing-library/react";
 import ModalHeader from "../ModalHeader";
 import { Text as TextIcon } from "../../../Icon/Icons";
 import { useModal } from "../../context/ModalContext";
+import { ModalContextProps } from "../../context/ModalContext.types";
 
 jest.mock("../../context/ModalContext", () => ({
   useModal: jest.fn()
@@ -14,12 +15,10 @@ describe("ModalHeader", () => {
   const simpleDescription = "This is a description";
   const descriptionIcon = TextIcon;
 
-  const useModalMockedReturnedValue = {
+  const useModalMockedReturnedValue: ModalContextProps = {
     modalId: "modal-id",
     setTitleId: jest.fn(),
-    setDescriptionId: jest.fn(),
-    isContentScrolled: false,
-    setContentScrolled: jest.fn()
+    setDescriptionId: jest.fn()
   };
 
   beforeEach(() => {

packages/core/src/components/ModalNew/context/ModalContext.tsx

@@ -1,21 +1,10 @@
-import React, { createContext, useContext, useMemo, useState } from "react";
+import React, { createContext, useContext } from "react";
 import { ModalContextProps, ModalProviderProps } from "./ModalContext.types";
 
 const ModalContext = createContext<ModalContextProps | undefined>(undefined);
 
 export const ModalProvider = ({ value, children }: ModalProviderProps) => {
-  const [isContentScrolled, setContentScrolled] = useState<boolean>(false);
-
-  const contextValue = useMemo<ModalContextProps>(
-    () => ({
-      ...value,
-      isContentScrolled,
-      setContentScrolled: (newContentScrolled: boolean) => setContentScrolled(newContentScrolled)
-    }),
-    [isContentScrolled, value]
-  );
-
-  return <ModalContext.Provider value={contextValue}>{children}</ModalContext.Provider>;
+  return <ModalContext.Provider value={value}>{children}</ModalContext.Provider>;
 };
 
 export const useModal = (): ModalContextProps => {

packages/core/src/components/ModalNew/context/ModalContext.types.ts

@@ -1,9 +1,6 @@
 import React from "react";
 
-export interface ModalContextProps extends ModalProviderValue {
-  isContentScrolled: boolean;
-  setContentScrolled: (scrolled: boolean) => void;
-}
+export type ModalContextProps = ModalProviderValue;
 
 export type ModalProviderValue = {
   modalId: string;

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

@@ -1,19 +1,20 @@
 .layout {
   width: 100%;
-  flex-grow: 1;
+  height: 100%;
   overflow: hidden;
 
   .header {
     width: 100%;
-    margin-block: var(--spacing-xl) var(--spacing-medium);
+    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-start: var(--modal-inline-padding);
   }
 
   .divider {
     flex-shrink: 0;
   }
 
   .content {
-    padding-inline: var(--modal-inline-padding);
+    padding-block-end: var(--spacing-xl);
   }
 }

packages/core/src/components/ModalNew/layouts/ModalBasicLayout/ModalBasicLayout.tsx

@@ -4,31 +4,38 @@ import { getTestId } from "../../../../tests/test-ids-utils";
 import { ComponentDefaultTestId } from "../../../../tests/constants";
 import styles from "./ModalBasicLayout.module.scss";
 import { ModalBasicLayoutProps } from "./ModalBasicLayout.types";
-import { useModal } from "../../context/ModalContext";
 import Flex from "../../../Flex/Flex";
 import Divider from "../../../Divider/Divider";
+import ModalFooterShadow from "../ModalFooterShadow";
+import ModalLayoutScrollableContent from "../ModalLayoutScrollableContent";
+import useLayoutScrolledContent from "../useLayoutScrolledContent";
 
 const ModalBasicLayout = forwardRef(
   (
     { children, className, id, "data-testid": dataTestId }: ModalBasicLayoutProps,
     ref: React.ForwardedRef<HTMLDivElement>
   ) => {
+    const { isContentScrolled, onScroll } = useLayoutScrolledContent();
     const [header, content] = React.Children.toArray(children);
-    const { isContentScrolled } = useModal();
 
     return (
-      <Flex
-        direction={Flex.directions.COLUMN}
-        align={Flex.align.START}
-        ref={ref}
-        className={cx(styles.layout, className)}
-        id={id}
-        data-testid={dataTestId || getTestId(ComponentDefaultTestId.MODAL_NEXT_BASIC_LAYOUT, id)}
-      >
-        <div className={styles.header}>{header}</div>
-        {isContentScrolled && <Divider className={styles.divider} withoutMargin />}
-        <div className={styles.content}>{content}</div>
-      </Flex>
+      <>
+        <Flex
+          direction={Flex.directions.COLUMN}
+          align={Flex.align.START}
+          ref={ref}
+          className={cx(styles.layout, className)}
+          id={id}
+          data-testid={dataTestId || getTestId(ComponentDefaultTestId.MODAL_NEXT_BASIC_LAYOUT, id)}
+        >
+          <div className={styles.header}>{header}</div>
+          {isContentScrolled && <Divider className={styles.divider} withoutMargin />}
+          <ModalLayoutScrollableContent onScroll={onScroll} className={styles.content}>
+            {content}
+          </ModalLayoutScrollableContent>
+        </Flex>
+        {isContentScrolled && <ModalFooterShadow />}
+      </>
     );
   }
 );

packages/core/src/components/ModalNew/layouts/ModalFooterShadow.module.scss

@@ -0,0 +1,7 @@
+.shadowWrapper::after {
+  content: "";
+  position: absolute;
+  width: 100%;
+  height: 10px;
+  box-shadow: var(--box-shadow-medium);
+}

packages/core/src/components/ModalNew/layouts/ModalFooterShadow.tsx

@@ -0,0 +1,8 @@
+import React from "react";
+import styles from "./ModalFooterShadow.module.scss";
+
+const ModalFooterShadow = () => {
+  return <div className={styles.shadowWrapper} />;
+};
+
+export default ModalFooterShadow;

packages/core/src/components/ModalNew/ModalContent/ModalContent.module.scss → packages/core/src/components/ModalNew/layouts/ModalLayoutScrollableContent.module.scss

@@ -1,7 +1,9 @@
 @import "~monday-ui-style/dist/mixins";
 
 .content {
-  padding-block-end: var(--spacing-xl);
+  width: 100%;
+  height: 100%;
+  padding-inline: var(--modal-inline-padding);
   overflow: auto;
   @include scroller;
 }

packages/core/src/components/ModalNew/layouts/ModalLayoutScrollableContent.tsx

@@ -0,0 +1,14 @@
+import React from "react";
+import cx from "classnames";
+import styles from "./ModalLayoutScrollableContent.module.scss";
+import { ModalLayoutScrollableContentProps } from "./ModalLayoutScrollableContent.types";
+
+const ModalLayoutScrollableContent = ({ onScroll, className, children }: ModalLayoutScrollableContentProps) => {
+  return (
+    <div className={cx(styles.content, className)} onScroll={onScroll}>
+      {children}
+    </div>
+  );
+};
+
+export default ModalLayoutScrollableContent;

packages/core/src/components/ModalNew/layouts/ModalLayoutScrollableContent.types.ts

@@ -0,0 +1,7 @@
+import { ReactNode, UIEventHandler } from "react";
+
+export interface ModalLayoutScrollableContentProps {
+  onScroll?: UIEventHandler<HTMLDivElement>;
+  className?: string;
+  children: ReactNode;
+}

packages/core/src/components/ModalNew/layouts/ModalMedia.module.scss

@@ -1,8 +1,10 @@
 .media {
-  align-items: normal;
-  align-self: normal;
-  width: 100%;
-  height: auto;
+  max-width: 100%;
   max-height: 100%;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  flex-shrink: 0;
   overflow: hidden;
+  position: relative;
 }