UI Components, settle on 40px and 32px "small" sizes. #46734
Closed
Description
opened on Dec 22, 2022
UI components across the editor (input fields, buttons, etc.) are currently a range of sizes, between 32px, 36px, and 40px:
The inserter button is 32x32, the other buttons are 36x36 | Buttons here are 36px, including the toggles |
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:
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.
Metadata
Assignees
Labels
Issues related to the system of combining components according to best practices.Issues that require updates to Figma components for designersReady for, and needs developer effortsNeeds an update to Figma for design purposesWordPress component systemImpacts or related to the UI component systemA suggestion for improvement.
Type
Projects
Status
✅ Done
Status
💫 Done
Activity