Skip to content

G2: Apply 12px grid to top toolbar more consistently #21870

@jasmussen

Description

@jasmussen

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:

Grid

So as to not be overwhelming, the toggled state of buttons in the block toolbar are 32x32px:

80192758-f7eb8a80-8617-11ea-9ec5-049c7ca9c847

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:

Screenshot 2020-04-24 at 16 05 03

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:

one focus style

Additionally, buttons on the right, including the toggled state for sidebar(s), are 36px:

Screenshot 2020-04-24 at 16 09 30

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.

Metadata

Metadata

Assignees

No one assigned

    Labels

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions