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

@@ -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>

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: {