fix(popper): Resolving issue where PopoverArrow would have different border than contents

[Tenkir]

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 from packages/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.

[changeset-bot]

🦋 Changeset detected

Latest commit: fa7e182

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

This PR includes changesets to release 5 packages

Name	Type
@chakra-ui/popper	Minor
@chakra-ui/menu	Patch
@chakra-ui/popover	Patch
@chakra-ui/react	Patch
@chakra-ui/tooltip	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]

The latest updates on your projects. Learn more about Vercel for Git ↗︎

Name	Status	Preview	Updated (UTC)
chakra-ui-storybook	✅ Ready (Inspect)	Visit Preview	Oct 9, 2023 1:57pm

[codesandbox-ci]

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:

Sandbox	Source
create-react-app-ts	Configuration

[Tenkir]

Rebased with main and cleaned up commits.

[KubaZachacz]

Can't wait to see it on production :)

[Stanzilla]

@segunadebayo poke

[SeaStove]

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)

[Tenkir]

@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.