Add a SearchControl component and reuse accross the UI (#32935)

docs/manifest.json

@@ -1145,6 +1145,12 @@
 		"markdown_source": "../packages/components/src/scrollable/README.md",
 		"parent": "components"
 	},
+	{
+		"title": "SearchControl",
+		"slug": "search-control",
+		"markdown_source": "../packages/components/src/search-control/README.md",
+		"parent": "components"
+	},
 	{
 		"title": "SelectControl",
 		"slug": "select-control",

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

@@ -121,7 +121,6 @@ export { default as DefaultBlockAppender } from './default-block-appender';
 export { default as __unstableEditorStyles } from './editor-styles';
 export { default as Inserter } from './inserter';
 export { default as __experimentalLibrary } from './inserter/library';
-export { default as __experimentalSearchForm } from './inserter/search-form';
 export { default as BlockEditorKeyboardShortcuts } from './keyboard-shortcuts';
 export { MultiSelectScrollIntoView } from './selection-scroll-into-view';
 export { default as NavigableToolbar } from './navigable-toolbar';

packages/block-editor/src/components/inserter/menu.js

@@ -2,15 +2,14 @@
  * WordPress dependencies
  */
 import { useState, useCallback, useMemo } from '@wordpress/element';
-import { VisuallyHidden } from '@wordpress/components';
+import { VisuallyHidden, SearchControl } from '@wordpress/components';
 import { __ } from '@wordpress/i18n';
 import { useSelect } from '@wordpress/data';
 
 /**
  * Internal dependencies
  */
 import Tips from './tips';
-import InserterSearchForm from './search-form';
 import InserterPreviewPanel from './preview-panel';
 import BlockTypesTab from './block-types-tab';
 import BlockPatternsTabs from './block-patterns-tab';
@@ -171,7 +170,8 @@ function InserterMenu( {
 			<div className="block-editor-inserter__main-area">
 				{ /* the following div is necessary to fix the sticky position of the search form */ }
 				<div className="block-editor-inserter__content">
-					<InserterSearchForm
+					<SearchControl
+						className="block-editor-inserter__search"
 						onChange={ ( value ) => {
 							if ( hoveredItem ) setHoveredItem( null );
 							setFilterValue( value );

packages/block-editor/src/components/inserter/menu.native.js

@@ -14,13 +14,16 @@ import {
 import { useEffect, useState, useCallback } from '@wordpress/element';
 import { useSelect, useDispatch } from '@wordpress/data';
 import { createBlock } from '@wordpress/blocks';
-import { BottomSheet, BottomSheetConsumer } from '@wordpress/components';
+import {
+	BottomSheet,
+	BottomSheetConsumer,
+	SearchControl,
+} from '@wordpress/components';
 
 /**
  * Internal dependencies
  */
 import InserterSearchResults from './search-results';
-import InserterSearchForm from './search-form';
 import { store as blockEditorStore } from '../../store';
 import InserterTabs from './tabs';
 import styles from './style.scss';
@@ -192,7 +195,7 @@ function InserterMenu( {
 			header={
 				<>
 					{ showSearchForm && (
-						<InserterSearchForm
+						<SearchControl
 							onChange={ onChangeSearch }
 							value={ filterValue }
 						/>

packages/block-editor/src/components/inserter/quick-inserter.js

@@ -8,13 +8,12 @@ import classnames from 'classnames';
  */
 import { useState, useEffect } from '@wordpress/element';
 import { __ } from '@wordpress/i18n';
-import { Button } from '@wordpress/components';
+import { Button, SearchControl } from '@wordpress/components';
 import { useSelect } from '@wordpress/data';
 
 /**
  * Internal dependencies
  */
-import InserterSearchForm from './search-form';
 import InserterSearchResults from './search-results';
 import useInsertionPoint from './hooks/use-insertion-point';
 import usePatternsState from './hooks/use-patterns-state';
@@ -87,7 +86,8 @@ export default function QuickInserter( {
 			} ) }
 		>
 			{ showSearch && (
-				<InserterSearchForm
+				<SearchControl
+					className="block-editor-inserter__search"
 					value={ filterValue }
 					onChange={ ( value ) => {
 						setFilterValue( value );

packages/block-editor/src/components/inserter/style.native.scss

@@ -13,37 +13,6 @@
 	padding-top: 8;
 }
 
-.searchForm {
-	height: 46px;
-	border-radius: 8px;
-	color: $gray-dark;
-	margin: $grid-unit-30;
-	background-color: $gray-light;
-	flex-direction: row;
-	justify-content: space-between;
-}
-
-.searchFormDark {
-	background-color: rgba($white, 0.07);
-}
-
-.searchFormInput {
-	color: $gray-dark;
-	flex: 2;
-}
-
-.searchFormInputDark {
-	color: $white;
-}
-
-.searchFormPlaceholder {
-	color: $gray;
-}
-
-.searchFormPlaceholderDark {
-	color: rgba($white, 0.8);
-}
-
 .inserter-tabs__wrapper {
 	overflow: hidden;
 }

packages/block-editor/src/components/inserter/style.scss

@@ -99,55 +99,14 @@ $block-inserter-tabs-height: 44px;
 }
 
 .block-editor-inserter__search {
+	background: $white;
 	padding: $grid-unit-20;
 	position: sticky;
 	top: 0;
-	background: $white;
 	z-index: z-index(".block-editor-inserter__search");
 
-	input[type="search"].block-editor-inserter__search-input {
-		@include input-control;
-		display: block;
-		padding: $grid-unit-20 $grid-unit-60 $grid-unit-20 $grid-unit-20;
-		background: $gray-100;
-		border: none;
-		width: 100%;
-		height: $grid-unit-60;
-
-		/* Fonts smaller than 16px causes mobile safari to zoom. */
-		font-size: $mobile-text-min-font-size;
-		@include break-small {
-			font-size: $default-font-size;
-		}
-
-		&:focus {
-			background: $white;
-			box-shadow: 0 0 0 var(--wp-admin-border-width-focus) var(--wp-admin-theme-color);
-		}
-
-		&::placeholder {
-			color: $gray-700;
-		}
-
-		&::-webkit-search-decoration,
-		&::-webkit-search-cancel-button,
-		&::-webkit-search-results-button,
-		&::-webkit-search-results-decoration {
-			-webkit-appearance: none;
-		}
-	}
-}
-
-.block-editor-inserter__search-icon {
-	position: absolute;
-	top: 0;
-	right: $grid-unit-10 + ($grid-unit-60 - $icon-size) / 2;
-	bottom: 0;
-	display: flex;
-	align-items: center;
-
-	> svg {
-		margin: $grid-unit-10;
+	.components-search-control__icon {
+		right: $grid-unit-10 + ($grid-unit-60 - $icon-size) / 2;
 	}
 }
 

packages/block-library/src/template-part/edit/selection/index.js

@@ -1,7 +1,7 @@
 /**
  * WordPress dependencies
  */
-import { __experimentalSearchForm as SearchForm } from '@wordpress/block-editor';
+import { SearchControl } from '@wordpress/components';
 import { useState } from '@wordpress/element';
 import { LEFT, RIGHT, UP, DOWN, BACKSPACE, ENTER } from '@wordpress/keycodes';
 /**
@@ -34,7 +34,7 @@ export default function TemplatePartSelection( {
 			onKeyPress={ stopKeyPropagation }
 			onKeyDown={ preventArrowKeysPropagation }
 		>
-			<SearchForm
+			<SearchControl
 				value={ filterValue }
 				onChange={ setFilterValue }
 				className="wp-block-template-part__selection-preview-search-form"

packages/components/src/index.js

@@ -108,6 +108,7 @@ export { default as RangeControl } from './range-control';
 export { default as ResizableBox } from './resizable-box';
 export { default as ResponsiveWrapper } from './responsive-wrapper';
 export { default as SandBox } from './sandbox';
+export { default as SearchControl } from './search-control';
 export { default as SelectControl } from './select-control';
 export { default as Snackbar } from './snackbar';
 export { default as SnackbarList } from './snackbar/list';

packages/components/src/index.native.js

@@ -40,6 +40,7 @@ export { default as __experimentalText } from './text';
 export { default as ExternalLink } from './external-link';
 export { default as TextControl } from './text-control';
 export { default as ToggleControl } from './toggle-control';
+export { default as SearchControl } from './search-control';
 export { default as SelectControl } from './select-control';
 export { default as RangeControl } from './range-control';
 export { default as ResizableBox } from './resizable-box';

packages/components/src/search-control/README.md

@@ -0,0 +1,87 @@
+# SearchControl
+
+SearchControl components let users display a search control.
+
+
+## Table of contents
+
+1. [Development guidelines](#development-guidelines)
+2. [Related components](#related-components)
+
+## Development guidelines
+
+### Usage
+
+Render a user interface to input the name of an additional css class.
+
+```js
+import { SearchControl } from '@wordpress/components';
+import { useState } from '@wordpress/element';
+
+function MySearchControl( { className, setState } ) {
+    const [ searchInput, setSearchInput ] = useState( '' );
+
+    return (
+        <SearchControl
+            value={ searchInput }
+            onChange={ setSearchInput }
+        />
+    );
+}
+```
+
+### Props
+
+The set of props accepted by the component will be specified below.
+Props not included in this set will be applied to the input element.
+
+#### label
+
+If this property is added, a label will be generated using label property as the content.
+
+-   Type: `String`
+-   Required: Yes
+
+#### placeholder
+
+If this property is added, a specific placeholder will be used for the input.
+
+-   Type: `String`
+-   Required: No
+#### value
+
+The current value of the input.
+
+-   Type: `String | Number`
+-   Required: Yes
+
+#### className
+
+The class that will be added to the classes of the wrapper div.
+
+-   Type: `String`
+-   Required: No
+
+#### onChange
+
+A function that receives the value of the input.
+
+-   Type: `function`
+-   Required: Yes
+
+#### help
+
+If this property is added, a help text will be generated using help property as the content.
+
+-   Type: `String|WPElement`
+-   Required: No
+### hideLabelFromVision
+
+If true, the label will only be visible to screen readers.
+
+-   Type: `Boolean`
+-   Required: No
+
+## Related components
+
+-   To offer users more constrained options for input, use TextControl, SelectControl, RadioControl, CheckboxControl, or RangeControl.