Add margin-bottom lint rules for FocalPointPicker, TextareaControl, TreeSelect

.eslintrc.js

@@ -277,6 +277,31 @@ module.exports = {
 				],
 			},
 		},
+		{
+			// Temporary rules until we're ready to officially deprecate the bottom margins.
+			files: [ 'packages/*/src/**/*.[tj]s?(x)' ],
+			excludedFiles: [
+				'packages/components/src/**/@(test|stories)/**',
+				'**/*.@(native|ios|android).js',
+			],
+			rules: {
+				'no-restricted-syntax': [
+					'error',
+					...restrictedSyntax,
+					...restrictedSyntaxComponents,
+					...[
+						'FocalPointPicker',
+						'TextareaControl',
+						'TreeSelect',
+					].map( ( componentName ) => ( {
+						selector: `JSXOpeningElement[name.name="${ componentName }"]:not(:has(JSXAttribute[name.name="__nextHasNoMarginBottom"]))`,
+						message:
+							componentName +
+							' should have the `__nextHasNoMarginBottom` prop to opt-in to the new margin-free styles.',
+					} ) ),
+				],
+			},
+		},
 		{
 			files: [
 				// Components package.

packages/components/src/focal-point-picker/README.md

@@ -28,6 +28,7 @@ const Example = () => {
 	return (
 		<>
 			<FocalPointPicker
+			  __nextHasNoMarginBottom
 				url={ url }
 				value={ focalPoint }
 				onDragStart={ setFocalPoint }
@@ -98,3 +99,11 @@ Callback which is called at the start of drag operations.
 -   Required: No
 
 Function which is called before internal updates to the value state. It receives the upcoming value and may return a modified one.
+
+#### __nextHasNoMarginBottom
+
+Start opting into the new margin-free styles that will become the default in a future version.
+
+-   Type: `Boolean`
+-   Required: No
+-   Default: `false`

packages/components/src/focal-point-picker/index.tsx

@@ -70,6 +70,7 @@ const GRID_OVERLAY_TIMEOUT = 600;
  * 	return (
  * 		<>
  * 			<FocalPointPicker
+ *        __nextHasNoMarginBottom
  * 				url={ url }
  * 				value={ focalPoint }
  * 				onDragStart={ setFocalPoint }

packages/components/src/textarea-control/README.md

@@ -79,6 +79,7 @@ const MyTextareaControl = () => {
 
 	return (
 		<TextareaControl
+		  __nextHasNoMarginBottom
 			label="Text"
 			help="Enter some text"
 			value={ text }
@@ -131,6 +132,13 @@ The current value of the textarea.
 
 -   Required: Yes
 
+#### `__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
 
 -   For a field where users only enter one line of text, use the `TextControl` component.

packages/components/src/textarea-control/index.tsx

@@ -69,6 +69,7 @@ function UnforwardedTextareaControl(
  *
  *   return (
  *     <TextareaControl
+ *       __nextHasNoMarginBottom
  *       label="Text"
  *       help="Enter some text"
  *       value={ text }

packages/components/src/tree-select/README.md

@@ -15,6 +15,7 @@ const MyTreeSelect = () => {
 
 	return (
 		<TreeSelect
+		  __nextHasNoMarginBottom
 			label="Parent page"
 			noOptionLabel="No parent page"
 			onChange={ ( newPage ) => setPage( newPage ) }
@@ -89,3 +90,11 @@ An array containing the tree objects with the possible nodes the user can select
 
 -   Type: `Object[]`
 -   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`

packages/components/src/tree-select/index.tsx

@@ -37,6 +37,7 @@ function getSelectOptions(
  *
  * 	return (
  * 		<TreeSelect
+ *      __nextHasNoMarginBottom
  * 			label="Parent page"
  * 			noOptionLabel="No parent page"
  * 			onChange={ ( newPage ) => setPage( newPage ) }