From d29050d08069601dd4c87839f990165740fe2889 Mon Sep 17 00:00:00 2001
From: Jon Robson <jdlrobson@gmail.com>
Date: Fri, 23 Jun 2023 13:45:33 -0700
Subject: [PATCH] Use Codex styles for buttons in language overlay

* Replace all instances of mw-ui markup with Codex markup
* Use @wikimedia/codex as it is available in 1.39
and codex-search-styles is not.

Bug: T340255
Change-Id: Id85cf3b4af782c0d93bfa3bed5f3e6cbed856f1b
---
 extension.json                              | 11 ++++----
 resources/css/ext.uls.displaysettings.less  |  3 ++-
 resources/css/ext.uls.inputsettings.less    |  4 +--
 resources/css/ext.uls.languagesettings.less | 10 +++++--
 resources/js/ext.uls.actions.menu.js        |  2 +-
 resources/js/ext.uls.compactlinks.js        |  4 +--
 resources/js/ext.uls.displaysettings.js     | 29 +++++++++++----------
 resources/js/ext.uls.inputsettings.js       | 18 +++++++------
 resources/js/ext.uls.interface.js           | 11 ++++++--
 resources/js/ext.uls.languagesettings.js    |  4 +--
 resources/js/ext.uls.setlang.js             |  4 +--
 11 files changed, 58 insertions(+), 42 deletions(-)

diff --git a/extension.json b/extension.json
index fe0665f6..42d94c4b 100644
--- a/extension.json
+++ b/extension.json
@@ -172,7 +172,8 @@
 			"dependencies": [
 				"mediawiki.jqueryMsg",
 				"mediawiki.language",
-				"ext.uls.common"
+				"ext.uls.common",
+				"@wikimedia/codex"
 			],
 			"messages": [
 				"ext-uls-compact-link-count",
@@ -209,9 +210,7 @@
 				"ext.uls.mediawiki",
 				"ext.uls.webfonts",
 				"mediawiki.api",
-				"mediawiki.ui.radio",
-				"mediawiki.ui.checkbox",
-				"mediawiki.ui.button",
+				"@wikimedia/codex",
 				"mediawiki.user"
 			]
 		},
@@ -279,7 +278,7 @@
 				"ext.uls.messages",
 				"ext.uls.preferences",
 				"jquery.uls.grid",
-				"mediawiki.ui.button"
+				"@wikimedia/codex"
 			]
 		},
 		"ext.uls.mediawiki": {
@@ -347,7 +346,7 @@
 			"dependencies": [
 				"mediawiki.api",
 				"mediawiki.jqueryMsg",
-				"mediawiki.ui.button",
+				"@wikimedia/codex",
 				"mediawiki.Uri"
 			],
 			"messages": [
diff --git a/resources/css/ext.uls.displaysettings.less b/resources/css/ext.uls.displaysettings.less
index 7cd82297..86675f33 100644
--- a/resources/css/ext.uls.displaysettings.less
+++ b/resources/css/ext.uls.displaysettings.less
@@ -9,7 +9,8 @@
 .uls-button-group {
 	display: inline-block;
 	position: relative;
-	padding: 0;
+	// The 1px are needed to handle overflow in .cdx-button-group in 1.39
+	padding: 1px 0 0 1px;
 	left: -20px;
 	z-index: 1;
 }
diff --git a/resources/css/ext.uls.inputsettings.less b/resources/css/ext.uls.inputsettings.less
index fe6c4db2..16d5d344 100644
--- a/resources/css/ext.uls.inputsettings.less
+++ b/resources/css/ext.uls.inputsettings.less
@@ -96,8 +96,8 @@
 	}
 }
 
