Should OOUI Widgets apply `box-sizing: border-box` as general rule?
Open, LowestPublic

Description

After reconsidering the current approach taken in the patch set https://gerrit.wikimedia.org/r/#/c/313940/ on T146962 it seems reasonable to consider applying box-sizing: border-box as general rule for OOUI elements/widgets.
Citing from the patch:

I agree that this should be labelled ”breaking change”, an easily handleable one though.
A question arising is, if we better set box-sizing: border-box as general rule for .oo-ui-widgets? It's the more intuitive (more humanized) way of calculating sizes, we already do it on a bunch of widgets (DropdownHandle, TextInput, Checkbox, Radio, ToggleSwitch, SelectFileWidgetInfo, CapsuleItemWidget). Through inherited classes or mixins you might end up in unwanted inheritance if not relying on it generally. It would be also more reliable from an consistency perspective.
OOUI developers [w]ould be sure, that there's _one_ way of box-sizing.

It's not inherited, so we'll have to think about if a .oo-ui-widget > * selector is feasible.

As of v0.19.0 box-sizing: border-box is applied to following widgets:

Element?notes
ButtonElementIn use since v0.19.0
ClippableElementIn use
DraggableElement
FlaggedElement
IconElementHas a patch for review
IndicatorElementHas a patch for review
LabelElementHas a patch for review
LookupElementCovered in TextInputWidget
PendingElement
PopupElement
TabIndexedElement
TitledElement
Widget?notes
ButtonWidgetIn use since v0.19.0 through ButtonElement
ButtonGroup-/SelectWidgetIn use since v0.19.0 through ButtonElement
CapsuleMultiselectWidgetPartly.
CheckboxWidgetCheckboxes and Radios are the few elements, that are border-box per default in browsers today (except IE < 10). But also or <span> rebuild is using it already
ComboBoxInputWidgetIn use
DropDownWidgetPartly. handle has already border-box enabled, enabling on parent element isn't problematic
NumberInputWidgetIn use
ProgressBarWidgetSince v0.21.2
RadioInputWidgetSee Checkbox above
SelectFileWidgetPartly. -info has it applied, easily switchable
TextInputWidgetIn use
ToggleSwitchWidgetIn use
Tools?notes
Toolbars
ToolGroupsSince v0.23.3
ToolsSince v0.23.3
Volker_E created this task.Oct 7 2016, 11:29 PM
Restricted Application added a subscriber: Aklapper. · View Herald TranscriptOct 7 2016, 11:29 PM
Volker_E triaged this task as High priority.

This task was topic in today's Front-end-Standards-Group meeting, with comments by @Esanders, @Catrope, @Jdlrobson and @Jdrewniak.
We've been discussing different approaches in the tension between making development clearer and easier by using one box-sizing declaration of widgets (as in .oo-ui-widget * {}) vs. running into possible conflicts with injected third party libraries/code and having to play the specificity game*.
Comments from the discussion:

@Esanders 11:15 AM
Yes - I would vote strongly against the widget > * selector suggested

As it might interact with 3rd party code, which we have no control over.
Which interfaces would be affected by:

@Catrope 11:16 AM
Widgets like, say, VisualEditor surfaces
Specificity problem: .oo-ui-widget * { box-sizing: border-box; } .ve-surface * { box-sizing: content-box; } but now .thing-inside-ve-surface { box-sizing: border-box; } loses on specificity

I would like to challenge the idea for a UI library not to have a general box-sizing approach, but to define border-box for every new widget again results in confusion and inconsistency (see my table above) throughout widgets.
*The specificity game is handleable, as the star selector has a specificity of 0, 0, 0, 0. It means when the dev injecting other code is overriding the widget general box-sizing with ve-surface *, .thing-inside-ve-surface { box-sizing: border-box; } would still be applied. See also https://codepen.io/Volker_E/pen/dpKRpR

Volker_E lowered the priority of this task from High to Lowest.Dec 3 2016, 8:38 PM
Volker_E updated the task description. (Show Details)
Volker_E updated the task description. (Show Details)Feb 7 2017, 3:20 AM
Volker_E updated the task description. (Show Details)Apr 9 2017, 12:48 AM
Volker_E updated the task description. (Show Details)Apr 29 2017, 8:50 PM

Change 359892 had a related patch set uploaded (by Srishakatux; owner: Srishakatux):
[oojs/ui@master] IconElement: Switch box-sizing to border-box

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

Change 359894 had a related patch set uploaded (by Srishakatux; owner: Srishakatux):
[oojs/ui@master] LabelElement: Switch box-sizing to border-box

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

Change 359895 had a related patch set uploaded (by Srishakatux; owner: Srishakatux):
[oojs/ui@master] IndicatorElement: Switch box-sizing to border-box

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

srishakatux updated the task description. (Show Details)Jun 19 2017, 1:30 AM

To make the path forward clearer, for all Elements we're going to add element specific

.element, 
.element > * {
    box-sizing: border-box;
}

in the beginning and when the nesting issue with PopupButtonWidget/ButtonElement is resolved, we should generalize this rule
to .theme-oo-ui-element () {} in a follow-up patch.

Volker_E moved this task from Unsorted to OOUI on the UI-Standardization board.Aug 15 2017, 9:47 PM
Volker_E updated the task description. (Show Details)Sep 16 2017, 2:00 AM

Change 378361 had a related patch set uploaded (by VolkerE; owner: VolkerE):
[oojs/ui@master] Make box-sizing: border-box the default on wigets

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

Change 380546 had a related patch set uploaded (by VolkerE; owner: VolkerE):
[oojs/ui@master] [WIP] WikimediaUI theme: Unify padding and distances on tools and menus

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

Krinkle removed a subscriber: Krinkle.Sep 25 2017, 5:10 PM

Change 380546 merged by jenkins-bot:
[oojs/ui@master] WikimediaUI theme: Unify positioning and sizing of tools and menus

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

Volker_E updated the task description. (Show Details)Oct 3 2017, 4:20 PM
Jdforrester-WMF moved this task from Backlog to Reviewing on the OOUI board.Oct 18 2017, 7:41 PM
Volker_E renamed this task from Should OOjs UI Widgets apply `box-sizing: border-box` as general rule? to Should OOUI Widgets apply `box-sizing: border-box` as general rule?.Jan 8 2018, 10:08 PM
Volker_E updated the task description. (Show Details)

Change 359894 merged by jenkins-bot:
[oojs/ui@master] LabelElement: Switch box-sizing to border-box

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