Skip to content

Commit 2e84aa6

Browse files
author
Madeline Trotter
committed
Move z-index definitions to a single module
1 parent 75d5e50 commit 2e84aa6

File tree

10 files changed

+66
-17
lines changed

10 files changed

+66
-17
lines changed

‎src/Lumi/Components/ButtonGroup.purs‎

Lines changed: 3 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,7 @@
11
module Lumi.Components.ButtonGroup where
22

33
import JSS (JSS, jss)
4+
import Lumi.Components.ZIndex (ziButtonGroup)
45
import React.Basic (Component, JSX, createComponent, element, makeStateless)
56
import React.Basic.DOM (unsafeCreateDOMComponent, CSS)
67

@@ -48,8 +49,8 @@ styles = jss
4849
{ borderTopLeftRadius: "0"
4950
, borderBottomLeftRadius: "0"
5051
}
51-
, "&:focus": { zIndex: "1" }
52-
, "&:hover": { zIndex: "2" }
52+
, "&:focus": { zIndex: ziButtonGroup }
53+
, "&:hover": { zIndex: ziButtonGroup }
5354
}
5455
}
5556
}

‎src/Lumi/Components/DropdownButton.purs‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -17,6 +17,7 @@ import Lumi.Components.Column (column_)
1717
import Lumi.Components.Divider (divider_)
1818
import Lumi.Components.Link as Link
1919
import Lumi.Components.Text (p_)
20+
import Lumi.Components.ZIndex (ziDropdownButton)
2021
import Math as Math
2122
import React.Basic (Component, JSX, createComponent, element, fragment, make, makeStateless, readProps, readState)
2223
import React.Basic.DOM as R
@@ -275,7 +276,7 @@ styles = jss
275276
, borderRadius: "3px"
276277
, boxShadow: "0 2px 4px 0 rgba(12, 0, 51, 0.06)"
277278
, background: cssStringHSLA colors.white
278-
, zIndex: "5"
279+
, zIndex: ziDropdownButton
279280

280281
, "& a.lumi.lumi-dropdown-menu-item":
281282
{ boxSizing: "border-box"

‎src/Lumi/Components/InputGroup.purs‎

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -43,7 +43,7 @@ styles = jss
4343
, "& a.input-container":
4444
{ flex: "1"
4545
, marginRight: "-1px"
46-
, "&:focus, &:hover": { zIndex: "1" }
46+
-- , "&:focus, &:hover": { zIndex: "1" }
4747
, "& input[type=\"text\"], & input.lumi[type=\"text\"]":
4848
{ borderRadius: "0"
4949
, width: "100%"
@@ -73,9 +73,9 @@ styles = jss
7373
, borderBottomLeftRadius:"0"
7474
}
7575

76-
, "& input-group-addon button.lumi":
77-
{ "&:focus, &:hover": { zIndex: "1" }
78-
}
76+
-- , "& input-group-addon button.lumi":
77+
-- { "&:focus, &:hover": { zIndex: "1" }
78+
-- }
7979
}
8080
}
8181
}

‎src/Lumi/Components/Modal.purs‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -17,6 +17,7 @@ import Lumi.Components.Icon (IconType(..), icon_)
1717
import Lumi.Components.Link as Link
1818
import Lumi.Components.Size (Size(..))
1919
import Lumi.Components.Text (sectionHeader_, subsectionHeader, text)
20+
import Lumi.Components.ZIndex (ziModal)
2021
import React.Basic (Component, JSX, ReactComponent, createComponent, element, empty, make, makeStateless, toReactComponent)
2122
import React.Basic.DOM as R
2223
import React.Basic.DOM.Events (currentTarget, stopPropagation, target)
@@ -313,7 +314,7 @@ styles = jss
313314
, left: "0"
314315
, bottom: "0"
315316
, right: "0"
316-
, zIndex: "10000000"
317+
, zIndex: ziModal
317318
, display: "flex"
318319
, flexFlow: "column"
319320
, alignItems: "center" -- horizontal centering, vertical centering is handled by lumi-modal-overlay > lumi-modal

