Remove dependency on .cdx-typeahead-search--active class

This class is no longer needed in Codex and will be removed.
This patch adds a similar dynamic class to the Vector search
app, to be used for showing/hiding the search button on
focus/blur or hover/leave.

Bug: T316893
Change-Id: I738c0f24dcd06ddeb9179cfedc85ed73a6504f1e

resources/skins.vector.search/App.vue

@@ -2,6 +2,7 @@
 	<cdx-typeahead-search
 		:id="id"
 		ref="searchForm"
+		class="vector-typeahead-search"
 		:class="rootClasses"
 		:search-results-label="$i18n( 'searchresults' ).text()"
 		:accesskey="searchAccessKey"
@@ -19,6 +20,8 @@
 		@input="onInput"
 		@search-result-click="instrumentation.onSuggestionClick"
 		@submit="onSubmit"
+		@focus="onFocus"
+		@blur="onBlur"
 	>
 		<template #default>
 			<input
@@ -132,13 +135,16 @@ module.exports = exports = defineComponent( {
 			// Whether to apply a CSS class that disables the CSS transitions on the text input
 			disableTransitions: this.autofocusInput,
 
-			instrumentation: instrumentation.listeners
+			instrumentation: instrumentation.listeners,
+
+			isFocused: false
 		};
 	},
 	computed: {
 		rootClasses() {
 			return {
-				'vector-search-box-disable-transitions': this.disableTransitions
+				'vector-search-box-disable-transitions': this.disableTransitions,
+				'vector-typeahead-search--active': this.isFocused
 			};
 		}
 	},
@@ -183,6 +189,14 @@ module.exports = exports = defineComponent( {
 			this.wprov = instrumentation.getWprovFromResultIndex( event.index );
 
 			instrumentation.listeners.onSubmit( event );
+		},
+
+		onFocus() {
+			this.isFocused = true;
+		},
+
+		onBlur() {
+			this.isFocused = false;
 		}
 	},
 	mounted() {

resources/skins.vector.styles/components/VueEnhancedSearchBox.less

@@ -55,7 +55,7 @@
 	// https://gerrit.wikimedia.org/r/plugins/gitiles/design/codex/+/refs/tags/v0.1.0-alpha.8/packages/codex/src/components/text-input/TextInput.vue#257
 	@padding-left-start-icon: 36px;
 
-	.cdx-typeahead-search {
+	.vector-typeahead-search {
 		// Hide the button, only show it on hover or when the input or the button itself is focused
 		.cdx-search-input__end-button {
 			opacity: 0;

tests/jest/__snapshots__/App.test.js.snap

@@ -6,7 +6,7 @@ exports[`App renders a typeahead search component 1`] = `
   aria-label="Search MediaWiki"
   autoexpandwidth="false"
   buttonlabel="searchbutton"
-  class=""
+  class="vector-typeahead-search"
   debounceinterval="120"
   formaction=""
   highlightquery="true"