-.uls-input-settings-inputmethods-list .mw-ui-radio {
-	display: block;
+.uls-input-settings .cdx-radio {
+	position: relative;
 }
 
 .uls-ime-notification-bubble .link {
diff --git a/resources/css/ext.uls.languagesettings.less b/resources/css/ext.uls.languagesettings.less
index 83330bd1..df1bab06 100644
--- a/resources/css/ext.uls.languagesettings.less
+++ b/resources/css/ext.uls.languagesettings.less
@@ -130,14 +130,20 @@
 	margin-left: 15px;
 }
 
+// This can be removed when 1.39 support is dropped.
+.uls-input-settings-inputmethods-list .cdx-radio__label,
+.checkbox.cdx-checkbox__label {
+	padding-left: ~'calc(1.25em + 8px)';
+}
+
 .uls-ui-languages p,
 .checkbox {
 	color: @color-subtle;
 	font-size: 10pt;
 }
 
-/* mediawiki.ui does not have a pressed state style. */
-#languagesettings-panels .mw-ui-pressed {
+/* @todo: Amend to use Codex when 1.39 support is no longer needed. */
+#languagesettings-panels .uls-cdx-button-pressed {
 	background-color: @background-color-progressive--active;
 	color: @color-inverted;
 	border-color: @border-color-progressive--active;
diff --git a/resources/js/ext.uls.actions.menu.js b/resources/js/ext.uls.actions.menu.js
index 960badff..da1852a6 100644
--- a/resources/js/ext.uls.actions.menu.js
+++ b/resources/js/ext.uls.actions.menu.js
@@ -15,7 +15,7 @@
 
 	ActionsMenu.template = '<div class="uls-menu uls-language-actions-dialog">' +
 			'<div class="uls-language-actions-title">' +
-				'<button class="mw-ui-button mw-ui-quiet uls-language-actions-close"></button>' +
+				'<button class="cdx-button cdx-button--weight-quiet uls-language-actions-close"></button>' +
 				'<span> <strong></strong> </span>' +
 			'</div>' +
 			'<div class="uls-language-action-items"></div>' +
diff --git a/resources/js/ext.uls.compactlinks.js b/resources/js/ext.uls.compactlinks.js
index 392d7333..4c4a9493 100644
--- a/resources/js/ext.uls.compactlinks.js
+++ b/resources/js/ext.uls.compactlinks.js
@@ -190,7 +190,7 @@
 			this.compactList[ language ].parentNode.style.display = '';
 		}
 
