[wp-trac] [WordPress Trac] #48420: Admin CSS: standardize form controls heights, alignments, etc.

[WordPress Trac]

#48420: Admin CSS: standardize form controls heights, alignments, etc.
-------------------------+-------------------------------------------------
 Reporter:  afercia      |      Owner:  (none)
     Type:  defect       |     Status:  new
  (bug)                  |
 Priority:  normal       |  Milestone:  Awaiting Review
Component:               |    Version:
  Administration         |   Keywords:  has-screenshots needs-patch 5-3
 Severity:  normal       |  -admin-css-changes
  Focuses:  ui           |
-------------------------+-------------------------------------------------
 The core default styles don't set a standardized height for form controls.
 Only buttons have 4 default sizes. Inputs and selects don't.

 This is very noticeable when aligning form controls horizontally. Here's
 an example from WordPress 5.2 (Chrome and Firefox):

 [[Image(http://cldup.com/CoNas3RNxH.png)]]

 See how select, input=text, input=number, and buttons have different
 default heights and the alignment is far from ideal.

 To make form controls align nicely when necessary, for example at the top
 of the Posts list, core sets a series of exceptions to the default
 styling, overriding the default CSS.

 Wouldn't be nice to have standard heights and nice alignments by default
 instead? Here's an example with the new styles introduced in WordPress
 5.3:

 [[Image(http://cldup.com/CPhqHu1x1p.png)]]

 Not to mention plugins that align form controls horizontally are forced to
 override the core CSS.

 This shouldn't happen: core should provide good default styling and not
 ask plugin authors for extra work.

 During a recent
 [https://wordpress.slack.com/archives/C02RP4X03/p1570808314131500 design
 and accessibility teams shared meeting on Slack] (requires registration)
 it was agreed to standardize the height of all form controls to 30 pixels
 so this is a follow up to [https://make.wordpress.org/core/2019/10/18
 /noteworthy-admin-css-changes-in-wordpress-5-3/ the admin CSS changes
 introduced in WordPress 5.3] see ticket:47477#comment:67

 Main goal of this proposal:
 - make form controls have the same default height of 30 pixels and align
 nicely
 - this way, various exceptions are no longer necessary
 - the small, normal, large and hero button heights would change from the
 WordPress 5.2 heights of 24 / 28 / 30 / 46 pixels to 26 / 30 / 32 / 46 so
 that the normal size is 30 pixels and the ratio between sizes is preserved
 - improve the new form controls styling in some areas, for example in the
 Customizer

 Mobile:

 On WordPress 5.2 and previous versions:
 - all the button sizes except "hero" are "flattened" to a height of 31
 pixels
 - input=text, input=number, input=email and input=password fields get a
 height of 40 pixels
 - selects get a height of 40 pixels
 - input=search fields and other rarely used inputs (date, time, etc.) get
 a height of 32 pixels
 - input=url fields get a height of 26 pixels
 - the Customiser overrides and resets the core responsive styles: in my
 opinion this isn't a good idea and should be reviewed
 - ideally, there should be no exceptions in core: all the form controls
 should always have the default styling

 On WordPress 5.3:
 Some of these inconsistencies are already fixed in WordPress 5.3 and most
 controls are standardized to a height of 40 pixels. Further improvements
 need to be explored to bring everything to 40 pixels, for example: button
 groups.

-- 
Ticket URL: <https://core.trac.wordpress.org/ticket/48420>
WordPress Trac <https://core.trac.wordpress.org/>
WordPress publishing platform