[InputControl] Add prefix prop

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

@@ -66,6 +66,13 @@ A function that receives the value of the input.
 -   Type: `Function`
 -   Required: Yes
 
+### prefix
+
+Renders an element on the left side of the input.
+
+-   Type: `React.ReactNode`
+-   Required: No
+
 ### size
 
 Adjusts the size of the input.

packages/components/src/input-control/index.js

@@ -16,7 +16,7 @@ import { useState, forwardRef } from '@wordpress/element';
 import Backdrop from './backdrop';
 import InputField from './input-field';
 import Label from './label';
-import { Container, Root, Suffix } from './styles/input-control-styles';
+import { Container, Root, Prefix, Suffix } from './styles/input-control-styles';
 import { isValueEmpty } from '../utils/values';
 
 function useUniqueId( idProp ) {
@@ -42,6 +42,7 @@ export function InputControl(
 		onFocus = noop,
 		onValidate = noop,
 		onKeyDown = noop,
+		prefix,
 		size = 'default',
 		suffix,
 		value,
@@ -93,6 +94,11 @@ export function InputControl(
 				disabled={ disabled }
 				isFocused={ isFocused }
 			>
+				{ prefix && (
+					<Prefix className="components-input-control__prefix">
+						{ prefix }
+					</Prefix>
+				) }
 				<InputField
 					{ ...props }
 					className="components-input-control__input"

packages/components/src/input-control/stories/index.js

@@ -37,14 +37,17 @@ function Example() {
 			'default'
 		),
 		suffix: text( 'suffix', '' ),
+		prefix: text( 'prefix', '' ),
 	};
 
 	const suffixMarkup = props.suffix ? <div>{ props.suffix }</div> : null;
+	const prefixMarkup = props.prefix ? <div>{ props.prefix }</div> : null;
 
 	return (
 		<InputControl
 			{ ...props }
 			onChange={ ( v ) => setValue( v ) }
+			prefix={ prefixMarkup }
 			suffix={ suffixMarkup }
 			value={ value }
 		/>

packages/components/src/input-control/styles/input-control-styles.js

@@ -352,6 +352,11 @@ export const LegendText = ( props ) => (
 	<BaseLegendText { ...props } as="span" />
 );
 
+export const Prefix = styled.span`
+	box-sizing: border-box;
+	display: block;
+`;
+
 export const Suffix = styled.span`
 	box-sizing: border-box;
 	display: block;