fix: MDS-966 Modal add className and fix big content examples (#2550)

* fix: MDS-966 Modal add className and fix big content exemples * fix: MDS-966 Modal bigContent example * fix: MDS-966 update test
coingaming · Feb 16, 2024 · 7b14c40 · 7b14c40
1 parent 20eb266
commit 7b14c40
Show file tree

Hide file tree

Showing 3 changed files with 13 additions and 6 deletions.
diff --git a/next-docs/public/examples/modal/BigContent.tsx b/next-docs/public/examples/modal/BigContent.tsx
@@ -10,7 +10,7 @@ const Example = () => {
       <Button onClick={openModal}>Open dialog</Button>
       <Modal open={isOpen} onClose={closeModal}>
         <Modal.Backdrop />
-        <Modal.Panel>
+        <Modal.Panel className="max-h-[calc(100vh-150px)] overflow-scroll">
           <div className="p-4 border-b-2 border-beerus">
             <h3 className="text-moon-18 text-bulma font-medium">
               Payment successful

diff --git a/next-docs/public/examples/modal/__tests__/__snapshots__/index.test.tsx.snap b/next-docs/public/examples/modal/__tests__/__snapshots__/index.test.tsx.snap
@@ -50,7 +50,7 @@ Object {
                 class="flex min-h-full items-center justify-center p-4"
               >
                 <div
-                  class="w-full max-w-sm inline-block rounded-xl bg-goku align-middle shadow-moon-lg transition-all transition duration-300 ease-out transform scale-95 opacity-0"
+                  class="w-full max-w-sm inline-block rounded-xl bg-goku align-middle shadow-moon-lg transition-all max-h-[calc(100vh-150px)] overflow-scroll transition duration-300 ease-out transform scale-95 opacity-0"
                   data-headlessui-state="open"
                   id="headlessui-dialog-panel-:rk:"
                 >
@@ -1037,7 +1037,7 @@ Object {
                 class="flex min-h-full items-center justify-center p-4"
               >
                 <div
-                  class="w-full max-w-sm inline-block rounded-xl bg-goku align-middle shadow-moon-lg transition-all transition duration-300 ease-out transform scale-95 opacity-0"
+                  class="w-full max-w-sm inline-block rounded-xl bg-goku align-middle shadow-moon-lg transition-all max-h-[calc(100vh-150px)] overflow-scroll transition duration-300 ease-out transform scale-95 opacity-0"
                   data-headlessui-state="open"
                   id="headlessui-dialog-panel-:r3:"
                 >

diff --git a/workspaces/core/src/modal/Modal.tsx b/workspaces/core/src/modal/Modal.tsx
@@ -15,6 +15,7 @@ type ModalRootProps = {
   open: boolean;
   onClose: () => void;
   initialFocus?: React.MutableRefObject<HTMLElement | null>;
+  className?: string;
 };
 
 type ModalComponentProps = (
@@ -26,6 +27,7 @@ const ModalRoot: ModalComponentProps = ({
   onClose,
   children,
   initialFocus,
+  className
 }) => {
   const defFocus = useRef(null);
   const [focusElRef, setFocusElRef] =
@@ -37,7 +39,7 @@ const ModalRoot: ModalComponentProps = ({
     <Transition appear show={open} as={React.Fragment}>
       <Dialog
         as="div"
-        className="relative z-10"
+        className={mergeClassnames("relative z-10", className)}
         onClose={onClose}
         initialFocus={focusElRef}
       >
@@ -75,8 +77,13 @@ const Panel = ({ children, className }: WithChildren<PanelProps>) => (
   </div>
 );
 
-const Title = ({ children }: { children?: ReactNode }) => (
-  <Dialog.Title as="h3" className="text-moon-18 font-medium text-gray-900">
+type TitleProps = {
+  children?: ReactNode; 
+  className?: string;
+}
+
+const Title = ({ children, className }: TitleProps) => (
+  <Dialog.Title as="h3" className={mergeClassnames("text-moon-18 font-medium text-gray-900", className)}>
     {children}
   </Dialog.Title>
 );