From 93306750d96987408a810168c69f67a7d3768283 Mon Sep 17 00:00:00 2001
From: Lena Morita <lena@jaguchi.com>
Date: Thu, 8 Feb 2024 00:56:32 +0900
Subject: [PATCH] Update SearchControl consumers

---
 .../src/components/inserter/style.scss        | 16 ++--------
 .../src/navigation/menu/menu-title-search.tsx | 12 +++----
 .../navigation/styles/navigation-styles.tsx   | 32 +++----------------
 .../add-custom-template-modal-content.js      |  1 +
 .../components/add-new-template/style.scss    | 12 +++----
 .../src/components/page-patterns/style.scss   | 13 +++-----
 6 files changed, 24 insertions(+), 62 deletions(-)

diff --git a/packages/block-editor/src/components/inserter/style.scss b/packages/block-editor/src/components/inserter/style.scss
index dd0cc50e31fcb..35c18e1d9acce 100644
--- a/packages/block-editor/src/components/inserter/style.scss
+++ b/packages/block-editor/src/components/inserter/style.scss
@@ -108,10 +108,6 @@ $block-inserter-tabs-height: 44px;
 
 .block-editor-inserter__search {
 	padding: $grid-unit-20 $grid-unit-20 0 $grid-unit-20;
-
-	.components-search-control__icon {
-		right: $grid-unit-10 + ($grid-unit-60 - $icon-size) * 0.5;
-	}
 }
 
 .block-editor-inserter__tabs {
@@ -615,15 +611,9 @@ $block-inserter-tabs-height: 44px;
 	}
 
 	.block-editor-inserter__media-panel-search {
-		&.components-search-control {
-			input[type="search"].components-search-control__input {
-				background: $white;
-			}
-			button.components-button {
-				min-width: auto;
-				padding-left: $grid-unit-05 * 0.5;
-				padding-right: $grid-unit-05 * 0.5;
-			}
+		// TODO: Consider using the Theme component to automatically adapt to a gray background.
+		&:not(:focus-within) {
+			--wp-components-color-background: #{$white};
 		}
 	}
 }
diff --git a/packages/components/src/navigation/menu/menu-title-search.tsx b/packages/components/src/navigation/menu/menu-title-search.tsx
index d03766f28d752..c1dbda5af88fb 100644
--- a/packages/components/src/navigation/menu/menu-title-search.tsx
+++ b/packages/components/src/navigation/menu/menu-title-search.tsx
@@ -10,10 +10,11 @@ import { __, _n, sprintf } from '@wordpress/i18n';
 import withSpokenMessages from '../../higher-order/with-spoken-messages';
 import { useNavigationMenuContext } from './context';
 import { useNavigationContext } from '../context';
-import { MenuTitleSearchUI } from '../styles/navigation-styles';
 import { SEARCH_FOCUS_DELAY } from '../constants';
 
 import type { NavigationMenuTitleSearchProps } from '../types';
