[Amsterdam] Remove borders from flyouts and popover arrows

[johnbarrierwilson]

Summary

A. Removes the left border on flyouts to better match other Amsterdam aesthetics.

Flyout

Before	After

B. Also removes the borders from popover arrows while improving the aesthetic to better match the drop shadow of the related panel.

Bottom

Before	After

Top

Before	After

Left

Before	After

Right

Before	After

Checklist

• Check against all themes for compatibility in both light and dark modes
• Checked in mobile
• Checked in IE11 and Firefox
  - [ ] Props have proper autodocs
  - [ ] Added documentation examples
  - [ ] Added or updated jest tests
• Checked for breaking changes and labeled appropriately
  - [ ] Checked for accessibility including keyboard-only and screenreader modes
• A changelog entry exists and is marked appropriately

[johnbarrierwilson]

Working on the checklist before moving out of draft status

[kibanamachine]

Preview documentation changes for this PR: https://eui.elastic.co/pr_3477/

[kibanamachine]

Preview documentation changes for this PR: https://eui.elastic.co/pr_3477/

[kibanamachine]

Preview documentation changes for this PR: https://eui.elastic.co/pr_3477/

[johnbarrierwilson]

Just making note here that clip is now depricated. Will need to rework using clip-path and possibly use @include internetExplorerOnly() to remove shadow for IE.

[kibanamachine]

Preview documentation changes for this PR: https://eui.elastic.co/pr_3477/

[johnbarrierwilson]

I added @include internetExplorerOnly{} to disable the arrow shadows. Everything else checks out in all browsers.

[kibanamachine]

Preview documentation changes for this PR: https://eui.elastic.co/pr_3477/

[kibanamachine]

Preview documentation changes for this PR: https://eui.elastic.co/pr_3477/

[johnbarrierwilson]

@cchaos Ready for another round/review! 😁

[kibanamachine]

Preview documentation changes for this PR: https://eui.elastic.co/pr_3477/

[cchaos]

Hmm, it looks like the left and right ones may need some more tweaking.

[johnbarrierwilson]

That's really weird—I had that issue at one point and fixed it and now I can't reproduce it. Is your display scaled at all?

[cchaos]

No, and I just used the build link above in Chrome.

[cchaos]

You might just want to overcompensate?

[johnbarrierwilson]

I increased the arrow compensation by 1 in order to overcompensate. Let me know if that fixes it for you. I was still having trouble re-producing.

[kibanamachine]

Preview documentation changes for this PR: https://eui.elastic.co/pr_3477/

[cchaos]

I actually noticed played directly in the dev tools, and it looks related to the position of the arrow not the clip mask. So I adjusted all the arrows to be 1px closer to the popover panel.

But like you, I didn't see it locally, but it seems to always exist in the build, so will double-check that it's fixed in the build once CI runs it.

[kibanamachine]

Preview documentation changes for this PR: https://eui.elastic.co/pr_3477/

[cchaos]

^^ That seemed to work 🎉

@johnbarrierwilson Do you want to do a final pass on the shadow again?

[kibanamachine]

Preview documentation changes for this PR: https://eui.elastic.co/pr_3477/

[cchaos]

👍 LGTM!

[kibanamachine]

Preview documentation changes for this PR: https://eui.elastic.co/pr_3477/

[johnbarrierwilson]

Sweet! Looks good on my end! Thanks @cchaos!