Fix dropshadow on popover arrows

Problem

In the Pajamas Figma Component Library [internal only], the popover has a drop shadow evenly applied to the entire component, including the small arrow.

In Pajamas/Storybook/Production, the popover arrow doesn't have its own drop shadow, making it a little harder to see than the rest of the component. Popover examples on Production. On light mode, this can blend in with the white background and make the arrow harder to see.

Figma Component Library Production

figma.png

popover-epic.png

popover-issue-ex.png

popover-mr (1).png

Solution

Evenly apply the drop shadow to the entire popover, including the arrow.

figma.png

Implementation notes from @sdejonge:

I’d assume this is likely because adding a shadow to a ::before pseudo element is tricky in CSS. We could use the filter: drop-shadow(...) property, I believe that will add the shadow to the outer shape including the arrow. Although I’m not sure of visual side-effects of this property over box-shadow.

Edited by 🤖 GitLab Bot 🤖