feat: add zIndex prop for Modal (#1482)

razorpay · Jul 28, 2023 · ebd3cbd · ebd3cbd
1 parent d04e392
commit ebd3cbd
Show file tree

Hide file tree

Showing 4 changed files with 34 additions and 1 deletion.
diff --git a/.changeset/cyan-bottles-prove.md b/.changeset/cyan-bottles-prove.md
@@ -0,0 +1,5 @@
+---
+"@razorpay/blade": patch
+---
+
+feat: add zIndex prop for Modal
diff --git a/packages/blade/src/components/Modal/Modal.web.tsx b/packages/blade/src/components/Modal/Modal.web.tsx
@@ -55,6 +55,11 @@ type ModalProps = {
    *  Accessibility label for the modal
    */
   accessibilityLabel?: string;
+  /**
+   * Sets the z-index of the modal
+   * @default 1000
+   */
+  zIndex?: number;
 };
 
 const entry = keyframes`
@@ -100,6 +105,7 @@ const Modal = ({
   initialFocusRef,
   size = 'small',
   accessibilityLabel,
+  zIndex = modalHighestZIndex,
 }: ModalProps): React.ReactElement => {
   const { theme, platform } = useTheme();
   const { isMounted, isVisible } = usePresence(isOpen, {
@@ -164,7 +170,7 @@ const Modal = ({
             context={context}
             modal={true}
           >
-            <Box zIndex={modalHighestZIndex} position="fixed" testID="modal-wrapper">
+            <Box zIndex={zIndex} position="fixed" testID="modal-wrapper">
               <ModalBackdrop />
               <ModalContent
                 {...metaAttribute({

diff --git a/packages/blade/src/components/Modal/__tests__/Modal.web.test.tsx b/packages/blade/src/components/Modal/__tests__/Modal.web.test.tsx
@@ -237,4 +237,18 @@ describe('Modal', () => {
     );
     mockConsoleError.mockRestore();
   });
+
+  it('renders a Modal with custom zIndex', () => {
+    const { getByTestId } = renderWithTheme(
+      <Modal isOpen={true} onDismiss={() => {}} accessibilityLabel="Test Modal" zIndex={9999}>
+        <ModalBody>
+          <Text>Test Content</Text>
+        </ModalBody>
+      </Modal>,
+    );
+    const container = getByTestId('modal-wrapper');
+    expect(container).toHaveStyle({
+      zIndex: 9999,
+    });
+  });
 });
diff --git a/packages/blade/src/components/Modal/docs/ModalDocs.tsx b/packages/blade/src/components/Modal/docs/ModalDocs.tsx
@@ -120,6 +120,14 @@ const ModalDocs = (): JSX.Element => {
               <Code>{'<ModalHeader />'}</Code>]
             </Text>
           ),
+          zIndex: (
+            <Text size="small" type="subdued">
+              <Text size="small" type="subdued">
+                <Code size="medium">number</Code>
+              </Text>
+              Sets the z-index of the modal
+            </Text>
+          ),
         }}
       />
       <Heading size="medium">ModalHeader Props</Heading>