fix(Modal): fixed z-index for overlay and avoided blur effect due to …

…css translate.
DevoInc · Jan 11, 2024 · 0d59747 · 0d59747
1 parent cabca30
commit 0d59747
Show file tree

Hide file tree

Showing 5 changed files with 64 additions and 20 deletions.
diff --git a/packages/core/src/components/Modal/Modal.cases.stories.tsx b/packages/core/src/components/Modal/Modal.cases.stories.tsx
@@ -1,8 +1,12 @@
 import * as React from 'react';
+import { useTheme } from 'styled-components';
 import { Meta, StoryObj } from '@storybook/react';
 import { action } from '@storybook/addon-actions';
 import { AnimatePresence, motion } from 'framer-motion';
 
+import { useDetectScroll } from '../../hooks';
+
+import { GICheckOkRoundedFilled } from '@devoinc/genesys-icons';
 import {
   Box,
   Button,
@@ -14,12 +18,10 @@ import {
   IconButtonStatus,
   Modal,
   ModalProps,
+  Typography,
 } from '..';
-import { GICheckOkRoundedFilled } from '@devoinc/genesys-icons';
-import { Heading } from '../Typography/components/block';
-import { useTheme } from 'styled-components';
-import { lorem } from '../../../stories/utils/fillerTexts';
-import { useDetectScroll } from '../../hooks';
+
+import { ModalDemoContent } from './__stories__/components';
 
 const meta: Meta<typeof Modal> = {
   title: 'Components/Core/Layout/Modal/Cases',
@@ -38,7 +40,7 @@ const meta: Meta<typeof Modal> = {
 export default meta;
 type Story = StoryObj<typeof Modal>;
 
-const ModalWithHeaderActions = (props: ModalProps) => {
+const ModalWithButtons = (props: ModalProps) => {
   const [isOpen, setOpen] = React.useState<boolean>(false);
   const closeModal = (msg: string) => {
     action(msg);
@@ -72,7 +74,7 @@ const ModalWithHeaderActions = (props: ModalProps) => {
           ]}
           onRequestClose={() => closeModal('onRequestClose')}
         >
-          Your modal content goes here
+          {ModalDemoContent}
         </Modal>
       )}
       <Button onClick={() => setOpen(true)} colorScheme="accent-high">
@@ -82,6 +84,13 @@ const ModalWithHeaderActions = (props: ModalProps) => {
   );
 };
 
+export const WithButtons: Story = {
+  args: {
+    headerTitle: 'Modal window',
+  },
+  render: (args) => <ModalWithButtons {...args} />,
+};
+
 export const WithActions: Story = {
   args: {
     headerTitle: 'Modal window',
@@ -104,7 +113,7 @@ export const WithActions: Story = {
       />,
     ],
   },
-  render: (args) => <ModalWithHeaderActions {...args} />,
+  render: (args) => <ModalWithButtons {...args} />,
 };
 
 export const Animated: Story = {
@@ -132,7 +141,7 @@ export const Animated: Story = {
                 onRequestClose={() => setOpen(false)}
                 zIndex={100}
               >
-                Your modal content goes here
+                {ModalDemoContent}
               </Modal>
             </motion.div>
           )}
@@ -160,20 +169,23 @@ export const Custom: Story = {
               <Modal.Header>
                 <Flex alignItems="center" gap="cmp-sm">
                   <GICheckOkRoundedFilled
+                    size={22}
                     color={dialogHeaderIconTokens.color.background.success}
                   />
-                  <Heading size="h4" truncateLine={1}>
+                  <Typography.Heading size="h4" truncateLine={1}>
                     My custom Modal
-                  </Heading>
+                  </Typography.Heading>
                 </Flex>
                 <Flex marginLeft="auto">
-                  <ButtonGroup size="md" itemsGap="lg">
+                  <ButtonGroup size="md" gap="lg">
                     <IconButtonStatus tooltip="Info" />
                     <IconButtonClose tooltip="Close" />
                   </ButtonGroup>
                 </Flex>
               </Modal.Header>
-              <Modal.Body modalBodyRef={targetElRef}>{lorem}</Modal.Body>
+              <Modal.Body modalBodyRef={targetElRef}>
+                {ModalDemoContent}
+              </Modal.Body>
               <Modal.Footer hasBoxShadow={hasScroll}>
                 <Box marginRight="auto">
                   <IconButtonGoToDocs

diff --git a/packages/core/src/components/Modal/Modal.stories.tsx b/packages/core/src/components/Modal/Modal.stories.tsx
@@ -2,7 +2,8 @@ import * as React from 'react';
 import { Meta, StoryObj } from '@storybook/react';
 import { action } from '@storybook/addon-actions';
 
-import { Button, Modal } from '../';
+import { Button, Modal, Typography } from '../';
+import { Input } from '@devoinc/genesys-ui-form';
 
 const meta: Meta<typeof Modal> = {
   title: 'Components/Core/Layout/Modal',
@@ -11,7 +12,6 @@ const meta: Meta<typeof Modal> = {
     status: 'base',
     shouldCloseOnOverlayClick: true,
     windowSize: 'default',
-    zIndex: 100,
   },
 };
 
@@ -37,7 +37,14 @@ export const Base: Story = {
               {...args}
               onRequestClose={() => closeModal('onRequestClose')}
             >
-              Your modal content goes here
+              <Typography.Paragraph>
+                A still more glorious dawn awaits finite but unbounded Hypatia
+                Cambrian explosion white dwarf the carbon in our apple pies.
+                Vanquish the impossible the sky calls to us Flatland two ghostly
+                white figures in coveralls and helmets are softly dancing are
+                creatures of the cosmos tendrils of gossamer clouds?
+              </Typography.Paragraph>
+              <Input label="Demo input" id="demo-input" />
             </Modal>
           )}
           <Button onClick={() => setOpen(true)} colorScheme="accent-high">

diff --git a/packages/core/src/components/Modal/Modal.tsx b/packages/core/src/components/Modal/Modal.tsx
@@ -81,7 +81,7 @@ export const InternalModal: React.FC<ModalProps> = ({
   shouldCloseOnOverlayClick,
   styles,
   subcomponentStyles,
-  zIndex = 1,
+  zIndex,
 }) => {
   const { hasScroll, targetElRef } = useDetectScroll();
 

diff --git a/packages/core/src/components/Modal/__stories__/components.tsx b/packages/core/src/components/Modal/__stories__/components.tsx
@@ -0,0 +1,21 @@
+import * as React from 'react';
+import { Banner, Typography, VFlex } from '../../../components';
+import { Input } from '@devoinc/genesys-ui-form';
+
+export const ModalDemoContent = (
+  <VFlex alignItems="stretch">
+    <Typography.Paragraph gutterBottom="0">
+      A still more glorious dawn awaits finite but unbounded Hypatia Cambrian
+      explosion white dwarf the carbon in our apple pies. Vanquish the
+      impossible the sky calls to us Flatland two ghostly white figures in
+      coveralls and helmets are softly dancing are creatures of the cosmos
+      tendrils of gossamer clouds?
+    </Typography.Paragraph>
+    <Banner
+      title="Demo banner"
+      content="A still more glorious dawn awaits finite but unbounded Hypatia Cambrian
+      explosion white dwarf the carbon in our apple pies."
+    />
+    <Input label="Demo input" id="demo-input" />
+  </VFlex>
+);
diff --git a/packages/core/src/components/Modal/components/ModalContainer/ModalContainer.tsx b/packages/core/src/components/Modal/components/ModalContainer/ModalContainer.tsx
@@ -2,6 +2,7 @@ import * as React from 'react';
 import { StyledModal, StyledModalProps } from '../../styled';
 import { Overlay } from '../../../Overlay';
 import { StyledOverloadCssProps } from '../../../../declarations';
+import { useTheme } from 'styled-components';
 
 export interface ModalContainerProps
   extends StyledModalProps,
@@ -13,7 +14,7 @@ export interface ModalContainerProps
   /** Manages closing action by pressing close button*/
   onRequestClose?: () => void;
   /** zIndex of the Modal */
-  zIndex?: React.CSSProperties['zIndex'];
+  zIndex?: number;
   /** Content of the Modal */
   children: React.ReactNode;
 }
@@ -25,18 +26,20 @@ export const ModalContainer: React.FC<ModalContainerProps> = ({
   windowSize = 'default',
   onRequestClose,
   shouldCloseOnOverlayClick = true,
-  zIndex = 1,
+  zIndex,
   status,
   styles,
   children,
 }) => {
+  const theme = useTheme();
   return (
     <Overlay
-      zIndex={zIndex}
+      zIndex={zIndex || theme.alias.elevation.zIndex.depth.overlay}
       bgColorScheme={'dark'}
       fixed
       onClick={shouldCloseOnOverlayClick ? () => onRequestClose?.() : undefined}
       styles={styles}
+      padding={windowSize === 'fullscreen' ? '0' : undefined}
     >
       <StyledModal
         id={id}
@@ -48,6 +51,7 @@ export const ModalContainer: React.FC<ModalContainerProps> = ({
           // For avoid click inside close overlay
           event.stopPropagation();
         }}
+        zIndex={zIndex ? zIndex + 1 : theme.alias.elevation.zIndex.depth.popOut}
       >
         {children}
       </StyledModal>