Page MenuHomePhabricator

Frameless buttons should have same click target minimum size as framed buttons
Closed, ResolvedPublic

Description

Frameless buttons should have same minimum desktop click target sizes – 32px as em calculation result` as framed buttons per default. This has been part of M101 since the original button definitions and makes sense both,

  • from layout certainty perspective for desingers and
  • for developers, who know what they can expect when start using a button and usability (incl. increased usability on mobile devices due to bigger touch target size).

There are several use cases of frameless buttons, with only three implementations to my knowledge, where a smaller size is currently needed:

Use case32px min-height possible?Current sizenegative margin possible?
FieldsetLayout help icons, which are a unique case and would cause layout issues in refactoring.24px, this should probably also get bigger, but needs more design thinking upfront via :first-child hack
VE: Insert paragraph24px. Screen real estate is highly-valued in the edit context, would probably resist to change that. Should remain special case. Is overwritten in VE
VE: Transclusion dialog sidebar options24px, could probably be increased to 32px will prob be affected
Indicator-only frameless button- remains unchanged12px; IMO no useful interface element currently, we should get rid of those anyway, see T150071-remains unchanged
Echo: markAsReadButton30x30px
Echo: mw-echo-ui-notificationItemWidget-content-actions-button24px height, similar to standalone below
Dialogs: Frameless buttons in Quick dialogsAlready 44px min-height
Standalone frameless buttons (demo etc.)24px height, width label-dependent – those and the next ones are the most important to align height with framed buttons
Frameless buttons in horizontal layout24px
Frameless buttons in Maps "more details" side bar (example)24px will prob be affected

Related to T110565

Event Timeline

Restricted Application added a subscriber: Aklapper. · View Herald Transcript
Volker_E renamed this task from Frameless buttons should have same click target size as framed buttons (at least one-directional) to Frameless buttons should have same click target minimum size as framed buttons.Apr 17 2017, 9:17 AM
Volker_E triaged this task as Medium priority.Apr 25 2017, 6:31 PM
Volker_E updated the task description. (Show Details)

Change 350260 had a related patch set uploaded (by VolkerE):
[oojs/ui@master] MediaWiki theme: Improve frameless button in size and behaviour

https://gerrit.wikimedia.org/r/350260

Change 350307 had a related patch set uploaded (by VolkerE):
[oojs/ui@master] themes: Field*Layout help position perfectly aligned

https://gerrit.wikimedia.org/r/350307

Change 350307 merged by jenkins-bot:
[oojs/ui@master] themes: Field*Layout help position perfectly aligned

https://gerrit.wikimedia.org/r/350307

Change 350260 merged by jenkins-bot:
[oojs/ui@master] WikimediaUI, Apex theme: Improve frameless button in size and behaviour

https://gerrit.wikimedia.org/r/350260

Volker_E moved this task from Reviewing to OOjs-UI-0.22.0 on the OOUI board.
Volker_E edited projects, added OOUI (OOjs-UI-0.22.0); removed OOUI.
Volker_E removed a project: Patch-For-Review.
Volker_E removed a subscriber: gerritbot.