Add BaseControl to SearchControl

WordPress · Jun 28, 2021 · 759bc9c · 759bc9c
1 parent 1835b33
commit 759bc9c
Show file tree

Hide file tree

Showing 4 changed files with 71 additions and 32 deletions.
diff --git 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
@@ -14,50 +14,56 @@ import { useRef } from '@wordpress/element';
 /**
  * Internal dependencies
  */
-import { VisuallyHidden, Button } from '../';
+import { Button } from '../';
+import BaseControl from '../base-control';
 
 function SearchControl( {
 	className,
 	onChange,
 	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
@@ -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
@@ -46,3 +46,7 @@
 		margin: $grid-unit-10 0;
 	}
 }
+
+.components-search-control__input-wrapper {
+	position: relative;
+}