From b79290f5c9952a2b0c9d500edea0094c2bcae832 Mon Sep 17 00:00:00 2001
From: bwang <bwang@wikimedia.org>
Date: Wed, 1 Dec 2021 13:49:12 -0600
Subject: [PATCH] Make ULS in header quiet progressive button

Bug: T291286
Change-Id: Id1e056330606b87bafb8f43e7ff28d96290465b4
---
 bundlesize.config.json                        |  2 +-
 includes/SkinVector.php                       |  4 +--
 resources/common/images/arrow-down-invert.svg |  4 +++
 .../common/images/arrow-down-progressive.svg  |  4 +++
 .../components/LanguageButton.less            | 26 +++++++++++++++++++
 skin.json                                     |  7 ++++-
 6 files changed, 43 insertions(+), 4 deletions(-)
 create mode 100644 resources/common/images/arrow-down-invert.svg
 create mode 100644 resources/common/images/arrow-down-progressive.svg

diff --git a/bundlesize.config.json b/bundlesize.config.json
index b4b5b6a..434333c 100644
--- a/bundlesize.config.json
+++ b/bundlesize.config.json
@@ -17,6 +17,6 @@
 	},
 	{
 		"resourceModule": "skins.vector.icons",
-		"maxSize": "500 B"
+		"maxSize": "1 kB"
 	}
 ]
diff --git a/includes/SkinVector.php b/includes/SkinVector.php
index a325fed..335eb32 100644
--- a/includes/SkinVector.php
+++ b/includes/SkinVector.php
@@ -649,10 +649,10 @@ class SkinVector extends SkinMustache {
 			'aria-label' => $this->getULSLabel( 'vector-language-button-aria-label' ),
 			// ext.uls.interface attaches click handler to this selector.
 			'checkbox-class' => ' mw-interlanguage-selector ',
-			'html-vector-heading-icon' => Hooks::makeIcon( 'wikimedia-language' ),
+			'html-vector-heading-icon' => Hooks::makeIcon( 'wikimedia-language-progressive' ),
 			'heading-class' =>
 				' vector-menu-heading ' .
-				' mw-ui-button mw-ui-quiet'
+				' mw-ui-button mw-ui-quiet mw-ui-progressive'
 			];
 
 		// Adds class to hide language button
diff --git a/resources/common/images/arrow-down-invert.svg b/resources/common/images/arrow-down-invert.svg
new file mode 100644
index 0000000..a8660fb
--- /dev/null
+++ b/resources/common/images/arrow-down-invert.svg
@@ -0,0 +1,4 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg xmlns="http://www.w3.org/2000/svg" width="12" height="12" viewBox="0 0 12 12">
+	<path fill="#ffffff" d="m11.05 3.996-.965-1.053-4.035 3.86-3.947-3.86L1.05 3.996l5 5 5-5"/>
+</svg>
diff --git a/resources/common/images/arrow-down-progressive.svg b/resources/common/images/arrow-down-progressive.svg
new file mode 100644
index 0000000..f1813e1
--- /dev/null
+++ b/resources/common/images/arrow-down-progressive.svg
@@ -0,0 +1,4 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg xmlns="http://www.w3.org/2000/svg" width="12" height="12" viewBox="0 0 12 12">
+	<path fill="#36c" d="m11.05 3.996-.965-1.053-4.035 3.86-3.947-3.86L1.05 3.996l5 5 5-5"/>
+</svg>
diff --git a/resources/skins.vector.styles/components/LanguageButton.less b/resources/skins.vector.styles/components/LanguageButton.less
index 8604d46..ddd8a2a 100644
--- a/resources/skins.vector.styles/components/LanguageButton.less
+++ b/resources/skins.vector.styles/components/LanguageButton.less
@@ -34,6 +34,32 @@
 		&:after {
 			top: 0;
 		}
+
+		// T291286: Temporarily use progressive ULS style
+		&.mw-ui-progressive.mw-ui-quiet {
+			.mw-ui-icon:before {
+				// Ensure inverted language icon is white
+				opacity: 1;
+			}
+
+			&:after {
+				// Invert arrow color
+				background-image: url( ../common/images/arrow-down-progressive.svg );
+				opacity: 1;
+			}
+		}
+	}
+
+	input:active + .vector-menu-heading {
+		&.mw-ui-progressive.mw-ui-quiet {
+			.mw-ui-icon {
+				filter: brightness( 0 ) invert( 1 );
+			}
+
+			&:after {
+				background-image: url( ../common/images/arrow-down-invert.svg );
+			}
+		}
 	}
 
 	.vector-menu-content {
diff --git a/skin.json b/skin.json
index 515b8c2..8db5207 100644
--- a/skin.json
+++ b/skin.json
@@ -183,7 +183,12 @@
 			"useDataURI": false,
 			"defaultColor": "#000",
 			"class": "ResourceLoaderOOUIIconPackModule",
-			"variants": [],
+			"variants": {
+				"progressive": {
+					"color": "#36c",
+					"global": true
+				}
+			},
 			"icons": [
 				"language",
 				"ellipsis",