TextControl: remove margin overrides and add new opt-in prop - with m…

…inor visual changes
WordPress · Jan 14, 2023 · 07cd8e6 · 07cd8e6
1 parent fae9da1
commit 07cd8e6
Show file tree

Hide file tree

Showing 12 changed files with 127 additions and 149 deletions.
diff --git a/packages/block-editor/src/components/date-format-picker/index.js b/packages/block-editor/src/components/date-format-picker/index.js
@@ -135,6 +135,7 @@ function NonDefaultControls( { format, onChange } ) {
 			</BaseControl>
 			{ isCustom && (
 				<TextControl
+					__nextHasNoMarginBottom
 					label={ __( 'Custom format' ) }
 					hideLabelFromVision
 					help={ createInterpolateElement(

diff --git a/packages/block-editor/src/components/date-format-picker/style.scss b/packages/block-editor/src/components/date-format-picker/style.scss
@@ -1,18 +1,16 @@
 .block-editor-date-format-picker {
 	margin-bottom: $grid-unit-20;
+
+	.block-editor-date-format-picker__custom-format-select-control {
+		margin-bottom: 0;
+	}
 }
 
 .block-editor-date-format-picker__default-format-toggle-control__hint {
 	color: $gray-700;
 	display: block;
 }
 
-.block-editor-date-format-picker__custom-format-select-control {
-	&.components-base-control {
-		margin-bottom: 0;
-	}
-}
-
 .block-editor-date-format-picker__custom-format-select-control__custom-option {
 	border-top: 1px solid $gray-300;
 

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
@@ -17,6 +17,7 @@ import {
 	TextControl,
 	SVG,
 	Path,
+	__experimentalVStack as VStack,
 } from '@wordpress/components';
 import { link as linkIcon, close } from '@wordpress/icons';
 
@@ -214,23 +215,26 @@ const ImageURLInputUI = ( {
 	};
 
 	const advancedOptions = (
-		<>
+		<VStack spacing="3">
 			<ToggleControl
+				__nextHasNoMarginBottom
 				label={ __( 'Open in new tab' ) }
 				onChange={ onSetNewTab }
 				checked={ linkTarget === '_blank' }
 			/>
 			<TextControl
+				__nextHasNoMarginBottom
 				label={ __( 'Link rel' ) }
 				value={ rel ?? '' }
 				onChange={ onSetLinkRel }
 			/>
 			<TextControl
+				__nextHasNoMarginBottom
 				label={ __( 'Link CSS Class' ) }
 				value={ linkClass || '' }
 				onChange={ onSetLinkClass }
 			/>
-		</>
+		</VStack>
 	);
 
 	const linkEditorValue = urlInput !== null ? urlInput : url;

diff --git a/packages/block-editor/src/components/url-popover/style.scss b/packages/block-editor/src/components/url-popover/style.scss
@@ -2,11 +2,13 @@
 	border-top: $border-width solid $gray-300;
 }
 
-.block-editor-url-popover__additional-controls > div[role="menu"] .components-button:not(:disabled):not([aria-disabled="true"]):not(.is-secondary) > svg {
+.block-editor-url-popover__additional-controls > div[role="menu"]
+.components-button:not(:disabled):not([aria-disabled="true"]):not(.is-secondary) > svg {
 	box-shadow: none;
 }
 
-.block-editor-url-popover__additional-controls div[role="menu"] > .components-button {
+.block-editor-url-popover__additional-controls
+div[role="menu"] > .components-button {
 	padding-left: $grid-unit-15;
 }
 
@@ -52,12 +54,6 @@
 		transform: rotate(180deg);
 	}
 }
-.block-editor-url-popover__input-container {
-	.components-base-control:last-child,
-	.components-base-control:last-child .components-base-control__field {
-		margin-bottom: 0;
-	}
-}
 
 .block-editor-url-popover__settings {
 	display: block;
@@ -68,10 +64,6 @@
 .block-editor-url-popover__link-editor,
 .block-editor-url-popover__link-viewer {
 	display: flex;
-
-	.block-editor-url-input .components-base-control__field {
-		margin-bottom: 0;
-	}
 }
 
 .block-editor-url-popover__link-viewer-url {

diff --git a/packages/block-library/src/post-comment/edit.js b/packages/block-library/src/post-comment/edit.js
@@ -43,6 +43,7 @@ export default function Edit( { attributes: { commentId }, setAttributes } ) {
 					) }
 				>
 					<TextControl
+						__nextHasNoMarginBottom
 						value={ commentId }
 						onChange={ ( val ) =>
 							setCommentIdInput( parseInt( val ) )

diff --git a/packages/block-library/src/social-link/edit.js b/packages/block-library/src/social-link/edit.js
@@ -102,6 +102,7 @@ const SocialLinkEdit = ( {
 				>
 					<PanelRow>
 						<TextControl
+							__nextHasNoMarginBottom
 							label={ __( 'Link label' ) }
 							help={ __(
 								'Briefly describe the link to help screen reader users.'
@@ -116,6 +117,7 @@ const SocialLinkEdit = ( {
 			</InspectorControls>
 			<InspectorControls __experimentalGroup="advanced">
 				<TextControl
+					__nextHasNoMarginBottom
 					label={ __( 'Link rel' ) }
 					value={ rel || '' }
 					onChange={ ( value ) => setAttributes( { rel: value } ) }

diff --git a/packages/block-library/src/template-part/edit/title-modal.js b/packages/block-library/src/template-part/edit/title-modal.js
@@ -5,10 +5,10 @@ import { useState } from '@wordpress/element';
 import { __, sprintf } from '@wordpress/i18n';
 import {
 	TextControl,
-	Flex,
-	FlexItem,
 	Button,
 	Modal,
+	__experimentalHStack as HStack,
+	__experimentalVStack as VStack,
 } from '@wordpress/components';
 
 export default function TitleModal( { areaLabel, onClose, onSubmit } ) {
@@ -33,16 +33,14 @@ export default function TitleModal( { areaLabel, onClose, onSubmit } ) {
 			onRequestClose={ onClose }
 		>
 			<form onSubmit={ submitForCreation }>
-				<TextControl
-					label={ __( 'Name' ) }
-					value={ title }
-					onChange={ setTitle }
-				/>
-				<Flex
-					className="wp-block-template-part__placeholder-create-new__title-form-actions"
-					justify="flex-end"
-				>
-					<FlexItem>
+				<VStack spacing="5">
+					<TextControl
+						__nextHasNoMarginBottom
+						label={ __( 'Name' ) }
+						value={ title }
+						onChange={ setTitle }
+					/>
+					<HStack justify="right">
 						<Button
 							variant="primary"
 							type="submit"
@@ -51,8 +49,8 @@ export default function TitleModal( { areaLabel, onClose, onSubmit } ) {
 						>
 							{ __( 'Create' ) }
 						</Button>
-					</FlexItem>
-				</Flex>
+					</HStack>
+				</VStack>
 			</form>
 		</Modal>
 	);

diff --git a/packages/block-library/src/video/editor.scss b/packages/block-library/src/video/editor.scss
@@ -71,36 +71,19 @@
 }
 
 .block-library-video-tracks-editor__track-list-track {
-	display: flex;
-	place-content: space-between;
-	align-items: baseline;
 	padding-left: $grid-unit-15;
 }
 
-.block-library-video-tracks-editor__single-track-editor-label-language {
-	display: flex;
-	margin-top: $grid-unit-15;
-	& > .components-base-control {
-		width: 50%;
-	}
-	& > .components-base-control:first-child {
-		margin-right: $grid-unit-20;
-	}
-}
-
 .block-library-video-tracks-editor__single-track-editor-kind-select {
 	max-width: 240px;
 }
 
 .block-library-video-tracks-editor__single-track-editor-buttons-container {
-	display: flex;
-	place-content: space-between;
-	margin-top: $grid-unit-40;
+	margin-top: $grid-unit-20;
 }
 
 .block-library-video-tracks-editor__single-track-editor-edit-track-label {
 	margin-top: $grid-unit-05;
-	margin-bottom: $grid-unit-15;
 	color: $gray-700;
 	text-transform: uppercase;
 	font-size: 11px;
@@ -126,17 +109,7 @@
 	padding: $grid-unit-15;
 }
 
-.block-library-video-tracks-editor__single-track-editor .components-base-control {
-	.components-base-control__label {
-		margin-bottom: $grid-unit-05;
-	}
-	.components-base-control__field {
-		margin-bottom: $grid-unit-15;
-	}
-	.components-text-control__input {
-		margin-left: 0;
-	}
-	.components-input-control__label {
-		margin-bottom: $grid-unit-05;
-	}
+.block-library-video-tracks-editor__single-track-editor-track-title,
+.block-library-video-tracks-editor__single-track-editor-source-language {
+	flex: 1;
 }
diff --git a/packages/block-library/src/video/tracks-editor.js b/packages/block-library/src/video/tracks-editor.js
@@ -13,6 +13,8 @@ import {
 	Button,
 	TextControl,
 	SelectControl,
+	__experimentalHStack as HStack,
+	__experimentalVStack as VStack,
 } from '@wordpress/components';
 import {
 	MediaUpload,
@@ -49,7 +51,7 @@ function TrackList( { tracks, onEditPress } ) {
 	} else {
 		content = tracks.map( ( track, index ) => {
 			return (
-				<div
+				<HStack
 					key={ index }
 					className="block-library-video-tracks-editor__track-list-track"
 				>
@@ -65,7 +67,7 @@ function TrackList( { tracks, onEditPress } ) {
 					>
 						{ __( 'Edit' ) }
 					</Button>
-				</div>
+				</HStack>
 			);
 		} );
 	}
@@ -84,15 +86,20 @@ function SingleTrackEditor( { track, onChange, onClose, onRemove } ) {
 	const fileName = src.startsWith( 'blob:' ) ? '' : getFilename( src ) || '';
 	return (
 		<NavigableMenu>
-			<div className="block-library-video-tracks-editor__single-track-editor">
+			<VStack
+				className="block-library-video-tracks-editor__single-track-editor"
+				spacing="3"
+			>
 				<span className="block-library-video-tracks-editor__single-track-editor-edit-track-label">
 					{ __( 'Edit track' ) }
 				</span>
 				<span>
 					{ __( 'File' ) }: <b>{ fileName }</b>
 				</span>
-				<div className="block-library-video-tracks-editor__single-track-editor-label-language">
+				<HStack spacing="4">
 					<TextControl
+						__nextHasNoMarginBottom
+						className="block-library-video-tracks-editor__single-track-editor-track-title"
 						/* eslint-disable jsx-a11y/no-autofocus */
 						autoFocus
 						/* eslint-enable jsx-a11y/no-autofocus */
@@ -107,6 +114,8 @@ function SingleTrackEditor( { track, onChange, onClose, onRemove } ) {
 						help={ __( 'Title of track' ) }
 					/>
 					<TextControl
+						__nextHasNoMarginBottom
+						className="block-library-video-tracks-editor__single-track-editor-source-language"
 						onChange={ ( newSrcLang ) =>
 							onChange( {
 								...track,
@@ -117,7 +126,7 @@ function SingleTrackEditor( { track, onChange, onClose, onRemove } ) {
 						value={ srcLang }
 						help={ __( 'Language tag (en, fr, etc.)' ) }
 					/>
-				</div>
+				</HStack>
 				<SelectControl
 					__nextHasNoMarginBottom
 					className="block-library-video-tracks-editor__single-track-editor-kind-select"
@@ -131,7 +140,7 @@ function SingleTrackEditor( { track, onChange, onClose, onRemove } ) {
 						} );
 					} }
 				/>
-				<div className="block-library-video-tracks-editor__single-track-editor-buttons-container">
+				<HStack className="block-library-video-tracks-editor__single-track-editor-buttons-container">
 					<Button
 						variant="secondary"
 						onClick={ () => {
@@ -163,8 +172,8 @@ function SingleTrackEditor( { track, onChange, onClose, onRemove } ) {
 					<Button isDestructive variant="link" onClick={ onRemove }>
 						{ __( 'Remove track' ) }
 					</Button>
-				</div>
-			</div>
+				</HStack>
+			</VStack>
 		</NavigableMenu>
 	);
 }

diff --git a/packages/components/src/placeholder/stories/index.tsx b/packages/components/src/placeholder/stories/index.tsx
@@ -44,6 +44,7 @@ const Template: ComponentStory< typeof Placeholder > = ( args ) => {
 		<Placeholder { ...args }>
 			<div>
 				<TextControl
+					__nextHasNoMarginBottom
 					label="Sample Field"
 					placeholder="Enter something here"
 					value={ value }