From 771e50878bc46dcbb040250d7b43359c3c49b983 Mon Sep 17 00:00:00 2001
From: Lena Morita <lena@jaguchi.com>
Date: Sat, 10 Aug 2024 09:26:13 +0900
Subject: [PATCH 1/3] TextControl: Add lint rule for 40px size prop usage

---
 .eslintrc.js                                              | 8 ++++++++
 .../src/components/date-format-picker/index.js            | 2 ++
 .../src/components/media-upload/index.native.js           | 2 ++
 .../src/components/url-popover/image-url-input-ui.js      | 4 ++++
 packages/block-library/src/button/edit.js                 | 2 ++
 packages/block-library/src/form-input/edit.js             | 2 ++
 packages/block-library/src/form/edit.js                   | 2 ++
 packages/block-library/src/image/image.js                 | 2 ++
 .../src/navigation/edit/navigation-menu-name-control.js   | 2 ++
 packages/block-library/src/post-comment/edit.js           | 2 ++
 packages/block-library/src/post-featured-image/edit.js    | 2 ++
 packages/block-library/src/post-terms/edit.js             | 2 ++
 packages/block-library/src/post-title/edit.js             | 2 ++
 packages/block-library/src/social-link/edit.js            | 4 ++++
 .../src/template-part/edit/advanced-controls.js           | 2 ++
 packages/block-library/src/video/tracks-editor.js         | 4 ++++
 .../src/components/sidebar-dataviews/add-new-view.js      | 2 ++
 .../components/sidebar-dataviews/custom-dataviews-list.js | 2 ++
 .../src/components/post-publish-panel/postpublish.js      | 2 ++
 packages/editor/src/components/post-slug/index.js         | 2 ++
 .../post-taxonomies/hierarchical-term-selector.js         | 2 ++
 .../reusable-block-convert-button.js                      | 2 ++
 22 files changed, 56 insertions(+)

diff --git a/.eslintrc.js b/.eslintrc.js
index cb669fb4177206..068cf66c3ac370 100644
--- a/.eslintrc.js
+++ b/.eslintrc.js
@@ -308,6 +308,14 @@ module.exports = {
 							componentName +
 							' should have the `__nextHasNoMarginBottom` prop to opt-in to the new margin-free styles.',
 					} ) ),
+					// Temporary rules until all existing components have the `__next40pxDefaultSize` prop.
+					...[ 'TextControl' ].map( ( componentName ) => ( {
+						// Not strict. Allows pre-existing __next40pxDefaultSize={ false } usage until they are all manually updated.
+						selector: `JSXOpeningElement[name.name="${ componentName }"]:not(:has(JSXAttribute[name.name="__next40pxDefaultSize"])):not(:has(JSXAttribute[name.name="size"]))`,
+						message:
+							componentName +
+							' should have the `__next40pxDefaultSize` prop to opt-in to the new default size.',
+					} ) ),
 				],
 			},
 		},
