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

Volker_E created this task.Sep 29 2016, 4:28 AM
Restricted Application added a project: UI-Standardization. · View Herald TranscriptSep 29 2016, 4:28 AM
Restricted Application added a subscriber: Aklapper. · View Herald Transcript
Volker_E added a comment.EditedSep 29 2016, 4:28 AM

Related T85853

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:

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

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

Volker_E moved this task from Backlog to Reviewing on the OOUI board.Oct 24 2016, 8:40 AM

@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 );
		
Jdforrester-WMF edited projects, added OOUI (OOjs-UI-0.19.0); removed OOUI.

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

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

Jdforrester-WMF closed this task as Resolved.Jan 18 2017, 2:17 AM
Volker_E removed a project: Patch-For-Review.