Skip to content
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

fix: conflicting zindex of linkoverlay with opacity #5632

Conversation

m4x3d
Copy link
Contributor

@m4x3d m4x3d commented Feb 20, 2022

Closes #5630

📝 Description

Fixed an issue regarding the zIndex of the LinkOverlay in LinkBox.

⛳️ Current behavior (updates)

Content outside the LinkOverlay can not be clicked when having an opacity below 1.
Codesandbox from the issue: https://codesandbox.io/s/laughing-sun-q1qjmw?file=/src/index.tsx

🚀 New behavior

Content outside the LinkOverlay can be clicked when having an opacity below 1.
Codesandbox with an override of the changed zIndex of this PR: https://codesandbox.io/s/elegant-varahamihira-9zuwk6?file=/src/index.tsx

💣 Is this a breaking change (Yes/No):

No

📝 Additional Information

@changeset-bot
Copy link

changeset-bot bot commented Feb 20, 2022

🦋 Changeset detected

Latest commit: ea6770d

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

This PR includes changesets to release 4 packages
Name Type
@chakra-ui/layout Patch
@chakra-ui/react Patch
@chakra-ui/props-docs Patch
@chakra-ui/test-utils Patch

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
Copy link

vercel bot commented Feb 20, 2022

This pull request is being automatically deployed with Vercel (learn more).
To see the status of your deployment, click below or on the icon next to each commit.

🔍 Inspect: https://vercel.com/chakra-ui/chakra-ui-storybook/HHbfydo8xND49FQxa5AiviTe6QE5
✅ Preview: https://chakra-ui-storybook-git-fork-m4x3d-fix-conflic-106dc1-chakra-ui.vercel.app

@m4x3d m4x3d changed the title fix: conflicting zindex of linkbox with opacity fix: conflicting zindex of linkoverlay with opacity Feb 20, 2022
@codesandbox-ci
Copy link

This pull request is automatically built and testable in CodeSandbox.

To see build info of the built libraries, click here or the icon next to each commit SHA.

Latest deployment of this branch, based on commit ea6770d:

Sandbox Source
create-react-app-ts Configuration
clever-sky-mex52k PR
elegant-hugle-xz69fb PR
strange-scott-j438cd Issue #5630
purple-leaf-ownn7r Issue #5630

@m4x3d
Copy link
Contributor Author

m4x3d commented Feb 20, 2022

Tests with yarn test:ci seems a bit flaky with that Cannot read properties of null (reading 'createEvent') error. More or less 9/10 times all tests passes locally but if they fail then only with that error.

@TimKolberger
Copy link
Contributor

The flaky are kinda annoying but I could not pin point it yet.
The CI uses --runInBand and it happens there quite frequently.

I think there has to be some rogue mock, which isn't reset correctly, but who knows 🤷

I'd love to merge a PR which addresses this 😄

@TimKolberger TimKolberger merged commit e4a990d into chakra-ui:main Feb 24, 2022
@github-actions github-actions bot mentioned this pull request Feb 24, 2022
wutje added a commit to wutje/chakra-ui that referenced this pull request Apr 21, 2022
chakra-ui#5632 was solved by changing the zIndex of the linkbox, however the elevated link it self was not updated. This breaks if the elevated link is before the overlay link in the DOM.
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.

LinkBox: overlay not working when a child has an opacity < 1
2 participants