Add margin-bottom lint rules for CheckboxControl, ComboboxControl, Se…

…archControl (#63679) Co-authored-by: mirka <[email protected]> Co-authored-by: ciampo <[email protected]>
WordPress · Jul 18, 2024 · 83f671f · 83f671f · github-actions · Jul 18, 2024
1 parent c380af5
commit 83f671f
Show file tree

Hide file tree

Showing 9 changed files with 28 additions and 2 deletions.
diff --git 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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -92,6 +92,7 @@ const getIndexOfMatchingSuggestion = (
  * 	const [ filteredOptions, setFilteredOptions ] = useState( options );
  * 	return (
  * 		<ComboboxControl
+ * 			__nextHasNoMarginBottom
  * 			label="Font Size"
  * 			value={ fontSize }
  * 			onChange={ setFontSize }