Skip to content

Commit 7a8ac7f

Browse files
somethiiingsomethiiing
committed
ZIndex: base implementation + story
1 parent b6afc8e commit 7a8ac7f

File tree

4 files changed

+218
-0
lines changed

4 files changed

+218
-0
lines changed

‎.changeset/fast-poets-wash.md

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,6 @@
1+
---
2+
"@cambly/syntax-core": minor
3+
"@syntax/storybook": minor
4+
---
5+
6+
ZIndex: basic implementation + story

‎apps/storybook/stories/ZIndex.stories.mdx

Lines changed: 30 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,30 @@
1+
import { Meta } from "@storybook/addon-docs";
2+
import ZIndex from "./ZIndex";
3+
4+
<Meta title="z-Index" />
5+
6+
# z-Index
7+
8+
[getZIndex](https://cambly-syntax.vercel.app/?path=/docs/z-index--docs) is a utility function that returns a z-index value based on the layer and local layer.
9+
10+
## Parameters
11+
12+
- `layer`: The layer to get the z-index for.
13+
14+
- Default: `base`
15+
- Options:
16+
- `base`: 0 // base layer
17+
- `menu`: 10 // example: dropdown menus
18+
- `sticky`: 20 // example: sticky headers
19+
- `fixed`: 30 // example: fixed position elements
20+
- `modal`: 40 // example: modals
21+
- `popup`: 50 // example: tooltips or popovers
22+
23+
- `localLayer`: An optional parameter to manually tweak the z-index within each layer.
24+
- Usage:
25+
- getZIndex recognizes that there are occasional needs to have multiple things stacked in the same layer.
26+
- For example, two modals existing in the same layer. In these occasions, you can pass a localLayer to the function to manually tweak the z-index within each layer.
27+
- Default: `0`
28+
- Options: `-3` | `-2` | `-1` | `0` | `1` | `2` | `3`
29+
30+
<ZIndex />

‎apps/storybook/stories/ZIndex.tsx

Lines changed: 146 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,146 @@
1+
import React, { useState } from "react";
2+
import Box from "../../../packages/syntax-core/src/Box/Box";
3+
import Button from "../../../packages/syntax-core/src/Button/Button";
4+
import Typography from "../../../packages/syntax-core/src/Typography/Typography";
5+
import Modal from "../../../packages/syntax-core/src/Modal/Modal";
6+
import getZIndex from "../../../packages/syntax-core/src/getZIndex";
7+
8+
export default function ZIndex() {
9+
const [currentZIndex, setCurrentZIndex] = useState(-10);
10+
const [openModal, setOpenModal] = useState(false);
11+
12+
return (
13+
<Box display="flex" direction="column" gap={4}>
14+
<Box>
15+
<Typography size={400} weight="medium">
16+
Current Z-Index: {currentZIndex}
17+
</Typography>
18+
<Box display="flex" gap={4}>
19+
<Button
20+
text="Increase Z-Index Layer"
21+
onClick={() => setCurrentZIndex(currentZIndex + 10)}
22+
/>
23+
<Button
24+
text="Decrease Z-Index Layer"
25+
onClick={() => setCurrentZIndex(currentZIndex - 10)}
26+
/>
27+
<Button text="Open Modal" onClick={() => setOpenModal(true)} />
28+
</Box>
29+
</Box>
30+
<Box
31+
height={1000}
32+
width="100%"
33+
backgroundColor="gray100"
34+
display="flex"
35+
direction="column"
36+
gap={4}
37+
dangerouslySetInlineStyle={{
38+
__style: {
39+
border: "1px solid black",
40+
},
41+
}}
42+
>
43+
<Box position="relative">
44+
<Box
45+
position="absolute"
46+
width="100%"
47+
height={1000}
48+
dangerouslySetInlineStyle={{
49+
__style: {
50+
backgroundColor: "darkgray",
51+
zIndex: currentZIndex,
52+
},
53+
}}
54+
/>
55+
</Box>
56+
<Box
57+
width="100%"
58+
height={64}
59+
display="flex"
60+
justifyContent="center"
61+
alignItems="center"
62+
dangerouslySetInlineStyle={{
63+
__style: {
64+
backgroundColor: "lightblue",
65+
zIndex: getZIndex("sticky"),
66+
},
67+
}}
68+
>
69+
Theoretical sticky navbar (sticky layer)
70+
</Box>
71+
72+
<Box display="flex" direction="column">
73+
<Box
74+
width="100%"
75+
height={200}
76+
display="flex"
77+
justifyContent="center"
78+
alignItems="center"
79+
dangerouslySetInlineStyle={{
80+
__style: {
81+
backgroundColor: "lightgreen",
82+
zIndex: getZIndex("base"),
83+
},
84+
}}
85+
>
86+
Theoretical main content (base layer)
87+
</Box>
88+
89+
<Box
90+
width="100%"
91+
height={200}
92+
display="flex"
93+
justifyContent="center"
94+
alignItems="center"
95+
dangerouslySetInlineStyle={{
96+
__style: {
97+
backgroundColor: "#E6E6FA",
98+
zIndex: getZIndex("menu"),
99+
},
100+
}}
101+
>
102+
Theoretical menu content (menu layer)
103+
</Box>
104+
105+
<Box
106+
width="100%"
107+
height={200}
108+
display="flex"
109+
justifyContent="center"
110+
alignItems="center"
111+
dangerouslySetInlineStyle={{
112+
__style: {
113+
backgroundColor: "#FFB6C1",
114+
zIndex: getZIndex("fixed"),
115+
},
116+
}}
117+
>
118+
Theoretical fixed content (fixed layer)
119+
</Box>
120+
</Box>
121+
</Box>
122+
123+
{openModal && (
124+
<Modal
125+
header="Theoretical Modal"
126+
onDismiss={() => setOpenModal(false)}
127+
zIndex={getZIndex("modal")}
128+
>
129+
<Box
130+
dangerouslySetInlineStyle={{
131+
__style: {
132+
backgroundColor: "#FFCC99",
133+
},
134+
}}
135+
>
136+
<Typography>Theoretical modal content (modal layer)</Typography>
137+
<Typography>
138+
tiny bug on this page, backdrop doesnt show because of no color
139+
tokens but this is just used to demonstrate the layers!
140+
</Typography>
141+
</Box>
142+
</Modal>
143+
)}
144+
</Box>
145+
);
146+
}

‎packages/syntax-core/src/getZIndex.ts

Lines changed: 36 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,36 @@
1+
/**
2+
* [getZIndex](https://cambly-syntax.vercel.app/?path=/docs/ZIndex--docs) is a utility function that returns a z-index value based on the layer and local layer.
3+
*/
4+
export default function getZIndex(
5+
/**
6+
* The layer to get the z-index for.
7+
*
8+
* * `base`: 0 // base layer
9+
* * `menu`: 10 // example: dropdown menus
10+
* * `sticky`: 20 // example: sticky headers
11+
* * `fixed`: 30 // example: fixed position elements
12+
* * `modal`: 40 // example: modals
13+
* * `popup`: 50 // example: tooltips or popovers
14+
*
15+
* @defaultValue `base`
16+
*/
17+
layer: "base" | "menu" | "sticky" | "fixed" | "modal" | "popup" = "base",
18+
/**
19+
* getZIndex recognizes that there are occasional needs to have multiple things stacked in the same layer.
20+
* For example, two modals existing in the same layer. In these occasions, you can pass a localLayer to the function to manually tweak the z-index within each layer.
21+
*
22+
* @defaultValue `0`
23+
*/
24+
localLayer: -3 | -2 | -1 | 0 | 1 | 2 | 3 = 0,
25+
): number {
26+
const layerIndex = {
27+
base: 0,
28+
menu: 10,
29+
sticky: 20,
30+
fixed: 30,
31+
modal: 40,
32+
popup: 50,
33+
};
34+
35+
return layerIndex[layer] + localLayer;
36+
}

0 commit comments

Comments
 (0)