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

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

Open
jasmussen opened this issue Dec 22, 2022 · 1 comment
Open

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

jasmussen opened this issue Dec 22, 2022 · 1 comment
Labels
[Feature] Component System WordPress component system [Feature] UI Components Impacts or related to the UI component system Figma Component Issues that require updates to Figma components for designers Needs Dev Ready for, and needs developer efforts Needs Figma Update Needs an update to Figma for design purposes [Type] Enhancement A suggestion for improvement.

Comments

@jasmussen
Copy link
Contributor

jasmussen commented Dec 22, 2022

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.

@jasmussen jasmussen added Needs Design Feedback Needs general design feedback. [Feature] UI Components Impacts or related to the UI component system Needs Figma Update Needs an update to Figma for design purposes [Feature] Component System WordPress component system Figma Component Issues that require updates to Figma components for designers labels Dec 22, 2022
@mirka
Copy link
Member

mirka commented Dec 22, 2022

I'm very happy to see this! We'll start working out the technical logistics in #46741.

@jasmussen jasmussen added Needs Dev Ready for, and needs developer efforts and removed Needs Design Feedback Needs general design feedback. labels May 18, 2023
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
[Feature] Component System WordPress component system [Feature] UI Components Impacts or related to the UI component system Figma Component Issues that require updates to Figma components for designers Needs Dev Ready for, and needs developer efforts Needs Figma Update Needs an update to Figma for design purposes [Type] Enhancement A suggestion for improvement.
Projects
Status: 💻 Needs development
Development

No branches or pull requests

3 participants