Skip to content
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

Inputs: Unify height #14505

Closed
melchoyce opened this issue Mar 18, 2019 · 3 comments
Closed

Inputs: Unify height #14505

melchoyce opened this issue Mar 18, 2019 · 3 comments
Assignees
Labels
[Feature] UI Components Impacts or related to the UI component system

Comments

@melchoyce
Copy link
Contributor

Describe the bug
Inputs in Gutenberg seems to use various heights, from 28px to 38px tall.

Expected behavior
All inputs (except for TextareaControl) should be the same height.

Screenshots

image

image

image

image

Personally, I think all single-line inputs should be standardized to 38px.

@melchoyce melchoyce added the [Feature] UI Components Impacts or related to the UI component system label Mar 18, 2019
@m-e-h
Copy link
Member

m-e-h commented Mar 24, 2019

Sort of related #11555 (comment)

@jasmussen
Copy link
Contributor

Really noble goal, love it. I have a personal preference for 36px because it's base12, and therefore compatible with the 24px grid we're sort of hoping to roll out. But 38px works too.

A question in Slack asked why there are so many separate styles, and why there are "mixins" for these as well. Here's a little context:

  • Primarily, years of WordPress styles building up in a not-componentized way, means there is a fair bit of CSS bleed, styles that inherit where they shouldn’t.
  • The mixins are an attempt to provide unified styles, same as these, so when a change across components like these have to be made, it can be done in one place. For example we are trying to reduce the number of focus styles we have — for situations like panels receiving focus, we have the dotted line. For buttons, we have a border. By including the mixins in an array of different components that use these focus styles, we can change the focus style in one place and it will affect all components that use it.

The best way to remove CSS bleed is to patch WordPress itself so all styles are properly scoped. In absence of that, we have to work within the boundaries of overriding CSS.

@mtias
Copy link
Member

mtias commented Aug 30, 2020

I think this should progress as things get standardized through the use of components. cc @ItsJonQ

@mtias mtias closed this as completed Aug 30, 2020
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
[Feature] UI Components Impacts or related to the UI component system
Projects
None yet
Development

No branches or pull requests

6 participants