Move z-index definitions to a single module (#16)

Not sure if there's a better way to organize this.. I just gave a new digit to each conceptual "level"

Author: spicydonuts

src/Lumi/Components/ButtonGroup.purs

@@ -1,6 +1,7 @@
 module Lumi.Components.ButtonGroup where
 
 import JSS (JSS, jss)
+import Lumi.Components.ZIndex (ziButtonGroup)
 import React.Basic (Component, JSX, createComponent, element, makeStateless)
 import React.Basic.DOM (unsafeCreateDOMComponent, CSS)
 
@@ -48,8 +49,8 @@ styles = jss
                   { borderTopLeftRadius: "0"
                   , borderBottomLeftRadius: "0"
                   }
-              , "&:focus": { zIndex: "1" }
-              , "&:hover": { zIndex: "2" }
+              , "&:focus": { zIndex: ziButtonGroup }
+              , "&:hover": { zIndex: ziButtonGroup }
               }
           }
       }

src/Lumi/Components/DropdownButton.purs

@@ -17,6 +17,7 @@ import Lumi.Components.Column (column_)
 import Lumi.Components.Divider (divider_)
 import Lumi.Components.Link as Link
 import Lumi.Components.Text (p_)
+import Lumi.Components.ZIndex (ziDropdownButton)
 import Math as Math
 import React.Basic (Component, JSX, createComponent, element, fragment, make, makeStateless, readProps, readState)
 import React.Basic.DOM as R
@@ -275,7 +276,7 @@ styles = jss
           , borderRadius: "3px"
           , boxShadow: "0 2px 4px 0 rgba(12, 0, 51, 0.06)"
           , background: cssStringHSLA colors.white
-          , zIndex: "5"
+          , zIndex: ziDropdownButton
 
           , "& a.lumi.lumi-dropdown-menu-item":
               { boxSizing: "border-box"

src/Lumi/Components/InputGroup.purs

@@ -43,7 +43,7 @@ styles = jss
           , "& a.input-container":
               { flex: "1"
               , marginRight: "-1px"
-              , "&:focus, &:hover": { zIndex: "1" }
+              -- , "&:focus, &:hover": { zIndex: "1" }
               , "& input[type=\"text\"], & input.lumi[type=\"text\"]":
                   { borderRadius: "0"
                   , width: "100%"
@@ -73,9 +73,9 @@ styles = jss
               , borderBottomLeftRadius:"0"
               }
 
-          , "& input-group-addon button.lumi":
-              { "&:focus, &:hover": { zIndex: "1" }
-              }
+          -- , "& input-group-addon button.lumi":
+          --     { "&:focus, &:hover": { zIndex: "1" }
+          --     }
           }
       }
   }

src/Lumi/Components/Modal.purs

@@ -17,6 +17,7 @@ import Lumi.Components.Icon (IconType(..), icon_)
 import Lumi.Components.Link as Link
 import Lumi.Components.Size (Size(..))
 import Lumi.Components.Text (sectionHeader_, subsectionHeader, text)
+import Lumi.Components.ZIndex (ziModal)
 import React.Basic (Component, JSX, ReactComponent, createComponent, element, empty, make, makeStateless, toReactComponent)
 import React.Basic.DOM as R
 import React.Basic.DOM.Events (currentTarget, stopPropagation, target)
@@ -313,7 +314,7 @@ styles = jss
           , left: "0"
           , bottom: "0"
           , right: "0"
-          , zIndex: "10000000"
+          , zIndex: ziModal
           , display: "flex"
           , flexFlow: "column"
           , alignItems: "center" -- horizontal centering, vertical centering is handled by lumi-modal-overlay > lumi-modal

src/Lumi/Components/Navigation.purs

@@ -19,6 +19,7 @@ import Lumi.Components.Link (link, defaults)
 import Lumi.Components.Row (row)
 import Lumi.Components.Size (Size(..))
 import Lumi.Components.Text (body_, subtext_, text, subtext)
+import Lumi.Components.ZIndex (ziNavigationBar, ziNavigationDropdown)
 import React.Basic (Component, JSX, createComponent, element, empty, fragment, make)
 import React.Basic.DOM (css)
 import React.Basic.DOM as R
