-
Notifications
You must be signed in to change notification settings - Fork 4.1k
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
TextareaControl: Update styles #64586
Conversation
Size Change: -3 B (0%) Total Size: 1.77 MB
ℹ️ View Unchanged
|
Flaky tests detected in 666f6ea. 🔍 Workflow run URL: https://github.com/WordPress/gutenberg/actions/runs/10426397094
|
Great improvement, thank you.
Just to be sure, which specs are these? At a glance, this looks like a solid win for consistency, and that what exists in trunk is simly vestigial and overlooked. There's a lot of green in the code, so I'll defer to a code review for what's best there, but designwise, this looks great. |
@jasmussen Thanks for confirming! I was referring to the specs here. |
Right, those definitely seem a bit out of date. I'll add the "Needs Figma Update" label here, but let's also make sure to get this right in the new file. I think the only downside: 11.5 is so close to 12px which would be a nice round number. I guess it's the fact that most inputs are 40px, but the 13px font centered inside with its default lineheight that's dictating this odd number yes? Thanks for diving in! |
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.
Love the utils cleanup here 👏 Makes so much sense to keep it all inline instead of in /utils
.
It's not just about single-line textareas, but also ensuring the copy inside sits on the same baseline as regular text inputs, like this: ![]() I think it can be achieved by updating the following textarea properties:
In this case using a padding value off the 4px baseline seems unavoidable because the input height is 40, minus the line-height (20) equals 20, divide by 2 = 10. |
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.
Looking good from the code perspective
packages/components/src/textarea-control/styles/textarea-control-styles.ts
Outdated
Show resolved
Hide resolved
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. |
Ok, I updated the PR description and screenshots. This is good to go on my end if we're happy with the changes 👍 |
Makes sense. Is there a reason not to include the spacing scale in For similar components, code like |
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.
LGTM 👍 🚀
@jameskoster's suggestions on extracting some spacing vars make sense, but I think they can also be followed up with in another PR as needed.
I'll probably do some value abstracting when I update the input padding values from 16px to 12px (#64520 (comment)) 👍 |
* TextareaControl: Refactor styles * Add 40px size prop * Tweak typography styles * Clarify with comment * Remove opt-in prop * Improve comment * Clean up unnecessary prop type * Add changelog Co-authored-by: mirka <[email protected]> Co-authored-by: tyxla <[email protected]> Co-authored-by: ciampo <[email protected]> Co-authored-by: jasmussen <[email protected]> Co-authored-by: jameskoster <[email protected]>
Part of #46741
What?
Update styles on TextareaControl to match the current specs. Namely, increased padding and leading.
Testing Instructions
See Storybook for TextareaControl. See usages in the editor.
Note for code review: The first commit is simply a move of the styles in
utils/input/
which were only used for this TextareaControl component. The effective changeset is much smaller.Screenshots or screencast
How it looks in context with other controls:
Or in this Additional CSS field: