Skip to content

feat: expand zIndex handling by giving more control to the consumer #26

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
wants to merge 4 commits into
base: master
Choose a base branch
from

Conversation

RobbyUitbeijerse
Copy link
Contributor

@RobbyUitbeijerse RobbyUitbeijerse commented Dec 5, 2022

hey there, long time no see ~

In our project we would like to have a bit more control over the zIndex per Sticky instead of only having control over the zIndex when the element hasn't been reached yet (defaultZIndex)

In order to facilitate this, I made the following adjustment:

  • Removed the defaultZIndex
  • added an optional zIndex prop, which can either be a function or a number (for both calculated and absolute control), we pass both the calculated styles as well as layout for allowing the consumer to pass their own calculation

for example, we would like to do this:

<Sticky zIndex={(_isSticky, _cssProps, layout ) => theme.zIndices.base + layout.z )} />

This way, we don't have to up the zIndices for our design system just to ensure that some things stay on top of the elements (for example: modal overlays need to go over the sticky elements, but in our theme they are defined as sub 1000)

Lmk if you have different ideas on the subject, we currently applied a patch using patch-package in order to get things behave as we want but that will do just fine for now

@sbesselsen
Copy link
Contributor

Hi Robby, sorry for my late reply! I hadn't noticed your PR and was pointed to it by Lennard. I understand and agree with the use case but I will take a few days to ponder the interface and bring it more in line with the overall idea of react-unstuck that layout is all governed by the behaviors. I might rewrite it a little bit and get back to you with a proposal.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

2 participants