Page MenuHomePhabricator

ButtonWidgets should use `box-sizing: border-box`
Closed, ResolvedPublic

Description

ButtonWidgets are currently not applied box-sizing: border-box. In contrast to several other widgets and even mediawiki.UI.
Default box model sizing is nerve-wracking and we are already starting to overwrite OOjs UI's default in prominent places
https://gerrit.wikimedia.org/r/#/c/284902/20/resources/src/mediawiki.special/mediawiki.special.userlogin.common.css

IE 6 & IE 7 are the only mention-worth browsers that don't support it, but buttons in general still stay usable.
Buttons with icons and indicators seem to be the elements to be careful about.

Let's better change the default…

Event Timeline

Restricted Application added a subscriber: Aklapper. · View Herald Transcript

This sounds reasonable. For IE 6 and 7, I think this would be the least of our rendering problems. They don't support display: inline-block so everything looks completely messed up anyway. I don't have a VM with IE 7, but here's a recent IE 6 screenshot:

pasted_file (768×1 px, 89 KB)

Change 313940 had a related patch set uploaded (by VolkerE):
ButtonWidget: Switch box-sizing over to border-box

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

@Esanders @Catrope Feedback highly appreciated. Patch set is around for nearly three months and IMO sensible without breaking things in a non-functional manner. It would improve library architecture around a historically grown bad compromise.

Volker_E triaged this task as Medium priority.Dec 31 2016, 3:35 AM

Seems fine to me. The only external breakage that would cause would be for people writing ButtonWidget subclasses (probably not that common) or styling ButtonWidgets, and then only if they're messing with padding/borders (which is probably rare). If people are setting a width they're probably setting border-box already.

Just to check, we're talking about setting border-box on the buttons themselves, not with a star selector, right?

@Catrope Yes, only on buttons.
Excerpt from the patch's elements/ButtonElement.less file:

.oo-ui-buttonElement {
	display: inline-block;
	vertical-align: middle;

	> .oo-ui-buttonElement-button {
		cursor: pointer;
		display: inline-block;
		.oo-ui-box-sizing( border-box );
		

Change 313940 merged by jenkins-bot:
[BREAKING CHANGE] ButtonWidget: Switch box-sizing over to border-box

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