-
Notifications
You must be signed in to change notification settings - Fork 4.6k
feat: added class to children of modal & fill #70669
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
feat: added class to children of modal & fill #70669
Conversation
|
The following accounts have interacted with this PR and/or linked issues. I will continue to update these lists as activity occurs. You can also manually ask me to refresh this list by adding the If you're merging code through a pull request on GitHub, copy and paste the following into the bottom of the merge commit message. To understand the WordPress project's expectations around crediting contributors, please review the Contributor Attribution page in the Core Handbook. |
|
unit test failure seems irrelevant, might need to rerun tests. |
|
@Mayank-Tripathi32, do you mind rebasing this branch on top of the latest trunk? |
da13a95 to
2de80a6
Compare
|
@Mamaduka Done. Thanks for the ping! |
| 'components-modal__children-container', | ||
| { | ||
| 'is-fill-size': | ||
| size === 'fill' || isFullScreen, |
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'm not sure it should be the default behavior (that might cause things to break for existing users of this component), maybe a prop to set this class would work.
A changelog entry is also needed for the components package.
|
We're exploring some comprehensive fixes in #73150. A |
What?
Closes #70611
Adds CSS class support to modal children container when using fill size or fullscreen mode to enable proper height styling.
Why?
Currently, when using the Modal component with
size="fill"orisFullScreen={true}, the children container div doesn't have proper height styling. This makes it difficult for developers to create content that takes up the full height of the modal, as the container collapses to its content height rather than expanding to fill the available space.The issue affects developers who want to create modals with content that needs to utilize the full available height, such as forms with bottom-positioned buttons or scrollable content areas.
How?
is-fill-sizeto the modal's children container whensize="fill"orisFullScreen={true}min-height: 100%or similar styles to make content fill the available modal heightTesting Instructions
is-fill-sizeCSS classisFullScreen={true}to ensure the class is also applied in fullscreen modeis-fill-sizeclassheight: 100%to see it now properly fills the modal heightTesting Instructions for Keyboard
Screenshots