-
Notifications
You must be signed in to change notification settings - Fork 8
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
add margin prop to Modal #214
Conversation
@@ -109,7 +116,7 @@ export default function Modal({ | |||
onOpenAutoFocus?: (e) => void | |||
} = { | |||
className: classnames( | |||
`relative my12 my60-mm ${widthClass} bg-white round`, | |||
`relative ${marginClass} ${widthClass} bg-white round`, |
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.
`relative ${marginClass} ${widthClass} bg-white round`, | |
`fixed hmax-viewport-11/12 ${widthClass} bg-white round`, |
@chriswhong what do you think about using fixed
instead and also adding the following CSS to the element itself.
style: {
top: '50%',
left: '50%',
transform: 'translate(-50%, -50%)'
}
That should center the modal and let us avoid adding fixed margins to begin with.
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.
I lean towards modals opening near the top of the screen as a sensible default. This component could be used for content that is taller than the viewport, and the proposed change would cut off the top and bottom in that situation. (maybe for that much content we should not use a modal, but it's a footgun we should consider.)
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.
This component could be used for content that is taller than the viewport
Oh! That was the intention of adding hmax-viewport-11/12
so the modal is always shown but we would favor using an overflow scroll for content that extends beyond the viewport.
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.
I lean towards modals opening near the top of the screen as a sensible default
That makes sense to me. Should we use a smaller percentage for top
? My concern with adding a fixed margin-top option is that we'll want to add more over time to cover other scenarios and it will be hard to crawl out of that mess if we ever introduce breaking changes. Personally, I think adding a fixed top margin value - to begin with - was a mistake that I'm guilty of keeping around after the major changes in v2
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.
Approving to unblock as the implementation looks 👌
After recent docs redesign work, a new fixed header is in place throughout all docs sites. The
Modal
component's vertical margin is not large enough to compensate for the height of the header and the top part of the modal is obscured.This PR adds a
margin
prop to theModal
component. When set tolarge
, it will add themy120
assembly class, giving enough clearance to the modal.Before
After