diff --git a/packages/block-editor/src/components/date-format-picker/index.js b/packages/block-editor/src/components/date-format-picker/index.js
index 15beec4ac6ed54..63c977b111e01c 100644
--- a/packages/block-editor/src/components/date-format-picker/index.js
+++ b/packages/block-editor/src/components/date-format-picker/index.js
@@ -149,6 +149,8 @@ function NonDefaultControls( { format, onChange } ) {
 			/>
 			{ isCustom && (
 				<TextControl
+					// TODO: Switch to `true` (40px size) if possible
+					__next40pxDefaultSize={ false }
 					__nextHasNoMarginBottom
 					label={ __( 'Custom format' ) }
 					hideLabelFromVision
diff --git a/packages/block-editor/src/components/media-upload/index.native.js b/packages/block-editor/src/components/media-upload/index.native.js
index 05a36d7a09bcab..c4871d48ebe129 100644
--- a/packages/block-editor/src/components/media-upload/index.native.js
+++ b/packages/block-editor/src/components/media-upload/index.native.js
@@ -327,6 +327,8 @@ function URLInput( props ) {
 		>
 			<PanelBody style={ styles[ 'media-upload__link-input' ] }>
 				<TextControl
+					// TODO: Switch to `true` (40px size) if possible
+					__next40pxDefaultSize={ false }
 					// eslint-disable-next-line jsx-a11y/no-autofocus
 					autoFocus
 					autoCapitalize="none"
diff --git a/packages/block-editor/src/components/url-popover/image-url-input-ui.js b/packages/block-editor/src/components/url-popover/image-url-input-ui.js
index 8209ff1939f091..c19021c52356f5 100644
--- a/packages/block-editor/src/components/url-popover/image-url-input-ui.js
+++ b/packages/block-editor/src/components/url-popover/image-url-input-ui.js
@@ -227,12 +227,16 @@ const ImageURLInputUI = ( {
 				checked={ linkTarget === '_blank' }
 			/>
 			<TextControl
+				// TODO: Switch to `true` (40px size) if possible
+				__next40pxDefaultSize={ false }
 				__nextHasNoMarginBottom
 				label={ __( 'Link rel' ) }
 				value={ rel ?? '' }
 				onChange={ onSetLinkRel }
 			/>
 			<TextControl
+				// TODO: Switch to `true` (40px size) if possible
+				__next40pxDefaultSize={ false }
 				__nextHasNoMarginBottom
 				label={ __( 'Link CSS class' ) }
 				value={ linkClass || '' }
diff --git a/packages/block-library/src/button/edit.js b/packages/block-library/src/button/edit.js
index 3b2bb562e63c06..d9f8acc91e4c8e 100644
--- a/packages/block-library/src/button/edit.js
+++ b/packages/block-library/src/button/edit.js
@@ -380,6 +380,8 @@ function ButtonEdit( props ) {
 			<InspectorControls group="advanced">
 				{ isLinkTag && (
 					<TextControl
+						// TODO: Switch to `true` (40px size) if possible
+						__next40pxDefaultSize={ false }
 						__nextHasNoMarginBottom
 						label={ __( 'Link rel' ) }
 						value={ rel || '' }
diff --git a/packages/block-library/src/form-input/edit.js b/packages/block-library/src/form-input/edit.js
index 856d09d3945e64..fb84b0465b8402 100644
--- a/packages/block-library/src/form-input/edit.js
+++ b/packages/block-library/src/form-input/edit.js
@@ -63,6 +63,8 @@ function InputFieldBlock( { attributes, setAttributes, className } ) {
 			) }
 			<InspectorControls group="advanced">
 				<TextControl
+					// TODO: Switch to `true` (40px size) if possible
+					__next40pxDefaultSize={ false }
 					__nextHasNoMarginBottom
 					autoComplete="off"
 					label={ __( 'Name' ) }
diff --git a/packages/block-library/src/form/edit.js b/packages/block-library/src/form/edit.js
index 2738644878660a..d6f9d80f155c38 100644
--- a/packages/block-library/src/form/edit.js
+++ b/packages/block-library/src/form/edit.js
@@ -145,6 +145,8 @@ const Edit = ( { attributes, setAttributes, clientId } ) => {
 						) }
 					/>
 					<TextControl
+						// TODO: Switch to `true` (40px size) if possible
+						__next40pxDefaultSize={ false }
 						__nextHasNoMarginBottom
 						autoComplete="off"
 						label={ __( 'Form action' ) }
diff --git a/packages/block-library/src/image/image.js b/packages/block-library/src/image/image.js
index 7dd03a7fb5837c..0623d576e75aec 100644
--- a/packages/block-library/src/image/image.js
+++ b/packages/block-library/src/image/image.js
@@ -690,6 +690,8 @@ export default function Image( {
 						) }
 						renderContent={ () => (
 							<TextControl
+								// TODO: Switch to `true` (40px size) if possible
+								__next40pxDefaultSize={ false }
 								className="wp-block-image__toolbar_content_textarea"
 								__nextHasNoMarginBottom
 								label={ __( 'Title attribute' ) }
diff --git a/packages/block-library/src/navigation/edit/navigation-menu-name-control.js b/packages/block-library/src/navigation/edit/navigation-menu-name-control.js
index fe1075f0044070..97a97d7763fc72 100644
--- a/packages/block-library/src/navigation/edit/navigation-menu-name-control.js
+++ b/packages/block-library/src/navigation/edit/navigation-menu-name-control.js
@@ -14,6 +14,8 @@ export default function NavigationMenuNameControl() {
 
 	return (
 		<TextControl
+			// TODO: Switch to `true` (40px size) if possible
+			__next40pxDefaultSize={ false }
 			__nextHasNoMarginBottom
 			label={ __( 'Menu name' ) }
 			value={ title }
diff --git a/packages/block-library/src/post-comment/edit.js b/packages/block-library/src/post-comment/edit.js
index 54ad72be30d7c0..f6abb5ff60c68e 100644
--- a/packages/block-library/src/post-comment/edit.js
+++ b/packages/block-library/src/post-comment/edit.js
@@ -34,6 +34,8 @@ export default function Edit( { attributes: { commentId }, setAttributes } ) {
 					) }
 				>
 					<TextControl
+						// TODO: Switch to `true` (40px size) if possible
+						__next40pxDefaultSize={ false }
 						__nextHasNoMarginBottom
 						value={ commentId }
 						onChange={ ( val ) =>
diff --git a/packages/block-library/src/post-featured-image/edit.js b/packages/block-library/src/post-featured-image/edit.js
index c9f4645e5e8654..675580c71c1d7b 100644
--- a/packages/block-library/src/post-featured-image/edit.js
+++ b/packages/block-library/src/post-featured-image/edit.js
@@ -230,6 +230,8 @@ export default function PostFeaturedImageEdit( {
 								checked={ linkTarget === '_blank' }
 							/>
 							<TextControl
+								// TODO: Switch to `true` (40px size) if possible
+								__next40pxDefaultSize={ false }
 								__nextHasNoMarginBottom
 								label={ __( 'Link rel' ) }
 								value={ rel }
diff --git a/packages/block-library/src/post-terms/edit.js b/packages/block-library/src/post-terms/edit.js
index b822e457ffcaeb..0403a1d1406bd3 100644
--- a/packages/block-library/src/post-terms/edit.js
+++ b/packages/block-library/src/post-terms/edit.js
@@ -83,6 +83,8 @@ export default function PostTermsEdit( {
 			</BlockControls>
 			<InspectorControls group="advanced">
 				<TextControl
+					// TODO: Switch to `true` (40px size) if possible
+					__next40pxDefaultSize={ false }
 					__nextHasNoMarginBottom
 					autoComplete="off"
 					label={ __( 'Separator' ) }
diff --git a/packages/block-library/src/post-title/edit.js b/packages/block-library/src/post-title/edit.js
index e9b45e2a642a61..abd52febd1882b 100644
--- a/packages/block-library/src/post-title/edit.js
+++ b/packages/block-library/src/post-title/edit.js
@@ -162,6 +162,8 @@ export default function PostTitleEdit( {
 										checked={ linkTarget === '_blank' }
 									/>
 									<TextControl
+										// TODO: Switch to `true` (40px size) if possible
+										__next40pxDefaultSize={ false }
 										__nextHasNoMarginBottom
 										label={ __( 'Link rel' ) }
 										value={ rel }
diff --git a/packages/block-library/src/social-link/edit.js b/packages/block-library/src/social-link/edit.js
index 8f372a73ea6c9d..39e3803982f48b 100644
--- a/packages/block-library/src/social-link/edit.js
+++ b/packages/block-library/src/social-link/edit.js
@@ -139,6 +139,8 @@ const SocialLinkEdit = ( {
 				<PanelBody title={ __( 'Settings' ) }>
 					<PanelRow>
 						<TextControl
+							// TODO: Switch to `true` (40px size) if possible
+							__next40pxDefaultSize={ false }
 							__nextHasNoMarginBottom
 							label={ __( 'Text' ) }
 							help={ __(
@@ -155,6 +157,8 @@ const SocialLinkEdit = ( {
 			</InspectorControls>
 			<InspectorControls group="advanced">
 				<TextControl
+					// TODO: Switch to `true` (40px size) if possible
+					__next40pxDefaultSize={ false }
 					__nextHasNoMarginBottom
 					label={ __( 'Link rel' ) }
 					value={ rel || '' }
diff --git a/packages/block-library/src/template-part/edit/advanced-controls.js b/packages/block-library/src/template-part/edit/advanced-controls.js
index 44562c472dd4f6..79a3a158b87ea0 100644
--- a/packages/block-library/src/template-part/edit/advanced-controls.js
+++ b/packages/block-library/src/template-part/edit/advanced-controls.js
@@ -73,6 +73,8 @@ export function TemplatePartAdvancedControls( {
 			{ isEntityAvailable && (
 				<>
 					<TextControl
+						// TODO: Switch to `true` (40px size) if possible
+						__next40pxDefaultSize={ false }
 						__nextHasNoMarginBottom
 						label={ __( 'Title' ) }
 						value={ title }
diff --git a/packages/block-library/src/video/tracks-editor.js b/packages/block-library/src/video/tracks-editor.js
index 366d521f5aa625..3864722c7a7794 100644
--- a/packages/block-library/src/video/tracks-editor.js
+++ b/packages/block-library/src/video/tracks-editor.js
@@ -99,6 +99,8 @@ function SingleTrackEditor( { track, onChange, onClose, onRemove } ) {
 				</span>
 				<Grid columns={ 2 } gap={ 4 }>
 					<TextControl
+						// TODO: Switch to `true` (40px size) if possible
+						__next40pxDefaultSize={ false }
 						__nextHasNoMarginBottom
 						/* eslint-disable jsx-a11y/no-autofocus */
 						autoFocus
@@ -114,6 +116,8 @@ function SingleTrackEditor( { track, onChange, onClose, onRemove } ) {
 						help={ __( 'Title of track' ) }
 					/>
 					<TextControl
+						// TODO: Switch to `true` (40px size) if possible
+						__next40pxDefaultSize={ false }
 						__nextHasNoMarginBottom
 						onChange={ ( newSrcLang ) =>
 							onChange( {
diff --git a/packages/edit-site/src/components/sidebar-dataviews/add-new-view.js b/packages/edit-site/src/components/sidebar-dataviews/add-new-view.js
index aabb49c14a2ff7..69cca49fd84563 100644
--- a/packages/edit-site/src/components/sidebar-dataviews/add-new-view.js
+++ b/packages/edit-site/src/components/sidebar-dataviews/add-new-view.js
@@ -78,6 +78,8 @@ function AddNewItemModalContent( { type, setIsAdding } ) {
 		>
 			<VStack spacing="5">
 				<TextControl
+					// TODO: Switch to `true` (40px size) if possible
+					__next40pxDefaultSize={ false }
 					__nextHasNoMarginBottom
 					label={ __( 'Name' ) }
 					value={ title }
diff --git a/packages/edit-site/src/components/sidebar-dataviews/custom-dataviews-list.js b/packages/edit-site/src/components/sidebar-dataviews/custom-dataviews-list.js
index f033c932c59e12..cab5b0d31fa2ed 100644
--- a/packages/edit-site/src/components/sidebar-dataviews/custom-dataviews-list.js
+++ b/packages/edit-site/src/components/sidebar-dataviews/custom-dataviews-list.js
@@ -51,6 +51,8 @@ function RenameItemModalContent( { dataviewId, currentTitle, setIsRenaming } ) {
 		>
 			<VStack spacing="5">
 				<TextControl
+					// TODO: Switch to `true` (40px size) if possible
+					__next40pxDefaultSize={ false }
 					__nextHasNoMarginBottom
 					label={ __( 'Name' ) }
 					value={ title }
diff --git a/packages/editor/src/components/post-publish-panel/postpublish.js b/packages/editor/src/components/post-publish-panel/postpublish.js
index 39f48d3bc811c4..fdc1194527f5f7 100644
--- a/packages/editor/src/components/post-publish-panel/postpublish.js
+++ b/packages/editor/src/components/post-publish-panel/postpublish.js
@@ -122,6 +122,8 @@ class PostPublishPanelPostpublish extends Component {
 					</p>
 					<div className="post-publish-panel__postpublish-post-address-container">
 						<TextControl
+							// TODO: Switch to `true` (40px size) if possible
+							__next40pxDefaultSize={ false }
 							__nextHasNoMarginBottom
 							className="post-publish-panel__postpublish-post-address"
 							readOnly
diff --git a/packages/editor/src/components/post-slug/index.js b/packages/editor/src/components/post-slug/index.js
index cc86405157b88f..adabac2f18b0bd 100644
--- a/packages/editor/src/components/post-slug/index.js
+++ b/packages/editor/src/components/post-slug/index.js
@@ -24,6 +24,8 @@ function PostSlugControl() {
 
 	return (
 		<TextControl
+			// TODO: Switch to `true` (40px size) if possible
+			__next40pxDefaultSize={ false }
 			__nextHasNoMarginBottom
 			label={ __( 'Slug' ) }
 			autoComplete="off"
diff --git a/packages/editor/src/components/post-taxonomies/hierarchical-term-selector.js b/packages/editor/src/components/post-taxonomies/hierarchical-term-selector.js
index 79039d0a5d0d25..c711268a91e631 100644
--- a/packages/editor/src/components/post-taxonomies/hierarchical-term-selector.js
+++ b/packages/editor/src/components/post-taxonomies/hierarchical-term-selector.js
@@ -407,6 +407,8 @@ export function HierarchicalTermSelector( { slug } ) {
 		<Flex direction="column" gap="4">
 			{ showFilter && (
 				<TextControl
+					// TODO: Switch to `true` (40px size) if possible
+					__next40pxDefaultSize={ false }
 					__nextHasNoMarginBottom
 					label={ filterLabel }
 					value={ filterValue }
diff --git a/packages/reusable-blocks/src/components/reusable-blocks-menu-items/reusable-block-convert-button.js b/packages/reusable-blocks/src/components/reusable-blocks-menu-items/reusable-block-convert-button.js
index 21f3d0a61be042..b6f30e24a2fdb3 100644
--- a/packages/reusable-blocks/src/components/reusable-blocks-menu-items/reusable-block-convert-button.js
+++ b/packages/reusable-blocks/src/components/reusable-blocks-menu-items/reusable-block-convert-button.js
@@ -169,6 +169,8 @@ export default function ReusableBlockConvertButton( {
 					>
 						<VStack spacing="5">
 							<TextControl
+								// TODO: Switch to `true` (40px size) if possible
+								__next40pxDefaultSize={ false }
 								__nextHasNoMarginBottom
 								label={ __( 'Name' ) }
 								value={ title }

From 1c0db863055e6553cbd486b2fd82c8ed69c84344 Mon Sep 17 00:00:00 2001
From: Lena Morita <lena@jaguchi.com>
Date: Wed, 14 Aug 2024 05:49:58 +0900
Subject: [PATCH 2/3] Fixup

---
 .eslintrc.js | 1 -
 1 file changed, 1 deletion(-)

diff --git a/.eslintrc.js b/.eslintrc.js
index 66fc686c55313d..d1edc2d4de82f2 100644
--- a/.eslintrc.js
+++ b/.eslintrc.js
@@ -309,7 +309,6 @@ module.exports = {
 							componentName +
 							' should have the `__nextHasNoMarginBottom` prop to opt-in to the new margin-free styles.',
 					} ) ),
-
 					// Temporary rules until we're ready to officially default to the new size.
 					...[
 						'BorderBoxControl',

From 02515e4e86802b4c9c520ac5bd104a2e4f533e2a Mon Sep 17 00:00:00 2001
From: Lena Morita <lena@jaguchi.com>
Date: Wed, 14 Aug 2024 05:57:25 +0900
Subject: [PATCH 3/3] Fixup formatting

---
 .eslintrc.js | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/.eslintrc.js b/.eslintrc.js
index d1edc2d4de82f2..eb2d2db47e4cab 100644
--- a/.eslintrc.js
+++ b/.eslintrc.js
@@ -326,10 +326,10 @@ module.exports = {
 					...[ 'TextControl' ].map( ( componentName ) => ( {
 						// Not strict. Allows pre-existing __next40pxDefaultSize={ false } usage until they are all manually updated.
 						selector: `JSXOpeningElement[name.name="${ componentName }"]:not(:has(JSXAttribute[name.name="__next40pxDefaultSize"])):not(:has(JSXAttribute[name.name="size"]))`,
- 						message:
+						message:
 							componentName +
 							' should have the `__next40pxDefaultSize` prop to opt-in to the new default size.',
-					} ) ),           
+					} ) ),
 				],
 			},
 		},