ComboboxControl: Add flag to remove bottom margin (#43165)

* ComboboxControl: Add flag to remove bottom margin

* Use Action for value inspection in story

* Add changelog

* Add optional chaining for onChange

Co-authored-by: Marco Ciampini <[email protected]>

Co-authored-by: Marco Ciampini <[email protected]>

Author: mirka

packages/components/CHANGELOG.md

@@ -46,6 +46,7 @@
 -   `BoxControl`: Export `applyValueToSides` util function. ([#42733](https://github.com/WordPress/gutenberg/pull/42733/)).
 -   `ColorPalette`: use index while iterating over color entries to avoid React "duplicated key" warning ([#43096](https://github.com/WordPress/gutenberg/pull/43096)).
 -   `AnglePickerControl`: Add `__nextHasNoMarginBottom` prop for opting into the new margin-free styles ([#43160](https://github.com/WordPress/gutenberg/pull/43160/)).
+-   `ComboboxControl`: Add `__nextHasNoMarginBottom` prop for opting into the new margin-free styles ([#43165](https://github.com/WordPress/gutenberg/pull/43165/)).
 
 ### Internal
 

packages/components/src/combobox-control/index.js

@@ -46,6 +46,8 @@ const DetectOutside = withFocusOutside(
 );
 
 function ComboboxControl( {
+	/** Start opting into the new margin-free styles that will become the default in a future version. */
+	__nextHasNoMarginBottom = false,
 	__next36pxDefaultSize,
 	value: valueProp,
 	label,
@@ -220,6 +222,7 @@ function ComboboxControl( {
 	return (
 		<DetectOutside onFocusOutside={ onFocusOutside }>
 			<BaseControl
+				__nextHasNoMarginBottom={ __nextHasNoMarginBottom }
 				className={ classnames(
 					className,
 					'components-combobox-control'

packages/components/src/combobox-control/stories/index.js

@@ -257,6 +257,10 @@ const countries = [
 export default {
 	title: 'Components/ComboboxControl',
 	component: ComboboxControl,
+	argTypes: {
+		__nextHasNoMarginBottom: { control: { type: 'boolean' } },
+		onChange: { action: 'onChange' },
+	},
 };
 
 const mapCountryOption = ( country ) => ( {
@@ -266,17 +270,19 @@ const mapCountryOption = ( country ) => ( {
 
 const countryOptions = countries.map( mapCountryOption );
 
-function Template( args ) {
+function Template( { onChange, ...args } ) {
 	const [ value, setValue ] = useState( null );
 
 	return (
 		<>
 			<ComboboxControl
 				{ ...args }
 				value={ value }
-				onChange={ setValue }
+				onChange={ ( ...changeArgs ) => {
+					setValue( ...changeArgs );
+					onChange?.( ...changeArgs );
+				} }
 			/>
-			<p>Value: { value }</p>
 		</>
 	);
 }

packages/components/src/combobox-control/style.scss

@@ -31,7 +31,6 @@ input.components-combobox-control__input[type="text"] {
 	flex-wrap: wrap;
 	align-items: flex-start;
 	width: 100%;
-	margin: 0 0 $grid-unit-10 0;
 	padding: 0;
 
 	&:focus-within {