Fix Placeholder component padding when body text font size is changed #58323
Conversation
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
MaggieCabrera
added
the
[Type] Bug
|
This has been happening since the font size control for the body text has been there, so we might be used to it being bigger than it appears now with this PR active, because the component's font size is 13px. I wonder if we need to alter the padding to give it more space? /cc @jasmussen |
|
Size Change: 0 B Total Size: 1.7 MB ℹ️ View Unchanged
|
MaggieCabrera
added
the
[Feature] UI Components
jasmussen
approved these changes
Jan 29, 2024
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
What?
Follow up to #58303
This fixes the padding on the placeholder component when the Global styles typography settings change the font size of the body text.
Why?
The font size selected by the user or the theme for the body of the document is bleeding into the placeholder. The placeholder's padding will be bigger or smaller depending on the font size of the theme's body.
How?
The placeholder uses a padding of 1em. Because the wrapper of the component doesn't define a font size, CSS uses the one that is being inherited. In this case the one from the body. This PR defines a font size for the component, which will stay the same regardless of GS selections
Testing Instructions
Insert an image block to see the placeholder
Open Global styles / Typography / Text and change the font size value. With this PR the padding of the placeholder should stay the same.
Testing Instructions for Keyboard
Screenshots or screencast
Before
After