Migrate from TextControl to InputControl to remove margin overrides (#…

…47161) * Migrate from TextControl to InputControl to remove margin overrides * Add back wrap behaviour based on PR feedback
WordPress · Jan 20, 2023 · c3af62b · c3af62b
1 parent 2bf7068
commit c3af62b
Show file tree

Hide file tree

Showing 2 changed files with 20 additions and 27 deletions.
diff --git a/packages/block-library/src/rss/edit.js b/packages/block-library/src/rss/edit.js
@@ -12,9 +12,10 @@ import {
 	PanelBody,
 	Placeholder,
 	RangeControl,
-	TextControl,
 	ToggleControl,
 	ToolbarGroup,
+	__experimentalHStack as HStack,
+	__experimentalInputControl as InputControl,
 } from '@wordpress/components';
 import { useState } from '@wordpress/element';
 import { grid, list, edit, rss } from '@wordpress/icons';
@@ -66,17 +67,20 @@ export default function RSSEdit( { attributes, setAttributes } ) {
 						onSubmit={ onSubmitURL }
 						className="wp-block-rss__placeholder-form"
 					>
-						<TextControl
-							placeholder={ __( 'Enter URL here…' ) }
-							value={ feedURL }
-							onChange={ ( value ) =>
-								setAttributes( { feedURL: value } )
-							}
-							className="wp-block-rss__placeholder-input"
-						/>
-						<Button variant="primary" type="submit">
-							{ __( 'Use URL' ) }
-						</Button>
+						<HStack wrap>
+							<InputControl
+								__next36pxDefaultSize
+								placeholder={ __( 'Enter URL here…' ) }
+								value={ feedURL }
+								onChange={ ( value ) =>
+									setAttributes( { feedURL: value } )
+								}
+								className="wp-block-rss__placeholder-input"
+							/>
+							<Button variant="primary" type="submit">
+								{ __( 'Use URL' ) }
+							</Button>
+						</HStack>
 					</form>
 				</Placeholder>
 			</div>

diff --git a/packages/block-library/src/rss/editor.scss b/packages/block-library/src/rss/editor.scss
@@ -3,9 +3,6 @@
 }
 
 .wp-block-rss__placeholder-form {
-	display: flex;
-	align-items: stretch;
-
 	> * {
 		margin-bottom: $grid-unit-10;
 	}
@@ -15,18 +12,10 @@
 			margin-bottom: 0;
 		}
 	}
-}
 
-.wp-block-rss__placeholder-input {
-	display: flex;
-	align-items: stretch;
-	flex-grow: 1;
-
-	.components-base-control__field {
-		margin: 0;
-		display: flex;
-		align-items: stretch;
-		flex-grow: 1;
-		margin-right: $grid-unit-10;
+	.wp-block-rss__placeholder-input {
+		flex: 1;
+		min-width: 80%;
 	}
 }
+