From 77a1424e4eb4909f5f1fd7008e87de8595265cc6 Mon Sep 17 00:00:00 2001
From: Jan Drewniak <jan.drewniak@gmail.com>
Date: Wed, 23 Oct 2019 14:44:52 +0200
Subject: [PATCH] Show labels in page-actions menu on desktop widths

Adds labels to page-actions menu via a new
`.mw-ui-icon-with-label-desktop` class that shows labels at the
desktop break-point.

Bug: T226562
Change-Id: If57ab44660e0dc2a58c04fbf22dee6c27dd1f45f
---
 .../menu/PageActions/PageActionsDirector.php  |  5 +++-
 includes/menu/PageActions/ToolbarBuilder.php  | 27 +++++++++++++------
 minerva.less/minerva.variables.less           |  1 +
 .../pageactions.less                          |  2 ++
 .../mediawiki.ui.icon/mediawiki.ui.icon.less  | 26 ++++++++++++++++++
 5 files changed, 52 insertions(+), 9 deletions(-)

diff --git a/includes/menu/PageActions/PageActionsDirector.php b/includes/menu/PageActions/PageActionsDirector.php
index 572838bcb..6665b69c0 100644
--- a/includes/menu/PageActions/PageActionsDirector.php
+++ b/includes/menu/PageActions/PageActionsDirector.php
@@ -81,7 +81,10 @@ final class PageActionsDirector {
 				'checkboxID' => 'page-actions-overflow-checkbox',
 				'toggleID' => 'page-actions-overflow-toggle',
 				'listID' => $overflowMenu->getId(),
-				'toggleClass' => MinervaUI::iconClass( 'page-actions-overflow', 'element' ),
+				'toggleClass' => MinervaUI::iconClass(
+					'page-actions-overflow',
+					'element',
+					'mw-ui-icon-with-label-desktop' ),
 				'listClass' => 'page-actions-overflow-list toggle-list__list--drop-down',
 				'text' => $this->messageLocalizer->msg( 'minerva-page-actions-overflow' ),
 				'analyticsEventName' => 'ui.overflowmenu',
diff --git a/includes/menu/PageActions/ToolbarBuilder.php b/includes/menu/PageActions/ToolbarBuilder.php
index 21867843e..ec774fe2d 100644
--- a/includes/menu/PageActions/ToolbarBuilder.php
+++ b/includes/menu/PageActions/ToolbarBuilder.php
@@ -116,7 +116,7 @@ class ToolbarBuilder {
 				$this->title,
 				$this->languagesHelper->doesTitleHasLanguagesOrVariants( $this->title ),
 				$this->messageLocalizer,
-				MinervaUI::iconClass( 'language-switcher', 'element' ) )
+				MinervaUI::iconClass( 'language-switcher', 'element', 'mw-ui-icon-with-label-desktop' ) )
 			);
 		}
 
@@ -155,7 +155,7 @@ class ToolbarBuilder {
 		return PageActionMenuEntry::create(
 			'page-actions-contributions',
 			SpecialPage::getTitleFor( 'Contributions', $pageUser )->getLocalURL(),
-			MinervaUI::iconClass( 'contributions' ),
+			MinervaUI::iconClass( 'contributions', 'with-label-desktop' ),
 			$label,
 			'contributions'
 
@@ -186,7 +186,11 @@ class ToolbarBuilder {
 			'page-actions-edit',
 			$title->getLocalURL( $editArgs ),
 			'edit-page '
-			. MinervaUI::iconClass( $editOrCreate ? 'edit-enabled' : 'edit', 'element' ),
+			. MinervaUI::iconClass(
+				$editOrCreate ? 'edit-enabled' : 'edit',
+				'element',
+				'mw-ui-icon-with-label-desktop'
+			),
 			$this->messageLocalizer->msg( 'mobile-frontend-editor-edit' ),
 			'edit'
 		);
@@ -213,13 +217,20 @@ class ToolbarBuilder {
 			: $title->getLocalURL( [ 'action' => $newModeToSet ] );
 
 		if ( $isWatched ) {
-			$msg = $this->messageLocalizer->msg( 'unwatchthispage' );
+			$msg = $this->messageLocalizer->msg( 'unwatch' );
 			$icon = 'unStar-progressive';
 		} else {
-			$msg = $this->messageLocalizer->msg( 'watchthispage' );
+			$msg = $this->messageLocalizer->msg( 'watch' );
 			$icon = 'star-base20';
 		}
-		$iconClass = MinervaUI::iconClass( $icon, 'element', 'watch-this-article', 'wikimedia' );
+
+		$iconClass = MinervaUI::iconClass(
+			$icon,
+			'element',
+			'mw-ui-icon-with-label-desktop watch-this-article',
+			'wikimedia'
+		);
+
 		if ( $isWatched ) {
 			$iconClass .= ' watched';
 		}
@@ -247,8 +258,8 @@ class ToolbarBuilder {
 		return new PageActionMenuEntry(
 			'page-actions-history',
 			$this->getHistoryUrl( $this->title ),
-			MinervaUI::iconClass( 'clock' ),
-			$this->messageLocalizer->msg( 'mobile-frontend-history' ),
+			MinervaUI::iconClass( 'clock', 'element', 'mw-ui-icon-with-label-desktop' ),
+			$this->messageLocalizer->msg( 'minerva-page-actions-history' ),
 			'history'
 		);
 	}
diff --git a/minerva.less/minerva.variables.less b/minerva.less/minerva.variables.less
index 84a8fd60c..88f4d4726 100644
--- a/minerva.less/minerva.variables.less
+++ b/minerva.less/minerva.variables.less
@@ -43,6 +43,7 @@
 //
 @icon-touch-area-sm: 34;
 @icon-touch-area-md: 44;
+@icon-color: @colorGray5;
 
 // Small icon
 @icon-glyph-size-sm: 16;
diff --git a/resources/skins.minerva.base.styles/pageactions.less b/resources/skins.minerva.base.styles/pageactions.less
index 487bc3d22..4ba29cf9d 100644
--- a/resources/skins.minerva.base.styles/pageactions.less
+++ b/resources/skins.minerva.base.styles/pageactions.less
@@ -44,6 +44,8 @@
 	flex-basis: 4em;
 	justify-content: flex-end;
 	align-items: center;
+	min-width: 0;
+	overflow: hidden;
 
 	li > *:hover {
 		box-shadow: none;
diff --git a/skinStyles/mediawiki.ui.icon/mediawiki.ui.icon.less b/skinStyles/mediawiki.ui.icon/mediawiki.ui.icon.less
index 01a11eb9c..3435fd15b 100644
--- a/skinStyles/mediawiki.ui.icon/mediawiki.ui.icon.less
+++ b/skinStyles/mediawiki.ui.icon/mediawiki.ui.icon.less
@@ -165,3 +165,29 @@
 		vertical-align: middle;
 	}
 }
+
+@media all and ( min-width: @width-breakpoint-desktop ) {
+	.mw-ui-icon-with-label-desktop {
+		color: @icon-color;
+		width: auto;
+		line-height: inherit;
+		flex-basis: auto;
+		white-space: nowrap;
+		overflow: hidden;
+		text-overflow: ellipsis;
+
+		&:hover, &:focus, &:active, &:visited {
+			color: @icon-color;
+			text-decoration: none;
+		}
+
+		&:before {
+			// Hard-coded value to separate icon and proceeding text.
+			margin-right: @icon-padding-md;
+			width: auto;
+			display: inline-block;
+			// Seems to be more visually centered than `middle`.
+			vertical-align: text-bottom;
+		}
+	}
+}