-
-
Notifications
You must be signed in to change notification settings - Fork 3.2k
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(popper): Resolving issue where PopoverArrow would have different border than contents #6412
base: main
Are you sure you want to change the base?
Conversation
🦋 Changeset detectedLatest commit: fa7e182 The changes in this PR will be included in the next version bump. This PR includes changesets to release 5 packages
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 |
The latest updates on your projects. Learn more about Vercel for Git ↗︎
|
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 d74e227:
|
95dc051
to
40bb9a3
Compare
Rebased with main and cleaned up commits. |
40bb9a3
to
fa46340
Compare
fa46340
to
b60c22d
Compare
b60c22d
to
d74e227
Compare
Can't wait to see it on production :) |
@segunadebayo poke |
…s/popper/src/utils.ts
d74e227
to
fa7e182
Compare
Any update on this being pulled in? Not sure how to even bandaid it to make the the shadow appear around the arrow. This hack another user suggested only works if your designs include a border for the tooltip #5203 (comment) |
@segunadebayo There is still a small issue here, which I highlight in #5934. I can update this PR and bring it up to date if there's any appetite to fix this minor issue. |
Closes #5934.
📝 Description
PopoverArrow used a box-shadow with blur to generate the borders on it's edges. This resulted in a blurry border, when the border of the rest of the popover was solid. This was particularly noticeable on dark backgrounds.
⛳️ Current behavior (updates)
PopoverArrow always had blurred border, which was detatched from the Popover content.
🚀 New behavior
PopoverArrow will have the same border as the rest of the PopOver or Tooltip.
This PR uses variations of border to generate the borders, rather than a box-shadow implementation.
By using transparent borders on the interior edges of the arrow, we can eliminate the overlap typically seen with border implementations. This results in accurate borders which match the rest of the container.
Here is a minimum CSS implementation of adding a transparent border on right side, compared to no transparent border on left:
This PR also removes the now unused
getBoxShadow
function frompackages/popper/src/utils.ts
💣 Is this a breaking change (Yes/No):
No
Additional Information
Not sure if this small visual change requires a test, but I can add one if necessary.