Block Editor: LinkControl: Add Submit button as action

packages/base-styles/_variables.scss

@@ -48,12 +48,8 @@ $content-width: 580px; // This is optimized for 70 characters.
 // Block UI
 $border-width: 1px;
 $block-controls-height: 36px;
-$icon-button-size: 36px;
-$icon-button-size-small: 24px;
 $inserter-tabs-height: 36px;
 $block-toolbar-height: $block-controls-height + $border-width;
-$resize-handler-size: 15px;
-$resize-handler-container-size: $resize-handler-size + ($grid-size-small * 2); // Make the resize handle container larger so there's a larger grabbable area.
 
 // Blocks
 $block-left-border-width: $border-width * 3;
@@ -82,6 +78,11 @@ $block-selected-vertical-margin-child: $block-edge-to-content;
 // Buttons & UI Widgets
 $radius-round-rectangle: 4px;
 $radius-round: 50%;
+$icon-button-size: 36px;
+$icon-button-size-small: 24px;
+$resize-handler-size: 15px;
+$resize-handler-container-size: $resize-handler-size + ($grid-size-small * 2); // Make the resize handle container larger so there's a larger grabbable area.
+$spinner-size: 18px;
 
 // Widgets screen
 $widget-area-width: 700px;

packages/block-editor/src/components/link-control/index.js

