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 case | 32px min-height possible? | Current size | negative 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 paragraph | 24px. 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 options | 24px, could probably be increased to 32px | will prob be affected | |
Indicator-only frameless button | - remains unchanged | 12px; IMO no useful interface element currently, we should get rid of those anyway, see T150071 | -remains unchanged |
Echo: markAsReadButton | 30x30px | ||
Echo: mw-echo-ui-notificationItemWidget-content-actions-button | 24px height, similar to standalone below | ||
Dialogs: Frameless buttons in Quick dialogs | Already 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 layout | 24px | ||
Frameless buttons in Maps "more details" side bar (example) | 24px | will prob be affected | |
Related to T110565