+import SearchControl from '../../search-control';
+import { MenuTitleSearchControlWrapper } from '../styles/navigation-styles';
 
 function MenuTitleSearch( {
 	debouncedSpeak,
@@ -80,9 +81,9 @@ function MenuTitleSearch( {
 	).trim();
 
 	return (
-		<div className="components-navigation__menu-title-search">
-			<MenuTitleSearchUI
-				autoComplete="off"
+		<MenuTitleSearchControlWrapper>
+			<SearchControl
+				__nextHasNoMarginBottom
 				className="components-navigation__menu-search-input"
 				id={ inputId }
 				onChange={ ( value ) => onSearch?.( value ) }
@@ -90,10 +91,9 @@ function MenuTitleSearch( {
 				placeholder={ placeholder }
 				onClose={ onClose }
 				ref={ inputRef }
-				type="search"
 				value={ search }
 			/>
-		</div>
+		</MenuTitleSearchControlWrapper>
 	);
 }
 
diff --git a/packages/components/src/navigation/styles/navigation-styles.tsx b/packages/components/src/navigation/styles/navigation-styles.tsx
index 27c508b98f26d..820cf2224be88 100644
--- a/packages/components/src/navigation/styles/navigation-styles.tsx
+++ b/packages/components/src/navigation/styles/navigation-styles.tsx
@@ -17,7 +17,6 @@ import { Text } from '../../text';
 import { Heading } from '../../heading';
 import { reduceMotion, rtl } from '../../utils';
 import { space } from '../../utils/space';
-import SearchControl from '../../search-control';
 
 export const NavigationUI = styled.div`
 	width: 100%;
@@ -69,6 +68,11 @@ export const MenuTitleUI = styled.div`
 	width: 100%;
 `;
 
+export const MenuTitleSearchControlWrapper = styled.div`
+	margin: 11px 0; // non-ideal hardcoding to maintain same height as Heading, could be improved
+	padding: 1px; // so the focus border doesn't get cut off by the overflow hidden on MenuTitleUI
+`;
+
 export const MenuTitleActionsUI = styled.span`
 	height: ${ space( 6 ) }; // 24px, same height as the buttons inside
 
@@ -91,32 +95,6 @@ export const MenuTitleActionsUI = styled.span`
 	}
 `;
 
-export const MenuTitleSearchUI = styled( SearchControl )`
-	input[type='search'].components-search-control__input {
-		margin: 0;
-		background: #303030;
-		color: #fff;
-
-		&:focus {
-			background: #434343;
-			color: #fff;
-		}
-
-		&::placeholder {
-			color: rgba( 255, 255, 255, 0.6 );
-		}
-	}
-
-	svg {
-		fill: white;
-	}
-
-	.components-button.has-icon {
-		padding: 0;
-		min-width: auto;
-	}
-`;
-
 export const GroupTitleUI = styled( Heading )`
 	min-height: ${ space( 12 ) };
 	align-items: center;
diff --git a/packages/edit-site/src/components/add-new-template/add-custom-template-modal-content.js b/packages/edit-site/src/components/add-new-template/add-custom-template-modal-content.js
index 44554eac0dcd6..7e53bd737760a 100644
--- a/packages/edit-site/src/components/add-new-template/add-custom-template-modal-content.js
+++ b/packages/edit-site/src/components/add-new-template/add-custom-template-modal-content.js
@@ -134,6 +134,7 @@ function SuggestionList( { entityForSuggestions, onSelect } ) {
 			{ showSearchControl && (
 				<SearchControl
 					__nextHasNoMarginBottom
+					className="edit-site-custom-template-modal__search"
 					onChange={ setSearch }
 					value={ search }
 					label={ labels.search_items }
diff --git a/packages/edit-site/src/components/add-new-template/style.scss b/packages/edit-site/src/components/add-new-template/style.scss
index 4881745c92afa..6126b6f774f4a 100644
--- a/packages/edit-site/src/components/add-new-template/style.scss
+++ b/packages/edit-site/src/components/add-new-template/style.scss
@@ -21,14 +21,12 @@
 		}
 	}
 
-	.components-search-control {
-		input[type="search"].components-search-control__input {
-			background: $white;
-			border: 1px solid $gray-300;
+	.edit-site-custom-template-modal__search {
+		&:not(:focus-within) {
+			--wp-components-color-background: #{$white};
 
-			&:focus {
-				border-color: var(--wp-admin-theme-color);
-				box-shadow: 0 0 0 1px var(--wp-admin-theme-color);
+			.components-input-control__backdrop {
+				border-color: $gray-300;
 			}
 		}
 	}
diff --git a/packages/edit-site/src/components/page-patterns/style.scss b/packages/edit-site/src/components/page-patterns/style.scss
index 0f119773bdf21..e5bd44956b262 100644
--- a/packages/edit-site/src/components/page-patterns/style.scss
+++ b/packages/edit-site/src/components/page-patterns/style.scss
@@ -31,17 +31,12 @@
 		flex-grow: 1;
 	}
 
-	// The increased specificity here is to overcome component styles
-	// without relying on internal component class names.
+	// TODO: Consider using the Theme component to automatically adapt to a dark background.
 	.edit-site-patterns__search {
-		input[type="search"] {
-			height: $button-size-next-default-40px;
-			background: $gray-800;
-			color: $gray-200;
+		--wp-components-color-foreground: #{$gray-200};
 
-			&:focus {
-				background: $gray-800;
-			}
+		.components-input-control__container {
+			background: $gray-800;
 		}
 
 		svg {