ZIndex: base implementation + story

[somethiiing]

Z-Index implementation based off of Outlayers UI Layer System

Basically has 6 "groups" of layers. and a localLayer prop to adjust between the layers if necessary

note: the story is a little gross because of where it's located in the storybook structure, where it's located it doesn't have color tokens so alot of these colors/backgroundcolors/etc are manually set

[changeset-bot]

🦋 Changeset detected

Latest commit: 600efbf

The changes in this PR will be included in the next version bump.

This PR includes changesets to release 2 packages

Name	Type
@cambly/syntax-core	Minor
@syntax/storybook	Minor

Not sure what this means? Click here to learn what changesets are.

Click here if you're a maintainer who wants to add another changeset to this PR

[vercel]

The latest updates on your projects. Learn more about Vercel for Git ↗︎

Name	Status	Preview	Comments	Updated (UTC)
syntax	✅ Ready (Inspect)	Visit Preview	💬 Add feedback	Oct 4, 2024 5:19pm

[somethiiing]

autodocs unfortunately dont work here because it's a function and not an actual component. so i manually created docs on how to use this function

[christianvuerings]

@somethiiing thanks for putting this together!

I like the overall directions but just had a couple of notes:

1. How are we thinking of enforcing this? In Gestalt, we did this by enforcing a certain type e.g. Indexable instead of number. See https://github.com/pinterest/gestalt/blob/d86286b7f74e51e24bf5ce67ac55e6a208205624/packages/gestalt/src/Box.tsx#L518 & https://gestalt.pinterest.systems/web/zindex_classes
2. Ideally we make the zIndex's explicitly depend on each other. E.g. how do we know whether we should pass a localLayer of 0, 1, 2 or 3? That usually depends on another component
3. Be sure to add getZIndex to the syntax core exports

   syntax/packages/syntax-core/src/index.tsx

   Lines 1 to 31 in 804cc97

   	import Avatar from "./Avatar/Avatar";
   	import AvatarGroup from "./AvatarGroup/AvatarGroup";
   	import Badge from "./Badge/Badge";
   	import Box from "./Box/Box";
   	import Button from "./Button/Button";
   	import ButtonGroup from "./ButtonGroup/ButtonGroup";
   	import Card from "./Card/Card";
   	import Checkbox from "./Checkbox/Checkbox";
   	import Chip from "./Chip/Chip";
   	import Divider from "./Divider/Divider";
   	import Heading from "./Heading/Heading";
   	import Icon from "./Icon/Icon";
   	import IconButton from "./IconButton/IconButton";
   	import IconLinkButton from "./IconLinkButton/IconLinkButton";
   	import LinkButton from "./LinkButton/LinkButton";
   	import Modal from "./Modal/Modal";
   	import Popover from "./Popover/Popover";
   	import RadioButton from "./RadioButton/RadioButton";
   	import RichSelectList from "./RichSelect/RichSelectList";
   	import SelectList from "./SelectList/SelectList";
   	import TabButton from "./TabButton/TabButton";
   	import TabLink from "./TabLink/TabLink";
   	import Tabs from "./Tabs/Tabs";
   	import TapArea from "./TapArea/TapArea";
   	import TextArea from "./TextArea/TextArea";
   	import TextField from "./TextField/TextField";
   	import ThemeProvider from "./ThemeProvider/ThemeProvider";
   	import Tooltip from "./Tooltip/Tooltip";
   	import Typography from "./Typography/Typography";
   	import WordConfetti from "./WordConfetti/WordConfetti";

4. Just commenting for now since it would be good for someone else to also take a deeper look

[juliar]

Thanks for making this happen Wilson! This is a great start. I haven't looked deeply at your code, but added a few high level thoughts/questions to start.

[juliar]

How well do these particular layers correspond to how we are using z-indexes in the app right now? I think it would be helpful to audit where we currently need z-indexes and for what types of components.

[juliar]

Keep in mind that some z-indexes might not even be explicitly set in our code. For example, it seems that the MUI Dialog component has a z-index of 1300 (see previous discussion), and it appears we are still using that in some places in our code.

[juliar]

How will folks know which localLayer to choose?

[juliar]

Having comments/explanations for each of these layers will be really helpful, so people know which one is appropriate for their use case. Just from the names, I'm not sure when to use "base", "sticky", or "fixed", and when I should use "modal" vs "popup".

[juliar]

How are you thinking the migration process would work, to move from our current z-indexes to these? Would we need to migrate all z-indexes at once?