fix(dropdown): add z-index

8base · Aug 24, 2018 · 32a6c4c · 32a6c4c
1 parent 45905e2
commit 32a6c4c
Show file tree

Hide file tree

Showing 3 changed files with 12 additions and 10 deletions.
diff --git a/src/atoms/Dropdown/DropdownBody.js b/src/atoms/Dropdown/DropdownBody.js
@@ -9,6 +9,7 @@ import { Portal } from 'react-portal';
 import { withDropdownContext } from './DropdownContext';
 import { offsetSizes, defaultTheme, DropdownBodyTag } from './DropdownBody.theme';
 import type { PropSizes } from '../../types';
+import { Z_INDEX } from '../../theme/zIndex';
 
 /**
  * @prop {*} background options for background color
@@ -70,7 +71,7 @@ const dropdownBodyEnhancer: HOC<*, DropdownBodyProps> = compose(
 type DropdownBodyEnhancedProps = HOCBase<typeof dropdownBodyEnhancer>;
 
 class DropdownBodyBase extends PureComponent<DropdownBodyEnhancedProps> {
-  static zIndex = 2000;
+  static zIndex = Z_INDEX.DROPDOWN;
 
   static defaultProps = {
     ...defaultTheme,

diff --git a/src/theme/zIndex.js b/src/theme/zIndex.js
@@ -2,6 +2,7 @@
 
 const Z_INDEX = {
   MODAL: 10000,
+  DROPDOWN: 20000,
   FIXED_NAV: 1000,
 };
 

diff --git a/storybook/__tests__/__snapshots__/storyshots.test.js.snap b/storybook/__tests__/__snapshots__/storyshots.test.js.snap
@@ -8537,7 +8537,7 @@ exports[`Storyshots ATOMS/Dropdown default 1`] = `
           "pointerEvents": "none",
           "position": "absolute",
           "width": undefined,
-          "zIndex": 2000,
+          "zIndex": 20000,
         }
       }
     >
@@ -8655,7 +8655,7 @@ exports[`Storyshots ATOMS/Dropdown with custom body width 1`] = `
           "pointerEvents": "none",
           "position": "absolute",
           "width": "40rem",
-          "zIndex": 2000,
+          "zIndex": 20000,
         }
       }
     >
@@ -8773,7 +8773,7 @@ exports[`Storyshots ATOMS/Dropdown with custom offset 1`] = `
           "pointerEvents": "none",
           "position": "absolute",
           "width": undefined,
-          "zIndex": 2000,
+          "zIndex": 20000,
         }
       }
     >
@@ -8892,7 +8892,7 @@ exports[`Storyshots ATOMS/Dropdown with dark background 1`] = `
           "pointerEvents": "none",
           "position": "absolute",
           "width": undefined,
-          "zIndex": 2000,
+          "zIndex": 20000,
         }
       }
     >
@@ -9010,7 +9010,7 @@ exports[`Storyshots ATOMS/Dropdown with force render 1`] = `
           "pointerEvents": "none",
           "position": "absolute",
           "width": undefined,
-          "zIndex": 2000,
+          "zIndex": 20000,
         }
       }
     >
@@ -9128,7 +9128,7 @@ exports[`Storyshots ATOMS/Dropdown with pin to right 1`] = `
           "pointerEvents": "none",
           "position": "absolute",
           "width": undefined,
-          "zIndex": 2000,
+          "zIndex": 20000,
         }
       }
     >
@@ -9340,7 +9340,7 @@ exports[`Storyshots ATOMS/Dropdown with stretch target 1`] = `
           "pointerEvents": "none",
           "position": "absolute",
           "width": undefined,
-          "zIndex": 2000,
+          "zIndex": 20000,
         }
       }
     >
@@ -9458,7 +9458,7 @@ exports[`Storyshots ATOMS/Dropdown without background 1`] = `
           "pointerEvents": "none",
           "position": "absolute",
           "width": undefined,
-          "zIndex": 2000,
+          "zIndex": 20000,
         }
       }
     >
@@ -9576,7 +9576,7 @@ exports[`Storyshots ATOMS/Dropdown without close on outside click 1`] = `
           "pointerEvents": "none",
           "position": "absolute",
           "width": undefined,
-          "zIndex": 2000,
+          "zIndex": 20000,
         }
       }
     >