From 769d6579f9b2155ee92dd92c0c03a0045bb97eb4 Mon Sep 17 00:00:00 2001
From: Ed Sanders <esanders@wikimedia.org>
Date: Thu, 23 Jul 2020 14:38:23 +0100
Subject: [PATCH] Make MenuItemWidgets inherit from ButtonOptionWidgets

This gives them a consistent appearance with the expand/collapse
button. Only requires a small visual tweak to work in the popup
menu.

Bug: T258701
Bug: T258703
Change-Id: Ib3d074d1117e08d11136791354184e2e4b655290
---
 modules/styles/mw.echo.ui.ActionMenuPopupWidget.less | 6 ++++++
 modules/styles/mw.echo.ui.MenuItemWidget.less        | 9 ++++-----
 modules/ui/mw.echo.ui.MenuItemWidget.js              | 6 +++---
 3 files changed, 13 insertions(+), 8 deletions(-)

diff --git a/modules/styles/mw.echo.ui.ActionMenuPopupWidget.less b/modules/styles/mw.echo.ui.ActionMenuPopupWidget.less
index f1734ae52..ab0f123ea 100644
--- a/modules/styles/mw.echo.ui.ActionMenuPopupWidget.less
+++ b/modules/styles/mw.echo.ui.ActionMenuPopupWidget.less
@@ -3,4 +3,10 @@
 		// Override width: 100%; rule from OOUI
 		width: auto;
 	}
+
+	// We put MenutItemWidgets in the popup menu, as we reuse the same widgets when they appear outside the popup.
+	// Re-style them to look more like DecoratedOptionWidgets instead of ButtonOptionWidgets
+	.mw-echo-ui-menuItemWidget.oo-ui-labelElement:first-child {
+		margin-left: 0;
+	}
 }
diff --git a/modules/styles/mw.echo.ui.MenuItemWidget.less b/modules/styles/mw.echo.ui.MenuItemWidget.less
index c0e23b5e1..fdbb1a492 100644
--- a/modules/styles/mw.echo.ui.MenuItemWidget.less
+++ b/modules/styles/mw.echo.ui.MenuItemWidget.less
@@ -7,27 +7,26 @@
 		text-decoration: none;
 	}
 
-	> .oo-ui-labelElement-label {
+	> .oo-ui-buttonElement-button > .oo-ui-labelElement-label {
 		// Override link colour
 		color: @color-base;
 		// Set max-width so buttons are truncated
 		max-width: 25em;
+		font-weight: normal;
 	}
 
 	&-prioritized {
 		.mw-echo-ui-mixin-hover-opacity();
 		display: inline-block;
-		// Remove left padding up to icon, 11/14
-		margin-left: -0.78571429em;
 	}
 
 	&-dynamic-action {
-		> .oo-ui-labelElement-label {
+		> .oo-ui-buttonElement-button > .oo-ui-labelElement-label {
 			white-space: normal;
 			overflow: visible;
 		}
 
-		&.oo-ui-iconElement > .oo-ui-iconElement-icon {
+		&.oo-ui-iconElement > .oo-ui-buttonElement-button > .oo-ui-iconElement-icon {
 			// Limit to single line height, 32/14
 			height: 2.28571em;
 		}
diff --git a/modules/ui/mw.echo.ui.MenuItemWidget.js b/modules/ui/mw.echo.ui.MenuItemWidget.js
index 810d8ce40..d55dd87c7 100644
--- a/modules/ui/mw.echo.ui.MenuItemWidget.js
+++ b/modules/ui/mw.echo.ui.MenuItemWidget.js
@@ -3,7 +3,7 @@
 	 * Secondary menu item
 	 *
 	 * @class
-	 * @extends OO.ui.DecoratedOptionWidget
+	 * @extends OO.ui.ButtonOptionWidget
 	 * @mixins OO.ui.mixin.PendingElement
 	 *
 	 * @constructor
@@ -25,7 +25,7 @@
 		this.isLink = config.url && !this.isDynamicAction();
 
 		// Parent constructor
-		mw.echo.ui.MenuItemWidget.super.call( this, config );
+		mw.echo.ui.MenuItemWidget.super.call( this, $.extend( { framed: false }, config ) );
 
 		// Mixin constructors
 		OO.ui.mixin.PendingElement.call( this, config );
@@ -62,7 +62,7 @@
 
 	/* Initialization */
 
-	OO.inheritClass( mw.echo.ui.MenuItemWidget, OO.ui.DecoratedOptionWidget );
+	OO.inheritClass( mw.echo.ui.MenuItemWidget, OO.ui.ButtonOptionWidget );
 	OO.mixinClass( mw.echo.ui.MenuItemWidget, OO.ui.mixin.PendingElement );
 
 	/* Static Properties */