From caed16e26fad9500ea36366cd4e3b594aa802687 Mon Sep 17 00:00:00 2001
From: jdlrobson <jdlrobson@gmail.com>
Date: Thu, 16 Sep 2021 11:00:05 -0700
Subject: [PATCH] Allow multiple search components on the same page

Styling should not depend on IDs to allow us to have multiple
searches in the page.

Precursor for wiring up search in the sticky header.

This also tweaks performance metrics to track separate metrics
for the sticky header search

Change-Id: I5b4192a8f5a9f95af26c1faf904f7cc994323518
---
 bundlesize.config.json                        |  2 +-
 includes/SkinVector.php                       | 23 +++--
 includes/templates/SearchBox.mustache         | 20 ++--
 resources/common/components/SearchBox.less    | 18 +++-
 resources/skins.vector.js/searchLoader.js     | 77 ++++++++++-----
 resources/skins.vector.js/searchToggle.js     |  4 +-
 resources/skins.vector.js/stickyHeader.js     |  5 +-
 .../skins.vector.search.js                    | 96 +++++++++----------
 .../components/SearchBox.less                 |  2 +-
 .../layouts/screen.less                       |  8 +-
 .../components/Header.less                    |  4 +-
 .../components/SearchBoxLoader.less           |  2 +-
 .../components/VueEnhancedSearchBox.less      | 33 +++++--
 skin.json                                     |  4 +-
 stories/SearchBox.stories.data.js             | 19 +++-
 stories/SearchBox.stories.js                  |  2 +-
 stories/types.js                              |  7 ++
 17 files changed, 206 insertions(+), 120 deletions(-)

