From 800d2fc238f56bbdc69d0c0c868b81a072227b84 Mon Sep 17 00:00:00 2001
From: Chancellor Clark <chancellor.clark@bigcommerce.com>
Date: Fri, 16 Aug 2019 12:46:46 -0500
Subject: [PATCH] fix(component): add missing z-index to components (#176)

BREAKING CHANGE: `theme.zIndex` no longer has `theme.zIndex.dropdown`
---
 packages/big-design-theme/src/system/z-index.ts           | 8 +++-----
 packages/big-design/src/components/List/styled.tsx        | 1 +
 .../src/components/Modal/__snapshots__/spec.tsx.snap      | 4 ++++
 packages/big-design/src/components/Modal/styled.tsx       | 2 ++
 packages/big-design/src/components/Tooltip/styled.tsx     | 1 +
 packages/docs/components/SideNav/SideNavMenu/styled.tsx   | 2 +-
 6 files changed, 12 insertions(+), 6 deletions(-)

diff --git a/packages/big-design-theme/src/system/z-index.ts b/packages/big-design-theme/src/system/z-index.ts
index 41e582c13..4f5765f42 100644
--- a/packages/big-design-theme/src/system/z-index.ts
+++ b/packages/big-design-theme/src/system/z-index.ts
@@ -1,19 +1,17 @@
 export interface ZIndex {
-  dropdown: number;
   sticky: number;
   fixed: number;
   modalBackdrop: number;
   modal: number;
-  popover: number;
   tooltip: number;
+  popover: number;
 }
 
 export const zIndex: ZIndex = {
-  dropdown: 1000,
   sticky: 1020,
   fixed: 1030,
   modalBackdrop: 1040,
   modal: 1050,
-  popover: 1060,
-  tooltip: 1070,
+  tooltip: 1060,
+  popover: 1070,
 };
diff --git a/packages/big-design/src/components/List/styled.tsx b/packages/big-design/src/components/List/styled.tsx
index a0e732164..a11dee4dd 100644
--- a/packages/big-design/src/components/List/styled.tsx
+++ b/packages/big-design/src/components/List/styled.tsx
@@ -16,6 +16,7 @@ export const StyledList = styled.ul<StyledList>`
   outline: none;
   overflow-y: scroll;
   padding: ${({ theme }) => theme.spacing.xSmall} 0;
+  z-index: ${({ theme }) => theme.zIndex.popover};
 `;
 
 StyledList.defaultProps = { theme: defaultTheme };
diff --git a/packages/big-design/src/components/Modal/__snapshots__/spec.tsx.snap b/packages/big-design/src/components/Modal/__snapshots__/spec.tsx.snap
index 0480aa061..058db72c6 100644
--- a/packages/big-design/src/components/Modal/__snapshots__/spec.tsx.snap
+++ b/packages/big-design/src/components/Modal/__snapshots__/spec.tsx.snap
@@ -139,6 +139,7 @@ exports[`render open modal 1`] = `
   position: fixed;
   top: 0;
   width: 100%;
+  z-index: 1040;
   background: rgba(49,52,64,0.7);
 }
 
@@ -146,6 +147,7 @@ exports[`render open modal 1`] = `
   background: #FFFFFF;
   box-sizing: border-box;
   position: fixed;
+  z-index: 1050;
   height: 100%;
   width: 100%;
 }
@@ -384,12 +386,14 @@ exports[`render open modal without backdrop 1`] = `
   position: fixed;
   top: 0;
   width: 100%;
+  z-index: 1040;
 }
 
 .c1 {
   background: #FFFFFF;
   box-sizing: border-box;
   position: fixed;
+  z-index: 1050;
   height: 100%;
   width: 100%;
 }
diff --git a/packages/big-design/src/components/Modal/styled.tsx b/packages/big-design/src/components/Modal/styled.tsx
index 84529f0a7..8ee131b2a 100644
--- a/packages/big-design/src/components/Modal/styled.tsx
+++ b/packages/big-design/src/components/Modal/styled.tsx
@@ -16,6 +16,7 @@ export const StyledModal = styled.div.attrs({
   position: fixed;
   top: 0;
   width: 100%;
+  z-index: ${({ theme }) => theme.zIndex.modalBackdrop};
 
   ${props =>
     props.backdrop &&
@@ -29,6 +30,7 @@ export const StyledModalContent = styled(Flex)<{ variant: ModalProps['variant']
   background: ${({ theme }) => theme.colors.white};
   box-sizing: border-box;
   position: fixed;
+  z-index: ${({ theme }) => theme.zIndex.modal};
 
   ${({ variant }) =>
     variant === 'dialog' &&
diff --git a/packages/big-design/src/components/Tooltip/styled.tsx b/packages/big-design/src/components/Tooltip/styled.tsx
index 77b07800c..b26defbfd 100644
--- a/packages/big-design/src/components/Tooltip/styled.tsx
+++ b/packages/big-design/src/components/Tooltip/styled.tsx
@@ -11,6 +11,7 @@ export const StyledTooltip = styled.div`
   background-color: ${({ theme }) => theme.colors.secondary70};
   max-width: ${({ theme }) => theme.helpers.remCalc(336)};
   padding: ${({ theme }) => theme.spacing.xSmall};
+  z-index: ${({ theme }) => theme.zIndex.tooltip};
 `;
 
 StyledTooltip.defaultProps = { theme: defaultTheme };
diff --git a/packages/docs/components/SideNav/SideNavMenu/styled.tsx b/packages/docs/components/SideNav/SideNavMenu/styled.tsx
index f59fb3e33..282423910 100644
--- a/packages/docs/components/SideNav/SideNavMenu/styled.tsx
+++ b/packages/docs/components/SideNav/SideNavMenu/styled.tsx
@@ -25,7 +25,7 @@ export const StyledNavigation = styled(Flex.Item)<Navigation>`
   position: absolute;
   top: 100%;
   width: 100%;
-  z-index: ${({ theme }) => theme.zIndex.dropdown};
+  z-index: ${({ theme }) => theme.zIndex.sticky};
 
   ${({ theme }) => theme.breakpoints.tablet} {
     border: 0;