Review Popover Spacing and Positioning

[a-christensen]

Hello Design Systems Team!

I just finished updating the popover designs based on your feedback. I would love for you all to take a peak and let me know what you think. (For the designs, see the "examples" section on the bottom of the Anatomy artboard)

1. I updated the spacing to be $space-70 on the top, bottom, and left sides (see far left example). What do you all think of this option? I tried $space-100 on all sides like suggested but felt like that was too much padding and it made the text area a lot smaller since the max width for the popover is $size-30 (see far right example).

2. I tried an option where the close icon was aligned with the heading instead of so close up next to the corner of the popover (see middle example). I'm not thrilled with this because the focus area gives the appearance that it's not totally aligned when it actually is. It also cuts down on the text area width. What do you all think? Should I leave the close icon with the tighter padding to the corner?

3. I adjusted the beak to be larger. Does this look more accurate?

Thanks for all your help!

[corinne-nagel]

Hi @a-christensen, this is looking sweet! I tried out something with $space-90 that I think looked nice and expanded the width of the content area/header. But yeah, I would agree that space 100 is too much, and not lovin the middle one. The beak is lookin good though 👍

Let me know what you think:

[a-christensen]

Sweet, thanks so much Corinne! I'll update the symbols to use $space-90. I think that looks better too.

[katieporter]

Niiice this is looking so great! 🙌

I do think I have a preference for having the same spacing all around, but agree that space-100 is a lil much. space-90 looks gewd! And I think that beak looks perf.