From 5fa4524d880caa2e32e1f3ad1d144934f5ce424a Mon Sep 17 00:00:00 2001
From: Nil Gradisnik <nilgradisnik@users.noreply.github.com>
Date: Mon, 15 Mar 2021 14:34:31 -0700
Subject: [PATCH] update(Modal): Add optional zIndex to props (#412)

* [Modal] Add optional zIndex to props

* Lint

* Trigger Build

Co-authored-by: Nil Gradisnik <nil.gradisnik@airbnb.com>
---
 packages/core/src/components/Modal/index.tsx | 15 +++++++++++++--
 packages/core/src/components/Modal/styles.ts |  2 --
 2 files changed, 13 insertions(+), 4 deletions(-)

diff --git a/packages/core/src/components/Modal/index.tsx b/packages/core/src/components/Modal/index.tsx
index 483cc58aa..146821409 100644
--- a/packages/core/src/components/Modal/index.tsx
+++ b/packages/core/src/components/Modal/index.tsx
@@ -4,14 +4,23 @@ import Portal from '../Portal';
 import ModalInner, { ModalInnerProps } from './private/Inner';
 import { ESCAPE } from '../../keys';
 import { styleSheetModal } from './styles';
+import { Z_INDEX_MODAL } from '../../constants';
 
 export type ModalProps = ModalInnerProps & {
   /** Custom style sheet. */
   innerStyleSheet?: StyleSheet;
+  /** Z-index of the modal. */
+  zIndex?: number | 'auto';
 };
 
 /** A modal component with a backdrop and a standardized layout. */
-export default function Modal({ onClose, styleSheet, innerStyleSheet, ...props }: ModalProps) {
+export default function Modal({
+  onClose,
+  styleSheet,
+  innerStyleSheet,
+  zIndex,
+  ...props
+}: ModalProps) {
   const [styles, cx] = useStyles(styleSheet ?? styleSheetModal);
 
   const handleClose = (event: React.MouseEvent | React.KeyboardEvent) => {
@@ -32,9 +41,11 @@ export default function Modal({ onClose, styleSheet, innerStyleSheet, ...props }
     };
   }, []);
 
+  const containerZIndex = { zIndex: zIndex ?? Z_INDEX_MODAL };
+
   return (
     <Portal>
-      <div className={cx(styles.container)}>
+      <div className={cx(containerZIndex, styles.container)}>
         <div role="presentation" className={cx(styles.wrapper)} onKeyUp={handleKeyUp}>
           <ModalInner {...props} styleSheet={innerStyleSheet} onClose={onClose} />
         </div>
diff --git a/packages/core/src/components/Modal/styles.ts b/packages/core/src/components/Modal/styles.ts
index e53d696ec..c2b73c0bd 100644
--- a/packages/core/src/components/Modal/styles.ts
+++ b/packages/core/src/components/Modal/styles.ts
@@ -1,5 +1,4 @@
 import { StyleSheet } from '../../hooks/useStyles';
-import { Z_INDEX_MODAL } from '../../constants';
 import toRGBA from '../../utils/toRGBA';
 
 export const MODAL_MAX_WIDTH_SMALL = 400;
@@ -14,7 +13,6 @@ export const styleSheetModal: StyleSheet = ({ unit, color }) => ({
     position: 'fixed',
     right: 0,
     top: 0,
-    zIndex: Z_INDEX_MODAL,
   },
 
   wrapper: {