From 5ca2ccb58a5f50e900b30c01b746d92e4732c4ad Mon Sep 17 00:00:00 2001
From: jdlrobson <jdlrobson@gmail.com>
Date: Fri, 27 Aug 2021 10:32:00 -0700
Subject: [PATCH] Language button icon/button should be consistent with other
 buttons

This converts the language button into a mw-ui-button which is the
class we're currently using in both Vector and Minerva. In future
this can become a WVUI button using the same roadmap as Vector
and Minerva.

This fixes the issue with the icon resize, as well as the issue
with the button lacking appropriate hover/focus states.

Bug: T289630
Change-Id: I8242986e8762a8f663f8cab07c54481e14223320
---
 includes/UniversalLanguageSelectorHooks.php |  8 +++--
 resources/css/ext.uls.pt.less               | 34 ++++++++++++++-------
 2 files changed, 29 insertions(+), 13 deletions(-)

diff --git a/includes/UniversalLanguageSelectorHooks.php b/includes/UniversalLanguageSelectorHooks.php
index f3fdf6de..c6b89af1 100644
--- a/includes/UniversalLanguageSelectorHooks.php
+++ b/includes/UniversalLanguageSelectorHooks.php
@@ -132,7 +132,10 @@ class UniversalLanguageSelectorHooks {
 		$out->addJsConfigVars( $config );
 
 		if ( $wgULSPosition === 'personal' ) {
-			$out->addModuleStyles( 'ext.uls.pt' );
+			$out->addModuleStyles( [
+				'mediawiki.ui.button',
+				'ext.uls.pt'
+			] );
 		} else {
 			$out->addModuleStyles( 'ext.uls.interlanguage' );
 		}
@@ -226,7 +229,8 @@ class UniversalLanguageSelectorHooks {
 			'uls' => [
 				'text' => Language::fetchLanguageName( $langCode ),
 				'href' => '#',
-				'class' => 'uls-trigger',
+				'link-class' => 'mw-ui-icon mw-ui-icon-before',
+				'class' => 'uls-trigger mw-ui-button mw-ui-quiet',
 				'active' => true
 			]
 		] + $personal_urls;
diff --git a/resources/css/ext.uls.pt.less b/resources/css/ext.uls.pt.less
index 51202e02..fac66ef2 100644
--- a/resources/css/ext.uls.pt.less
+++ b/resources/css/ext.uls.pt.less
@@ -19,23 +19,29 @@
  * A hack to load the icon before the rest of the module is lazy-loaded.
  * Copied from jquery.uls.css with the path changed.
  */
-.uls-trigger {
+.uls-trigger a:before {
 	background: no-repeat url( ../../lib/jquery.uls/images/language.svg ) left center;
-	// Let the SVG image fit without cropping or stretch
-	background-size: contain;
-	padding-left: 24px;
 }
 
+.vector-user-links {
+	.uls-trigger {
+		// Disable additional icon on load.
+		background-image: none;
+		// Can be removed when no longer need to override rule in jquery.uls.css
+		padding-left: 12px;
+	}
+}
+
+// Vector modern = ca-uls
+// Other skins = pt-uls
 #pt-uls {
-	padding-top: 0 !important; // stylelint-disable-line declaration-no-important
+	.mw-ui-button {
+		display: inline;
+		padding: 0;
+		border: 0;
+	}
 
 	.uls-trigger {
-		background-image: none;
-		// Same values as Vector's `#p-personal li`.
-		display: inline-block;
-		padding-top: 0.5em !important; // stylelint-disable-line declaration-no-important
-		padding-left: 0;
-
 		// Putting the icon in before in order to apply `opacity`.
 		&:before {
 			content: '';
@@ -53,6 +59,12 @@
 	}
 }
 
+.skin-vector {
+	#ca-uls span {
+		font-size: 0.875em;
+	}
+}
+
 /* Opera for some inexplicable reason confuses right and left padding with */
 /* RTL text direction here (bug T47142). x:-o-prefocus won't match anything, */
 /* but will make other browsers ignore this rule. */