From 0fdd4a99ac781390dd1ff8bb2e35b8bb6db7c316 Mon Sep 17 00:00:00 2001
From: Nicholas Ray <nray@wikimedia.org>
Date: Wed, 16 Dec 2020 22:52:54 -0700
Subject: [PATCH] Sync location/other styles of #mw-searchButton with
 #searchButton

`#mw-searchButton` is apparently used with no-js clients or if the
js-search is broken [1]. Its position and dimensions should be kept in
sync with #searchButton.

This commit:

* Ensures that the same styles, including position, applied to #searchButton
are applied to "#mw-searchButton" so the dimensions are identical. This
should also address a critique in T270202 by removing the "invisible
button".

* Applies a `client-js` selector to ensure these buttons are
only positioned to the left of the search input if js is enabled. If js
is not enabled, having these positioned to the left is confusing as the
input has no obvious "submit" button.

* Syncs the input's end padding to match WVUI's input's end padding if
JS is enabled.

[1] https://github.com/wikimedia/Vector/blob/465e9492bbd68be092a8804af0b431461ec5a731/includes/templates/SearchBox.mustache#L12-L21

Bug: T270202
Change-Id: Ie1bb8c68b713b3a18f90ee11b44c78b436a6d0ba
---
 bundlesize.config.json                           |  2 +-
 .../VueEnhancedSearchBox.less                    | 16 +++++++++++-----
 2 files changed, 12 insertions(+), 6 deletions(-)

diff --git a/bundlesize.config.json b/bundlesize.config.json
index 2d55857a6..079a157d2 100644
--- a/bundlesize.config.json
+++ b/bundlesize.config.json
@@ -5,7 +5,7 @@
 	},
 	{
 		"resourceModule": "skins.vector.styles",
-		"maxSize": "9.2 kB"
+		"maxSize": "9.3 kB"
 	},
 	{
 		"resourceModule": "skins.vector.styles.responsive",
diff --git a/resources/skins.vector.styles/VueEnhancedSearchBox.less b/resources/skins.vector.styles/VueEnhancedSearchBox.less
index d11acbefa..41cadef46 100644
--- a/resources/skins.vector.styles/VueEnhancedSearchBox.less
+++ b/resources/skins.vector.styles/VueEnhancedSearchBox.less
@@ -28,7 +28,8 @@
 
 // Typeahead search elements
 #searchInput,
-#searchButton {
+#searchButton,
+#mw-searchButton {
 	// Overrides #mw-searchButton in resources/skins.vector.styles/SearchBox.less
 	font-size: inherit;
 }
@@ -37,13 +38,15 @@
 	height: @size-base;
 }
 
-#searchButton {
+#searchButton,
+#mw-searchButton {
 	background-size: @background-size-x-search-button auto;
 	min-height: @min-size-search-button;
 }
 
-// TODO: Parent class can be removed when $wgVectorUseCoreSearch is no longer supported.
-.skin-vector-search-vue {
+// Only apply the following WVUI-related rules to clients who have js enabled.
+// TODO: .skin-vector-search-vue class can be removed when $wgVectorUseCoreSearch is no longer supported.
+.client-js .skin-vector-search-vue {
 	// Derived from @size-search-figure in WVUI
 	// https://gerrit.wikimedia.org/r/plugins/gitiles/wvui/+/e32b54f3b8d1118b6a25cdc46b5638d6d048533e/src/themes/wikimedia-ui.less#21
 	@size-search-figure: unit( 36px / @font-size-browser / @font-size-base, em );
@@ -61,6 +64,8 @@
 
 	#searchInput {
 		padding-left: @size-search-figure;
+		// Derived from @padding-input-text in WVUI's Input component.
+		padding-right: 8px;
 
 		// Recreate WVUI expanding input.
 		&:focus {
@@ -73,7 +78,8 @@
 	}
 
 	// Move & resize search icon to match WVUI.
-	#searchButton {
+	#searchButton,
+	#mw-searchButton {
 		// Override the default right & left position of the icon.
 		right: auto;
 		left: 0;