jenkins-bot has submitted this change and it was merged.
Change subject: ButtonOptionWidget: Inherit OptionWidget, not
DecoratedOptionWidget
......................................................................
ButtonOptionWidget: Inherit OptionWidget, not DecoratedOptionWidget
DecoratedOptionWidget comes with some styles meant mostly for dropdowns
which are a bit of a pain for buttons. We had tons of CSS to override
them. Instead, inherit just OptionWidget and mix in IconElement and
IndicatorElement ourselves.
This actually fixes a small UI bug in Apex where icons/indicators of
disabled ButtonOptionWidget would be lighter than in any other buttons.
Change-Id: I47a31eb58fcc91124184442b23ef56c00bdc3f92
---
M src/themes/apex/widgets.less
M src/themes/mediawiki/widgets.less
M src/widgets/ButtonOptionWidget.js
3 files changed, 9 insertions(+), 40 deletions(-)
Approvals:
Prtksxna: Looks good to me, approved
Jforrester: Looks good to me, approved
jenkins-bot: Verified
diff --git a/src/themes/apex/widgets.less b/src/themes/apex/widgets.less
index 3bd5cb0..13b01af 100644
--- a/src/themes/apex/widgets.less
+++ b/src/themes/apex/widgets.less
@@ -670,27 +670,10 @@
padding: 0;
background-color: transparent;
- .oo-ui-buttonElement-button {
- height: @size-icon;
- }
-
- &.oo-ui-iconElement .oo-ui-iconElement-icon {
- margin-top: 0;
- }
-
&.oo-ui-optionWidget-selected,
&.oo-ui-optionWidget-pressed,
&.oo-ui-optionWidget-highlighted {
background-color: transparent;
- }
-
- // Override DecoratedOptionWidget styles
- &.oo-ui-iconElement .oo-ui-iconElement-icon {
- height: @size-icon;
- }
-
- &.oo-ui-indicatorElement .oo-ui-indicatorElement-indicator {
- height: @size-indicator;
}
}
diff --git a/src/themes/mediawiki/widgets.less
b/src/themes/mediawiki/widgets.less
index c930bee..b523a41 100644
--- a/src/themes/mediawiki/widgets.less
+++ b/src/themes/mediawiki/widgets.less
@@ -853,30 +853,10 @@
padding: 0;
background-color: transparent;
- &.oo-ui-iconElement .oo-ui-iconElement-icon {
- margin-top: 0;
- }
-
&.oo-ui-optionWidget-selected,
&.oo-ui-optionWidget-pressed,
&.oo-ui-optionWidget-highlighted {
background-color: transparent;
- }
-
- // Override DecoratedOptionWidget styles
- &.oo-ui-widget-disabled {
- .oo-ui-iconElement-icon,
- .oo-ui-indicatorElement-indicator {
- opacity: 1;
- }
- }
-
- &.oo-ui-iconElement .oo-ui-iconElement-icon {
- height: @size-icon;
- }
-
- &.oo-ui-indicatorElement .oo-ui-indicatorElement-indicator {
- height: @size-indicator;
}
}
diff --git a/src/widgets/ButtonOptionWidget.js
b/src/widgets/ButtonOptionWidget.js
index 75984eb..07ba6fc 100644
--- a/src/widgets/ButtonOptionWidget.js
+++ b/src/widgets/ButtonOptionWidget.js
@@ -7,8 +7,10 @@
* [1]:
https://www.mediawiki.org/wiki/OOjs_UI/Widgets/Selects_and_Options#Button_selects_and_options
*
* @class
- * @extends OO.ui.DecoratedOptionWidget
+ * @extends OO.ui.OptionWidget
* @mixins OO.ui.mixin.ButtonElement
+ * @mixins OO.ui.mixin.IconElement
+ * @mixins OO.ui.mixin.IndicatorElement
* @mixins OO.ui.mixin.TabIndexedElement
* @mixins OO.ui.mixin.TitledElement
*
@@ -24,6 +26,8 @@
// Mixin constructors
OO.ui.mixin.ButtonElement.call( this, config );
+ OO.ui.mixin.IconElement.call( this, config );
+ OO.ui.mixin.IndicatorElement.call( this, config );
OO.ui.mixin.TitledElement.call( this, $.extend( {}, config, { $titled:
this.$button } ) );
OO.ui.mixin.TabIndexedElement.call( this, $.extend( {}, config, {
$tabIndexed: this.$button,
@@ -32,14 +36,16 @@
// Initialization
this.$element.addClass( 'oo-ui-buttonOptionWidget' );
- this.$button.append( this.$element.contents() );
+ this.$button.append( this.$icon, this.$label, this.$indicator );
this.$element.append( this.$button );
};
/* Setup */
-OO.inheritClass( OO.ui.ButtonOptionWidget, OO.ui.DecoratedOptionWidget );
+OO.inheritClass( OO.ui.ButtonOptionWidget, OO.ui.OptionWidget );
OO.mixinClass( OO.ui.ButtonOptionWidget, OO.ui.mixin.ButtonElement );
+OO.mixinClass( OO.ui.ButtonOptionWidget, OO.ui.mixin.IconElement );
+OO.mixinClass( OO.ui.ButtonOptionWidget, OO.ui.mixin.IndicatorElement );
OO.mixinClass( OO.ui.ButtonOptionWidget, OO.ui.mixin.TitledElement );
OO.mixinClass( OO.ui.ButtonOptionWidget, OO.ui.mixin.TabIndexedElement );
--
To view, visit https://gerrit.wikimedia.org/r/283184
To unsubscribe, visit https://gerrit.wikimedia.org/r/settings
Gerrit-MessageType: merged
Gerrit-Change-Id: I47a31eb58fcc91124184442b23ef56c00bdc3f92
Gerrit-PatchSet: 5
Gerrit-Project: oojs/ui
Gerrit-Branch: master
Gerrit-Owner: Bartosz Dziewoński <[email protected]>
Gerrit-Reviewer: Bartosz Dziewoński <[email protected]>
Gerrit-Reviewer: Jforrester <[email protected]>
Gerrit-Reviewer: Prtksxna <[email protected]>
Gerrit-Reviewer: jenkins-bot <>
_______________________________________________
MediaWiki-commits mailing list
[email protected]
https://lists.wikimedia.org/mailman/listinfo/mediawiki-commits
