refactor(ui): use variables for z-index values (#3453)

packages/netlify-cms-backend-git-gateway/src/AuthenticationPage.js

@@ -9,6 +9,7 @@ import {
   colors,
   colorsRaw,
   lengths,
+  zIndex,
 } from 'netlify-cms-ui-default';
 
 const LoginButton = styled.button`
@@ -38,7 +39,7 @@ const AuthInput = styled.input`
   margin-top: 6px;
   width: 100%;
   position: relative;
-  z-index: 1;
+  z-index: ${zIndex.zIndex1};
 
   &:focus {
     outline: none;

packages/netlify-cms-core/src/components/App/Header.js

@@ -14,6 +14,7 @@ import {
   lengths,
   shadows,
   buttons,
+  zIndex,
 } from 'netlify-cms-ui-default';
 import SettingsDropdown from 'UI/SettingsDropdown';
 
@@ -31,7 +32,7 @@ const AppHeader = props => (
       width: 100%;
       top: 0;
       background-color: ${colors.foreground};
-      z-index: 300;
+      z-index: ${zIndex.zIndex300};
       height: ${lengths.topBarHeight};
     `}
     {...props}

packages/netlify-cms-core/src/components/Collection/Entries/EntryCard.js

@@ -3,7 +3,7 @@ import styled from '@emotion/styled';
 import { connect } from 'react-redux';
 import { boundGetAsset } from 'Actions/media';
 import { Link } from 'react-router-dom';
-import { colors, colorsRaw, components, lengths } from 'netlify-cms-ui-default';
+import { colors, colorsRaw, components, lengths, zIndex } from 'netlify-cms-ui-default';
 import { VIEW_STYLE_LIST, VIEW_STYLE_GRID } from 'Constants/collectionViews';
 import { summaryFormatter } from 'Lib/formatters';
 import { keyToPathArray } from 'Lib/stringTemplate';
@@ -68,7 +68,7 @@ const CardBody = styled.div`
     content: '';
     position: absolute;
     display: block;
-    z-index: 1;
+    z-index: ${zIndex.zIndex1};
     bottom: 0;
     left: -20%;
     height: 140%;

packages/netlify-cms-core/src/components/Collection/Sidebar.js

@@ -5,7 +5,7 @@ import styled from '@emotion/styled';
 import { css } from '@emotion/core';
 import { translate } from 'react-polyglot';
 import { NavLink } from 'react-router-dom';
-import { Icon, components, colors, colorsRaw, lengths } from 'netlify-cms-ui-default';
+import { Icon, components, colors, colorsRaw, lengths, zIndex } from 'netlify-cms-ui-default';
 import { searchCollections } from 'Actions/collections';
 
 const styles = {
@@ -43,7 +43,7 @@ const SearchContainer = styled.div`
     position: absolute;
     top: 0;
     left: 6px;
-    z-index: 2;
+    z-index: ${zIndex.zIndex2};
     height: 100%;
     display: flex;
     align-items: center;
@@ -58,7 +58,7 @@ const SearchInput = styled.input`
   padding: 10px 6px 10px 32px;
   width: 100%;
   position: relative;
-  z-index: 1;
+  z-index: ${zIndex.zIndex1};
 
   &:focus {
     outline: none;

packages/netlify-cms-core/src/components/Editor/EditorInterface.js

@@ -4,7 +4,14 @@ import ImmutablePropTypes from 'react-immutable-proptypes';
 import { css, Global } from '@emotion/core';
 import styled from '@emotion/styled';
 import SplitPane from 'react-split-pane';
-import { colors, colorsRaw, components, transitions, IconButton } from 'netlify-cms-ui-default';
+import {
+  colors,
+  colorsRaw,
+  components,
+  transitions,
+  IconButton,
+  zIndex,
+} from 'netlify-cms-ui-default';
 import { ScrollSync, ScrollSyncPane } from 'react-scroll-sync';
 import EditorControlPane from './EditorControlPane/EditorControlPane';
 import EditorPreviewPane from './EditorPreviewPane/EditorPreviewPane';
@@ -107,7 +114,7 @@ const ViewControls = styled.div`
   position: absolute;
   top: 10px;
   right: 10px;
-  z-index: 299;
+  z-index: ${zIndex.zIndex299};
 `;
 
 class EditorInterface extends Component {

packages/netlify-cms-core/src/components/Editor/EditorToolbar.js

@@ -15,6 +15,7 @@ import {
   colors,
   components,
   buttons,
+  zIndex,
 } from 'netlify-cms-ui-default';
 import { status } from 'Constants/publishModes';
 import SettingsDropdown from 'UI/SettingsDropdown';
@@ -55,7 +56,7 @@ const ToolbarContainer = styled.div`
   left: 0;
   width: 100%;
   min-width: 800px;
-  z-index: 300;
+  z-index: ${zIndex.zIndex300};
   background-color: #fff;
   height: 66px;
   display: flex;

packages/netlify-cms-core/src/components/MediaLibrary/MediaLibraryActions.js

@@ -3,7 +3,7 @@ import PropTypes from 'prop-types';
 import { css } from '@emotion/core';
 import styled from '@emotion/styled';
 import { FileUploadButton } from 'UI';
-import { buttons, shadows } from 'netlify-cms-ui-default';
+import { buttons, shadows, zIndex } from 'netlify-cms-ui-default';
 
 const styles = {
   button: css`
@@ -46,7 +46,7 @@ const StyledUploadButton = styled(FileUploadButton)`
     opacity: 0;
     overflow: hidden;
     position: absolute;
-    z-index: 0;
+    z-index: ${zIndex.zIndex0};
     outline: none;
   }
 `;

packages/netlify-cms-core/src/components/MediaLibrary/MediaLibrarySearch.js

@@ -1,7 +1,7 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 import styled from '@emotion/styled';
-import { Icon, lengths, colors } from 'netlify-cms-ui-default';
+import { Icon, lengths, colors, zIndex } from 'netlify-cms-ui-default';
 
 const SearchContainer = styled.div`
   height: 37px;
@@ -19,7 +19,7 @@ const SearchInput = styled.input`
   padding: 10px 6px 10px 32px;
   width: 100%;
   position: relative;
-  z-index: 1;
+  z-index: ${zIndex.zIndex1};
 
   &:focus {
     outline: none;
@@ -31,7 +31,7 @@ const SearchIcon = styled(Icon)`
   position: absolute;
   top: 50%;
   left: 6px;
-  z-index: 2;
+  z-index: ${zIndex.zIndex2};
   transform: translate(0, -50%);
 `;
 

packages/netlify-cms-core/src/components/UI/Modal.js

@@ -2,7 +2,7 @@ import React from 'react';
 import PropTypes from 'prop-types';
 import { css, Global, ClassNames } from '@emotion/core';
 import ReactModal from 'react-modal';
-import { transitions, shadows, lengths } from 'netlify-cms-ui-default';
+import { transitions, shadows, lengths, zIndex } from 'netlify-cms-ui-default';
 
 const ReactModalGlobalStyles = () => (
   <Global
@@ -29,7 +29,7 @@ const styleStrings = {
     }
   `,
   overlay: `
-    z-index: 99999;
+    z-index: ${zIndex.zIndex99999};
     position: fixed;
     top: 0;
     left: 0;

packages/netlify-cms-core/src/components/UI/Toast.js

@@ -4,7 +4,7 @@ import PropTypes from 'prop-types';
 import { css, Global } from '@emotion/core';
 import { translate } from 'react-polyglot';
 import reduxNotificationsStyles from 'redux-notifications/lib/styles.css';
-import { shadows, colors, lengths } from 'netlify-cms-ui-default';
+import { shadows, colors, lengths, zIndex } from 'netlify-cms-ui-default';
 
 const ReduxNotificationsGlobalStyles = () => (
   <Global
@@ -12,7 +12,7 @@ const ReduxNotificationsGlobalStyles = () => (
       ${reduxNotificationsStyles};
 
       .notif__container {
-        z-index: 10000;
+        z-index: ${zIndex.zIndex10000};
         white-space: pre-wrap;
       }
     `}

packages/netlify-cms-ui-default/src/Dropdown.js

@@ -3,7 +3,7 @@ import PropTypes from 'prop-types';
 import { css } from '@emotion/core';
 import styled from '@emotion/styled';
 import { Wrapper, Button as DropdownButton, Menu, MenuItem } from 'react-aria-menubutton';
-import { buttons, components } from './styles';
+import { buttons, components, zIndex } from './styles';
 import Icon from './Icon';
 
 const StyledWrapper = styled(Wrapper)`
@@ -37,7 +37,7 @@ const DropdownList = styled.ul`
   top: 0;
   left: 0;
   min-width: 100%;
-  z-index: 2;
+  z-index: ${zIndex.zIndex2};
 
   ${props => css`
     width: ${props.width};

packages/netlify-cms-ui-default/src/Loader.js

@@ -3,7 +3,7 @@ import PropTypes from 'prop-types';
 import styled from '@emotion/styled';
 import { css, keyframes } from '@emotion/core';
 import CSSTransition from 'react-transition-group/CSSTransition';
-import { colors } from './styles';
+import { colors, zIndex } from './styles';
 
 const styles = {
   disabled: css`
@@ -122,7 +122,7 @@ const StyledLoader = styled(Loader)`
   left: 50%;
   margin: 0px;
   text-align: center;
-  z-index: 1000;
+  z-index: ${zIndex.zIndex1000};
   transform: translateX(-50%) translateY(-50%);
 
   &:before,

packages/netlify-cms-ui-default/src/index.js

@@ -21,6 +21,7 @@ import {
   borders,
   transitions,
   effects,
+  zIndex,
   reactSelectStyles,
   GlobalStyles,
 } from './styles';
@@ -53,6 +54,7 @@ export const NetlifyCmsUiDefault = {
   borders,
   transitions,
   effects,
+  zIndex,
   reactSelectStyles,
   GlobalStyles,
 };
@@ -84,6 +86,7 @@ export {
   borders,
   transitions,
   effects,
+  zIndex,
   reactSelectStyles,
   GlobalStyles,
   GoBackButton,

packages/netlify-cms-ui-default/src/styles.js

@@ -380,6 +380,20 @@ const reactSelectStyles = {
   }),
 };
 
+const zIndex = {
+  zIndex0: 0,
+  zIndex1: 1,
+  zIndex2: 2,
+  zIndex10: 10,
+  zIndex100: 100,
+  zIndex200: 200,
+  zIndex299: 299,
+  zIndex300: 300,
+  zIndex1000: 1000,
+  zIndex10000: 10000,
+  zIndex99999: 99999,
+};
+
 const GlobalStyles = () => (
   <Global
     styles={css`
@@ -480,6 +494,7 @@ export {
   borders,
   transitions,
   effects,
+  zIndex,
   reactSelectStyles,
   GlobalStyles,
 };

packages/netlify-cms-widget-code/src/SettingsButton.js

@@ -1,6 +1,6 @@
 import React from 'react';
 import styled from '@emotion/styled';
-import { Icon, buttons, shadows } from 'netlify-cms-ui-default';
+import { Icon, buttons, shadows, zIndex } from 'netlify-cms-ui-default';
 
 const StyledSettingsButton = styled.button`
   ${buttons.button};
@@ -8,7 +8,7 @@ const StyledSettingsButton = styled.button`
   ${shadows.drop};
   display: block;
   position: absolute;
-  z-index: 100;
+  z-index: ${zIndex.zIndex100};
   right: 8px;
   top: 8px;
   opacity: 0.8;

packages/netlify-cms-widget-code/src/SettingsPane.js

@@ -2,7 +2,7 @@ import React from 'react';
 import styled from '@emotion/styled';
 import Select from 'react-select';
 import isHotkey from 'is-hotkey';
-import { text, shadows } from 'netlify-cms-ui-default';
+import { text, shadows, zIndex } from 'netlify-cms-ui-default';
 import SettingsButton from './SettingsButton';
 import languageSelectStyles from './languageSelectStyles';
 
@@ -10,7 +10,7 @@ const SettingsPaneContainer = styled.div`
   position: absolute;
   right: 0;
   width: 200px;
-  z-index: 10;
+  z-index: ${zIndex.zIndex10};
   height: 100%;
   background-color: #fff;
   overflow: hidden;

packages/netlify-cms-widget-markdown/src/MarkdownControl/VisualEditor.js

@@ -7,7 +7,7 @@ import { css as coreCss, ClassNames } from '@emotion/core';
 import { get, isEmpty, debounce } from 'lodash';
 import { Value, Document, Block, Text } from 'slate';
 import { Editor as Slate } from 'slate-react';
-import { lengths, fonts } from 'netlify-cms-ui-default';
+import { lengths, fonts, zIndex } from 'netlify-cms-ui-default';
 import { editorStyleVars, EditorControlBar } from '../styles';
 import { slateToMarkdown, markdownToSlate } from '../serializers';
 import Toolbar from '../MarkdownControl/Toolbar';
@@ -28,7 +28,7 @@ const visualEditorStyles = ({ minimal }) => `
   padding: 0;
   display: flex;
   flex-direction: column;
-  z-index: 100;
+  z-index: ${zIndex.zIndex100};
 `;
 
 const InsertionPoint = styled.div`

packages/netlify-cms-widget-markdown/src/MarkdownControl/components/VoidBlock.js

@@ -1,6 +1,7 @@
 /* eslint-disable react/prop-types */
 import React from 'react';
 import { css } from '@emotion/core';
+import { zIndex } from 'netlify-cms-ui-default';
 
 const InsertionPoint = props => (
   <div
@@ -8,7 +9,7 @@ const InsertionPoint = props => (
       height: 32px;
       cursor: text;
       position: relative;
-      z-index: 1;
+      z-index: ${zIndex.zIndex1};
       margin-top: -16px;
     `}
     {...props}

packages/netlify-cms-widget-markdown/src/styles.js

@@ -1,11 +1,12 @@
 import styled from '@emotion/styled';
+import { zIndex } from 'netlify-cms-ui-default';
 
 export const editorStyleVars = {
   stickyDistanceBottom: '100px',
 };
 
 export const EditorControlBar = styled.div`
-  z-index: 200;
+  z-index: ${zIndex.zIndex200};
   position: sticky;
   top: 0;
   margin-bottom: ${editorStyleVars.stickyDistanceBottom};