Page MenuHomePhabricator

Consider square icon-only buttons for toolbar tools
Open, Needs TriagePublic

Description

We currently have this on static maps:

pasted_file (310×305 px, 56 KB)

which definitely looks wrong.

Event Timeline

It may be that the rectangular buttons make sense for horizontal button groups, but this a vertical button group (see zoom in/out controls), which doesn't exist yet. That said a labelled vertical button group should probably have the same padding as normal buttons...

We should definitely take into account touch target size consideration which is currently baked into the width of buttons, which in turn lead to rectangular icon-only buttons with exception of NumberInputWidget, which is a special case, as it's possible to interact with it without using the buttons and CapsuleMultiSelectWidget, which is a special case as it uses an indicator-only button, that should be [[ T150071 | removed/replaced ]] for exactly that mobile-problematic reason of not providing a sufficient touch target size.

It may be that the rectangular buttons make sense for horizontal button groups, but this a vertical button group (see zoom in/out controls), which doesn't exist yet. That said a labelled vertical button group should probably have the same padding as normal buttons...

I agree, in a vertical button group a square makes sense. It could maintain the current width and set the same height to ensure accessibility.

Google MapsLeaflet
Screen Shot 2017-03-30 at 7.42.19 PM.png (108×52 px, 8 KB)
Screen Shot 2017-03-30 at 7.45.44 PM.png (76×45 px, 8 KB)

Our buttons should probably be larger than this.

Esanders renamed this task from Consider square icon-only buttons or toolbar tools to Consider square icon-only buttons for toolbar tools.May 9 2017, 9:00 PM

This has also cropped up in the NumberInputWidget: https://gerrit.wikimedia.org/r/#/c/352470