From 8b5f5d955db0ace9594f9a1978848c4bba97b50b Mon Sep 17 00:00:00 2001
From: Sarah Norris <sarah@sekai.co.uk>
Date: Tue, 5 Mar 2024 10:36:15 +0000
Subject: [PATCH 1/3] Replace InputControl with SearchControl

---
 .../font-library-modal/font-collection.js     | 26 +++----------------
 1 file changed, 3 insertions(+), 23 deletions(-)

diff --git a/packages/edit-site/src/components/global-styles/font-library-modal/font-collection.js b/packages/edit-site/src/components/global-styles/font-library-modal/font-collection.js
index 78c042f3fa4056..304cf11aeb4a2d 100644
--- a/packages/edit-site/src/components/global-styles/font-library-modal/font-collection.js
+++ b/packages/edit-site/src/components/global-styles/font-library-modal/font-collection.js
@@ -10,7 +10,6 @@ import {
 } from '@wordpress/element';
 import {
 	__experimentalSpacer as Spacer,
-	__experimentalInputControl as InputControl,
 	__experimentalText as Text,
 	__experimentalHStack as HStack,
 	__experimentalVStack as VStack,
@@ -21,20 +20,15 @@ import {
 	Notice,
 	SelectControl,
 	Spinner,
-	Icon,
 	FlexItem,
 	Flex,
 	Button,
 	DropdownMenu,
+	SearchControl,
 } from '@wordpress/components';
 import { debounce } from '@wordpress/compose';
 import { sprintf, __, _x } from '@wordpress/i18n';
-import {
-	search,
-	closeSmall,
-	moreVertical,
-	chevronLeft,
-} from '@wordpress/icons';
+import { moreVertical, chevronLeft } from '@wordpress/icons';
 
 /**
  * Internal dependencies
@@ -168,11 +162,6 @@ function FontCollection( { slug } ) {
 		setPage( 1 );
 	};
 
-	const resetSearch = () => {
-		setFilters( { ...filters, search: '' } );
-		setPage( 1 );
-	};
-
 	const handleToggleVariant = ( font, face ) => {
 		const newFontsToInstall = toggleFont( font, face, fontsToInstall );
 		setFontsToInstall( newFontsToInstall );
@@ -288,20 +277,11 @@ function FontCollection( { slug } ) {
 					<Spacer margin={ 4 } />
 					<Flex>
 						<FlexItem>
-							<InputControl
+							<SearchControl
 								value={ filters.search }
 								placeholder={ __( 'Font name…' ) }
 								label={ __( 'Search' ) }
 								onChange={ debouncedUpdateSearchInput }
-								prefix={ <Icon icon={ search } /> }
-								suffix={
-									filters?.search ? (
-										<Icon
-											icon={ closeSmall }
-											onClick={ resetSearch }
-										/>
-									) : null
-								}
 							/>
 						</FlexItem>
 						<FlexItem>

From 2c08ee1f3417d6fc21d9288ee73bafb206614f23 Mon Sep 17 00:00:00 2001
From: Sarah Norris <sarah@sekai.co.uk>
Date: Tue, 5 Mar 2024 10:55:14 +0000
Subject: [PATCH 2/3] Match styling to previous search input

---
 .../global-styles/font-library-modal/font-collection.js    | 3 +++
 .../components/global-styles/font-library-modal/style.scss | 7 +++++++
 2 files changed, 10 insertions(+)

diff --git a/packages/edit-site/src/components/global-styles/font-library-modal/font-collection.js b/packages/edit-site/src/components/global-styles/font-library-modal/font-collection.js
index 304cf11aeb4a2d..fb7ea8bd009a48 100644
--- a/packages/edit-site/src/components/global-styles/font-library-modal/font-collection.js
+++ b/packages/edit-site/src/components/global-styles/font-library-modal/font-collection.js
@@ -278,10 +278,13 @@ function FontCollection( { slug } ) {
 					<Flex>
 						<FlexItem>
 							<SearchControl
+								className="font-library-modal__search"
 								value={ filters.search }
 								placeholder={ __( 'Font name…' ) }
 								label={ __( 'Search' ) }
 								onChange={ debouncedUpdateSearchInput }
+								__nextHasNoMarginBottom
+								hideLabelFromVision={ false }
 							/>
 						</FlexItem>
 						<FlexItem>
diff --git a/packages/edit-site/src/components/global-styles/font-library-modal/style.scss b/packages/edit-site/src/components/global-styles/font-library-modal/style.scss
index cfc42aa63a5c50..220ae46cafbd5f 100644
--- a/packages/edit-site/src/components/global-styles/font-library-modal/style.scss
+++ b/packages/edit-site/src/components/global-styles/font-library-modal/style.scss
@@ -135,3 +135,10 @@ button.font-library-modal__upload-area {
 		max-width: 400px;
 	}
 }
+
+.font-library-modal__search {
+	.components-input-control__container {
+		background-color: transparent;
+		border: 1px solid $gray-700;
+	}
+}

From c301cbaa369f519ba8286c8a9fe31c85b8dc6977 Mon Sep 17 00:00:00 2001
From: Sarah Norris <sarah@sekai.co.uk>
Date: Tue, 5 Mar 2024 11:41:46 +0000
Subject: [PATCH 3/3] Remove CSS for search input

---
 .../components/global-styles/font-library-modal/style.scss | 7 -------
 1 file changed, 7 deletions(-)

diff --git a/packages/edit-site/src/components/global-styles/font-library-modal/style.scss b/packages/edit-site/src/components/global-styles/font-library-modal/style.scss
index 220ae46cafbd5f..cfc42aa63a5c50 100644
--- a/packages/edit-site/src/components/global-styles/font-library-modal/style.scss
+++ b/packages/edit-site/src/components/global-styles/font-library-modal/style.scss
@@ -135,10 +135,3 @@ button.font-library-modal__upload-area {
 		max-width: 400px;
 	}
 }
-
-.font-library-modal__search {
-	.components-input-control__container {
-		background-color: transparent;
-		border: 1px solid $gray-700;
-	}
-}