diff --git a/bundlesize.config.json b/bundlesize.config.json
index 5cccda9..edac214 100644
--- a/bundlesize.config.json
+++ b/bundlesize.config.json
@@ -5,7 +5,7 @@
 	},
 	{
 		"resourceModule": "skins.vector.styles",
-		"maxSize": "9.8 kB"
+		"maxSize": "10.1 kB"
 	},
 	{
 		"resourceModule": "skins.vector.legacy.js",
diff --git a/includes/SkinVector.php b/includes/SkinVector.php
index 0bc56d6..739d184 100644
--- a/includes/SkinVector.php
+++ b/includes/SkinVector.php
@@ -411,7 +411,9 @@ class SkinVector extends SkinMustache {
 
 		$commonSkinData['data-search-box'] = $this->getSearchData(
 			$commonSkinData['data-search-box'],
-			!$this->isLegacy()
+			!$this->isLegacy(),
+			true,
+			'searchform'
 		);
 
 		return $commonSkinData;
@@ -422,22 +424,31 @@ class SkinVector extends SkinMustache {
 	 *
 	 * @param array $searchBoxData
 	 * @param bool $isCollapsible
+	 * @param bool $isPrimary
+	 * @param string $formId
 	 * @return array modified version of $searchBoxData
 	 */
-	private function getSearchData( array $searchBoxData, bool $isCollapsible ) {
-		$searchClass = 'vector-search-box';
+	private function getSearchData( array $searchBoxData, bool $isCollapsible, bool $isPrimary, string $formId ) {
+		$searchClass = '';
+
+		// Determine the search widget treatment to send to the user
+		if ( VectorServices::getFeatureManager()->isFeatureEnabled( Constants::FEATURE_USE_WVUI_SEARCH ) ) {
+			$searchClass .= 'vector-search-box-vue ';
+		}
 
 		if ( $isCollapsible ) {
-			$searchClass .= ' vector-search-box-collapses';
+			$searchClass .= ' vector-search-box-collapses ';
 		}
 
 		if ( $this->shouldSearchExpand() ) {
-			$searchClass .= " " . self::SEARCH_EXPANDING_CLASS;
+			$searchClass .= ' ' . self::SEARCH_EXPANDING_CLASS;
 		}
 
 		// Annotate search box with a component class.
-		$searchBoxData['class'] = $searchClass;
+		$searchBoxData['class'] = trim( $searchClass );
 		$searchBoxData['is-collapsible'] = $isCollapsible;
+		$searchBoxData['is-primary'] = $isPrimary;
+		$searchBoxData['form-id'] = $formId;
 
 		// At lower resolutions the search input is hidden search and only the submit button is shown.
 		// It should behave like a form submit link (e.g. submit the form with no input value).
diff --git a/includes/templates/SearchBox.mustache b/includes/templates/SearchBox.mustache
index 52c36ed..9231856 100644
--- a/includes/templates/SearchBox.mustache
+++ b/includes/templates/SearchBox.mustache
@@ -1,16 +1,20 @@
 {{!
  See @typedef SearchData
 }}
-<div id="p-search" role="search" class="{{class}}">
+<div {{#is-primary}}id="p-search"{{/is-primary}} role="search" class="{{class}} vector-search-box">
 	<div>
 		{{#is-legacy}}
 			<h3 {{{html-user-language-attributes}}}>
-				<label for="searchInput">{{msg-search}}</label>
+				<label {{#is-primary}}for="searchInput"{{/is-primary}}>{{msg-search}}</label>
 			</h3>
 		{{/is-legacy}}
-		<form action="{{form-action}}" id="searchform">
-			<div id="simpleSearch"{{#input-location}} data-search-loc="{{.}}"{{/input-location}}>
-				{{{html-input}}}
+		<form action="{{form-action}}" id="{{form-id}}"
+			class="vector-search-box-form">
+			<div {{#is-primary}}id="simpleSearch"{{/is-primary}}
+				class="vector-search-box-inner"
+				{{#input-location}} data-search-loc="{{.}}"{{/input-location}}>
+				<input class="vector-search-box-input"
+					{{{html-input-attributes}}} {{#is-primary}}id="searchInput"{{/is-primary}} />
 				<input type="hidden" name="title" value="{{page-title}}"/>
 				{{!	We construct two buttons (for 'go' and 'fulltext' search modes), but only one will be
 						visible and actionable at a time (they are overlaid on top of each other in CSS).
@@ -20,8 +24,10 @@
 						* The mediawiki.searchSuggest module, after doing tests for the broken browsers, removes
 							the 'fulltext' button and handles 'fulltext' search itself; this will reveal the 'go'
 							button and cause it to be used.	!}}
-				{{{html-button-search-fallback}}}
-				{{{html-button-search}}}
+				<input {{#is-primary}}id="mw-searchButton"{{/is-primary}}
+					{{{html-button-fulltext-attributes}}} value="{{msg-searchbutton}}" />
+				<input {{#is-primary}}id="searchButton"{{/is-primary}}
+					{{{html-button-go-attributes}}} value="{{msg-searcharticle}}" />
 			</div>
 		</form>
 	</div>
diff --git a/resources/common/components/SearchBox.less b/resources/common/components/SearchBox.less
index 4b10514..dbb534c 100644
--- a/resources/common/components/SearchBox.less
+++ b/resources/common/components/SearchBox.less
@@ -4,13 +4,20 @@
 
 // Defined as `div`.
 // Provide extra element for gadgets due to `form` already carrying an `id`.
+// FIXME: Remove #simpleSearch when cache has cleared
+.vector-search-box-inner,
 #simpleSearch {
 	position: relative;
 	height: 100%;
 }
 
 // The search input.
-#searchInput {
+// Note that these rules only apply to the non-Vue enabled search input field.
+// When Vue.js has loaded this element will no longer be in the page and subsituted with
+// a WVUI element.
+// FIXME: Remove searchInput selector when cache has cleared.
+#searchInput,
+.vector-search-box-input {
 	background-color: rgba( 255, 255, 255, 0.5 );
 	color: @color-base--emphasized;
 	width: 100%;
@@ -34,11 +41,15 @@
 	// Support: Firefox.
 	-moz-appearance: textfield;
 
+	// FIXME: Remove #simpleSearch when cache has cleared
+	.vector-search-box-inner:hover &,
 	#simpleSearch:hover & {
 		border-color: @colorGray7;
 	}
 
+	// FIXME: #simpleSearch can be removed when cache has cleared.
 	&:focus,
+	.vector-search-box-inner:hover &:focus,
 	#simpleSearch:hover &:focus {
 		outline: 0;
 		border-color: @border-color-base--focus;
@@ -60,8 +71,7 @@
 
 // The search buttons. Fallback and search button are displayed in the same position,
 // and if both are present the fulltext search one obscures the 'Go' one.
-#searchButton,
-#mw-searchButton {
+.searchButton {
 	background-color: transparent;
 	position: absolute;
 	top: @border-width-base;
@@ -85,7 +95,7 @@
 	z-index: @z-index-search-button;
 }
 
-#searchButton {
+.searchButton[ name='go' ] {
 	background: no-repeat center/unit( 16 / @font-size-browser / @font-size-search-input, em ) url( images/search.svg );
 	opacity: 0.67;
 }
diff --git a/resources/skins.vector.js/searchLoader.js b/resources/skins.vector.js/searchLoader.js
index 879cf21..50d7068 100644
--- a/resources/skins.vector.js/searchLoader.js
+++ b/resources/skins.vector.js/searchLoader.js
@@ -23,7 +23,6 @@ var /** @type {VectorResourceLoaderVirtualConfig} */
 	LOAD_START_MARK = 'mwVectorVueSearchLoadStart',
 	LOAD_END_MARK = 'mwVectorVueSearchLoadEnd',
 	LOAD_MEASURE = 'mwVectorVueSearchLoadStartToLoadEnd',
-	SEARCH_FORM_ID = 'simpleSearch',
 	SEARCH_INPUT_ID = 'searchInput',
 	SEARCH_LOADING_CLASS = 'search-form__loader';
 
@@ -34,18 +33,22 @@ var /** @type {VectorResourceLoaderVirtualConfig} */
  * After the search module is loaded, executes a function to remove
  * the loading indicator.
  *
- * @param {HTMLElement} element search input.
+ * @param {Element} element search input.
  * @param {string} moduleName resourceLoader module to load.
- * @param {function(): void} afterLoadFn function to execute after search module loads.
+ * @param {string|null} startMarker
+ * @param {null|function(): void} afterLoadFn function to execute after search module loads.
  */
-function loadSearchModule( element, moduleName, afterLoadFn ) {
-	var SHOULD_TEST_SEARCH = CAN_TEST_SEARCH && moduleName === 'skins.vector.search';
+function loadSearchModule( element, moduleName, startMarker, afterLoadFn ) {
+	var SHOULD_TEST_SEARCH = CAN_TEST_SEARCH &&
+		moduleName === 'skins.vector.search';
 
 	function requestSearchModule() {
-		if ( SHOULD_TEST_SEARCH ) {
-			performance.mark( LOAD_START_MARK );
+		if ( SHOULD_TEST_SEARCH && startMarker !== null && afterLoadFn !== null ) {
+			performance.mark( startMarker );
+			mw.loader.using( moduleName, afterLoadFn );
+		} else {
+			mw.loader.load( moduleName );
 		}
-		mw.loader.using( moduleName, afterLoadFn );
 		element.removeEventListener( 'focus', requestSearchModule );
 	}
 
@@ -96,7 +99,7 @@ function renderSearchLoadingIndicator( event ) {
  * Attaches or detaches the event listeners responsible for activating
  * the loading indicator.
  *
- * @param {HTMLElement} element
+ * @param {Element} element
  * @param {boolean} attach
  * @param {function(Event): void} eventCallback
  */
@@ -116,11 +119,15 @@ function setLoadingIndicatorListeners( element, attach, eventCallback ) {
 
 /**
  * Marks when the lazy load has completed.
+ *
+ * @param {string} startMarker
+ * @param {string} endMarker
+ * @param {string} measureMarker
  */
-function markLoadEnd() {
-	if ( performance.getEntriesByName( LOAD_START_MARK ).length ) {
-		performance.mark( LOAD_END_MARK );
-		performance.measure( LOAD_MEASURE, LOAD_START_MARK, LOAD_END_MARK );
+function markLoadEnd( startMarker, endMarker, measureMarker ) {
+	if ( performance.getEntriesByName( startMarker ).length ) {
+		performance.mark( endMarker );
+		performance.measure( measureMarker, startMarker, endMarker );
 	}
 }
 
@@ -131,8 +138,7 @@ function markLoadEnd() {
  * @param {Document} document
  */
 function initSearchLoader( document ) {
-	var searchForm = document.getElementById( SEARCH_FORM_ID ),
-		searchInput = document.getElementById( SEARCH_INPUT_ID ),
+	var searchBoxes = document.querySelectorAll( '.vector-search-box' ),
 		shouldUseCoreSearch;
 
 	// Allow developers to defined $wgVectorSearchHost in LocalSettings to target different APIs
@@ -140,7 +146,7 @@ function initSearchLoader( document ) {
 		mw.config.set( 'wgVectorSearchHost', config.wgVectorSearchHost );
 	}
 
-	if ( !searchForm || !searchInput ) {
+	if ( !searchBoxes.length ) {
 		return;
 	}
 
@@ -155,27 +161,46 @@ function initSearchLoader( document ) {
 	 *    before the search module loads.
 	 **/
 	if ( shouldUseCoreSearch || !window.fetch ) {
-		loadSearchModule( searchInput, 'mediawiki.searchSuggest', function () {} );
-	} else {
+		searchBoxes.forEach( function ( searchBox ) {
+			var input = searchBox.querySelector( 'input[name="search"]' );
+			if ( input ) {
+				loadSearchModule(
+					input,
+					'mediawiki.searchSuggest',
+					null,
+					null
+				);
+			}
+		} );
+		return;
+	}
+	searchBoxes.forEach( function ( searchBox ) {
+		var searchInner = searchBox.querySelector( 'form > div' ),
+			searchInput = searchBox.querySelector( 'input[name="search"]' ),
+			isPrimarySearch = searchInput && searchInput.getAttribute( 'id' ) === 'searchInput';
+
+		if ( !searchInput || !searchInner ) {
+			return;
+		}
 		// Remove tooltips while Vue search is still loading
 		searchInput.setAttribute( 'autocomplete', 'off' );
 		searchInput.removeAttribute( 'title' );
-		setLoadingIndicatorListeners( searchForm, true, renderSearchLoadingIndicator );
+		setLoadingIndicatorListeners( searchInner, true, renderSearchLoadingIndicator );
 		loadSearchModule(
 			searchInput,
 			'skins.vector.search',
-			function () {
-				markLoadEnd();
-
+			isPrimarySearch ? LOAD_START_MARK : null,
+			isPrimarySearch ? function () {
+				markLoadEnd( LOAD_START_MARK, LOAD_END_MARK, LOAD_MEASURE );
 				setLoadingIndicatorListeners(
-					/** @type {HTMLElement} */ ( searchForm ),
+					// @ts-ignore
+					searchInner,
 					false,
 					renderSearchLoadingIndicator
 				);
-			}
+			} : null
 		);
-
-	}
+	} );
 }
 
 module.exports = {
diff --git a/resources/skins.vector.js/searchToggle.js b/resources/skins.vector.js/searchToggle.js
index 591156d..2ceb01d 100644
--- a/resources/skins.vector.js/searchToggle.js
+++ b/resources/skins.vector.js/searchToggle.js
@@ -42,7 +42,7 @@ function bindSearchBoxHandler( searchBox, header ) {
  *
  * @param {HTMLElement} searchBox
  * @param {HTMLElement} header
- * @param {HTMLElement} searchToggle
+ * @param {Element} searchToggle
  */
 function bindToggleClickHandler( searchBox, header, searchToggle ) {
 	/**
@@ -88,7 +88,7 @@ function bindToggleClickHandler( searchBox, header, searchToggle ) {
  * elements. When the user clicks outside of SEARCH_BOX_SELECTOR, the class will
  * be removed.
  *
- * @param {HTMLElement|null} searchToggle
+ * @param {HTMLElement|null|Element} searchToggle
  */
 module.exports = function initSearchToggle( searchToggle ) {
 	// Check if .closest API is available (IE11 does not support it).
diff --git a/resources/skins.vector.js/stickyHeader.js b/resources/skins.vector.js/stickyHeader.js
index b40c894..82ada15 100644
--- a/resources/skins.vector.js/stickyHeader.js
+++ b/resources/skins.vector.js/stickyHeader.js
@@ -90,8 +90,8 @@ function makeStickyHeaderFunctional(
 	userMenu,
 	userMenuStickyContainer
 ) {
-	/* eslint-disable-next-line compat/compat */
 	var
+		/* eslint-disable-next-line compat/compat */
 		stickyObserver = new IntersectionObserver( function ( entries ) {
 			if ( !entries[ 0 ].isIntersecting && entries[ 0 ].boundingClientRect.top < 0 ) {
 				// Viewport has crossed the bottom edge of firstHeading so show sticky header.
@@ -106,7 +106,8 @@ function makeStickyHeaderFunctional(
 		// Type declaration needed because of https://github.com/Microsoft/TypeScript/issues/3734#issuecomment-118934518
 		userMenuClone = /** @type {HTMLElement} */( userMenu.cloneNode( true ) ),
 		userMenuStickyElementsWithIds = userMenuClone.querySelectorAll( '[ id ], [ data-event-name ]' ),
-		userMenuStickyContainerInner = userMenuStickyContainer.querySelector( VECTOR_USER_LINKS_SELECTOR );
+		userMenuStickyContainerInner = userMenuStickyContainer
+			.querySelector( VECTOR_USER_LINKS_SELECTOR );
 
 	// Update all ids of the cloned user menu to make them unique.
 	makeNodeTrackable( userMenuClone );
diff --git a/resources/skins.vector.search/skins.vector.search.js b/resources/skins.vector.search/skins.vector.search.js
index a7f2b56..e9f808b 100644
--- a/resources/skins.vector.search/skins.vector.search.js
+++ b/resources/skins.vector.search/skins.vector.search.js
@@ -5,53 +5,52 @@ var
 	config = require( './config.json' );
 
 /**
- * @param {HTMLElement} searchForm
- * @param {NodeList} secondarySearchElements
- * @param {HTMLInputElement} search
- * @param {string|null} searchPageTitle title of page used for searching e.g. Special:Search
- *  If null then this will default to Special:Search.
+ * @param {Function} createElement
+ * @param {Element} searchForm
+ * @return {Vue.VNode}
+ * @throws {Error} if the searchForm does not
+ *  contain input[name=title] and input[name="search"] elements.
+ */
+function renderFn( createElement, searchForm ) {
+	var
+		titleInput = /** @type {HTMLInputElement|null} */ (
+			searchForm.querySelector( 'input[name=title]' )
+		),
+		search = /** @type {HTMLInputElement|null} */ ( searchForm.querySelector( 'input[name="search"]' ) ),
+		searchPageTitle = titleInput && titleInput.value;
+
+	if ( !search || !titleInput ) {
+		throw new Error( 'Attempted to create Vue search element from an incompatible element.' );
+	}
+
+	return createElement( App, {
+		props: $.extend( {
+			id: searchForm.id,
+			autofocusInput: search === document.activeElement,
+			action: searchForm.getAttribute( 'action' ),
+			searchAccessKey: search.getAttribute( 'accessKey' ),
+			searchPageTitle: searchPageTitle,
+			searchTitle: search.getAttribute( 'title' ),
+			searchPlaceholder: search.getAttribute( 'placeholder' ),
+			searchQuery: search.value
+		},
+		// Pass additional config from server.
+		config
+		)
+	} );
+}
+
+/**
+ * @param {NodeList} searchForms
  * @return {void}
  */
-function initApp( searchForm, secondarySearchElements, search, searchPageTitle ) {
-	/**
-	 *
-	 * @ignore
-	 * @param {Function} createElement
-	 * @param {string} id
-	 * @return {Vue.VNode}
-	 */
-	var renderFn = function ( createElement, id ) {
-		return createElement( App, {
-			props: $.extend( {
-				id: id,
-				autofocusInput: search === document.activeElement,
-				action: searchForm.getAttribute( 'action' ),
-				searchAccessKey: search.getAttribute( 'accessKey' ),
-				searchPageTitle: searchPageTitle,
-				searchTitle: search.getAttribute( 'title' ),
-				searchPlaceholder: search.getAttribute( 'placeholder' ),
-				searchQuery: search.value
-			},
-			// Pass additional config from server.
-			config
-			)
-		} );
-	};
-	// eslint-disable-next-line no-new
-	new Vue( {
-		el: searchForm,
-		render: function ( createElement ) {
-			return renderFn( createElement, 'searchform' );
-		}
-	} );
-
-	// Initialize secondary search elements like the search in the sticky header.
-	Array.prototype.forEach.call( secondarySearchElements, function ( secondarySearchElement ) {
+function initApp( searchForms ) {
+	searchForms.forEach( function ( searchForm ) {
 		// eslint-disable-next-line no-new
 		new Vue( {
-			el: secondarySearchElement,
+			el: /** @type {Element} */ ( searchForm ),
 			render: function ( createElement ) {
-				return renderFn( createElement, secondarySearchElement.id );
+				return renderFn( createElement, /** @type {Element} */ ( searchForm ) );
 			}
 		} );
 	} );
@@ -62,16 +61,9 @@ function initApp( searchForm, secondarySearchElements, search, searchPageTitle )
  */
 function main( document ) {
 	var
-		searchForm = /** @type {HTMLElement} */ ( document.querySelector( '#searchform' ) ),
-		titleInput = /** @type {HTMLInputElement|null} */ (
-			searchForm.querySelector( 'input[name=title]' )
-		),
-		search = /** @type {HTMLInputElement|null} */ ( document.getElementById( 'searchInput' ) ),
-		// Since App.vue requires a unique id prop, only query elements with an id attribute.
-		secondarySearchElements = document.querySelectorAll( '.vector-secondary-search[id]' );
+		// FIXME: Use .vector-search-box-form instead when cache allows.
+		searchForms = document.querySelectorAll( '.vector-search-box form' );
 
-	if ( search && searchForm ) {
-		initApp( searchForm, secondarySearchElements, search, titleInput && titleInput.value );
-	}
+	initApp( searchForms );
 }
 main( document );
diff --git a/resources/skins.vector.styles.legacy/components/SearchBox.less b/resources/skins.vector.styles.legacy/components/SearchBox.less
index b7e8159..ee355eb 100644
--- a/resources/skins.vector.styles.legacy/components/SearchBox.less
+++ b/resources/skins.vector.styles.legacy/components/SearchBox.less
@@ -1,6 +1,6 @@
 @import 'mediawiki.mixins.less';
 
 // Search portlet.
-#p-search h3 {
+.vector-search-box h3 {
 	.mixin-screen-reader-text();
 }
diff --git a/resources/skins.vector.styles.legacy/layouts/screen.less b/resources/skins.vector.styles.legacy/layouts/screen.less
index 18a8a0b..78802f1 100644
--- a/resources/skins.vector.styles.legacy/layouts/screen.less
+++ b/resources/skins.vector.styles.legacy/layouts/screen.less
@@ -128,8 +128,10 @@ body {
 // Defined as `div`.
 // Provide extra element for gadgets due to `form` already carrying an `id`.
 // FIXME: This selector requires knowledge of the internals of the search component
+// FIXME: #simpleSearch selector can be removed when cache has cleared.
 // and should not be used here.
-#simpleSearch {
+#simpleSearch,
+.vector-search-box-inner {
 	min-width: 5em;
 	// Support: IE 8, Firefox 18-, Chrome 19-, Safari 5.1-, Opera 19-, Android 4.4.4-.
 	width: 13.2em;
@@ -180,7 +182,9 @@ body {
 		padding-left: 0.5em;
 	}
 
-	#p-search {
+	// FIXME: p-search is for cached HTML only. Can be removed in 1 week.
+	#p-search,
+	.vector-search-box {
 		margin-right: 1em;
 	}
 
diff --git a/resources/skins.vector.styles/components/Header.less b/resources/skins.vector.styles/components/Header.less
index 0951e53..4ea2252 100644
--- a/resources/skins.vector.styles/components/Header.less
+++ b/resources/skins.vector.styles/components/Header.less
@@ -45,7 +45,9 @@
 			min-width: @min-width-search-desktop;
 			flex-basis: @min-width-search;
 
-			> div > #searchform,
+			// FIXME: Modify to use .vector-search-box-form when cache allows.
+			// When changing check the specificity is strong enough so that is still applies.
+			> div > form,
 			.wvui-typeahead-search {
 				max-width: @max-width-search;
 			}
diff --git a/resources/skins.vector.styles/components/SearchBoxLoader.less b/resources/skins.vector.styles/components/SearchBoxLoader.less
index 3e9cdce..6f0e8a5 100644
--- a/resources/skins.vector.styles/components/SearchBoxLoader.less
+++ b/resources/skins.vector.styles/components/SearchBoxLoader.less
@@ -21,7 +21,7 @@
 // https://gerrit.wikimedia.org/r/plugins/gitiles/wvui/+/e32b54f3b8d1118b6a25cdc46b5638d6d048533e/src/themes/wikimedia-ui.less#27
 @padding-vertical-typeahead-suggestion: 8px;
 
-#simpleSearch.search-form__loader:after {
+.search-form__loader:after {
 	// Set the i18n message.
 	content: attr( data-loading-msg );
 	//
diff --git a/resources/skins.vector.styles/components/VueEnhancedSearchBox.less b/resources/skins.vector.styles/components/VueEnhancedSearchBox.less
index 0cb1c10..77c843c 100644
--- a/resources/skins.vector.styles/components/VueEnhancedSearchBox.less
+++ b/resources/skins.vector.styles/components/VueEnhancedSearchBox.less
@@ -27,25 +27,33 @@
 }
 
 // Typeahead search elements
+// FIXME: remove ID selectors when cache has cleared.
 #searchInput,
 #searchButton,
-#mw-searchButton {
+#mw-searchButton,
+.vector-search-box-vue .vector-search-box-input,
+.vector-search-box-vue .searchButton {
 	// Overrides #mw-searchButton in resources/skins.vector.styles/SearchBox.less
 	font-size: inherit;
 }
 
+// FIXME: remove #searchInput selector when cache has cleared.
+.vector-search-box-vue .vector-search-box-input,
 #searchInput {
 	height: @size-base;
 }
 
-#searchButton,
-#mw-searchButton {
+// FIXME: Remove searchButton when cache has cleared.
+.vector-search-box-vue .searchButton,
+#searchButton {
 	background-size: @background-size-x-search-button auto;
 }
 
 // Only apply the following WVUI-related rules to clients who have js enabled.
-// TODO: .skin-vector-search-vue class can be removed when $wgVectorUseWvuiSearch is no longer supported.
-.client-js .skin-vector-search-vue {
+// TODO: .skin-vector-search-vue class can be removed when $wgVectorUseWvuiSearch is no longer supported
+// OR .vector-search-box-vue is in cached HTML.
+.client-js .skin-vector-search-vue,
+.client-js .vector-search-box-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 );
@@ -56,11 +64,13 @@
 		text-decoration: none;
 	}
 
-	#searchform-suggestions li {
+	.wvui-typeahead-search__suggestions li {
 		// Remove margin-bottom on li elements that is applied by mediawiki.skinning/elements.css.
 		margin-bottom: 0;
 	}
 
+	// FIXME: Remove #searchInput selector when cache has cleared.
+	.vector-search-box-input,
 	#searchInput {
 		padding-left: @size-search-figure;
 		// Derived from @padding-input-text in WVUI's Input component.
@@ -68,8 +78,7 @@
 	}
 
 	// Move & resize search icon to match WVUI.
-	#searchButton,
-	#mw-searchButton {
+	.searchButton {
 		// T270202: Act like a an inert element instead of a submit button before
 		// WVUI loads to discourage people clicking on it since it is a submit
 		// button styled to look like WVUI's inert start icon. Note, ideally these
@@ -97,6 +106,8 @@
 	.p-search--show-thumbnail,
 	.vector-search-box-show-thumbnail {
 		// Recreate WVUI expanding input.
+		// FIXME: Remove #searchInput selector when cache has cleared.
+		.vector-search-box-input:focus,
 		#searchInput:focus {
 			position: relative;
 			// Use ~ and fixed values to disable the LESS transformation in ResourceLoader LESS implementation.
@@ -106,6 +117,8 @@
 		}
 
 		// Reposition search icon for expanded input.
+		// FIXME: Remove #searchInput selectors when cache has cleared.
+		.vector-search-box-input:focus ~ .searchButton,
 		#searchInput:focus ~ #searchButton,
 		#searchInput:focus ~ #mw-searchButton {
 			// Derived from
@@ -116,7 +129,9 @@
 		}
 
 		// Update search loader to match width and position of WVUI expanding input.
-		#simpleSearch.search-form__loader:after {
+		// FIXME: Remove #simpleSearch selector when cache has cleared.
+		#simpleSearch.search-form__loader:after,
+		.vector-search-box-inner.search-form__loader:after {
 			width: ~'calc( 100% + @{size-search-expand} )';
 			left: ~'calc( -1 * @{size-search-expand} )';
 			padding-left: @size-search-expand;
diff --git a/skin.json b/skin.json
index 8080216..6719887 100644
--- a/skin.json
+++ b/skin.json
@@ -12,7 +12,7 @@
 	"license-name": "GPL-2.0-or-later",
 	"type": "skin",
 	"requires": {
-		"MediaWiki": ">= 1.37.0"
+		"MediaWiki": ">= 1.38.0"
 	},
 	"ValidSkinNames": {
 		"vector": {
@@ -51,6 +51,8 @@
 						"vector-jumptosearch",
 						"vector-jumptocontent",
 						"search",
+						"searchbutton",
+						"searcharticle",
 						"sitesubtitle",
 						"sitetitle",
 						"tagline"
diff --git a/stories/SearchBox.stories.data.js b/stories/SearchBox.stories.data.js
index 57cac1a..4aea02d 100644
--- a/stories/SearchBox.stories.data.js
+++ b/stories/SearchBox.stories.data.js
@@ -6,18 +6,29 @@ import searchBoxTemplate from '!!raw-loader!../includes/templates/SearchBox.must
 import Button from '!!raw-loader!../includes/templates/Button.mustache';
 import { htmlUserLanguageAttributes } from './utils';
 
+const INPUT_ATTRIBUTES = 'type="search" name="search" placeholder="Search Wikipedia" title="Search Wikipedia [⌃⌥f]" accesskey="f" id="searchInput" autocomplete="off"';
+const FULL_TEXT_ATTRIBUTES = 'name="fulltext" title="Search pages for this text" id="mw-searchButton" class="searchButton mw-fallbackSearchButton"';
+const GO_ATTRIBUTES = 'name="go" title="Go to a page with this exact name if it exists" id="searchButton" class="searchButton"';
+
 /**
  * @type {SearchData}
  */
 const searchBoxData = {
 	'form-action': '/w/index.php',
-	class: 'vector-search-box vector-search-show-thumbnail',
+	'form-id': 'searchform',
+	'is-primary': false,
+	class: 'vector-search-show-thumbnail',
 	'html-user-language-attributes': htmlUserLanguageAttributes,
 	'msg-search': 'Search',
-	'html-input': '<input type="search" name="search" placeholder="Search Wikipedia" title="Search Wikipedia [⌃⌥f]" accesskey="f" id="searchInput" autocomplete="off">',
+	'html-input': `<input ${INPUT_ATTRIBUTES}>`,
 	'page-title': 'Special:Search',
-	'html-button-search-fallback': '<input type="submit" name="fulltext" value="Search" title="Search pages for this text" id="mw-searchButton" class="searchButton mw-fallbackSearchButton"/>',
-	'html-button-search': '<input type="submit" name="go" value="Go" title="Go to a page with this exact name if it exists" id="searchButton" class="searchButton">'
+	'html-input-attributes': INPUT_ATTRIBUTES,
+	'html-button-fulltext-attributes': FULL_TEXT_ATTRIBUTES,
+	'msg-searchbutton': 'Search',
+	'msg-searcharticle': 'Go',
+	'html-button-go-attributes': GO_ATTRIBUTES,
+	'html-button-search-fallback': `<input type="submit" ${FULL_TEXT_ATTRIBUTES} value="Search" />`,
+	'html-button-search': `<input type="submit" ${GO_ATTRIBUTES} value="Go">`
 };
 
 /**
diff --git a/stories/SearchBox.stories.js b/stories/SearchBox.stories.js
index bfaaf2d..f3fe969 100644
--- a/stories/SearchBox.stories.js
+++ b/stories/SearchBox.stories.js
@@ -1,6 +1,6 @@
 import mustache from 'mustache';
 import '../resources/skins.vector.styles/SearchBox.less';
-import '../resources/skins.vector.styles/layouts/screen.less';
+
 import { searchBoxData, searchBoxDataWithCollapsing, searchBoxTemplate,
 	SEARCH_TEMPLATE_PARTIALS
 } from './SearchBox.stories.data';
diff --git a/stories/types.js b/stories/types.js
index 0b80363..aba957c 100644
--- a/stories/types.js
+++ b/stories/types.js
@@ -39,11 +39,18 @@
 /**
  * @typedef {Object} SearchData
  * @property {string|null} msg-search
+ * @property {string|null} msg-searchbutton
+ * @property {string|null} msg-searcharticle
  * @property {string} [html-user-language-attributes]
+ * @property {boolean} is-primary is this the primary method of search?
  * @property {string} form-action URL
+ * @property {string} form-id
  * @property {string|null} html-input
  * @property {string|null} [class] of the menu
  * @property {string|null} page-title the title of the search page
+ * @property {string} html-input-attributes
+ * @property {string} html-button-fulltext-attributes
+ * @property {string} html-button-go-attributes
  * @property {string|null} html-button-search-fallback
  * @property {string|null} html-button-search
  * @property {string} [input-location] An identifier corresponding the position of the search