fix: Prevent focus ring from getting cut off in Popup.Body

[mannycarrera4]

Summary

Fixes: #1682

Release Note

• Popup.Body now has 8px of padding. This addresses an issue introduced in v7 where focus rings were being clipped within the Body due to its built-in overflow; this padding allows the focus ring on any focusable element contained within the Body to be fully visible. The default space between the edge of the Card and the contents of the Body is still 32px.
• Popup.Heading now has 8px of padding to keep it visually aligned with the updated Popup.Body. It also now has a marginBottom of 8px, bringing the default vertical space between the Heading and the Body to 24px (previously 16px) in order to meet the component spec.
• The padding in Popup.Card has been reduced by 8px from 32px to 24px to compensate for the padding added to Popup.Body and Popup.Heading and to preserve the component's existing spacing. If you've customized the padding for any Popup, Modal, or Dialog subcomponents, you may need to adjust your padding values to get the same results after upgrading.
• Popup.Card's default element is now a Flex element (previously a Stack) and thus the spacing prop has been removed. It made more sense to use Flex given the presence of the Close Icon, which didn't make sense as a Stack item.
• Given the changes above, if you're creating a footer for your Popup, Modal, or Dialog (using an HStack, for instance) you'll need to update it with the following props/styles to align it with the updated Heading and Body: padding="xxs" (8px) and marginTop="xxs" (8px).

---

[cypress]

---

Test summary

718 • 0 • 2 • 0 • 0

---

Run details

Project	canvas-kit
Status	Passed
Commit	aaf0a3c ℹ️
Started	Sep 8, 2022 9:45 PM
Ended	Sep 8, 2022 9:50 PM
Duration	05:33 💡
OS	Linux Ubuntu - 20.04
Browser	Electron 94

View run in Cypress Dashboard ➡️

---

This comment has been generated by cypress-bot as a result of this project's GitHub integration settings. You can manage this integration in this project's settings in the Cypress Dashboard

[josh-bagwell]

Manny and I discussed alternative approaches. One option was to move the buttons outside the Modal.Body component and that fixes the issue. However, it doesn't address the issue of links/buttons losing focus ring in Modal.Body. It looks as if the overflow-y is causing the focus ring issue.

[jamesfan]

Now that we've removed Modal.Footer, it feels odd to me to require consumers to know they need paddingX="l" and paddingBottom="l" to get their HStack Footer to render with complementary padding to match Modal.Body and Modal.Heading. Previously, this was padding was baked into Modal.Footer.

[mannycarrera4]

if we make this a Minor release, it makes sense to add this back in. But I agree the consumer would have to know what padding to add

[jamesfan]

For now, the consumer will need to add their own footer (using an HStack, for instance) with the appropriate paddings and margins to align with the Heading and Body subcomponents (see screenshot in top-level PR comment). We'll update Popup, Modal, and Dialog examples to include example footers with the needed padding and margin.