TextControl: Add lint rule for 40px size prop usage (#64455)

* TextControl: Add lint rule for 40px size prop usage * Fixup * Fixup formatting Co-authored-by: mirka <[email protected]> Co-authored-by: tyxla <[email protected]>
WordPress · Aug 14, 2024 · 6e61d43 · 6e61d43
1 parent 97df6a7
commit 6e61d43
Show file tree

Hide file tree

Showing 22 changed files with 56 additions and 0 deletions.
diff --git a/.eslintrc.js b/.eslintrc.js
@@ -322,6 +322,14 @@ module.exports = {
 							componentName +
 							' should have the `__next40pxDefaultSize` prop to opt-in to the new default size.',
 					} ) ),
+					// 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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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/...eusable-blocks/src/components/reusable-blocks-menu-items/reusable-block-convert-button.js b/...eusable-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 }