Add inside label position to InputControl

This change adds a new `LabelPosition` value of `inside` to `InputControl`, allowing consumers to render the label visually inside the field. Resolves #55963
WordPress · Nov 8, 2023 · e1ddd76 · e1ddd76
1 parent dded3a7
commit e1ddd76
Show file tree

Hide file tree

Showing 5 changed files with 48 additions and 15 deletions.
diff --git a/packages/components/src/input-control/input-base.tsx b/packages/components/src/input-control/input-base.tsx
@@ -13,7 +13,7 @@ import { forwardRef, useMemo } from '@wordpress/element';
  * Internal dependencies
  */
 import Backdrop from './backdrop';
-import Label from './label';
+import { Label, InnerLabel } from './label';
 import {
 	Container,
 	Root,
@@ -98,6 +98,13 @@ export function InputBase(
 			InputControlSuffixWrapper: { paddingRight },
 		};
 	}, [ paddingLeft, paddingRight ] );
+	const labelProps = {
+		className: 'components-input-control__label',
+		htmlFor: id,
+		hideLabelFromVision,
+		labelPosition,
+	};
+	const labelInside = labelPosition === 'inside';
 
 	return (
 		// @ts-expect-error The `direction` prop from Flex (FlexDirection) conflicts with legacy SVGAttributes `direction` (string) that come from React intrinsic prop definitions.
@@ -110,14 +117,7 @@ export function InputBase(
 			labelPosition={ labelPosition }
 			ref={ ref }
 		>
-			<Label
-				className="components-input-control__label"
-				hideLabelFromVision={ hideLabelFromVision }
-				labelPosition={ labelPosition }
-				htmlFor={ id }
-			>
-				{ label }
-			</Label>
+			{ ! labelInside && <Label { ...labelProps }>{ label }</Label> }
 			<Container
 				__unstableInputWidth={ __unstableInputWidth }
 				className="components-input-control__container"
@@ -126,6 +126,9 @@ export function InputBase(
 				labelPosition={ labelPosition }
 			>
 				<ContextSystemProvider value={ prefixSuffixContextValue }>
+					{ labelInside && (
+						<InnerLabel { ...labelProps }>{ label }</InnerLabel>
+					) }
 					{ prefix && (
 						<Prefix className="components-input-control__prefix">
 							{ prefix }

diff --git a/packages/components/src/input-control/label.tsx b/packages/components/src/input-control/label.tsx
@@ -1,15 +1,17 @@
 /**
  * Internal dependencies
  */
+import InputControlPrefixWrapper from './input-prefix-wrapper';
 import { VisuallyHidden } from '../visually-hidden';
 import {
 	Label as BaseLabel,
 	LabelWrapper,
+	InnerLabelWrapper,
 } from './styles/input-control-styles';
 import type { WordPressComponentProps } from '../context';
 import type { InputControlLabelProps } from './types';
 
-export default function Label( {
+export function Label( {
 	children,
 	hideLabelFromVision,
 	htmlFor,
@@ -33,3 +35,15 @@ export default function Label( {
 		</LabelWrapper>
 	);
 }
+
+export function InnerLabel( {
+	children,
+	htmlFor,
+	...props
+}: WordPressComponentProps< InputControlLabelProps, 'label', false > ) {
+	return (
+		<InnerLabelWrapper htmlFor={ htmlFor } { ...props }>
+			<InputControlPrefixWrapper>{ children }</InputControlPrefixWrapper>
+		</InnerLabelWrapper>
+	);
+}
diff --git a/packages/components/src/input-control/stories/index.story.tsx b/packages/components/src/input-control/stories/index.story.tsx
@@ -81,3 +81,9 @@ WithEdgeLabel.args = {
 	__unstableInputWidth: '20em',
 	labelPosition: 'edge',
 };
+
+export const WithInsideLabel = Template.bind( {} );
+WithInsideLabel.args = {
+	...Default.args,
+	labelPosition: 'inside',
+};
diff --git a/packages/components/src/input-control/styles/input-control-styles.tsx b/packages/components/src/input-control/styles/input-control-styles.tsx
@@ -68,7 +68,7 @@ const containerWidthStyles = ( {
 };
 
 export const Container = styled.div< ContainerProps >`
-	align-items: center;
+	align-items: stretch;
 	box-sizing: border-box;
 	border-radius: inherit;
 	display: flex;
@@ -259,6 +259,14 @@ export const LabelWrapper = styled( FlexItem )`
 	max-width: calc( 100% - 10px );
 `;
 
+export const InnerLabelWrapper = styled.label`
+	${ baseLabelTypography };
+
+	display: flex;
+	align-items: center;
+	white-space: nowrap;
+`;
+
 type BackdropProps = {
 	disabled?: boolean;
 	isFocused?: boolean;
@@ -315,12 +323,14 @@ export const BackdropUI = styled.div< BackdropProps >`
 
 export const Prefix = styled.span`
 	box-sizing: border-box;
-	display: block;
+	display: flex;
+	align-items: center;
+	align-self: stretch;
 `;
 
 export const Suffix = styled.span`
-	align-items: center;
-	align-self: stretch;
 	box-sizing: border-box;
 	display: flex;
+	align-items: center;
+	align-self: stretch;
 `;
diff --git a/packages/components/src/input-control/types.ts b/packages/components/src/input-control/types.ts
@@ -17,7 +17,7 @@ import type { WordPressComponentProps } from '../context';
 import type { FlexProps } from '../flex/types';
 import type { BaseControlProps } from '../base-control/types';
 
-export type LabelPosition = 'top' | 'bottom' | 'side' | 'edge';
+export type LabelPosition = 'top' | 'bottom' | 'side' | 'edge' | 'inside';
 
 export type DragDirection = 'n' | 's' | 'e' | 'w';