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

PopoverArrow always has box shadow blur, even when border is solid. #5934

Closed
3 tasks done
Tenkir opened this issue Apr 27, 2022 · 7 comments · May be fixed by #6412
Closed
3 tasks done

PopoverArrow always has box shadow blur, even when border is solid. #5934

Tenkir opened this issue Apr 27, 2022 · 7 comments · May be fixed by #6412
Labels
Component: Popover Type: Bug 🐛 Something isn't working

Comments

@Tenkir
Copy link

Tenkir commented Apr 27, 2022 •
edited

Description

When I have a PopoverArrow, I expect the arrow to have the same border as the Popover. Instead it has a 1px blur.

Link to Reproduction

https://codesandbox.io/s/chakra-popover-bug-v2-4rr1i1

Steps to reproduce

  1. Go to reproduction
  2. Click on button labeled Click
  3. Observe PopoverArrow has a blurred box shadow.

Chakra UI Version

2.2.4

Browser

Firefox, Chrome, Safari

Operating System

  • macOS
  • Windows
  • Linux

Additional Information

The style which adds this box shadow is an inline style, so it's not able to be overridden with a boxShadow property on the PopoverArrow component.

Screenshot

Screen Shot 2022-04-27 at 10 34 41 AM
@Tenkir Tenkir changed the title Popover Arrow Always has box shadow blur, even when border is solid. PopoverArrow always has box shadow blur, even when border is solid. Apr 28, 2022
@anubra266 anubra266 added the Type: Bug 🐛 Something isn't working label May 1, 2022
@itkrt2y
Copy link
Contributor

itkrt2y commented May 25, 2022

I know this is not a clean way, but you can override with !important .

<PopoverArrow bg="tomato" boxShadow="-1px -1px 1px 0 white !important"/>

@YosefBlandin
Copy link

I can't reproduce the issue
1

@stale
Copy link

stale bot commented Jul 31, 2022

Hi!
This issue has been automatically marked as stale because lack of recent activity. It will be closed if no further activity occurs within 5 days. Thank you for your contributions.

@stale stale bot added the stale label Jul 31, 2022
@Tenkir
Copy link
Author

Tenkir commented Aug 1, 2022 •
edited

I can't reproduce the issue 1

Looks like an update to codesandbox had broken the reproduction. This issue is still present in Chakra UI 2.2.4

Updated link is attached, and I have updated the original issue link:

https://codesandbox.io/s/chakra-popover-bug-v2-4rr1i1

@stale stale bot removed stale labels Aug 1, 2022
This was referenced Aug 2, 2022
Closed
Open
@Tenkir Tenkir mentioned this issue Sep 11, 2022
Closed
3 tasks
@robcrock
Copy link

If this is resolved can the issue be closed?

@segunadebayo
Copy link
Member

This has already been fixed in one of the recent commits. We'll release an update shortly.

If the issue persists after the release, I'll re-open this issue.

@Tenkir
Copy link
Author

Tenkir commented Nov 14, 2023 •
edited

@segunadebayo This is fixed in so far as it is no longer blurry, but it is still not correct. The borders of the arrow protrude out the bottom of the container border. My fix in #6412 addressed this.

image

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
Component: Popover Type: Bug 🐛 Something isn't working
Projects
None yet
Milestone
No milestone
6 participants
@itkrt2y @Tenkir @segunadebayo @anubra266 @robcrock @YosefBlandin