‎src/Lumi/Components/Navigation.purs‎

Lines changed: 4 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -19,6 +19,7 @@ import Lumi.Components.Link (link, defaults)
1919
import Lumi.Components.Row (row)
2020
import Lumi.Components.Size (Size(..))
2121
import Lumi.Components.Text (body_, subtext_, text, subtext)
22+
import Lumi.Components.ZIndex (ziNavigationBar, ziNavigationDropdown)
2223
import React.Basic (Component, JSX, createComponent, element, empty, fragment, make)
2324
import React.Basic.DOM (css)
2425
import React.Basic.DOM as R
@@ -384,7 +385,7 @@ styles = jss
384385
{ "@global":
385386
{ "lumi-navigation":
386387
{ boxSizing: "border-box"
387-
, zIndex: "99"
388+
, zIndex: ziNavigationBar
388389
, position: "relative"
389390
, display: "flex"
390391
, flexFlow: "row"
@@ -424,7 +425,7 @@ styles = jss
424425
, "& lumi-subnav-link-container":
425426
{ boxSizing: "border-box"
426427
, position: "absolute"
427-
, zIndex: "999"
428+
, zIndex: ziNavigationDropdown
428429
, top: "calc(100% - 4px)"
429430
, right: "16px"
430431
, display: "none"
@@ -479,7 +480,7 @@ styles = jss
479480
{ position: "absolute"
480481
, top: "0"
481482
, left: "0"
482-
, zIndex: "9999"
483+
, zIndex: ziNavigationDropdown
483484

484485
, display: "none"
485486
, flexFlow: "column"

‎src/Lumi/Components/Select.purs‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -31,6 +31,7 @@ import Lumi.Components.Icon as Icon
3131
import Lumi.Components.Input (lumiInputDisabledStyles, lumiInputFocusStyles, lumiInputHoverStyles, lumiInputStyles)
3232
import Lumi.Components.Loader (loader)
3333
import Lumi.Components.Select.Backend (SelectBackendProps, SelectOption, SelectOptions(..), selectBackend)
34+
import Lumi.Components.ZIndex (ziSelect)
3435
import React.Basic (Component, JSX, createComponent, element, elementKeyed, empty, makeStateless)
3536
import React.Basic.DOM (CSS, css)
3637
import React.Basic.DOM as R
@@ -505,7 +506,7 @@ styles = jss
505506

506507
, position: "absolute"
507508
, top: "4px"
508-
, zIndex: "1"
509+
, zIndex: ziSelect
509510

510511
, display: "flex"
511512
, flexFlow: "column"

‎src/Lumi/Components/Table.purs‎

Lines changed: 5 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -27,6 +27,7 @@ import Lumi.Components.Input (CheckboxState(..), checkbox, input)
2727
import Lumi.Components.Link as Link
2828
import Lumi.Components.Table.FilterDropdown (Item, filterDropdown)
2929
import Lumi.Components.Text (subtext_)
30+
import Lumi.Components.ZIndex (ziTableHeader, ziTableHeaderMenu, ziTableLockedColumn, ziTableLockedColumnHeader)
3031
import React.Basic (Component, JSX, ReactComponent, createComponent, element, empty, keyed, make, readProps, readState)
3132
import React.Basic.DOM as R
3233
import React.Basic.DOM.Components.GlobalEvents (windowEvent)
@@ -605,7 +606,7 @@ styles = jss
605606
, "& th":
606607
{ position: "sticky"
607608
, top: "0"
608-
, zIndex: "2"
609+
, zIndex: ziTableHeader
609610
}
610611

611612
-- sticky columns
@@ -616,10 +617,10 @@ styles = jss
616617
}
617618
, "&.selectable .sticky-column": { left: "45px" }
618619
, "&.selectable th:first-child, & th.sticky-column":
619-
{ zIndex: "3"
620+
{ zIndex: ziTableLockedColumnHeader
620621
}
621622
, "&.selectable td:first-child, & td.sticky-column":
622-
{ zIndex: "1"
623+
{ zIndex: ziTableLockedColumn
623624
}
624625
, "& .sticky-column":
625626
{ transition: "box-shadow 200ms ease-in-out"
@@ -691,7 +692,7 @@ styles = jss
691692
, "lumi-filter-dropdown":
692693
{ boxSizing: "border-box"
693694
, position: "absolute"
694-
, zIndex: "4"
695+
, zIndex: ziTableHeaderMenu
695696
, backgroundColor: cssStringHSLA colors.white
696697
, border: [ "1px", "solid", cssStringHSLA colors.black4 ]
697698
, borderRadius: "3px"

‎src/Lumi/Components/Toast.purs‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -22,6 +22,7 @@ import Effect.Ref (Ref, modify, new, read, write)
2222
import Effect.Unsafe (unsafePerformEffect)
2323
import JSS (JSS, jss)
2424
import Lumi.Components.Color (colors)
25+
import Lumi.Components.ZIndex (ziToast)
2526
import React.Basic (Component, JSX, createComponent, element, empty, make)
2627
import React.Basic.DOM (createPortal)
2728
import React.Basic.DOM as R
@@ -194,6 +195,7 @@ styles = jss
194195
, "& > lumi-toast-wrapper":
195196
{ boxSizing: "border-box"
196197
, display: "flex"
198+
, zIndex: ziToast
197199
, transitionProperty: "opacity, transform"
198200
, transitionTimingFunction: "ease-in-out"
199201
, transitionDuration

‎src/Lumi/Components/Tooltip.purs‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -7,6 +7,7 @@ import Data.Nullable (Nullable)
77
import JSS (JSS, jss)
88
import Lumi.Components.Color (colors)
99
import Lumi.Components.Size (Size)
10+
import Lumi.Components.ZIndex (ziTooltip)
1011
import React.Basic (Component, JSX, createComponent, element, makeStateless)
1112
import React.Basic.DOM (CSS, unsafeCreateDOMComponent)
1213

@@ -54,7 +55,7 @@ styles = jss
5455
, borderRadius: "3px"
5556
, padding: "7px"
5657
, position: "absolute"
57-
, zIndex: "1"
58+
, zIndex: ziTooltip
5859
, transition: "opacity 0.3s"
5960
-- , -webkit-backdrop-filter: blur(1px);
6061
, backdropFilter: "blur(1px)"

‎src/Lumi/Components/ZIndex.purs‎

Lines changed: 40 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,40 @@
1+
module Lumi.Components.ZIndex where
2+
3+
ziButtonGroup :: Int
4+
ziButtonGroup = 100
5+
6+
ziDropdownButton :: Int
7+
ziDropdownButton = 100
8+
9+
ziInputGroup :: Int
10+
ziInputGroup = 100
11+
12+
ziModal :: Int
13+
ziModal = 1000
14+
15+
ziNavigationBar :: Int
16+
ziNavigationBar = 10
17+
18+
ziNavigationDropdown :: Int
19+
ziNavigationDropdown = 11
20+
21+
ziSelect :: Int
22+
ziSelect = 100
23+
24+
ziTableHeader :: Int
25+
ziTableHeader = 2
26+
27+
ziTableHeaderMenu :: Int
28+
ziTableHeaderMenu = 4
29+
30+
ziTableLockedColumn :: Int
31+
ziTableLockedColumn = 1
32+
33+
ziTableLockedColumnHeader :: Int
34+
ziTableLockedColumnHeader = 3
35+
36+
ziToast :: Int
37+
ziToast = 10000
38+
39+
ziTooltip :: Int
40+
ziTooltip = 100000

0 commit comments

Comments
 (0)