@@ -384,7 +385,7 @@ styles = jss
   { "@global":
       { "lumi-navigation":
           { boxSizing: "border-box"
-          , zIndex: "99"
+          , zIndex: ziNavigationBar
           , position: "relative"
           , display: "flex"
           , flexFlow: "row"
@@ -424,7 +425,7 @@ styles = jss
           , "& lumi-subnav-link-container":
               { boxSizing: "border-box"
               , position: "absolute"
-              , zIndex: "999"
+              , zIndex: ziNavigationDropdown
               , top: "calc(100% - 4px)"
               , right: "16px"
               , display: "none"
@@ -479,7 +480,7 @@ styles = jss
                       { position: "absolute"
                       , top: "0"
                       , left: "0"
-                      , zIndex: "9999"
+                      , zIndex: ziNavigationDropdown
 
                       , display: "none"
                       , flexFlow: "column"

src/Lumi/Components/Select.purs

@@ -31,6 +31,7 @@ import Lumi.Components.Icon as Icon
 import Lumi.Components.Input (lumiInputDisabledStyles, lumiInputFocusStyles, lumiInputHoverStyles, lumiInputStyles)
 import Lumi.Components.Loader (loader)
 import Lumi.Components.Select.Backend (SelectBackendProps, SelectOption, SelectOptions(..), selectBackend)
+import Lumi.Components.ZIndex (ziSelect)
 import React.Basic (Component, JSX, createComponent, element, elementKeyed, empty, makeStateless)
 import React.Basic.DOM (CSS, css)
 import React.Basic.DOM as R
@@ -505,7 +506,7 @@ styles = jss
 
               , position: "absolute"
               , top: "4px"
-              , zIndex: "1"
+              , zIndex: ziSelect
 
               , display: "flex"
               , flexFlow: "column"

src/Lumi/Components/Table.purs

@@ -27,6 +27,7 @@ import Lumi.Components.Input (CheckboxState(..), checkbox, input)
 import Lumi.Components.Link as Link
 import Lumi.Components.Table.FilterDropdown (Item, filterDropdown)
 import Lumi.Components.Text (subtext_)
+import Lumi.Components.ZIndex (ziTableHeader, ziTableHeaderMenu, ziTableLockedColumn, ziTableLockedColumnHeader)
 import React.Basic (Component, JSX, ReactComponent, createComponent, element, empty, keyed, make, readProps, readState)
 import React.Basic.DOM as R
 import React.Basic.DOM.Components.GlobalEvents (windowEvent)
@@ -605,7 +606,7 @@ styles = jss
               , "& th":
                   { position: "sticky"
                   , top: "0"
-                  , zIndex: "2"
+                  , zIndex: ziTableHeader
                   }
 
                 -- sticky columns
@@ -616,10 +617,10 @@ styles = jss
                       }
                   , "&.selectable .sticky-column": { left: "45px" }
                   , "&.selectable th:first-child, & th.sticky-column":
-                      { zIndex: "3"
+                      { zIndex: ziTableLockedColumnHeader
                       }
                   , "&.selectable td:first-child, & td.sticky-column":
-                      { zIndex: "1"
+                      { zIndex: ziTableLockedColumn
                       }
                   , "& .sticky-column":
                       { transition: "box-shadow 200ms ease-in-out"
@@ -691,7 +692,7 @@ styles = jss
       , "lumi-filter-dropdown":
           { boxSizing: "border-box"
           , position: "absolute"
-          , zIndex: "4"
+          , zIndex: ziTableHeaderMenu
           , backgroundColor: cssStringHSLA colors.white
           , border: [ "1px", "solid", cssStringHSLA colors.black4 ]
           , borderRadius: "3px"

src/Lumi/Components/Toast.purs

@@ -22,6 +22,7 @@ import Effect.Ref (Ref, modify, new, read, write)
 import Effect.Unsafe (unsafePerformEffect)
 import JSS (JSS, jss)
 import Lumi.Components.Color (colors)
+import Lumi.Components.ZIndex (ziToast)
 import React.Basic (Component, JSX, createComponent, element, empty, make)
 import React.Basic.DOM (createPortal)
 import React.Basic.DOM as R
@@ -194,6 +195,7 @@ styles = jss
           , "& > lumi-toast-wrapper":
               { boxSizing: "border-box"
               , display: "flex"
+              , zIndex: ziToast
               , transitionProperty: "opacity, transform"
               , transitionTimingFunction: "ease-in-out"
               , transitionDuration

src/Lumi/Components/Tooltip.purs

@@ -7,6 +7,7 @@ import Data.Nullable (Nullable)
 import JSS (JSS, jss)
 import Lumi.Components.Color (colors)
 import Lumi.Components.Size (Size)
+import Lumi.Components.ZIndex (ziTooltip)
 import React.Basic (Component, JSX, createComponent, element, makeStateless)
 import React.Basic.DOM (CSS, unsafeCreateDOMComponent)
 
@@ -54,7 +55,7 @@ styles = jss
               , borderRadius: "3px"
               , padding: "7px"
               , position: "absolute"
-              , zIndex: "1"
+              , zIndex: ziTooltip
               , transition: "opacity 0.3s"
               -- , -webkit-backdrop-filter: blur(1px);
               , backdropFilter: "blur(1px)"

src/Lumi/Components/ZIndex.purs

@@ -0,0 +1,40 @@
+module Lumi.Components.ZIndex where
+
+ziButtonGroup :: Int
+ziButtonGroup = 100
+
+ziDropdownButton :: Int
+ziDropdownButton = 100
+
+ziInputGroup :: Int
+ziInputGroup = 100
+
+ziModal :: Int
+ziModal = 1000
+
+ziNavigationBar :: Int
+ziNavigationBar = 10
+
+ziNavigationDropdown :: Int
+ziNavigationDropdown = 11
+
+ziSelect :: Int
+ziSelect = 100
+
+ziTableHeader :: Int
+ziTableHeader = 2
+
+ziTableHeaderMenu :: Int
+ziTableHeaderMenu = 4
+
+ziTableLockedColumn :: Int
+ziTableLockedColumn = 1
+
+ziTableLockedColumnHeader :: Int
+ziTableLockedColumnHeader = 3
+
+ziToast :: Int
+ziToast = 10000
+
+ziTooltip :: Int
+ziTooltip = 100000