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

Tooltip V2: Update the threshold value to match with the offset #4446

Merged
merged 3 commits into from
Mar 28, 2024

Conversation

broccolinisoup
Copy link
Member

@broccolinisoup broccolinisoup commented Mar 28, 2024

Reported in the communities (https://github.com/orgs/community/discussions/113546) and also internally that the elements that have tooltips on are not fully clickable. The reported issue is on PVC tooltip but React doesn't have the right value either. We think this is happening because the threshold (12px) is higher than the offset value (4px) and tooltip ends up blocking out the bottom part of its trigger.

Corresponding PVC PR: primer/view_components#2733

Changelog

New

Changed

Updated the height of the after pseudo element (Between tooltip and its trigger) to match with the offset value (default) so that tooltip don't overlap with its trigger.

Removed

Rollout strategy

  • Patch release
  • Minor release
  • Major release; if selected, include a written rollout or migration plan
  • None; if selected, include a brief description as to why

Testing & Reviewing

Merge checklist

Copy link

changeset-bot bot commented Mar 28, 2024

🦋 Changeset detected

Latest commit: 4cfde9f

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

This PR includes changesets to release 1 package
Name Type
@primer/react 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

@broccolinisoup broccolinisoup changed the title update the offset value in tooltip Tooltip V2: Update the offset value pf tooltip's position relative to the trigger Mar 28, 2024
@broccolinisoup broccolinisoup changed the title Tooltip V2: Update the offset value pf tooltip's position relative to the trigger Tooltip V2: Update the offset value of tooltip's position relative to the trigger Mar 28, 2024
@broccolinisoup broccolinisoup changed the title Tooltip V2: Update the offset value of tooltip's position relative to the trigger Tooltip V2: Update the offset value Mar 28, 2024
Copy link
Contributor

github-actions bot commented Mar 28, 2024

size-limit report 📦

Path Size
packages/react/dist/browser.esm.js 88.71 KB (+0.04% 🔺)
packages/react/dist/browser.umd.js 89 KB (+0.03% 🔺)

@github-actions github-actions bot temporarily deployed to storybook-preview-4446 March 28, 2024 01:59 Inactive
@broccolinisoup broccolinisoup changed the title Tooltip V2: Update the offset value Tooltip V2: Update the threshold value to match with the offset Mar 28, 2024
@broccolinisoup broccolinisoup marked this pull request as ready for review March 28, 2024 02:25
@broccolinisoup broccolinisoup requested a review from a team as a code owner March 28, 2024 02:25
@@ -62,7 +62,7 @@ const StyledTooltip = styled.span`
display: block;
right: 0;
left: 0;
height: 8px;
height: var(--overlay-offset, 0.25rem);
Copy link
Member Author

Choose a reason for hiding this comment

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

@langermank should this be 4px or 0.25rem?

Copy link
Contributor

Choose a reason for hiding this comment

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

What you have is perfect!

Copy link
Member

@siddharthkp siddharthkp left a comment

Choose a reason for hiding this comment

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

Very nice!

@siddharthkp siddharthkp added this pull request to the merge queue Mar 28, 2024
Merged via the queue into main with commit a3355a5 Mar 28, 2024
30 checks passed
@siddharthkp siddharthkp deleted the tooltip-threshold-fix branch March 28, 2024 14:17
@primer primer bot mentioned this pull request Mar 28, 2024
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.

4 participants