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 |
|---|---|
Solution
Evenly apply the drop shadow to the entire popover, including the arrow.
Implementation notes from @sdejonge:
I’d assume this is likely because adding a shadow to a
::beforepseudo element is tricky in CSS. We could use thefilter: 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 overbox-shadow.




