Page MenuHomePhabricator

OO.ui.ButtonSelectWidget: Buttons differ in size if they have icons only or label only
Closed, ResolvedPublic1 Estimated Story Points

Description

With a single OO.ui.ButtonSelectWidget with the following setup:

		new OO.ui.ButtonSelectWidget( {
			items: [
				new OO.ui.ButtonOptionWidget( {
					label: 'Home',
					data: 'start'
				} ),
				new OO.ui.ButtonOptionWidget( {
					icon: 'previous',
					data: 'prev'
				} ),
				new OO.ui.ButtonOptionWidget( {
					icon: 'next',
					data: 'next'
				} )
			]
		} );

The expectation is that all buttons will be the same height, but in reality, buttons that only have icons are smaller than the button that has a label:

ooui-buttonselectwidget.png (84×239 px, 2 KB)

Event Timeline

I think this is because of .mw-body-content { line-height: 1.6 } in the Vector skin. A workaround is to set line-height: normal on ButtonElements.

Change 291146 had a related patch set uploaded (by Catrope):
MediaWiki theme: Make iconed and non-iconed buttons have the same height

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

The attached patch fixes this for Vector. There's still a 1px difference in height in MonoBook (using the Apex theme). That's because we now have min-height: 24px on icons (for T93636: Indicator distorted in Firefox 31.5.0), but the button label wants to be slightly less than 24px tall. This, in turn, is because Apex wants to be used with a 12.8px font size, but MonoBook uses 12.7px, so 1.875em is just a little less than 24px.

Change 291146 merged by jenkins-bot:
Make iconed and non-iconed buttons have the same height

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

Jdforrester-WMF assigned this task to Catrope.
Jdforrester-WMF triaged this task as Medium priority.
Jdforrester-WMF moved this task from Backlog to OOjs-UI-0.17.3 on the OOUI board.
Jdforrester-WMF edited projects, added OOUI (OOjs-UI-0.17.3); removed OOUI.
Jdforrester-WMF set the point value for this task to 1.