RC #291 - Removing z-index from Modal overlay

performant-software · Aug 14, 2024 · d895735 · d895735
1 parent ea25660
commit d895735
Show file tree

Hide file tree

Showing 2 changed files with 34 additions and 1 deletion.
diff --git a/packages/core-data/src/components/Modal.js b/packages/core-data/src/components/Modal.js
@@ -61,7 +61,7 @@ const Modal = (props: Props) => {
       >
         <Dialog.Overlay
           className={clsx(
-            'fixed bg-black/70 inset-0 transition-opacity flex justify-center z-[60]',
+            'fixed bg-black/70 inset-0 transition-opacity flex justify-center',
             { 'items-center': props.centered },
             { 'overflow-auto': !props.scrolling }
           )}

diff --git a/packages/storybook/src/core-data/MediaGallery.stories.js b/packages/storybook/src/core-data/MediaGallery.stories.js
@@ -2,6 +2,7 @@
 
 import React, { useState } from 'react';
 import MediaGallery from '../../../core-data/src/components/MediaGallery';
+import Modal from '../../../core-data/src/components/Modal';
 
 export default {
   title: 'Components/Core Data/MediaGallery',
@@ -35,3 +36,35 @@ export const Default = () => {
     </>
   );
 };
+
+export const InModal = () => {
+  const [open, setOpen] = useState(false);
+
+  return (
+    <Modal
+      description='Testing Media Gallery within a Modal'
+      title='Testing Modal'
+      open
+    >
+      <div
+        style={{
+          display: 'flex',
+          justifyContent: 'center'
+        }}
+      >
+        <button
+          onClick={() => setOpen(true)}
+          type='button'
+        >
+          Open  Gallery
+        </button>
+      </div>
+      { open && (
+        <MediaGallery
+          manifestUrl='/core_data/public/v1/places/1/manifests/1'
+          onClose={() => setOpen(false)}
+        />
+      )}
+    </Modal>
+  );
+};