From fbc8c9f7bfecd01a410024079496d8ab4b3546ca Mon Sep 17 00:00:00 2001
From: VATALIYA PARTH <88878890+PARTHVATALIYA@users.noreply.github.com>
Date: Wed, 20 Nov 2024 04:41:15 +0530
Subject: [PATCH] ComboboxControl : Deprecate 36px default size (#66900)

* Add the console warning for 36px size variation

* Add the changelog for the deprecation

* Update: changelog and JSDoc

---------

Co-authored-by: PARTHVATALIYA <parthvataliya@git.wordpress.org>
Co-authored-by: mirka <0mirka00@git.wordpress.org>
---
 packages/components/CHANGELOG.md                          | 1 +
 packages/components/src/combobox-control/README.md        | 1 +
 packages/components/src/combobox-control/index.tsx        | 8 ++++++++
 .../src/combobox-control/stories/index.story.tsx          | 1 +
 packages/components/src/combobox-control/test/index.tsx   | 8 +++++++-
 5 files changed, 18 insertions(+), 1 deletion(-)

diff --git a/packages/components/CHANGELOG.md b/packages/components/CHANGELOG.md
index 34a90b6ca23b3c..927b1a12cee4c3 100644
--- a/packages/components/CHANGELOG.md
+++ b/packages/components/CHANGELOG.md
@@ -30,6 +30,7 @@
 ### Deprecations
 
 -   `Radio`: Deprecate 36px default size ([#66572](https://github.com/WordPress/gutenberg/pull/66572)).
+-   `ComboboxControl`: Deprecate 36px default size ([#66900](https://github.com/WordPress/gutenberg/pull/66900)).
 
 ### Bug Fixes
 
diff --git a/packages/components/src/combobox-control/README.md b/packages/components/src/combobox-control/README.md
index 5831c5ec2832c2..4089cf9c56e9b5 100644
--- a/packages/components/src/combobox-control/README.md
+++ b/packages/components/src/combobox-control/README.md
@@ -34,6 +34,7 @@ function MyComboboxControl() {
 	const [ filteredOptions, setFilteredOptions ] = useState( options );
 	return (
 		<ComboboxControl
+			__next40pxDefaultSize
 			__nextHasNoMarginBottom
 			label="Font Size"
 			value={ fontSize }
diff --git a/packages/components/src/combobox-control/index.tsx b/packages/components/src/combobox-control/index.tsx
index 5c6725a51b435d..86fa4f4467318c 100644
--- a/packages/components/src/combobox-control/index.tsx
+++ b/packages/components/src/combobox-control/index.tsx
@@ -34,6 +34,7 @@ import type { ComboboxControlOption, ComboboxControlProps } from './types';
 import type { TokenInputProps } from '../form-token-field/types';
 import { useDeprecated36pxDefaultSizeProp } from '../utils/use-deprecated-props';
 import { withIgnoreIMEEvents } from '../utils/with-ignore-ime-events';
+import { maybeWarnDeprecated36pxSize } from '../utils/deprecated-36px-size';
 
 const noop = () => {};
 
@@ -92,6 +93,7 @@ const getIndexOfMatchingSuggestion = (
  * 	const [ filteredOptions, setFilteredOptions ] = useState( options );
  * 	return (
  * 		<ComboboxControl
+ * 			__next40pxDefaultSize
  * 			__nextHasNoMarginBottom
  * 			label="Font Size"
  * 			value={ fontSize }
@@ -313,6 +315,12 @@ function ComboboxControl( props: ComboboxControlProps ) {
 		}
 	}, [ matchingSuggestions, isExpanded ] );
 
+	maybeWarnDeprecated36pxSize( {
+		componentName: 'ComboboxControl',
+		__next40pxDefaultSize,
+		size: undefined,
+	} );
+
 	// Disable reason: There is no appropriate role which describes the
 	// input container intended accessible usability.
 	// TODO: Refactor click detection to use blur to stop propagation.
diff --git a/packages/components/src/combobox-control/stories/index.story.tsx b/packages/components/src/combobox-control/stories/index.story.tsx
index 954f0d96fb0d76..1b4972f167f745 100644
--- a/packages/components/src/combobox-control/stories/index.story.tsx
+++ b/packages/components/src/combobox-control/stories/index.story.tsx
@@ -77,6 +77,7 @@ const Template: StoryFn< typeof ComboboxControl > = ( {
 };
 export const Default = Template.bind( {} );
 Default.args = {
+	__next40pxDefaultSize: true,
 	__nextHasNoMarginBottom: true,
 	allowReset: false,
 	label: 'Select a country',
diff --git a/packages/components/src/combobox-control/test/index.tsx b/packages/components/src/combobox-control/test/index.tsx
index 639407ac998ed2..8f569ed381a844 100644
--- a/packages/components/src/combobox-control/test/index.tsx
+++ b/packages/components/src/combobox-control/test/index.tsx
@@ -58,7 +58,13 @@ const getOptionSearchString = ( option: ComboboxControlOption ) =>
 	option.label.substring( 0, 11 );
 
 const ComboboxControl = ( props: ComboboxControlProps ) => {
-	return <_ComboboxControl { ...props } __nextHasNoMarginBottom />;
+	return (
+		<_ComboboxControl
+			{ ...props }
+			__next40pxDefaultSize
+			__nextHasNoMarginBottom
+		/>
+	);
 };
 
 const ControlledComboboxControl = ( {