-
Notifications
You must be signed in to change notification settings - Fork 4.6k
Description
The G2 efforts in #18667 introduce a new 12px grid to which the user interface and elements align. A visual grid helps create rhythm and balance, and helps guide where elements should land as the UI expands. The block toolbar is designed on such a grid:
So as to not be overwhelming, the toggled state of buttons in the block toolbar are 32x32px:
This is optically well balanced.
The top toolbar is partially adhering to that grid at the moment. It's 60px tall (divisible by 12), icons are 24x24 and have 12px spacing between them, and the inserter is 32x32. The spacing to the left of the inserter is there to balance out the inserter next to the heavy dark area. But the spacing isn't totally right. Here's a suggestion to tweak that:
Another inconsistency is that button hit areas are 36x36, except the inserter which is balanced to match the block toolbar. This causes a small jump when focus travels:
Additionally, buttons on the right, including the toggled state for sidebar(s), are 36px:
So there is an opportunity to not just adjust the margins and paddings to align better to the grid, but to explore whether unifying on either 32px for all buttons, or 36px for all buttons, would make sense here.