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.

Sign up for GitHub

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

Jump to bottom

fix(tooltip): Prevent tooltip from appearing above modal overlay #5873

Merged
merged 4 commits into from
Dec 5, 2022
Merged

fix(tooltip): Prevent tooltip from appearing above modal overlay #5873

merged 4 commits into from
Dec 5, 2022

Conversation

driskull
Copy link
Member

@driskull driskull commented Dec 1, 2022 •
edited

Related Issue: #5388

Summary

fix(tooltip): Prevent tooltip from appearing above modal overlay. #5388

  • Updates floating-ui to use tailwind configuration
  • Sets default z-index to be that of a dropdown
  • Adds ability for users to customize zindex of tooltips and popovers
    • CSS vars --calcite-tooltip-z-index and --calcite-popover-z-index
 <calcite-tooltip style="--calcite-tooltip-z-index: 500;" label="Open modal" reference-element="button">
Open modal
</calcite-tooltip>

@github-actions github-actions bot added the bug Bug reports for broken functionality. Issues should include a reproduction of the bug. label Dec 1, 2022
driskull
driskull commented Dec 2, 2022
View reviewed changes
src/assets/styles/_floating-ui.scss

:root {
--calcite-floating-ui-transition: var(--calcite-animation-timing);
--calcite-floating-ui-z-index: theme("zIndex.dropdown");
Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Makes the default zIndex that of a dropdown.

@driskull driskull marked this pull request as ready for review December 2, 2022 18:43
@driskull driskull requested a review from a team as a code owner December 2, 2022 18:43
@driskull driskull added the pr ready for visual snapshots Adding this label will run visual snapshot testing. label Dec 2, 2022
benelan
benelan approved these changes Dec 5, 2022
View reviewed changes
Copy link
Member

@benelan benelan left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

👍

src/components/combobox/combobox.scss
@@ -143,6 +143,7 @@
}

.floating-ui-container {
--calcite-floating-ui-z-index: theme("zIndex.dropdown");
Copy link
Member

@benelan benelan Dec 5, 2022 •
edited

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Nitpick: Should we rename zIndex.dropdown to zIndex.default (or another name that's less specific) since it is now being used as the default, and no longer specific to dropdown?

Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

hmm our tailwind already has a zindex.default of 1. I think this is fine as is.

@driskull driskull merged commit f7a5de2 into master Dec 5, 2022
@driskull driskull deleted the dris0000/z-index-enhancements branch December 5, 2022 22:08
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Reviewers

@benelan benelan benelan approved these changes

Assignees

@driskull driskull

Labels
bug Bug reports for broken functionality. Issues should include a reproduction of the bug. pr ready for visual snapshots Adding this label will run visual snapshot testing.
Projects
None yet
Milestone
Sprint 2022/12/04 - 2022/12/15
Development

Successfully merging this pull request may close these issues.

None yet
2 participants
@driskull @benelan