Add margin-bottom lint rules for TextControl (#64212)

* Fix in Form block * Fix in DataForm * Fix in Add new post modal * Fix in Language format popover * Add lint rule Co-authored-by: mirka <0mirka00@git.wordpress.org> Co-authored-by: tyxla <tyxla@git.wordpress.org>
WordPress · Aug 5, 2024 · f6c809f · f6c809f
1 parent e3c2cd3
commit f6c809f
Show file tree

Hide file tree

Showing 8 changed files with 50 additions and 24 deletions.
diff --git a/.eslintrc.js b/.eslintrc.js
@@ -295,6 +295,7 @@ module.exports = {
 						'FocalPointPicker',
 						'RangeControl',
 						'SearchControl',
+						'TextControl',
 						'TextareaControl',
 						'ToggleGroupControl',
 						'TreeSelect',

diff --git a/packages/block-library/src/form-input/edit.js b/packages/block-library/src/form-input/edit.js
@@ -63,6 +63,7 @@ function InputFieldBlock( { attributes, setAttributes, className } ) {
 			) }
 			<InspectorControls group="advanced">
 				<TextControl
+					__nextHasNoMarginBottom
 					autoComplete="off"
 					label={ __( 'Name' ) }
 					value={ name }

diff --git a/packages/dataviews/src/components/dataform/index.tsx b/packages/dataviews/src/components/dataform/index.tsx
@@ -6,6 +6,7 @@ import type { Dispatch, SetStateAction } from 'react';
 /**
  * WordPress dependencies
  */
+import { __experimentalVStack as VStack } from '@wordpress/components';
 import { useMemo } from '@wordpress/element';
 
 /**
@@ -37,14 +38,18 @@ export default function DataForm< Item >( {
 		[ fields, form.visibleFields ]
 	);
 
-	return visibleFields.map( ( field ) => {
-		return (
-			<field.Edit
-				key={ field.id }
-				data={ data }
-				field={ field }
-				onChange={ onChange }
-			/>
-		);
-	} );
+	return (
+		<VStack spacing={ 4 }>
+			{ visibleFields.map( ( field ) => {
+				return (
+					<field.Edit
+						key={ field.id }
+						data={ data }
+						field={ field }
+						onChange={ onChange }
+					/>
+				);
+			} ) }
+		</VStack>
+	);
 }
diff --git a/packages/dataviews/src/field-types/integer.tsx b/packages/dataviews/src/field-types/integer.tsx
@@ -76,6 +76,8 @@ function Edit< Item >( {
 				value={ value }
 				options={ elements }
 				onChange={ onChangeControl }
+				__next40pxDefaultSize
+				__nextHasNoMarginBottom
 			/>
 		);
 	}

diff --git a/packages/dataviews/src/field-types/text.tsx b/packages/dataviews/src/field-types/text.tsx
@@ -78,6 +78,7 @@ function Edit< Item >( {
 			value={ value ?? '' }
 			onChange={ onChangeControl }
 			__next40pxDefaultSize
+			__nextHasNoMarginBottom
 		/>
 	);
 }

diff --git a/packages/edit-site/src/components/add-new-post/index.js b/packages/edit-site/src/components/add-new-post/index.js
@@ -95,9 +95,10 @@ export default function AddNewPostModal( { postType, onSave, onClose } ) {
 			size="small"
 		>
 			<form onSubmit={ createPost }>
-				<VStack spacing={ 3 }>
+				<VStack spacing={ 4 }>
 					<TextControl
 						__next40pxDefaultSize
+						__nextHasNoMarginBottom
 						label={ __( 'Title' ) }
 						onChange={ setTitle }
 						placeholder={ __( 'No title' ) }

diff --git a/packages/edit-site/src/components/post-edit/index.js b/packages/edit-site/src/components/post-edit/index.js
@@ -10,7 +10,11 @@ import { __ } from '@wordpress/i18n';
 import { DataForm, isItemValid } from '@wordpress/dataviews';
 import { useDispatch, useSelect, useRegistry } from '@wordpress/data';
 import { store as coreDataStore } from '@wordpress/core-data';
-import { Button } from '@wordpress/components';
+import {
+	Button,
+	FlexItem,
+	__experimentalVStack as VStack,
+} from '@wordpress/components';
 import { useState, useMemo } from '@wordpress/element';
 
 /**
@@ -71,22 +75,25 @@ function PostEditForm( { postType, postId } ) {
 
 	const isUpdateDisabled = ! isItemValid( itemWithEdits, fields, form );
 	return (
-		<form onSubmit={ onSubmit }>
+		<VStack as="form" onSubmit={ onSubmit } spacing={ 4 }>
 			<DataForm
 				data={ itemWithEdits }
 				fields={ fields }
 				form={ form }
 				onChange={ setEdits }
 			/>
-			<Button
-				variant="primary"
-				type="submit"
-				accessibleWhenDisabled
-				disabled={ isUpdateDisabled }
-			>
-				{ __( 'Update' ) }
-			</Button>
-		</form>
+			<FlexItem>
+				<Button
+					variant="primary"
+					type="submit"
+					accessibleWhenDisabled
+					disabled={ isUpdateDisabled }
+					__next40pxDefaultSize
+				>
+					{ __( 'Update' ) }
+				</Button>
+			</FlexItem>
+		</VStack>
 	);
 }
 

diff --git a/packages/format-library/src/language/index.js b/packages/format-library/src/language/index.js
@@ -13,6 +13,7 @@ import {
 	Button,
 	Popover,
 	__experimentalHStack as HStack,
+	__experimentalVStack as VStack,
 } from '@wordpress/components';
 import { useState } from '@wordpress/element';
 import { applyFormat, removeFormat, useAnchor } from '@wordpress/rich-text';
@@ -78,7 +79,9 @@ function InlineLanguageUI( { value, contentRef, onChange, onClose } ) {
 			anchor={ popoverAnchor }
 			onClose={ onClose }
 		>
-			<form
+			<VStack
+				as="form"
+				spacing={ 4 }
 				className="block-editor-format-toolbar__language-container-content"
 				onSubmit={ ( event ) => {
 					event.preventDefault();
@@ -95,6 +98,8 @@ function InlineLanguageUI( { value, contentRef, onChange, onClose } ) {
 				} }
 			>
 				<TextControl
+					__next40pxDefaultSize
+					__nextHasNoMarginBottom
 					label={ title }
 					value={ lang }
 					onChange={ ( val ) => setLang( val ) }
@@ -103,6 +108,8 @@ function InlineLanguageUI( { value, contentRef, onChange, onClose } ) {
 					) }
 				/>
 				<SelectControl
+					__next40pxDefaultSize
+					__nextHasNoMarginBottom
 					label={ __( 'Text direction' ) }
 					value={ dir }
 					options={ [
@@ -119,12 +126,13 @@ function InlineLanguageUI( { value, contentRef, onChange, onClose } ) {
 				/>
 				<HStack alignment="right">
 					<Button
+						__next40pxDefaultSize
 						variant="primary"
 						type="submit"
 						text={ __( 'Apply' ) }
 					/>
 				</HStack>
-			</form>
+			</VStack>
 		</Popover>
 	);
 }