From 08d8b8661a602ce42742b9f7e71ca42c389ee169 Mon Sep 17 00:00:00 2001
From: Lena Morita <lena@jaguchi.com>
Date: Tue, 26 Nov 2024 07:10:45 +0900
Subject: [PATCH] ComboboxControl: Update reset button size (#67215)

* ComboboxControl: Update reset button size

* Add changelog

Co-authored-by: mirka <0mirka00@git.wordpress.org>
Co-authored-by: tyxla <tyxla@git.wordpress.org>
---
 packages/components/CHANGELOG.md              |  1 +
 .../components/src/combobox-control/index.tsx | 24 +++++++++----------
 .../src/combobox-control/style.scss           |  6 -----
 3 files changed, 12 insertions(+), 19 deletions(-)

diff --git a/packages/components/CHANGELOG.md b/packages/components/CHANGELOG.md
index 9f547859fa5a99..81e325c8d9b3ff 100644
--- a/packages/components/CHANGELOG.md
+++ b/packages/components/CHANGELOG.md
@@ -27,6 +27,7 @@
 ### Enhancements
 
 -   `ColorPicker`: Update sizes of color format select and copy button ([#67093](https://github.com/WordPress/gutenberg/pull/67093)).
+-   `ComboboxControl`: Update reset button size ([#67215](https://github.com/WordPress/gutenberg/pull/67215)).
 -   `Autocomplete`: Increase option height ([#67214](https://github.com/WordPress/gutenberg/pull/67214)).
 
 ### Experimental
diff --git a/packages/components/src/combobox-control/index.tsx b/packages/components/src/combobox-control/index.tsx
index 86fa4f4467318c..28510c8653d02e 100644
--- a/packages/components/src/combobox-control/index.tsx
+++ b/packages/components/src/combobox-control/index.tsx
@@ -26,7 +26,7 @@ import TokenInput from '../form-token-field/token-input';
 import SuggestionsList from '../form-token-field/suggestions-list';
 import BaseControl from '../base-control';
 import Button from '../button';
-import { FlexBlock, FlexItem } from '../flex';
+import { FlexBlock } from '../flex';
 import withFocusOutside from '../higher-order/with-focus-outside';
 import { useControlledValue } from '../utils/hooks';
 import { normalizeTextString } from '../utils/strings';
@@ -363,18 +363,16 @@ function ComboboxControl( props: ComboboxControlProps ) {
 							/>
 						</FlexBlock>
 						{ allowReset && (
-							<FlexItem>
-								<Button
-									className="components-combobox-control__reset"
-									icon={ closeSmall }
-									// Disable reason: Focus returns to input field when reset is clicked.
-									// eslint-disable-next-line no-restricted-syntax
-									disabled={ ! value }
-									onClick={ handleOnReset }
-									onKeyDown={ handleResetStopPropagation }
-									label={ __( 'Reset' ) }
-								/>
-							</FlexItem>
+							<Button
+								size="small"
+								icon={ closeSmall }
+								// Disable reason: Focus returns to input field when reset is clicked.
+								// eslint-disable-next-line no-restricted-syntax
+								disabled={ ! value }
+								onClick={ handleOnReset }
+								onKeyDown={ handleResetStopPropagation }
+								label={ __( 'Reset' ) }
+							/>
 						) }
 					</InputWrapperFlex>
 					{ isExpanded && (
diff --git a/packages/components/src/combobox-control/style.scss b/packages/components/src/combobox-control/style.scss
index 8bd4c2fb156a9f..c8fd8a168c0fb7 100644
--- a/packages/components/src/combobox-control/style.scss
+++ b/packages/components/src/combobox-control/style.scss
@@ -38,9 +38,3 @@ input.components-combobox-control__input[type="text"] {
 	}
 }
 
-.components-combobox-control__reset.components-button {
-	display: flex;
-	height: $grid-unit-20;
-	min-width: $grid-unit-20;
-	padding: 0;
-}