update modal z-index and scroll

raccord-io · Oct 8, 2024 · 0211cf2 · 0211cf2
1 parent 5429d7b
commit 0211cf2
Show file tree

Hide file tree

Showing 3 changed files with 45 additions and 29 deletions.
diff --git a/src/components/NavItem/NavItem.tsx b/src/components/NavItem/NavItem.tsx
@@ -44,7 +44,7 @@ const NavItem = forwardRef<HTMLDivElement, NavItemProps>((props, ref) => {
       <button
         className={cn(
           navItemVariants({ variant, className }),
-          `px-3 py-2 bg-white flex items-center gap-2 text-gray-600 rounded-mdw-full
+          `px-3 py-2 bg-white flex items-center gap-2 text-gray-600 rounded-md w-full
           transition-all duration-200 ease-out hover:bg-gray-50`,
         )}
         onClick={handleClick}

diff --git a/src/components/PopupModal/PopupModal.stories.tsx b/src/components/PopupModal/PopupModal.stories.tsx
@@ -22,10 +22,8 @@ const meta: Meta<typeof PopupModal> = {
   ],
   argTypes: {
     status: {
-      control: {
-        type: 'select',
-        options: ['hidden', 'displayed'],
-      },
+      control: { type: 'radio' },
+      options: ['hidden', 'displayed'],
       description: 'Current status of the modal',
       defaultValue: 'hidden',
     },
@@ -115,17 +113,19 @@ export const _NoFooter: Story = {
 
 export const _FullMode: Story = {
   render: (args) => (
-    <PopupModal {...args}>
-      <PopupModalHeader>
-        <label className="text-f-primary">The title</label>
-      </PopupModalHeader>
-      <PopupModalContent>
-        <label className="text-f-primary">any content</label>
-      </PopupModalContent>
-      <PopupModalFooter>
-        <label className="text-f-primary">that's footer</label>
-      </PopupModalFooter>
-    </PopupModal>
+    <div className="flex justify-center items-center">
+      <PopupModal {...args}>
+        <PopupModalHeader>
+          <label className="text-f-primary">The title</label>
+        </PopupModalHeader>
+        <PopupModalContent>
+          <label className="text-f-primary">any content</label>
+        </PopupModalContent>
+        <PopupModalFooter>
+          <label className="text-f-primary">that's footer</label>
+        </PopupModalFooter>
+      </PopupModal>
+    </div>
   ),
   args: {
     status: 'displayed',

diff --git a/src/components/PopupModal/PopupModal.tsx b/src/components/PopupModal/PopupModal.tsx
@@ -90,7 +90,6 @@ export function PopupModalFooter(props: IPopupModalNodeProps) {
   return null;
 }
 
-// export function PopupModal(props: IPopupModalProps) {
 const PopupModal = forwardRef<HTMLDivElement, IPopupModalProps>(
   (props, ref) => {
     const {
@@ -104,17 +103,23 @@ const PopupModal = forwardRef<HTMLDivElement, IPopupModalProps>(
       ...rest
     } = props;
     const [hidden, setHidden] = useState(status);
-    const fullModeClass = fullMode ? 'fixed top-0 left-0 right-0 z-50' : 'z-50';
+    const fullModeClass = fullMode ? 'fixed inset-0 z-[100]' : '';
 
     useEffect(() => {
       handleOpen();
-    }, []);
+
+      if (fullMode && status === 'displayed') {
+        document.body.style.overflow = 'hidden';
+      }
+    }, [status]);
 
     function handleOpen() {
       onOpen?.();
     }
 
     function handleClose() {
+      document.body.style.overflow = 'auto';
+
       setHidden('hidden');
 
       onClose?.();
@@ -127,21 +132,32 @@ const PopupModal = forwardRef<HTMLDivElement, IPopupModalProps>(
     });
 
     return (
-      <div
-        ref={ref}
-        data-testid="popup-modal"
-        className={`${hidden} ${fullModeClass}
-                  bg-secondary bg-opacity-75 w-full h-screen flex justify-center items-center max-h-full
-                  overflow-x-hidden overflow-y-auto`}
-      >
-        <div className={cn('relative max-h-full w-2/3', className)} {...rest}>
+      <>
+        {fullMode && (
           <div
-            className={`relative bg-secondary shadow rounded-sm border-2 border-primary ${customClassNested}`}
+            className={`${hidden} ${fullModeClass}
+              bg-secondary/75 w-full h-screen overflow-hidden`}
+          />
+        )}
+        <div
+          ref={ref}
+          data-testid="popup-modal"
+          className={cn(
+            `${hidden} m-auto w-2/3 ${
+              fullMode &&
+              `fixed top-[50%] left-[50%] z-[100] translate-x-[-50%] translate-y-[-50%]`
+            }`,
+            className,
+          )}
+          {...rest}
+        >
+          <div
+            className={`relative w-full bg-secondary shadow rounded-sm border-2 border-primary ${customClassNested}`}
           >
             {appendedChildren}
           </div>
         </div>
-      </div>
+      </>
     );
   },
 );