From b0868e8abc86aaab1467b464b7fa806440cae08a Mon Sep 17 00:00:00 2001
From: Lena Morita <lena@jaguchi.com>
Date: Wed, 17 Jul 2024 19:21:54 +0900
Subject: [PATCH] Add margin-bottom lint rules for FocalPointPicker,
 TextareaControl, TreeSelect (#63633)

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

* Exclude stories and tests

* Fixup

* Fixup again

Co-authored-by: mirka <0mirka00@git.wordpress.org>
Co-authored-by: ciampo <mciampini@git.wordpress.org>
---
 .eslintrc.js                                  | 25 +++++++++++++++++++
 .../src/focal-point-picker/README.md          |  9 +++++++
 .../src/focal-point-picker/index.tsx          |  1 +
 .../components/src/textarea-control/README.md |  8 ++++++
 .../components/src/textarea-control/index.tsx |  1 +
 packages/components/src/tree-select/README.md |  9 +++++++
 packages/components/src/tree-select/index.tsx |  1 +
 7 files changed, 54 insertions(+)

diff --git a/.eslintrc.js b/.eslintrc.js
index 7925bceafd3d57..c15afbcf02aa93 100644
--- a/.eslintrc.js
+++ b/.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.
diff --git a/packages/components/src/focal-point-picker/README.md b/packages/components/src/focal-point-picker/README.md
index 9abb147831409a..f5db4885fdf7a4 100644
--- a/packages/components/src/focal-point-picker/README.md
+++ b/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`
diff --git a/packages/components/src/focal-point-picker/index.tsx b/packages/components/src/focal-point-picker/index.tsx
index aa6c5484948cf9..4575108fe6a21d 100644
--- a/packages/components/src/focal-point-picker/index.tsx
+++ b/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 }
diff --git a/packages/components/src/textarea-control/README.md b/packages/components/src/textarea-control/README.md
index a4d5189c065f4e..c812f6c308ea46 100644
--- a/packages/components/src/textarea-control/README.md
+++ b/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.
diff --git a/packages/components/src/textarea-control/index.tsx b/packages/components/src/textarea-control/index.tsx
index 7c0b0e92762fa6..3b96e11b0621b5 100644
--- a/packages/components/src/textarea-control/index.tsx
+++ b/packages/components/src/textarea-control/index.tsx
@@ -69,6 +69,7 @@ function UnforwardedTextareaControl(
  *
  *   return (
  *     <TextareaControl
+ *       __nextHasNoMarginBottom
  *       label="Text"
  *       help="Enter some text"
  *       value={ text }
diff --git a/packages/components/src/tree-select/README.md b/packages/components/src/tree-select/README.md
index 753e7bd6d052db..3d26488478bd0c 100644
--- a/packages/components/src/tree-select/README.md
+++ b/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`
diff --git a/packages/components/src/tree-select/index.tsx b/packages/components/src/tree-select/index.tsx
index d6e0738b6beb37..626fb0fda3a01c 100644
--- a/packages/components/src/tree-select/index.tsx
+++ b/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 ) }