@wordpress/components 25.15.0 → 25.16.0

package/src/box-control/all-input-control.tsx

@@ -1,42 +1,56 @@
+/**
+ * WordPress dependencies
+ */
+import { useInstanceId } from '@wordpress/compose';
 /**
  * Internal dependencies
  */
 import type { UnitControlProps } from '../unit-control/types';
+import {
+	FlexedRangeControl,
+	StyledUnitControl,
+} from './styles/box-control-styles';
+import { HStack } from '../h-stack';
 import type { BoxControlInputControlProps } from './types';
-import UnitControl from './unit-control';
+import { parseQuantityAndUnitFromRawValue } from '../unit-control';
 import {
 	LABELS,
 	applyValueToSides,
 	getAllValue,
 	isValuesMixed,
 	isValuesDefined,
+	CUSTOM_VALUE_SETTINGS,
 } from './utils';
 
 const noop = () => {};
 
 export default function AllInputControl( {
+	__next40pxDefaultSize,
 	onChange = noop,
 	onFocus = noop,
-	onHoverOn = noop,
-	onHoverOff = noop,
 	values,
 	sides,
 	selectedUnits,
 	setSelectedUnits,
 	...props
 }: BoxControlInputControlProps ) {
+	const inputId = useInstanceId( AllInputControl, 'box-control-input-all' );
+
 	const allValue = getAllValue( values, selectedUnits, sides );
 	const hasValues = isValuesDefined( values );
 	const isMixed = hasValues && isValuesMixed( values, selectedUnits, sides );
 	const allPlaceholder = isMixed ? LABELS.mixed : undefined;
 
+	const [ parsedQuantity, parsedUnit ] =
+		parseQuantityAndUnitFromRawValue( allValue );
+
 	const handleOnFocus: React.FocusEventHandler< HTMLInputElement > = (
 		event
 	) => {
 		onFocus( event, { side: 'all' } );
 	};
 
-	const handleOnChange: UnitControlProps[ 'onChange' ] = ( next ) => {
+	const onValueChange = ( next?: string ) => {
 		const isNumeric = next !== undefined && ! isNaN( parseFloat( next ) );
 		const nextValue = isNumeric ? next : undefined;
 		const nextValues = applyValueToSides( values, nextValue, sides );
@@ -44,6 +58,12 @@ export default function AllInputControl( {
 		onChange( nextValues );
 	};
 
+	const sliderOnChange = ( next?: number ) => {
+		onValueChange(
+			next !== undefined ? [ next, parsedUnit ].join( '' ) : undefined
+		);
+	};
+
 	// Set selected unit so it can be used as fallback by unlinked controls
 	// when individual sides do not have a value containing a unit.
 	const handleOnUnitChange: UnitControlProps[ 'onUnitChange' ] = ( unit ) => {
@@ -51,36 +71,39 @@ export default function AllInputControl( {
 		setSelectedUnits( newUnits );
 	};
 
-	const handleOnHoverOn = () => {
-		onHoverOn( {
-			top: true,
-			bottom: true,
-			left: true,
-			right: true,
-		} );
-	};
-
-	const handleOnHoverOff = () => {
-		onHoverOff( {
-			top: false,
-			bottom: false,
-			left: false,
-			right: false,
-		} );
-	};
-
 	return (
-		<UnitControl
-			{ ...props }
-			disableUnits={ isMixed }
-			isOnly
-			value={ allValue }
-			onChange={ handleOnChange }
-			onUnitChange={ handleOnUnitChange }
-			onFocus={ handleOnFocus }
-			onHoverOn={ handleOnHoverOn }
-			onHoverOff={ handleOnHoverOff }
-			placeholder={ allPlaceholder }
-		/>
+		<HStack>
+			<StyledUnitControl
+				{ ...props }
+				__next40pxDefaultSize={ __next40pxDefaultSize }
+				className="component-box-control__unit-control"
+				disableUnits={ isMixed }
+				id={ inputId }
+				isPressEnterToChange
+				value={ allValue }
+				onChange={ onValueChange }
+				onUnitChange={ handleOnUnitChange }
+				onFocus={ handleOnFocus }
+				placeholder={ allPlaceholder }
+				label={ LABELS.all }
+				hideLabelFromVision
+			/>
+
+			<FlexedRangeControl
+				__nextHasNoMarginBottom
+				__next40pxDefaultSize={ __next40pxDefaultSize }
+				aria-controls={ inputId }
+				label={ LABELS.all }
+				hideLabelFromVision
+				onChange={ sliderOnChange }
+				min={ 0 }
+				max={ CUSTOM_VALUE_SETTINGS[ parsedUnit ?? 'px' ]?.max ?? 10 }
+				step={
+					CUSTOM_VALUE_SETTINGS[ parsedUnit ?? 'px' ]?.step ?? 0.1
+				}
+				value={ parsedQuantity ?? 0 }
+				withInputField={ false }
+			/>
+		</HStack>
 	);
 }

package/src/box-control/axial-input-controls.tsx

@@ -1,26 +1,39 @@
+/**
+ * WordPress dependencies
+ */
+import { useInstanceId } from '@wordpress/compose';
 /**
  * Internal dependencies
  */
 import { parseQuantityAndUnitFromRawValue } from '../unit-control/utils';
-import UnitControl from './unit-control';
-import { LABELS } from './utils';
-import { Layout } from './styles/box-control-styles';
+import Tooltip from '../tooltip';
+import { CUSTOM_VALUE_SETTINGS, LABELS } from './utils';
+import {
+	FlexedBoxControlIcon,
+	FlexedRangeControl,
+	InputWrapper,
+	StyledUnitControl,
+} from './styles/box-control-styles';
 import type { BoxControlInputControlProps } from './types';
 
 const groupedSides = [ 'vertical', 'horizontal' ] as const;
 type GroupedSide = ( typeof groupedSides )[ number ];
 
 export default function AxialInputControls( {
+	__next40pxDefaultSize,
 	onChange,
 	onFocus,
-	onHoverOn,
-	onHoverOff,
 	values,
 	selectedUnits,
 	setSelectedUnits,
 	sides,
 	...props
 }: BoxControlInputControlProps ) {
+	const generatedId = useInstanceId(
+		AxialInputControls,
+		`box-control-input`
+	);
+
 	const createHandleOnFocus =
 		( side: GroupedSide ) =>
 		( event: React.FocusEvent< HTMLInputElement > ) => {
@@ -30,43 +43,7 @@ export default function AxialInputControls( {
 			onFocus( event, { side } );
 		};
 
-	const createHandleOnHoverOn = ( side: GroupedSide ) => () => {
-		if ( ! onHoverOn ) {
-			return;
-		}
-		if ( side === 'vertical' ) {
-			onHoverOn( {
-				top: true,
-				bottom: true,
-			} );
-		}
-		if ( side === 'horizontal' ) {
-			onHoverOn( {
-				left: true,
-				right: true,
-			} );
-		}
-	};
-
-	const createHandleOnHoverOff = ( side: GroupedSide ) => () => {
-		if ( ! onHoverOff ) {
-			return;
-		}
-		if ( side === 'vertical' ) {
-			onHoverOff( {
-				top: false,
-				bottom: false,
-			} );
-		}
-		if ( side === 'horizontal' ) {
-			onHoverOff( {
-				left: false,
-				right: false,
-			} );
-		}
-	};
-
-	const createHandleOnChange = ( side: GroupedSide ) => ( next?: string ) => {
+	const handleOnValueChange = ( side: GroupedSide, next?: string ) => {
 		if ( ! onChange ) {
 			return;
 		}
@@ -109,16 +86,8 @@ export default function AxialInputControls( {
 		? groupedSides.filter( ( side ) => sides.includes( side ) )
 		: groupedSides;
 
-	const first = filteredSides[ 0 ];
-	const last = filteredSides[ filteredSides.length - 1 ];
-	const only = first === last && first;
-
 	return (
-		<Layout
-			gap={ 0 }
-			align="top"
-			className="component-box-control__vertical-horizontal-input-controls"
-		>
+		<>
 			{ filteredSides.map( ( side ) => {
 				const [ parsedQuantity, parsedUnit ] =
 					parseQuantityAndUnitFromRawValue(
@@ -128,26 +97,67 @@ export default function AxialInputControls( {
 					side === 'vertical'
 						? selectedUnits.top
 						: selectedUnits.left;
+
+				const inputId = [ generatedId, side ].join( '-' );
+
 				return (
-					<UnitControl
-						{ ...props }
-						isFirst={ first === side }
-						isLast={ last === side }
-						isOnly={ only === side }
-						value={ [
-							parsedQuantity,
-							selectedUnit ?? parsedUnit,
-						].join( '' ) }
-						onChange={ createHandleOnChange( side ) }
-						onUnitChange={ createHandleOnUnitChange( side ) }
-						onFocus={ createHandleOnFocus( side ) }
-						onHoverOn={ createHandleOnHoverOn( side ) }
-						onHoverOff={ createHandleOnHoverOff( side ) }
-						label={ LABELS[ side ] }
-						key={ side }
-					/>
+					<InputWrapper key={ side }>
+						<FlexedBoxControlIcon side={ side } sides={ sides } />
+						<Tooltip placement="top-end" text={ LABELS[ side ] }>
+							<StyledUnitControl
+								{ ...props }
+								__next40pxDefaultSize={ __next40pxDefaultSize }
+								className="component-box-control__unit-control"
+								id={ inputId }
+								isPressEnterToChange
+								value={ [
+									parsedQuantity,
+									selectedUnit ?? parsedUnit,
+								].join( '' ) }
+								onChange={ ( newValue ) =>
+									handleOnValueChange( side, newValue )
+								}
+								onUnitChange={ createHandleOnUnitChange(
+									side
+								) }
+								onFocus={ createHandleOnFocus( side ) }
+								label={ LABELS[ side ] }
+								hideLabelFromVision
+								key={ side }
+							/>
+						</Tooltip>
+						<FlexedRangeControl
+							__nextHasNoMarginBottom
+							__next40pxDefaultSize={ __next40pxDefaultSize }
+							aria-controls={ inputId }
+							label={ LABELS[ side ] }
+							hideLabelFromVision
+							onChange={ ( newValue ) =>
+								handleOnValueChange(
+									side,
+									newValue !== undefined
+										? [
+												newValue,
+												selectedUnit ?? parsedUnit,
+										  ].join( '' )
+										: undefined
+								)
+							}
+							min={ 0 }
+							max={
+								CUSTOM_VALUE_SETTINGS[ selectedUnit ?? 'px' ]
+									?.max ?? 10
+							}
+							step={
+								CUSTOM_VALUE_SETTINGS[ selectedUnit ?? 'px' ]
+									?.step ?? 0.1
+							}
+							value={ parsedQuantity ?? 0 }
+							withInputField={ false }
+						/>
+					</InputWrapper>
 				);
 			} ) }
-		</Layout>
+		</>
 	);
 }

package/src/box-control/index.tsx

@@ -9,17 +9,16 @@ import { __ } from '@wordpress/i18n';
  * Internal dependencies
  */
 import { BaseControl } from '../base-control';
-import Button from '../button';
-import { FlexItem, FlexBlock } from '../flex';
 import AllInputControl from './all-input-control';
 import InputControls from './input-controls';
 import AxialInputControls from './axial-input-controls';
-import BoxControlIcon from './icon';
 import LinkedButton from './linked-button';
+import { Grid } from '../grid';
 import {
-	Root,
-	Header,
-	HeaderControlWrapper,
+	FlexedBoxControlIcon,
+	InputWrapper,
+	ResetButton,
+	LinkedButtonWrapper,
 } from './styles/box-control-styles';
 import { parseQuantityAndUnitFromRawValue } from '../unit-control/utils';
 import {
@@ -73,6 +72,7 @@ function useUniqueId( idProp?: string ) {
  * ```
  */
 function BoxControl( {
+	__next40pxDefaultSize = false,
 	id: idProp,
 	inputProps = defaultInputProps,
 	onChange = noop,
@@ -152,60 +152,53 @@ function BoxControl( {
 		values: inputValues,
 		onMouseOver,
 		onMouseOut,
+		__next40pxDefaultSize,
 	};
 
 	return (
-		<Root id={ id } role="group" aria-labelledby={ headingId }>
-			<Header className="component-box-control__header">
-				<FlexItem>
-					<BaseControl.VisualLabel id={ headingId }>
-						{ label }
-					</BaseControl.VisualLabel>
-				</FlexItem>
-				{ allowReset && (
-					<FlexItem>
-						<Button
-							className="component-box-control__reset-button"
-							variant="secondary"
-							size="small"
-							onClick={ handleOnReset }
-							disabled={ ! isDirty }
-						>
-							{ __( 'Reset' ) }
-						</Button>
-					</FlexItem>
-				) }
-			</Header>
-			<HeaderControlWrapper className="component-box-control__header-control-wrapper">
-				<FlexItem>
-					<BoxControlIcon side={ side } sides={ sides } />
-				</FlexItem>
-				{ isLinked && (
-					<FlexBlock>
-						<AllInputControl
-							aria-label={ label }
-							{ ...inputControlProps }
-						/>
-					</FlexBlock>
-				) }
-				{ ! isLinked && splitOnAxis && (
-					<FlexBlock>
-						<AxialInputControls { ...inputControlProps } />
-					</FlexBlock>
-				) }
-				{ ! hasOneSide && (
-					<FlexItem>
-						<LinkedButton
-							onClick={ toggleLinked }
-							isLinked={ isLinked }
-						/>
-					</FlexItem>
-				) }
-			</HeaderControlWrapper>
+		<Grid
+			id={ id }
+			columns={ 3 }
+			templateColumns="1fr min-content min-content"
+			role="group"
+			aria-labelledby={ headingId }
+		>
+			<BaseControl.VisualLabel id={ headingId }>
+				{ label }
+			</BaseControl.VisualLabel>
+			{ isLinked && (
+				<InputWrapper>
+					<FlexedBoxControlIcon side={ side } sides={ sides } />
+					<AllInputControl { ...inputControlProps } />
+				</InputWrapper>
+			) }
+			{ ! hasOneSide && (
+				<LinkedButtonWrapper>
+					<LinkedButton
+						onClick={ toggleLinked }
+						isLinked={ isLinked }
+					/>
+				</LinkedButtonWrapper>
+			) }
+
+			{ ! isLinked && splitOnAxis && (
+				<AxialInputControls { ...inputControlProps } />
+			) }
 			{ ! isLinked && ! splitOnAxis && (
 				<InputControls { ...inputControlProps } />
 			) }
-		</Root>
+			{ allowReset && (
+				<ResetButton
+					className="component-box-control__reset-button"
+					variant="secondary"
+					size="small"
+					onClick={ handleOnReset }
+					disabled={ ! isDirty }
+				>
+					{ __( 'Reset' ) }
+				</ResetButton>
+			) }
+		</Grid>
 	);
 }