[@mantine/modals] Increase default zIndex to allow usage with Modal c…

…omponent (#3154)
mantinedev · Dec 12, 2022 · a64e66f · a64e66f
1 parent 012c9b9
commit a64e66f
Show file tree

Hide file tree

Showing 2 changed files with 70 additions and 35 deletions.
diff --git a/src/mantine-modals/src/Modals.story.tsx b/src/mantine-modals/src/Modals.story.tsx
@@ -1,7 +1,6 @@
 /* eslint-disable no-console */
-import React from 'react';
-import { storiesOf } from '@storybook/react';
-import { Button, Text, Group } from '@mantine/core';
+import React, { useState } from 'react';
+import { Button, Text, Group, Modal } from '@mantine/core';
 import {
   ModalsProvider,
   openConfirmModal,
@@ -12,7 +11,9 @@ import {
   ContextModalProps,
 } from './index';
 
-function Demo() {
+export default { title: 'Modals manager' };
+
+export function Usage() {
   const showContextModal = () =>
     openContextModal({
       modalId: 'context-modal',
@@ -70,36 +71,69 @@ function Demo() {
     });
 
   return (
-    <Group sx={{ padding: 40 }}>
-      <Button onClick={showContextModal}>Open context modal</Button>
-      <Button onClick={showConfirmModal} color="red">
-        Open nested confirm modal
-      </Button>
-      <Button onClick={showSingleConfirmModal} color="cyan">
-        Open single confirm modal
-      </Button>
-      <Button onClick={showContentModal} color="violet">
-        Open content modal
-      </Button>
-    </Group>
+    <ModalsProvider
+      modals={{
+        hello: ({ context, id, innerProps }: ContextModalProps<{ contextProp: string }>) => {
+          console.log(innerProps, id, context);
+          return (
+            <div>
+              <div>Test custom modal: {innerProps.contextProp}</div>
+              <Button onClick={() => context.closeModal(id)}>Close</Button>
+            </div>
+          );
+        },
+      }}
+      labels={{ confirm: 'Confirm', cancel: 'Cancel' }}
+    >
+      <Group sx={{ padding: 40 }}>
+        <Button onClick={showContextModal}>Open context modal</Button>
+        <Button onClick={showConfirmModal} color="red">
+          Open nested confirm modal
+        </Button>
+        <Button onClick={showSingleConfirmModal} color="cyan">
+          Open single confirm modal
+        </Button>
+        <Button onClick={showContentModal} color="violet">
+          Open content modal
+        </Button>
+      </Group>
+    </ModalsProvider>
   );
 }
 
-storiesOf('Modals Manager', module).add('Custom modal', () => (
-  <ModalsProvider
-    modals={{
-      hello: ({ context, id, innerProps }: ContextModalProps<{ contextProp: string }>) => {
-        console.log(innerProps, id, context);
-        return (
-          <div>
-            <div>Test custom modal: {innerProps.contextProp}</div>
-            <Button onClick={() => context.closeModal(id)}>Close</Button>
-          </div>
-        );
-      },
-    }}
-    labels={{ confirm: 'Confirm', cancel: 'Cancel' }}
-  >
-    <Demo />
-  </ModalsProvider>
-));
+export function NestedInsideModal() {
+  const [opened, setIsOpened] = useState(false);
+  const handleConfirm = () =>
+    openConfirmModal({
+      title: 'Title',
+      children: <Text size="md">Are you sure?</Text>,
+      labels: { confirm: 'Yes', cancel: 'Noo' },
+    });
+  return (
+    <ModalsProvider>
+      <Button onClick={() => setIsOpened(true)}>Open modal</Button>
+      <Modal
+        size="xl"
+        padding={0}
+        opened={opened}
+        onClose={() => setIsOpened(false)}
+        centered
+        styles={{
+          header: {
+            margin: 0,
+          },
+          close: {
+            position: 'absolute',
+            top: 10,
+            right: 10,
+            boxShadow: '0 0 14px rgba(0,0,0,0.1)',
+          },
+        }}
+      >
+        <Button variant="outline" radius="lg" onClick={() => handleConfirm()}>
+          Open confirm modal
+        </Button>
+      </Modal>
+    </ModalsProvider>
+  );
+}
diff --git a/src/mantine-modals/src/ModalsProvider.tsx b/src/mantine-modals/src/ModalsProvider.tsx
@@ -1,5 +1,5 @@
 import React, { useReducer } from 'react';
-import { Modal } from '@mantine/core';
+import { Modal, getDefaultZIndex } from '@mantine/core';
 import { randomId } from '@mantine/hooks';
 import {
   ModalsContext,
@@ -200,6 +200,7 @@ export function ModalsProvider({ children, modalProps, labels, modals }: ModalsP
   return (
     <ModalsContext.Provider value={ctx}>
       <Modal
+        zIndex={getDefaultZIndex('modal') + 1}
         {...modalProps}
         {...currentModalProps}
         opened={state.modals.length > 0}