chore: added unsafe_zIndex property to InlineDialog (#1757)

Frontify · Mar 20, 2024 · a3e509f · a3e509f
1 parent 930a968
commit a3e509f
Show file tree

Hide file tree

Showing 3 changed files with 20 additions and 2 deletions.
diff --git a/src/components/InlineDialog/InlineDialog.cy.tsx b/src/components/InlineDialog/InlineDialog.cy.tsx
@@ -13,6 +13,7 @@ const INLINE_DIALOG_TRIGGER_SELECTOR = '[data-test-id=fondue-inlineDialog-trigge
 const INLINE_DIALOG_SELECTOR = '[data-test-id=fondue-inlineDialog-content]';
 const OUTSIDE_DIALOG_BUTTON = '[data-test-id=outside-button]';
 const INLINE_DIALOG_UNDERLAY = '[data-test-id=fondue-inlineDialog-underlay]';
+const INLINE_DIALOG_CONTENT = '[data-test-id=fondue-inlineDialog-content]';
 
 const InlineDialogComponent = (props: Omit<InlineDialogProps, 'open' | 'anchor' | 'handleClose'>) => {
     const [isOpen, setIsOpen] = useState(false);
@@ -282,4 +283,12 @@ describe('InlineDialog Component', () => {
             cy.get(INLINE_DIALOG_UNDERLAY).should('exist');
         });
     });
+
+    describe('Unsafe zIndex', () => {
+        it('renders with Unsafe custom zIndex', () => {
+            cy.mount(<InlineDialogComponent unsafe_zIndex={2020} />);
+            cy.get(INLINE_DIALOG_TRIGGER_SELECTOR).children().eq(0).click();
+            cy.get(INLINE_DIALOG_CONTENT).parent().should('have.css', 'z-index', '2020');
+        });
+    });
 });
diff --git a/src/components/InlineDialog/InlineDialog.stories.tsx b/src/components/InlineDialog/InlineDialog.stories.tsx
@@ -48,6 +48,9 @@ export default {
             type: 'boolean',
         },
         zIndex: { table: { disable: true } },
+        unsafe_zIndex: {
+            type: 'number',
+        },
     },
 } as Meta<InlineDialogProps>;
 

diff --git a/src/components/InlineDialog/InlineDialog.tsx b/src/components/InlineDialog/InlineDialog.tsx
@@ -8,7 +8,7 @@ export type InlineDialogProps = Omit<
     OverlayProps,
     'theme' | 'isDetached' | 'verticalAlignment' | 'withArrow' | 'arrowCustomColors' | 'shadow' | 'isDialog'
 > &
-    Omit<BaseDialogProps, 'darkUnderlay'>;
+    Omit<BaseDialogProps, 'darkUnderlay'> & { unsafe_zIndex?: number };
 
 export const InlineDialog = ({
     children,
@@ -28,6 +28,12 @@ export const InlineDialog = ({
     autoHeight = false,
     roundedCorners = true,
     width = 360,
+    /**
+     * This property is used to override the default zIndex of the overlay.
+     * This is needed to support the legacy Terrific Modal, which dynamically compounds z-indexes to create a "stacked" modal approach.
+     * Once the legacy Terrific Modal is removed/refactored to a pre-determined set of z-indexes, this property can be removed as well.
+     */
+    unsafe_zIndex,
 }: InlineDialogProps) => {
     return (
         <Overlay
@@ -46,11 +52,11 @@ export const InlineDialog = ({
             handleClose={handleClose}
             role={modality === Modality.NonModal ? 'region' : 'dialog'}
             autoHeight={autoHeight}
-            zIndex={Z_INDEX_MODAL}
             roundedCorners={roundedCorners}
             borderRadius="small"
             shadow="medium"
             width={width}
+            zIndex={unsafe_zIndex || Z_INDEX_MODAL}
         >
             {children}
         </Overlay>