Skip to content

UI Components, settle on 40px and 32px "small" sizes. #46734

Closed
@jasmussen

Description

UI components across the editor (input fields, buttons, etc.) are currently a range of sizes, between 32px, 36px, and 40px:

Screenshot 2022-12-22 at 11 21 06 Screenshot 2022-12-22 at 11 20 59
The inserter button is 32x32, the other buttons are 36x36 Buttons here are 36px, including the toggles
Screenshot 2022-12-22 at 11 24 03 Screenshot 2022-12-22 at 11 21 12
Toggle buttons in the block toolbar are 32x32 Inspector controls are standardizing on 40px

There's an opportunity here to standardize and make consistent the controls, so there's less guesswork as to which dimensions controls should have. We could do this:

  • All controls (inputs, segmented controls, sliders, dropdowns, and buttons) are 40px by default.
  • All toggles (block toolbar button, toggles in the inspector such as quick transforms, the active state inside a segmented control) are 32x32px.
  • The Button component has a 32px small version, to be used when the button is used in context of toggles, such as the top toolbar.
  • The 36px size is retired entirely.

Here's a grid of metrics to illustrate how this could work:

grid

Both 32 and 40px are base8 friendly, which would simplify the grid system. And with a single default (40px for controls, 32 for toggles inside), there would be no guesswork as to which size to use. The 32px button size would be the exception to use, as noted, in the top toolbar for buttons.

Activity

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Metadata

Assignees

No one assigned

    Labels

    Design SystemIssues related to the system of combining components according to best practices.Figma ComponentIssues that require updates to Figma components for designersNeeds DevReady for, and needs developer effortsNeeds Figma UpdateNeeds an update to Figma for design purposes[Feature] Component SystemWordPress component system[Feature] UI ComponentsImpacts or related to the UI component system[Type] EnhancementA suggestion for improvement.

    Type

    No type

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions