From 72120a36a0b9165929efeca73752e1e73d252bb9 Mon Sep 17 00:00:00 2001
From: Nicholas Ray <nray@wikimedia.org>
Date: Fri, 17 Dec 2021 15:30:56 -0700
Subject: [PATCH] Use .vector-search-box-auto-expand-width class to style
 intermediate search components

Before Vue/WVUI lazy loads, we have intermediate search components that
are rendered on the server and that need to be styled based on the
`autoExpandWidth` prop passed to the search component. This commit
refactors VueEnhancedSearchBox to use this class if present.

Additionaly:

* Cleanup fixmes from Id8d3bd4aa74113b91ecaf66cb58cf5625db8a302
* Replace `vector-search-box-show-thumbnail` class with
  `.vector-search-box-auto-expand-width` class in Header.less now that
  the class has been cached in the HTML.

Depends-On: Ic914ecaee591008f987bd6d754fda8628125de7b
Bug: T297531
Change-Id: Ia6b7afa990fa4b04578740b483ba21dbef45a016
---
 .../components/Header.less                    | 21 +------------------
 .../components/StickyHeader.less              |  9 --------
 .../components/VueEnhancedSearchBox.less      | 10 +++++----
 3 files changed, 7 insertions(+), 33 deletions(-)

diff --git a/resources/skins.vector.styles/components/Header.less b/resources/skins.vector.styles/components/Header.less
index f345d72..4a38f0b 100644
--- a/resources/skins.vector.styles/components/Header.less
+++ b/resources/skins.vector.styles/components/Header.less
@@ -32,15 +32,6 @@
 		flex-grow: 1;
 	}
 
-	// Allocate space for the extra width of the input when the search component
-	// has thumbnails.
-	//
-	// FIXME: This can be removed when WVUI in core has been upgraded to use the
-	// `.wvui-typeahead-search--auto-expand-width` class.
-	.wvui-typeahead-search--show-thumbnail:not( .wvui-typeahead-search--auto-expand-width ) {
-		margin-left: @size-search-expand;
-	}
-
 	@media ( min-width: @width-breakpoint-desktop ) {
 		@margin-start-search: 40px;
 
@@ -60,7 +51,7 @@
 				max-width: @max-width-search;
 			}
 
-			&.vector-search-box-show-thumbnail {
+			&.vector-search-box-auto-expand-width {
 				margin-left: unit( ( @margin-start-search - @size-search-expand ) / @font-size-browser / @font-size-base, em ); // 1.14285714em @ 16 & 0.875em
 
 				> div {
@@ -96,16 +87,6 @@
 			.wvui-typeahead-search__wrapper {
 				position: static;
 			}
-
-			// Position the start of suggestion list at the start of the input.
-			//
-			// FIXME: This can be removed when WVUI in core has been upgraded to use
-			// the `.wvui-typeahead-search--auto-expand-width` class.
-			.wvui-typeahead-search--show-thumbnail:not( .wvui-typeahead-search--auto-expand-width ) {
-				.wvui-typeahead-search__suggestions {
-					left: 0;
-				}
-			}
 		}
 	}
 }
diff --git a/resources/skins.vector.styles/components/StickyHeader.less b/resources/skins.vector.styles/components/StickyHeader.less
index d77f5aa..c790fa3 100644
--- a/resources/skins.vector.styles/components/StickyHeader.less
+++ b/resources/skins.vector.styles/components/StickyHeader.less
@@ -126,15 +126,6 @@
 				color: @colorGray2;
 			}
 		}
-
-		// Allocate space for the extra width of the input when the search component
-		// has thumbnails.
-		//
-		// FIXME: This can be removed when WVUI in core has been upgraded
-		// to use the `.wvui-typeahead-search--full-width` class.
-		.wvui-typeahead-search--show-thumbnail:not( .wvui-typeahead-search--full-width ) {
-			margin-left: @size-search-expand;
-		}
 	}
 }
 
diff --git a/resources/skins.vector.styles/components/VueEnhancedSearchBox.less b/resources/skins.vector.styles/components/VueEnhancedSearchBox.less
index 19ee08a..6429651 100644
--- a/resources/skins.vector.styles/components/VueEnhancedSearchBox.less
+++ b/resources/skins.vector.styles/components/VueEnhancedSearchBox.less
@@ -93,19 +93,20 @@
 	}
 
 	.vector-search-box-show-thumbnail {
-		.searchButton {
+		&.vector-search-box-auto-expand-width .searchButton {
 			// Accounts for the margin that allocates space for the input expanding and
 			// 1px input border.
 			left: @size-search-expand + @border-width-base;
 		}
 
-		.vector-search-box-input {
+		&.vector-search-box-auto-expand-width .vector-search-box-input {
 			margin-left: @size-search-expand;
 			width: ~'calc( 100% - @{size-search-expand} )';
 		}
 
 		// Recreate WVUI expanding input.
-		.vector-search-box-input:focus {
+		&:not( .vector-search-box-auto-expand-width ) .vector-search-box-input,
+		&.vector-search-box-auto-expand-width .vector-search-box-input:focus {
 			margin-left: 0;
 			// Use ~ and fixed values to disable the LESS transformation in ResourceLoader LESS implementation.
 			padding-left: ~'calc( @{size-search-figure} + @{size-search-expand} )';
@@ -113,7 +114,8 @@
 		}
 
 		// Reposition search icon for expanded input.
-		.vector-search-box-input:focus ~ .searchButton {
+		&:not( .vector-search-box-auto-expand-width ) .vector-search-box-input ~ .searchButton,
+		&.vector-search-box-auto-expand-width .vector-search-box-input:focus ~ .searchButton {
 			// Derived from
 			// https://gerrit.wikimedia.org/g/wvui/+/refs/changes/93/650593/10/src/components/typeahead-search/TypeaheadSearch.vue#655
 			// (12px of space between the border and the icon) with 1px to account for the focused input border.