digitarald
commented
4 years ago @fvsch I like this a lot for the 28px toolbar, the space makes it a bit more usable imo. Maximizing the hitboxes will be a huge affordance improvement.
Open fvsch opened 4 years ago
digitarald
commented
4 years ago @fvsch I like this a lot for the 28px toolbar, the space makes it a bit more usable imo. Maximizing the hitboxes will be a huge affordance improvement.
As we're moving progressively from 24px toolbars to the bigger 28px toolbars in Debugger, Console etc., updating the search/filter field styles and tweaking the design of some buttons (e.g. the text toggle buttons), spacing in the different panel's toolbars can become inconsistent.
Screenshots highlighting the current sizes of toolbar buttons: https://www.figma.com/file/3j5ThdgQic8VGrw4wWNY5O/Panel-Toolbars-spacing?node-id=0%3A1
Inconsistencies in button heights
I'm not counting the pill-shaped toggle buttons, since their design is supposed to be different and smaller.
Previous toolbar spacing (24px toolbars)
This is how I understand the styles for 24px toolbars, which we're progressively moving from:
Updating styles for 28px toolbars
It would be great to be able to specify some sizes and spacing for elements in 28px toolbars. Things like:
Width and height of icon buttons. For the height, two options:
Spacing between buttons. I think we're mostly consistent here, it's 0px for edge-to-edge buttons (toolbox, Debugger), and 2px otherwise.
Spacing between buttons and the toolbar's left or right edge.
Spacing between buttons/inputs/etc. and separators (we have a bit of everything: 0px, 1px, 2px, 4px, 6px…).
A short note about hitboxes
Just because we make a button visually small, doesn't mean the hitbox for that button has to be small too. For instance, the toggle buttons are 16px tall which can be a hard target to reach. We can always give them a bigger hitbox, and use an inner element to draw the background: