From 880c9e6ea85f50173d7a24498b47659279c2737e Mon Sep 17 00:00:00 2001
From: Lena Morita <lena@jaguchi.com>
Date: Thu, 18 Jul 2024 02:35:00 +0900
Subject: [PATCH] Add margin-bottom lint rules for CheckboxControl,
 ComboboxControl, SearchControl

---
 .eslintrc.js                                             | 3 +++
 .../src/components/inserter/media-tab/media-panel.js     | 1 +
 packages/block-editor/src/components/inserter/style.scss | 4 ++--
 packages/block-library/src/form-input/edit.js            | 2 ++
 packages/block-library/src/page-list/edit.js             | 1 +
 packages/components/src/checkbox-control/README.md       | 8 ++++++++
 packages/components/src/checkbox-control/index.tsx       | 1 +
 packages/components/src/combobox-control/README.md       | 9 +++++++++
 packages/components/src/combobox-control/index.tsx       | 1 +
 9 files changed, 28 insertions(+), 2 deletions(-)

diff --git a/.eslintrc.js b/.eslintrc.js
index c15afbcf02aa9..4385f528f44db 100644
--- a/.eslintrc.js
+++ b/.eslintrc.js
@@ -290,7 +290,10 @@ module.exports = {
 					...restrictedSyntax,
 					...restrictedSyntaxComponents,
 					...[
+						'CheckboxControl',
+						'ComboboxControl',
 						'FocalPointPicker',
+						'SearchControl',
 						'TextareaControl',
 						'TreeSelect',
 					].map( ( componentName ) => ( {
diff --git a/packages/block-editor/src/components/inserter/media-tab/media-panel.js b/packages/block-editor/src/components/inserter/media-tab/media-panel.js
index 9a55bd5ef99ce..cc19403f9d947 100644
--- a/packages/block-editor/src/components/inserter/media-tab/media-panel.js
+++ b/packages/block-editor/src/components/inserter/media-tab/media-panel.js
@@ -25,6 +25,7 @@ export function MediaCategoryPanel( { rootClientId, onInsert, category } ) {
 	return (
 		<div className={ baseCssClass }>
 			<SearchControl
+				__nextHasNoMarginBottom
 				className={ `${ baseCssClass }-search` }
 				onChange={ setSearch }
 				value={ search }
diff --git a/packages/block-editor/src/components/inserter/style.scss b/packages/block-editor/src/components/inserter/style.scss
index 3e30f0713b529..35801c0e65e54 100644
--- a/packages/block-editor/src/components/inserter/style.scss
+++ b/packages/block-editor/src/components/inserter/style.scss
@@ -523,11 +523,11 @@ $block-inserter-tabs-height: 44px;
 	}
 
 	.block-editor-inserter__media-panel-search {
-		margin-bottom: $grid-unit-20;
+		margin-bottom: $grid-unit-30;
 		// TODO: Consider using the Theme component to automatically adapt to a gray background.
 		@include break-medium() {
 			margin-bottom: 0;
-			padding: $grid-unit-20 $grid-unit-30 $grid-unit-10;
+			padding: $grid-unit-20 $grid-unit-30 $grid-unit-20;
 
 			&:not(:focus-within) {
 				--wp-components-color-background: #{$white};
diff --git a/packages/block-library/src/form-input/edit.js b/packages/block-library/src/form-input/edit.js
index 97115d86fb370..855fdbf468462 100644
--- a/packages/block-library/src/form-input/edit.js
+++ b/packages/block-library/src/form-input/edit.js
@@ -38,6 +38,7 @@ function InputFieldBlock( { attributes, setAttributes, className } ) {
 					<PanelBody title={ __( 'Settings' ) }>
 						{ 'checkbox' !== type && (
 							<CheckboxControl
+								__nextHasNoMarginBottom
 								label={ __( 'Inline label' ) }
 								checked={ inlineLabel }
 								onChange={ ( newVal ) => {
@@ -48,6 +49,7 @@ function InputFieldBlock( { attributes, setAttributes, className } ) {
 							/>
 						) }
 						<CheckboxControl
+							__nextHasNoMarginBottom
 							label={ __( 'Required' ) }
 							checked={ required }
 							onChange={ ( newVal ) => {
diff --git a/packages/block-library/src/page-list/edit.js b/packages/block-library/src/page-list/edit.js
index fca8096ac05d4..2b7f31c3c7c5e 100644
--- a/packages/block-library/src/page-list/edit.js
+++ b/packages/block-library/src/page-list/edit.js
@@ -319,6 +319,7 @@ export default function PageListEdit( {
 				{ pagesTree.length > 0 && (
 					<PanelBody>
 						<ComboboxControl
+							__nextHasNoMarginBottom
 							__next40pxDefaultSize
 							className="editor-page-attributes__parent"
 							label={ __( 'Parent' ) }
diff --git a/packages/components/src/checkbox-control/README.md b/packages/components/src/checkbox-control/README.md
index e89ee489feca9..90c33a1fab78d 100644
--- a/packages/components/src/checkbox-control/README.md
+++ b/packages/components/src/checkbox-control/README.md
@@ -55,6 +55,7 @@ const MyCheckboxControl = () => {
 	const [ isChecked, setChecked ] = useState( true );
 	return (
 		<CheckboxControl
+			__nextHasNoMarginBottom
 			label="Is author"
 			help="Is the user a author or not?"
 			checked={ isChecked }
@@ -102,6 +103,13 @@ If indeterminate is true the state of the checkbox will be indeterminate.
 
 -   Required: No
 
+#### `__nextHasNoMarginBottom`: `boolean`
+
+Start opting into the new margin-free styles that will become the default in a future version.
+
+-   Required: No
+-   Default: `false`
+
 ## Related components
 
 -   To select one option from a set, and you want to show all the available options at once, use the `RadioControl` component.
diff --git a/packages/components/src/checkbox-control/index.tsx b/packages/components/src/checkbox-control/index.tsx
index 87ca06698ac64..51e232d97847a 100644
--- a/packages/components/src/checkbox-control/index.tsx
+++ b/packages/components/src/checkbox-control/index.tsx
@@ -31,6 +31,7 @@ import type { WordPressComponentProps } from '../context';
  *   const [ isChecked, setChecked ] = useState( true );
  *   return (
  *     <CheckboxControl
+ *       __nextHasNoMarginBottom
  *       label="Is author"
  *       help="Is the user a author or not?"
  *       checked={ isChecked }
diff --git a/packages/components/src/combobox-control/README.md b/packages/components/src/combobox-control/README.md
index 68e1e08e599ab..9d00804e2f30e 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
+			__nextHasNoMarginBottom
 			label="Font Size"
 			value={ fontSize }
 			onChange={ setFontSize }
@@ -117,6 +118,14 @@ Custom renderer invoked for each option in the suggestion list. The render prop
 -   Type: `( args: { item: object } ) => ReactNode`
 -   Required: No
 
+#### __nextHasNoMarginBottom
+
+Start opting into the new margin-free styles that will become the default in a future version.
+
+-   Type: `Boolean`
+-   Required: No
+-   Default: `false`
+
 ## Related components
 
 -   Like this component, but without a search input, the [`CustomSelectControl`](https://developer.wordpress.org/block-editor/reference-guides/components/custom-select-control/) component.
diff --git a/packages/components/src/combobox-control/index.tsx b/packages/components/src/combobox-control/index.tsx
index a39a5dc1fc541..e3b1434be8c7c 100644
--- a/packages/components/src/combobox-control/index.tsx
+++ b/packages/components/src/combobox-control/index.tsx
@@ -92,6 +92,7 @@ const getIndexOfMatchingSuggestion = (
  * 	const [ filteredOptions, setFilteredOptions ] = useState( options );
  * 	return (
  * 		<ComboboxControl
+ * 			__nextHasNoMarginBottom
  * 			label="Font Size"
  * 			value={ fontSize }
  * 			onChange={ setFontSize }