Components: Decrease standard padding to 12px #64708
Merged
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
mirka
added
[Type] Enhancement
|
Size Change: +61 B (0%) Total Size: 1.77 MB
ℹ️ View Unchanged
|
mirka
commented
Aug 22, 2024
Comment on lines
+50
to
+54
| <InputControlPrefixWrapper> | ||
| <Text color={ COLORS.theme.accent } lineHeight={ 1 }> | ||
| # | ||
| </Text> | ||
| </InputControlPrefixWrapper> |
Comment on lines
+41
to
+45
| <InputControlPrefixWrapper> | ||
| <Text color={ COLORS.theme.accent } lineHeight={ 1 }> | ||
| { abbreviation } | ||
| </Text> | ||
| </InputControlPrefixWrapper> |
Comment on lines
+24
to
+26
| compact: CONFIG.controlPaddingXSmall, | ||
| small: CONFIG.controlPaddingXSmall, | ||
| default: CONFIG.controlPaddingX, |
Comment on lines
+190
to
+191
| paddingLeft: CONFIG.controlPaddingX, | ||
| paddingRight: CONFIG.controlPaddingX, |
There was a problem hiding this comment.
InputControl
NumberControl with custom steppers
UnitControl
| `, | ||
| medium: css` | ||
| padding: ${ paddingY } ${ CONFIG.controlPaddingX }; | ||
| padding: ${ paddingY } ${ CONFIG.controlPaddingX }px; |
| small: 8, | ||
| compact: 8, | ||
| '__unstable-large': 16, | ||
| default: CONFIG.controlPaddingX, |
Comment on lines
+26
to
+28
| // These values should be shared with the `controlPaddingX` in ./utils/config-values.js | ||
| padding-left: $grid-unit-15; | ||
| padding-right: $grid-unit-15; |
| @@ -5,14 +5,16 @@ import { space } from './space'; | |||
| import { COLORS } from './colors-values'; | |||
|
|
|||
| const CONTROL_HEIGHT = '36px'; | |||
| const CONTROL_PADDING_X = '12px'; | |||
There was a problem hiding this comment.
We should soon make a decision about how we want to define our foundational variables — number, string, or function (space())? I am kind of leaning toward numbers because it's more versatile. For example we can make most calculations at compile time rather than rely on all the calc()s at runtime.
There was a problem hiding this comment.
Absolutely.
A few considerations that come to mind (more of a brain dump):
- Is this something that should come directly from theming?
- FWIW, I don't think that
calc()has a big perf impact, browsers should be quite fast at calculating it - Using calc and CSS variables would enable a different style of coding — we would be able to change the value of a variable, instead of re-writing a new formula
-I agree that dealing with numbers is more practical. We could still have an underlying grid system, but we should consider exposing variables/tokens expressing numbers
|
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. |
|
Looks good! |
ciampo
approved these changes
Aug 22, 2024
| // These values should be shared with TextControl. | ||
| controlPaddingX: 12, | ||
| controlPaddingXSmall: 8, | ||
| controlPaddingXLarge: 12 * 1.3334, // TODO: Deprecate |
There was a problem hiding this comment.
If ItemGroup is the only consumer of this variable, I guess it makes sense to just delete it from the common config and inline the value in ItemGroup? Also, should we consider aligning ItemGroup to the rest of the components and have a 12px padding too?
There was a problem hiding this comment.
ItemGroup already does have a 12px padding in the default size, interestingly. We'll probably deprecate the controlPaddingXLarge variable and the large size of ItemGroup at the same time.
bph
pushed a commit
to bph/gutenberg
that referenced
this pull request
Aug 31, 2024
* Components: Decrease standard padding to 12px * Fixup * Update snapshots * Add changelog * Fixup Co-authored-by: mirka <[email protected]> Co-authored-by: ciampo <[email protected]> Co-authored-by: jasmussen <[email protected]>
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?
Decreases the horizontal padding of input-like components from 16px to 12px, based on the new specs.
See changelog for full list of affected components.
Why?
The 16px padding was a bit excessive in practice, taking up unnecessary space in tighter layouts.
How?
Uses the
controlPaddingXvariable on theCONFIGobject to share the new values. The one exception right now is theTextControlcomponent, which doesn't use CSS-in-JS. I left a code comment on both ends to remind that it is a shared value.Testing Instructions
See the components in Storybook. Smoke test in the editor.
Please report if you notice instances of editor UI that should've reflected the style changes in this PR but haven't. I found one (#64709) so I did a quick audit, but it didn't seem like there were others.