@@ -150,10 +150,6 @@ function LinkControl( {
 		setInputValue( val );
 	};
 
-	const resetInput = () => {
-		setInputValue( '' );
-	};
-
 	const handleDirectEntry = ( val ) => {
 		let type = 'URL';
 
@@ -323,7 +319,6 @@ function LinkControl( {
 					} }
 					renderSuggestions={ renderSearchResults }
 					fetchSuggestions={ getSearchHandler }
-					onReset={ resetInput }
 					showInitialSuggestions={ showInitialSuggestions }
 				/>
 			) : (

packages/block-editor/src/components/link-control/search-input.js

@@ -35,7 +35,6 @@ const LinkControlSearchInput = ( {
 	onSelect,
 	renderSuggestions,
 	fetchSuggestions,
-	onReset,
 	showInitialSuggestions,
 } ) => {
 	const [ selectedSuggestion, setSelectedSuggestion ] = useState();
@@ -73,15 +72,14 @@ const LinkControlSearchInput = ( {
 				__experimentalHandleURLSuggestions={ true }
 				__experimentalShowInitialSuggestions={ showInitialSuggestions }
 			/>
-
-			<Button
-				disabled={ ! value.length }
-				type="reset"
-				label={ __( 'Reset' ) }
-				icon="no-alt"
-				className="block-editor-link-control__search-reset"
-				onClick={ onReset }
-			/>
+			<div className="block-editor-link-control__search-actions">
+				<Button
+					type="submit"
+					label={ __( 'Submit' ) }
+					icon="editor-break"
+					className="block-editor-link-control__search-submit"
+				/>
+			</div>
 		</form>
 	);
 };

packages/block-editor/src/components/link-control/style.scss

@@ -1,3 +1,5 @@
+$block-editor-link-control-number-of-actions: 1;
+
 .block-editor-link-control {
 	position: relative;
 	min-width: $modal-min-width;
@@ -11,9 +13,8 @@
 		display: block;
 		padding: 11px $grid-size-large;
 		margin: $grid-size-large;
-		padding-right: 38px; // width of reset button
+		padding-right: ( $icon-button-size * $block-editor-link-control-number-of-actions ); // width of reset and submit buttons
 		position: relative;
-		z-index: 1;
 		border: 1px solid #e1e1e1;
 		border-radius: $radius-round-rectangle;
 
@@ -30,11 +31,20 @@
 	}
 }
 
-.block-editor-link-control__search-reset {
+.block-editor-link-control__search-actions {
 	position: absolute;
-	top: 19px; // has to be hard coded as form expands with search suggestions
-	right: 19px; // push away to avoid focus style obscuring input border
-	z-index: 10;
+	/*
+	 * Actions must be positioned on top of URLInput, since the input will grow
+	 * when suggestions are rendered.
+	 *
+	 * Compensate for:
+	 *  - Input margin ($grid-size-large)
+	 *  - Border (1px)
+	 *  - Vertically, for the difference in height between the input (40px) and
+	 *    the icon buttons.
+	 */
+	top: $grid-size-large + 1px + ( ( 40px - $icon-button-size ) / 2 );
+	right: $grid-size-large + 1px;
 }
 
 .block-editor-link-control__search-results-wrapper {
@@ -196,14 +206,25 @@
 
 .block-editor-link-control .block-editor-link-control__search-input .components-spinner {
 	display: block;
-	z-index: 100;
 
 	&.components-spinner { // Specificity override.
 		position: absolute;
-		top: 27px;
 		left: auto;
-		right: 60px;
-		bottom: 0;
+		bottom: auto;
+		/*
+		 * Position spinner to the left of the actions.
+		 *
+		 * Compensate for:
+		 *  - Input margin ($grid-size-large)
+		 *  - Border (1px)
+		 *  - Vertically, for the difference in height between the input (40px)
+		 *    and the spinner.
+		 *  - Horizontally, adjust for the width occupied by the icon buttons,
+		 *    then artificially create spacing that mimics as if the spinner
+		 *    were center-padded to the same width as an icon button.
+		 */
+		top: $grid-size-large + 1px + ( ( 40px - $spinner-size ) / 2 );
+		right: $grid-size-large + 1px + ( $icon-button-size * $block-editor-link-control-number-of-actions ) + ( ( $icon-button-size - $spinner-size ) / 2 );
 	}
 }
 

packages/block-editor/src/components/link-control/test/__snapshots__/index.js.snap

@@ -1,3 +1,3 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`Basic rendering should render 1`] = `"<div tabindex=\\"-1\\" class=\\"block-editor-link-control\\"><form><div class=\\"components-base-control block-editor-url-input block-editor-link-control__search-input\\"><div class=\\"components-base-control__field\\"><input type=\\"text\\" aria-label=\\"URL\\" required=\\"\\" placeholder=\\"Search or type url\\" role=\\"combobox\\" aria-expanded=\\"false\\" aria-autocomplete=\\"list\\" aria-owns=\\"block-editor-url-input-suggestions-0\\" value=\\"\\"></div></div><button type=\\"reset\\" disabled=\\"\\" class=\\"components-button block-editor-link-control__search-reset has-icon\\" aria-label=\\"Reset\\"><svg aria-hidden=\\"true\\" role=\\"img\\" focusable=\\"false\\" xmlns=\\"http://www.w3.org/2000/svg\\" width=\\"20\\" height=\\"20\\" viewBox=\\"0 0 20 20\\" class=\\"dashicon dashicons-no-alt\\"><path d=\\"M14.95 6.46L11.41 10l3.54 3.54-1.41 1.41L10 11.42l-3.53 3.53-1.42-1.42L8.58 10 5.05 6.47l1.42-1.42L10 8.58l3.54-3.53z\\"></path></svg></button></form></div>"`;
+exports[`Basic rendering should render 1`] = `"<div tabindex=\\"-1\\" class=\\"block-editor-link-control\\"><form><div class=\\"components-base-control block-editor-url-input block-editor-link-control__search-input\\"><div class=\\"components-base-control__field\\"><input type=\\"text\\" aria-label=\\"URL\\" required=\\"\\" placeholder=\\"Search or type url\\" role=\\"combobox\\" aria-expanded=\\"false\\" aria-autocomplete=\\"list\\" aria-owns=\\"block-editor-url-input-suggestions-0\\" value=\\"\\"></div></div><div class=\\"block-editor-link-control__search-actions\\"><button type=\\"submit\\" class=\\"components-button block-editor-link-control__search-submit has-icon\\" aria-label=\\"Submit\\"><svg aria-hidden=\\"true\\" role=\\"img\\" focusable=\\"false\\" xmlns=\\"http://www.w3.org/2000/svg\\" width=\\"20\\" height=\\"20\\" viewBox=\\"0 0 20 20\\" class=\\"dashicon dashicons-editor-break\\"><path d=\\"M16 4h2v9H7v3l-5-4 5-4v3h9V4z\\"></path></svg></button></div></form></div>"`;

packages/block-editor/src/components/link-control/test/index.js

@@ -217,56 +217,6 @@ describe( 'Searching for a link', () => {
 			);
 		}
 	);
-
-	it( 'should reset the input field and the search results when search term is cleared or reset', async () => {
-		const searchTerm = 'Hello world';
-
-		act( () => {
-			render( <LinkControl />, container );
-		} );
-
-		let searchResultElements;
-		let searchInput;
-
-		// Search Input UI
-		searchInput = container.querySelector( 'input[aria-label="URL"]' );
-
-		// Simulate searching for a term
-		act( () => {
-			Simulate.change( searchInput, { target: { value: searchTerm } } );
-		} );
-
-		// fetchFauxEntitySuggestions resolves on next "tick" of event loop
-		await eventLoopTick();
-
-		// TODO: select these by aria relationship to autocomplete rather than arbitary selector.
-		searchResultElements = container.querySelectorAll(
-			'[role="listbox"] [role="option"]'
-		);
-
-		// Check we have definitely rendered some suggestions
-		expect( searchResultElements ).toHaveLength(
-			fauxEntitySuggestions.length
-		);
-
-		// Grab the reset button now it's available
-		const resetUI = container.querySelector( '[aria-label="Reset"]' );
-
-		act( () => {
-			Simulate.click( resetUI );
-		} );
-
-		await eventLoopTick();
-
-		// TODO: select these by aria relationship to autocomplete rather than arbitary selector.
-		searchResultElements = container.querySelectorAll(
-			'[role="listbox"] [role="option"]'
-		);
-		searchInput = container.querySelector( 'input[aria-label="URL"]' );
-
-		expect( searchInput.value ).toBe( '' );
-		expect( searchResultElements ).toHaveLength( 0 );
-	} );
 } );
 
 describe( 'Manual link entry', () => {
@@ -458,13 +408,15 @@ describe( 'Default search suggestions', () => {
 
 		expect( mockFetchSearchSuggestions ).not.toHaveBeenCalled();
 
-		//
 		// Reset the search to empty and check the initial suggestions are now shown.
-		//
-		const resetUI = container.querySelector( '[aria-label="Reset"]' );
+		const searchInput = container.querySelector(
+			'input[aria-label="URL"]'
+		);
 
 		act( () => {
-			Simulate.click( resetUI );
+			Simulate.change( searchInput, {
+				target: { value: '' },
+			} );
 		} );
 
 		await eventLoopTick();

packages/components/src/spinner/style.scss

@@ -1,8 +1,8 @@
 .components-spinner {
 	display: inline-block;
 	background-color: $dark-gray-200;
-	width: 18px;
-	height: 18px;
+	width: $spinner-size;
+	height: $spinner-size;
 	opacity: 0.7;
 	margin: 5px 11px 0;
 	border-radius: 100%;
@@ -13,12 +13,12 @@
 		content: "";
 		position: absolute;
 		background-color: $white;
-		top: 3px;
-		left: 3px;
-		width: 4px;
-		height: 4px;
+		top: ( $spinner-size - ( $spinner-size * ( 2 / 3 ) ) ) / 2;
+		left: ( $spinner-size - ( $spinner-size * ( 2 / 3 ) ) ) / 2;
+		width: ( $spinner-size / 4.5 );
+		height: ( $spinner-size / 4.5 );
 		border-radius: 100%;
-		transform-origin: 6px 6px;
+		transform-origin: ( $spinner-size / 3 ) ( $spinner-size / 3 );
 		animation: components-spinner__animation 1s infinite linear;
 		/* rtl:end:ignore */
 	}