jenkins-bot has submitted this change and it was merged. (
https://gerrit.wikimedia.org/r/313940 )
Change subject: [BREAKING CHANGE] ButtonWidget: Switch `box-sizing` over to
`border-box`
......................................................................
[BREAKING CHANGE] ButtonWidget: Switch `box-sizing` over to `border-box`
Switching `box-sizing` to `border-box` value, making it easier
to calculate sizes and centralizing occurences already in use
by widgets with buttons.
Bug: T146962
Change-Id: I618876ba6e1e397513f6a3ec001f2d815e755e9e
---
M src/styles/elements/ButtonElement.less
M src/styles/widgets/ComboBoxInputWidget.less
M src/styles/widgets/NumberInputWidget.less
M src/themes/mediawiki/common.less
M src/themes/mediawiki/elements.less
M src/themes/mediawiki/widgets.less
6 files changed, 18 insertions(+), 14 deletions(-)
Approvals:
jenkins-bot: Verified
Jforrester: Looks good to me, approved
diff --git a/src/styles/elements/ButtonElement.less
b/src/styles/elements/ButtonElement.less
index 4ec67f3..60903d2 100644
--- a/src/styles/elements/ButtonElement.less
+++ b/src/styles/elements/ButtonElement.less
@@ -7,6 +7,7 @@
> .oo-ui-buttonElement-button {
cursor: pointer;
display: inline-block;
+ .oo-ui-box-sizing( border-box );
vertical-align: middle;
font-family: inherit;
font-size: inherit;
diff --git a/src/styles/widgets/ComboBoxInputWidget.less
b/src/styles/widgets/ComboBoxInputWidget.less
index a73a9ff..a8464ad 100644
--- a/src/styles/widgets/ComboBoxInputWidget.less
+++ b/src/styles/widgets/ComboBoxInputWidget.less
@@ -22,7 +22,6 @@
> .oo-ui-buttonElement-button {
display: block;
- .oo-ui-box-sizing( border-box );
overflow: hidden;
}
}
@@ -41,8 +40,8 @@
position: absolute;
right: 0;
top: 0;
- height: 2.5em;
width: 2.5em;
+ height: 2.5em;
padding: 0;
}
diff --git a/src/styles/widgets/NumberInputWidget.less
b/src/styles/widgets/NumberInputWidget.less
index 57422d4..ad86406 100644
--- a/src/styles/widgets/NumberInputWidget.less
+++ b/src/styles/widgets/NumberInputWidget.less
@@ -9,10 +9,6 @@
.oo-ui-textInputWidget {
display: table-cell;
}
-
- .oo-ui-buttonElement-button {
- .oo-ui-box-sizing( border-box );
- }
}
&-field {
diff --git a/src/themes/mediawiki/common.less b/src/themes/mediawiki/common.less
index bd9253b..de04a72 100644
--- a/src/themes/mediawiki/common.less
+++ b/src/themes/mediawiki/common.less
@@ -58,13 +58,16 @@
@border-toolbar: @border-width-default solid #c8ccd1;
// Box Sizes
+@min-width-button-default: 40 / @oo-ui-font-size-browser /
@oo-ui-font-size-default; // equals `3.125em`≈`40px` at base `font-size:
12.8px` // equals `40px` at base `font-size: 0.8em`
+@min-width-button-combo-widget: 32 / @oo-ui-font-size-browser /
@oo-ui-font-size-default; // equals `2.5em`≈`32px` at base `font-size: 12.8px`
+@min-height-button-default: 32 / @oo-ui-font-size-browser /
@oo-ui-font-size-default;
@min-height-toggleswitch: 26px; // equals `16px` @size-toggleswitch-grip-min +
4px*2 distance top/bottom + 1px*2 border top/bottom
@max-width-default: 50em;
@max-width-input: @max-width-default;
-@max-height-icon: 32 / @oo-ui-font-size-browser / @oo-ui-font-size-default; //
equals `2.5em`≈`32px` at base `font-size: 12.8px`
+@max-height-icon: 32 / @oo-ui-font-size-browser / @oo-ui-font-size-default;
@max-height-indicator: @max-height-icon;
-@size-default: 32 / @oo-ui-font-size-browser / @oo-ui-font-size-default; //
equals `2.5em`≈`32px` at base `font-size: 12.8px`
+@size-default: 32 / @oo-ui-font-size-browser / @oo-ui-font-size-default;
@size-anchor: 9px;
@size-button-default: @size-default;
@size-icon-min: 24px; // values used for `min-height` are defined in `px`, see
T130691
@@ -73,6 +76,8 @@
@size-indicator: 12 / @oo-ui-font-size-browser / @oo-ui-font-size-default; //
equals `0.9375em`≈`12px` at base `font-size: 12.8px`
@size-toggleswitch-grip-min: 16px;
+@width-button-combo-widget: @min-width-button-combo-widget;
+
@border-default: @border-width-default solid @border-color-default;
@border-disabled: @border-width-default solid @border-color-disabled;
@border-disabled-filled: @border-width-default solid
@border-color-disabled-filled;
diff --git a/src/themes/mediawiki/elements.less
b/src/themes/mediawiki/elements.less
index 40d2f35..4e66de7 100644
--- a/src/themes/mediawiki/elements.less
+++ b/src/themes/mediawiki/elements.less
@@ -166,8 +166,8 @@
> .oo-ui-buttonElement-button {
padding: @padding-widget-default 1em;
- min-height: 1.25em;
- min-width: 1em;
+ min-height: @min-height-button-default;
+ min-width: @min-width-button-default;
border-radius: @border-radius-default;
position: relative;
}
diff --git a/src/themes/mediawiki/widgets.less
b/src/themes/mediawiki/widgets.less
index d83ff20..534283f 100644
--- a/src/themes/mediawiki/widgets.less
+++ b/src/themes/mediawiki/widgets.less
@@ -861,11 +861,13 @@
}
&-dropdownButton {
- width: @size-button-default;
+ width: @width-button-combo-widget;
.oo-ui-buttonElement-button {
- min-height: @size-button-default;
- padding: @padding-widget-default;
+ min-width: @min-width-button-combo-widget;
+ min-height: @min-height-button-default;
+ padding-left: 0;
+ padding-right: 0;
}
.oo-ui-buttonElement-button,
@@ -1447,11 +1449,12 @@
&-buttoned {
.oo-ui-buttonWidget {
- width: @size-button-default;
+ width: @width-button-combo-widget;
}
.oo-ui-buttonElement-button {
display: block;
+ min-width: @min-width-button-combo-widget;
min-height: @size-button-default;
padding-left: 0;
padding-right: 0;
--
To view, visit https://gerrit.wikimedia.org/r/313940
To unsubscribe, visit https://gerrit.wikimedia.org/r/settings
Gerrit-MessageType: merged
Gerrit-Change-Id: I618876ba6e1e397513f6a3ec001f2d815e755e9e
Gerrit-PatchSet: 8
Gerrit-Project: oojs/ui
Gerrit-Branch: master
Gerrit-Owner: VolkerE <volke...@wikimedia.org>
Gerrit-Reviewer: Bartosz Dziewoński <matma....@gmail.com>
Gerrit-Reviewer: Catrope <r...@wikimedia.org>
Gerrit-Reviewer: Esanders <esand...@wikimedia.org>
Gerrit-Reviewer: Jforrester <jforres...@wikimedia.org>
Gerrit-Reviewer: Prtksxna <psax...@wikimedia.org>
Gerrit-Reviewer: VolkerE <volke...@wikimedia.org>
Gerrit-Reviewer: jenkins-bot <>
_______________________________________________
MediaWiki-commits mailing list
MediaWiki-commits@lists.wikimedia.org
https://lists.wikimedia.org/mailman/listinfo/mediawiki-commits
