Improving dropdown menus for family of tools in the Toolbar

[mtias]

We have several groups of tools — block alignment, text alignment, vertical alignment, heading level — that are displayed very verbosely at the moment with icon + text:

The proposed design update of the toolbar aims to make them the same size as the toolbar control the spring from:

(Obviously they will have tooltips just like the regular toolbar items.)

We should also ensure that it opens consistently to the bottom and only to the top when there is no space. Right now it seems to have no coherence.

[ZebulanStanphill]

Would this be an okay thing to do, accessibility-wise?

[chrisvanpatten]

I'll be honest I don't love the look without the labels. I definitely think the positioning of the "dropdown" could be improved (should ideally have the left edge aligned with the left edge of the "button"), but the icons are all a bit too similar to my eyes to easily scan without the text. It's just hard to quickly scan and find what you're looking for.

[mtias]

It'd actually be consistent with other toolbar icons which is icon button + tooltip. It's a very common pattern, what we are doing right now feels super idiosyncratic:

[chrisvanpatten]

I feel like that's not the best example because text alignment icons are much more "scannable" and arguably ingrained in the public consciousness to a degree. The Gutenberg block position icons aren't as visually distinct or commonly understood.

The Google example also has the benefit of setting the active icon in a different color. In G2 UI, the active icon is still black and white. Inverted, yes, but difficult to separate visually because it uses the same colors.

[mtias]

Closing this for now