-
Notifications
You must be signed in to change notification settings - Fork 4.2k
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
Template pattern modal: remove internal modal classnames #50655
Conversation
@mirka and @ntsekouras , let me know if this solution looks good to you. It would be interesting to understand if we can adopt a similar approach for #50595, it would probably be the best solution IMO. In case this approach doesn't cut it, here are some alternatives that we could consider:
What do you think? |
.components-modal__content { | ||
padding-bottom: 0; | ||
} | ||
$actions-height: 92px; |
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.
The main way the resulting layout is achieved in this PR is:
- by making the actions bar absolute positioned, so that it's always stuck at the bottom of the modal
- by using a fixed
height
(instead of padding top/bottom) to resize the actions bar - by using that same height as extra padding bottom in the modal content, to preserve correct overflow scroll behaviour
Size Change: -31 B (0%) Total Size: 1.39 MB
ℹ️ View Unchanged
|
Flaky tests detected in 207fddd. 🔍 Workflow run URL: https://github.com/WordPress/gutenberg/actions/runs/4989596964
|
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.
Thanks for the PR Marco! The end results seems the same to me. I'd defer to @jameskoster for a sanity check though.
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.
Seems to be working fine for me! Thanks for handling this.
What?
Removes references to private, internal
Modal
class names from the Template pattern modal, achieving the same desired layout without them.Follow-up from #50099 (comment)
Why?
Class names should not be regarded as public APIs of a component, and therefore should not be used outside of that component's internal implementation.
Using class names this way can really quickly lead to poor CSS architecture, making it impossible to achieve good modularity, composition, and style encapsulation.
How?
Modal
class namesModal
class namesTesting Instructions
start blank
option in template pattern suggestions and addskip
button #50099)Screenshots or screencast