-		mw.loader.using( 'mediawiki.ui.button' ).then( function () {
+		mw.loader.using( '@wikimedia/codex' ).then( function () {
 			this.addTrigger();
 		}.bind( this ) );
 
@@ -330,7 +330,7 @@
 	CompactInterlanguageList.prototype.addTrigger = function () {
 		var trigger = document.createElement( 'button' );
 		// TODO: Should we have a different class name where the CLS styles are attached?
-		trigger.className = 'mw-interlanguage-selector mw-ui-button';
+		trigger.className = 'mw-interlanguage-selector cdx-button';
 		trigger.title = mw.message( 'ext-uls-compact-link-info' ).plain();
 		// Use text() because the message needs {{PLURAL:}}
 		trigger.textContent = mw.message(
diff --git a/resources/js/ext.uls.displaysettings.js b/resources/js/ext.uls.displaysettings.js
index 9232c5cd..14f49348 100644
--- a/resources/js/ext.uls.displaysettings.js
+++ b/resources/js/ext.uls.displaysettings.js
@@ -25,10 +25,10 @@
 		// Tab switcher buttons
 		'<div class="row">' +
 		'<div class="twelve columns uls-display-settings-tab-switcher">' +
-		'<div class="uls-button-group mw-ui-button-group">' +
-		'<button id="uls-display-settings-language-tab" class="mw-ui-button mw-ui-pressed" ' +
+		'<div class="uls-button-group cdx-button-group">' +
+		'<button id="uls-display-settings-language-tab" class="cdx-button uls-cdx-button-pressed" ' +
 		'data-i18n="ext-uls-display-settings-language-tab"></button>' +
-		'<button id="uls-display-settings-fonts-tab" class="mw-ui-button" data-i18n="ext-uls-display-settings-fonts-tab"></button>' +
+		'<button id="uls-display-settings-fonts-tab" class="cdx-button" data-i18n="ext-uls-display-settings-fonts-tab"></button>' +
 		'</div>' +
 		'</div>' +
 		'</div>' +
@@ -87,9 +87,10 @@
 		// Webfonts enabling checkbox with label
 		'<div class="row">' +
 		'<div class="twelve columns">' +
-		'<div class="mw-ui-checkbox">' +
-		'<input type="checkbox" id="webfonts-enable-checkbox" />' +
-		'<label class="checkbox" for="webfonts-enable-checkbox" >' +
+		'<div class="cdx-checkbox">' +
+		'<input type="checkbox" id="webfonts-enable-checkbox" class="cdx-checkbox__input" />' +
+		'<span class="cdx-checkbox__icon"></span>' +
+		'<label class="checkbox cdx-checkbox__label" for="webfonts-enable-checkbox" >' +
 		'<strong data-i18n="ext-uls-webfonts-settings-title"></strong> ' +
 		'<span data-i18n="ext-uls-webfonts-settings-info"></span> ' +
 		'<a target="_blank" href="https://www.mediawiki.org/wiki/Universal_Language_Selector/WebFonts" data-i18n="ext-uls-webfonts-settings-info-link"></a>' +
@@ -258,8 +259,8 @@
 				return function () {
 					displaySettings.markDirty();
 					displaySettings.uiLanguage = button.data( 'language' ) || displaySettings.uiLanguage;
-					$( 'div.uls-ui-languages button.mw-ui-button' ).removeClass( 'mw-ui-pressed' );
-					button.addClass( 'mw-ui-pressed' );
+					$( 'div.uls-ui-languages button.cdx-button' ).removeClass( 'uls-cdx-button-pressed' );
+					button.addClass( 'uls-cdx-button-pressed' );
 					displaySettings.prepareUIFonts();
 					displaySettings.preview( displaySettings.uiLanguage );
 				};
@@ -269,7 +270,7 @@
 			for ( i = 0; i < SUGGESTED_LANGUAGES_NUMBER; i++ ) {
 				language = languagesForButtons[ i ];
 				$button = $( '<button>' )
-					.addClass( 'mw-ui-button uls-language-button autonym' )
+					.addClass( 'cdx-button uls-language-button autonym' )
 					.text( $.uls.data.getAutonym( language ) )
 					.prop( {
 						lang: language,
@@ -277,7 +278,7 @@
 					} );
 
 				if ( language === this.uiLanguage ) {
-					$button.addClass( 'mw-ui-pressed' );
+					$button.addClass( 'uls-cdx-button-pressed' );
 				}
 
 				$button.data( 'language', language );
@@ -298,7 +299,7 @@
 			$languages = this.$template.find( 'div.uls-ui-languages' );
 			$moreLanguagesButton = $( '<button>' )
 				.prop( 'class', 'uls-more-languages' )
-				.addClass( 'mw-ui-button' ).text( '...' );
+				.addClass( 'cdx-button' ).text( '...' );
 
 			$languages.append( $moreLanguagesButton );
 			// Show the long language list to select a language for display settings
@@ -588,7 +589,7 @@
 				var $button = $( this );
 
 				// eslint-disable-next-line no-jquery/no-class-state
-				if ( $button.hasClass( 'mw-ui-pressed' ) ) {
+				if ( $button.hasClass( 'uls-cdx-button-pressed' ) ) {
 					return;
 				}
 
@@ -604,8 +605,8 @@
 				} );
 
 				displaySettings.$parent.position();
-				$tabButtons.removeClass( 'mw-ui-pressed' );
-				$button.addClass( 'mw-ui-pressed' );
+				$tabButtons.removeClass( 'uls-cdx-button-pressed' );
+				$button.addClass( 'uls-cdx-button-pressed' );
 			} ).on( 'mousedown', function ( event ) {
 				// Avoid taking focus, to avoid bad looking focus styles
 				event.preventDefault();
diff --git a/resources/js/ext.uls.inputsettings.js b/resources/js/ext.uls.inputsettings.js
index fe16caeb..dade2957 100644
--- a/resources/js/ext.uls.inputsettings.js
+++ b/resources/js/ext.uls.inputsettings.js
@@ -54,7 +54,7 @@
 		'<div class="row">' +
 		'<div class="twelve columns uls-input-settings-disable-info"></div>' +
 		'<div class="ten columns uls-input-settings-toggle">' +
-		'<button class="mw-ui-button mw-ui-progressive active uls-input-toggle-button"></button>' +
+		'<button class="cdx-button cdx-button--action-progressive active uls-input-toggle-button"></button>' +
 		'</div>' +
 		'</div>';
 
@@ -169,10 +169,11 @@
 				return $();
 			}
 
-			$imeLabel = $( '<label>' ).attr( 'for', imeId );
+			$imeLabel = $( '<label>' ).attr( 'for', imeId ).addClass( 'cdx-radio__label' );
 
 			$inputMethodItem = $( '<input>' ).attr( {
 				type: 'radio',
+				class: 'cdx-radio__input',
 				name: 'ime',
 				id: imeId,
 				value: imeId
@@ -211,9 +212,10 @@
 				$helplink
 			);
 
+			var $icon = $( '<span>' ).addClass( 'cdx-radio__icon' );
 			return $( '<div>' )
-				.addClass( 'mw-ui-radio' )
-				.append( $inputMethodItem, $imeLabel );
+				.addClass( 'cdx-radio' )
+				.append( $inputMethodItem, $icon, $imeLabel );
 		},
 
 		/**
@@ -278,8 +280,8 @@
 						$.ime.preferences.setLanguage( selectedLang );
 					}
 					// Mark the button selected
-					$( '.uls-ui-languages .mw-ui-button' ).removeClass( 'mw-ui-pressed' );
-					button.addClass( 'mw-ui-pressed' );
+					$( '.uls-ui-languages .cdx-button' ).removeClass( 'uls-cdx-button-pressed' );
+					button.addClass( 'uls-cdx-button-pressed' );
 					inputSettings.prepareInputmethods( selectedLang );
 				};
 			}
@@ -290,7 +292,7 @@
 			for ( i = 0; i < SUGGESTED_LANGUAGES_NUMBER; i++ ) {
 				language = languagesForButtons[ i ];
 				$button = $( '<button>' )
-					.addClass( 'mw-ui-button uls-language-button autonym' )
+					.addClass( 'cdx-button uls-language-button autonym' )
 					.text( $.uls.data.getAutonym( language ) )
 					.prop( {
 						lang: language,
@@ -322,7 +324,7 @@
 			$languages = this.$template.find( '.uls-ui-languages' );
 			$moreLanguagesButton = $( '<button>' )
 				.prop( 'class', 'uls-more-languages' )
-				.addClass( 'mw-ui-button' ).text( '...' );
+				.addClass( 'cdx-button' ).text( '...' );
 
 			$languages.append( $moreLanguagesButton );
 			// Show the long language list to select a language for ime settings
diff --git a/resources/js/ext.uls.interface.js b/resources/js/ext.uls.interface.js
index 4396924c..d52c76a9 100644
--- a/resources/js/ext.uls.interface.js
+++ b/resources/js/ext.uls.interface.js
@@ -121,7 +121,14 @@
 	 * @return {jQuery}
 	 */
 	function createMenuButton( buttonClass ) {
-		var classes = [ 'mw-ui-button', 'mw-ui-quiet', buttonClass ];
+		// cdx-button--type-quiet is needed for 1.39 support.
+		// Please remove when support is no longer needed.
+		var classes = [
+			'cdx-button',
+			'cdx-button--weight-quiet',
+			'cdx-button--type-quiet',
+			buttonClass
+		];
 		// eslint-disable-next-line mediawiki/class-doc
 		return $( '<button>' ).addClass( classes );
 	}
@@ -580,7 +587,7 @@
 
 		ev.preventDefault();
 
-		mw.loader.using( [ 'ext.uls.mediawiki', 'mediawiki.ui.button' ] ).then( function () {
+		mw.loader.using( [ 'ext.uls.mediawiki', '@wikimedia/codex' ] ).then( function () {
 			var parent, languageNodes, standalone, uls;
 
 			parent = document.querySelectorAll( '.mw-portlet-lang, #p-lang' )[ 0 ];
diff --git a/resources/js/ext.uls.languagesettings.js b/resources/js/ext.uls.languagesettings.js
index b7acf5f9..f8bb14a1 100644
--- a/resources/js/ext.uls.languagesettings.js
+++ b/resources/js/ext.uls.languagesettings.js
@@ -35,8 +35,8 @@
 	// Apply and Cancel buttons
 	buttonsRow = '<div class="row collapse language-settings-buttons">' +
 		'<div class="twelve columns">' +
-		'<button class="mw-ui-button uls-settings-cancel" data-i18n="ext-uls-language-settings-cancel"></button>' +
-		'<button class="mw-ui-button mw-ui-progressive active uls-settings-apply" data-i18n="ext-uls-language-settings-apply" disabled></button>' +
+		'<button class="cdx-button uls-settings-cancel" data-i18n="ext-uls-language-settings-cancel"></button>' +
+		'<button class="cdx-button cdx-button--action-progressive active uls-settings-apply" data-i18n="ext-uls-language-settings-apply" disabled></button>' +
 		'</div>' +
 		'</div>' +
 		'</div>';
diff --git a/resources/js/ext.uls.setlang.js b/resources/js/ext.uls.setlang.js
index e85ceca1..3c58550d 100644
--- a/resources/js/ext.uls.setlang.js
+++ b/resources/js/ext.uls.setlang.js
@@ -42,11 +42,11 @@
 
 	function getButtons() {
 		$cancelBtn = $( '<button>' )
-			.addClass( 'mw-ui-button uls-setlang-cancel' )
+			.addClass( 'cdx-button uls-setlang-cancel' )
 			.text( mw.msg( 'ext-uls-setlang-cancel' ) );
 
 		$acceptBtn = $( '<button>' )
-			.addClass( 'mw-ui-button mw-ui-progressive active uls-setlang-apply' )
+			.addClass( 'cdx-button cdx-button--action-progressive active uls-setlang-apply' )
 			.text( mw.msg( 'ext-uls-setlang-accept' ) );
 
 		return $( '<div>' )