-
Notifications
You must be signed in to change notification settings - Fork 213
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
fix: Prevent focus ring from getting cut off in Popup.Body #1727
fix: Prevent focus ring from getting cut off in Popup.Body #1727
Conversation
Test summaryRun details
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 |
…4/canvas-kit into mc-fix-modal-layout
0ec455a
to
bf8f55a
Compare
Manny and I discussed alternative approaches. One option was to move the buttons outside the |
c348fd0
to
05744a3
Compare
@@ -43,7 +42,7 @@ export const BodyOverflow = () => { | |||
<p>Are you sure you want to delete the item?</p> | |||
<p>Are you sure you want to delete the item?</p> | |||
</Modal.Body> | |||
<HStack spacing="s" paddingTop="s"> | |||
<HStack spacing="s" paddingTop="s" paddingX="l" paddingBottom="l"> |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
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
.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
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
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
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.
Co-authored-by: James Fan <james@somewhatstrange.com>
Summary
Fixes: #1682
Release Note
Popup.Body
now has8px
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 still32px
.Popup.Heading
now has8px
of padding to keep it visually aligned with the updatedPopup.Body
. It also now has amarginBottom
of8px
, bringing the default vertical space between the Heading and the Body to24px
(previously16px
) in order to meet the component spec.Popup.Card
has been reduced by8px
from32px
to24px
to compensate for the padding added toPopup.Body
andPopup.Heading
and to preserve the component's existing spacing. If you've customized the padding for anyPopup
,Modal
, orDialog
subcomponents, you may need to adjust your padding values to get the same results after upgrading.Popup.Card
's default element is now aFlex
element (previously aStack
) and thus thespacing
prop has been removed. It made more sense to useFlex
given the presence of the Close Icon, which didn't make sense as aStack
item.Popup
,Modal
, orDialog
(using anHStack
, 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)
andmarginTop="xxs" (8px)
.