fix:[Lightbox] Increase z-index (#411)

* [Lightbox] Increase z-index * lint
airbnb · Jan 22, 2021 · 12464b9 · 12464b9
1 parent eaaef98
commit 12464b9
Show file tree

Hide file tree

Showing 3 changed files with 24 additions and 1 deletion.
diff --git a/packages/core/src/components/Lightbox/index.tsx b/packages/core/src/components/Lightbox/index.tsx
@@ -2,6 +2,7 @@ import React from 'react';
 import Sheet from '../Sheet';
 import LightboxImage, { LightboxImageProps } from './Image';
 import Header from './Header';
+import { styleSheetLightboxSheet } from './styles';
 
 export type LightboxProps = {
   /** Images to show. */
@@ -140,7 +141,16 @@ export default class Lightbox extends React.PureComponent<LightboxProps, Lightbo
     );
 
     return (
-      <Sheet compact headerShadow noAnimation portal visible header={header} onClose={onClose}>
+      <Sheet
+        compact
+        headerShadow
+        noAnimation
+        portal
+        visible
+        header={header}
+        styleSheet={styleSheetLightboxSheet}
+        onClose={onClose}
+      >
         <LightboxImage
           aside={aside}
           alt={alt}

diff --git a/packages/core/src/components/Lightbox/styles.ts b/packages/core/src/components/Lightbox/styles.ts
@@ -1,4 +1,7 @@
+import { ComponentBlock } from 'aesthetic';
+import { Z_INDEX_LIGHTBOX } from '../../constants';
 import { StyleSheet } from '../../hooks/useStyles';
+import { styleSheetSheet } from '../Sheet/styles';
 
 export const styleSheetHeader: StyleSheet = ({ unit }) => ({
   header: {
@@ -49,3 +52,12 @@ export const styleSheetImage: StyleSheet = ({ color, unit }) => ({
     padding: unit * 3,
   },
 });
+
+export const styleSheetLightboxSheet: StyleSheet = (theme) => {
+  const sheetStyle = styleSheetSheet(theme);
+
+  // Override zIndex
+  (sheetStyle.sheet as ComponentBlock).zIndex = Z_INDEX_LIGHTBOX;
+
+  return sheetStyle;
+};
diff --git a/packages/core/src/constants.ts b/packages/core/src/constants.ts
@@ -102,6 +102,7 @@ export const STATUSES = ['notice', 'info', 'success', 'warning', 'danger', 'mute
 export const BRANDS = ['luxury', 'plus'];
 export const Z_INDEX_MODAL = 2000;
 export const Z_INDEX_PORTAL = 2000; // Same as Modal to fix Tooltip in Modal
+export const Z_INDEX_LIGHTBOX = 2004; // Lightbox is full screen and appears on top of everything else
 export const Z_INDEX_TOAST = 3000;
 
 // EMOJIS