From 759bc9c414ecd959384b4d6413ef2c930db03eee Mon Sep 17 00:00:00 2001
From: Riad Benguella <benguella@gmail.com>
Date: Mon, 28 Jun 2021 10:19:38 +0100
Subject: [PATCH] Add BaseControl to SearchControl

---
 .../components/src/search-control/README.md   | 13 ++++
 .../components/src/search-control/index.js    | 68 ++++++++++---------
 .../src/search-control/stories/index.js       | 18 ++++-
 .../components/src/search-control/style.scss  |  4 ++
 4 files changed, 71 insertions(+), 32 deletions(-)

diff --git a/packages/components/src/search-control/README.md b/packages/components/src/search-control/README.md
index 8324d587f3592..da70164dfad85 100644
--- a/packages/components/src/search-control/README.md
+++ b/packages/components/src/search-control/README.md
@@ -69,6 +69,19 @@ 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.
diff --git a/packages/components/src/search-control/index.js b/packages/components/src/search-control/index.js
index e871a55a938c9..fc0bd900f3b15 100644
--- a/packages/components/src/search-control/index.js
+++ b/packages/components/src/search-control/index.js
@@ -14,7 +14,8 @@ import { useRef } from '@wordpress/element';
 /**
  * Internal dependencies
  */
-import { VisuallyHidden, Button } from '../';
+import { Button } from '../';
+import BaseControl from '../base-control';
 
 function SearchControl( {
 	className,
@@ -22,42 +23,47 @@ function SearchControl( {
 	value,
 	label,
 	placeholder = __( 'Search' ),
+	hideLabelFromVision = true,
+	help,
 } ) {
 	const instanceId = useInstanceId( SearchControl );
 	const searchInput = useRef();
+	const id = `components-search-control-${ instanceId }`;
 
 	return (
-		<div className={ classnames( 'components-search-control', className ) }>
-			<VisuallyHidden
-				as="label"
-				htmlFor={ `components-search-control-${ instanceId }` }
-			>
-				{ label || placeholder }
-			</VisuallyHidden>
-			<input
-				ref={ searchInput }
-				className="components-search-control__input"
-				id={ `components-search-control-${ instanceId }` }
-				type="search"
-				placeholder={ placeholder }
-				onChange={ ( event ) => onChange( event.target.value ) }
-				autoComplete="off"
-				value={ value || '' }
-			/>
-			<div className="components-search-control__icon">
-				{ !! value && (
-					<Button
-						icon={ closeSmall }
-						label={ __( 'Reset search' ) }
-						onClick={ () => {
-							onChange( '' );
-							searchInput.current.focus();
-						} }
-					/>
-				) }
-				{ ! value && <Icon icon={ search } /> }
+		<BaseControl
+			label={ label }
+			id={ id }
+			hideLabelFromVision={ hideLabelFromVision }
+			help={ help }
+			className={ classnames( className, 'components-search-control' ) }
+		>
+			<div className="components-search-control__input-wrapper">
+				<input
+					ref={ searchInput }
+					className="components-search-control__input"
+					id={ id }
+					type="search"
+					placeholder={ placeholder }
+					onChange={ ( event ) => onChange( event.target.value ) }
+					autoComplete="off"
+					value={ value || '' }
+				/>
+				<div className="components-search-control__icon">
+					{ !! value && (
+						<Button
+							icon={ closeSmall }
+							label={ __( 'Reset search' ) }
+							onClick={ () => {
+								onChange( '' );
+								searchInput.current.focus();
+							} }
+						/>
+					) }
+					{ ! value && <Icon icon={ search } /> }
+				</div>
 			</div>
-		</div>
+		</BaseControl>
 	);
 }
 
diff --git a/packages/components/src/search-control/stories/index.js b/packages/components/src/search-control/stories/index.js
index 355d9d0c7514a..2710542a5d6a2 100644
--- a/packages/components/src/search-control/stories/index.js
+++ b/packages/components/src/search-control/stories/index.js
@@ -1,3 +1,8 @@
+/**
+ * External dependencies
+ */
+import { boolean, text } from '@storybook/addon-knobs';
+
 /**
  * WordPress dependencies
  */
@@ -15,6 +20,17 @@ export default {
 
 export const _default = () => {
 	const [ value, setValue ] = useState();
+	const label = text( 'Label', 'Label Text' );
+	const hideLabelFromVision = boolean( 'Hide Label From Vision', true );
+	const help = text( 'Help Text', 'Help text to explain the input.' );
 
-	return <SearchControl value={ value } onChange={ setValue } />;
+	return (
+		<SearchControl
+			label={ label }
+			hideLabelFromVision={ hideLabelFromVision }
+			help={ help }
+			value={ value }
+			onChange={ setValue }
+		/>
+	);
 };
diff --git a/packages/components/src/search-control/style.scss b/packages/components/src/search-control/style.scss
index d6786f36566e9..247b726fc9dd9 100644
--- a/packages/components/src/search-control/style.scss
+++ b/packages/components/src/search-control/style.scss
@@ -46,3 +46,7 @@
 		margin: $grid-unit-10 0;
 	}
 }
+
+.components-search-control__input-wrapper {
+	position: relative;
+}