@wordpress/components 25.15.1-next.79a6196f.0 → 25.16.0

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>
 	);
 }
 

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

@@ -1,82 +1,82 @@
+/**
+ * WordPress dependencies
+ */
+import { useInstanceId } from '@wordpress/compose';
 /**
  * Internal dependencies
  */
-import UnitControl from './unit-control';
+import Tooltip from '../tooltip';
 import { parseQuantityAndUnitFromRawValue } from '../unit-control/utils';
-import { ALL_SIDES, LABELS } from './utils';
-import { LayoutContainer, Layout } from './styles/box-control-styles';
+import { ALL_SIDES, CUSTOM_VALUE_SETTINGS, LABELS } from './utils';
+import {
+	FlexedBoxControlIcon,
+	FlexedRangeControl,
+	InputWrapper,
+	StyledUnitControl,
+} from './styles/box-control-styles';
 import type { BoxControlInputControlProps, BoxControlValue } from './types';
-import type { UnitControlProps } from '../unit-control/types';
 
 const noop = () => {};
 
 export default function BoxInputControls( {
+	__next40pxDefaultSize,
 	onChange = noop,
 	onFocus = noop,
-	onHoverOn = noop,
-	onHoverOff = noop,
 	values,
 	selectedUnits,
 	setSelectedUnits,
 	sides,
 	...props
 }: BoxControlInputControlProps ) {
+	const generatedId = useInstanceId( BoxInputControls, 'box-control-input' );
+
 	const createHandleOnFocus =
 		( side: keyof BoxControlValue ) =>
 		( event: React.FocusEvent< HTMLInputElement > ) => {
 			onFocus( event, { side } );
 		};
 
-	const createHandleOnHoverOn = ( side: keyof BoxControlValue ) => () => {
-		onHoverOn( { [ side ]: true } );
-	};
-
-	const createHandleOnHoverOff = ( side: keyof BoxControlValue ) => () => {
-		onHoverOff( { [ side ]: false } );
-	};
-
 	const handleOnChange = ( nextValues: BoxControlValue ) => {
 		onChange( nextValues );
 	};
 
-	const createHandleOnChange: (
-		side: keyof BoxControlValue
-	) => UnitControlProps[ 'onChange' ] =
-		( side ) =>
-		( next, { event } ) => {
-			const nextValues = { ...values };
-			const isNumeric =
-				next !== undefined && ! isNaN( parseFloat( next ) );
-			const nextValue = isNumeric ? next : undefined;
+	const handleOnValueChange = (
+		side: keyof BoxControlValue,
+		next?: string,
+		extra?: { event: React.SyntheticEvent< Element, Event > }
+	) => {
+		const nextValues = { ...values };
+		const isNumeric = next !== undefined && ! isNaN( parseFloat( next ) );
+		const nextValue = isNumeric ? next : undefined;
 
-			nextValues[ side ] = nextValue;
+		nextValues[ side ] = nextValue;
 
-			/**
-			 * Supports changing pair sides. For example, holding the ALT key
-			 * when changing the TOP will also update BOTTOM.
-			 */
-			// @ts-expect-error - TODO: event.altKey is only present when the change event was
-			// triggered by a keyboard event. Should this feature be implemented differently so
-			// it also works with drag events?
-			if ( event.altKey ) {
-				switch ( side ) {
-					case 'top':
-						nextValues.bottom = nextValue;
-						break;
-					case 'bottom':
-						nextValues.top = nextValue;
-						break;
-					case 'left':
-						nextValues.right = nextValue;
-						break;
-					case 'right':
-						nextValues.left = nextValue;
-						break;
-				}
+		/**
+		 * Supports changing pair sides. For example, holding the ALT key
+		 * when changing the TOP will also update BOTTOM.
+		 */
+		// @ts-expect-error - TODO: event.altKey is only present when the change event was
+		// triggered by a keyboard event. Should this feature be implemented differently so
+		// it also works with drag events?
+		if ( extra?.event.altKey ) {
+			switch ( side ) {
+				case 'top':
+					nextValues.bottom = nextValue;
+					break;
+				case 'bottom':
+					nextValues.top = nextValue;
+					break;
+				case 'left':
+					nextValues.right = nextValue;
+					break;
+				case 'right':
+					nextValues.left = nextValue;
+					break;
 			}
+		}
 
-			handleOnChange( nextValues );
-		};
+		handleOnChange( nextValues );
+	};
 
 	const createHandleOnUnitChange =
 		( side: keyof BoxControlValue ) => ( next?: string ) => {
@@ -90,45 +90,76 @@ export default function BoxInputControls( {
 		? ALL_SIDES.filter( ( side ) => sides.includes( side ) )
 		: ALL_SIDES;
 
-	const first = filteredSides[ 0 ];
-	const last = filteredSides[ filteredSides.length - 1 ];
-	const only = first === last && first;
-
 	return (
-		<LayoutContainer className="component-box-control__input-controls-wrapper">
-			<Layout
-				gap={ 0 }
-				align="top"
-				className="component-box-control__input-controls"
-			>
-				{ filteredSides.map( ( side ) => {
-					const [ parsedQuantity, parsedUnit ] =
-						parseQuantityAndUnitFromRawValue( values[ side ] );
+		<>
+			{ filteredSides.map( ( side ) => {
+				const [ parsedQuantity, parsedUnit ] =
+					parseQuantityAndUnitFromRawValue( values[ side ] );
+
+				const computedUnit = values[ side ]
+					? parsedUnit
+					: selectedUnits[ side ];
+
+				const inputId = [ generatedId, side ].join( '-' );
 
-					const computedUnit = values[ side ]
-						? parsedUnit
-						: selectedUnits[ side ];
+				return (
+					<InputWrapper key={ `box-control-${ side }` } expanded>
+						<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, computedUnit ].join(
+									''
+								) }
+								onChange={ ( nextValue, extra ) =>
+									handleOnValueChange(
+										side,
+										nextValue,
+										extra
+									)
+								}
+								onUnitChange={ createHandleOnUnitChange(
+									side
+								) }
+								onFocus={ createHandleOnFocus( side ) }
+								label={ LABELS[ side ] }
+								hideLabelFromVision
+							/>
+						</Tooltip>
 
-					return (
-						<UnitControl
-							{ ...props }
-							isFirst={ first === side }
-							isLast={ last === side }
-							isOnly={ only === side }
-							value={ [ parsedQuantity, computedUnit ].join(
-								''
-							) }
-							onChange={ createHandleOnChange( side ) }
-							onUnitChange={ createHandleOnUnitChange( side ) }
-							onFocus={ createHandleOnFocus( side ) }
-							onHoverOn={ createHandleOnHoverOn( side ) }
-							onHoverOff={ createHandleOnHoverOff( side ) }
+						<FlexedRangeControl
+							__nextHasNoMarginBottom
+							__next40pxDefaultSize={ __next40pxDefaultSize }
+							aria-controls={ inputId }
 							label={ LABELS[ side ] }
-							key={ `box-control-${ side }` }
+							hideLabelFromVision
+							onChange={ ( newValue ) => {
+								handleOnValueChange(
+									side,
+									newValue !== undefined
+										? [ newValue, computedUnit ].join( '' )
+										: undefined
+								);
+							} }
+							min={ 0 }
+							max={
+								CUSTOM_VALUE_SETTINGS[ computedUnit ?? 'px' ]
+									?.max ?? 10
+							}
+							step={
+								CUSTOM_VALUE_SETTINGS[ computedUnit ?? 'px' ]
+									?.step ?? 0.1
+							}
+							value={ parsedQuantity ?? 0 }
+							withInputField={ false }
 						/>
-					);
-				} ) }
-			</Layout>
-		</LayoutContainer>
+					</InputWrapper>
+				);
+			} ) }
+		</>
 	);
 }

package/src/box-control/styles/box-control-styles.ts

@@ -1,80 +1,40 @@
 /**
  * External dependencies
  */
-import { css } from '@emotion/react';
 import styled from '@emotion/styled';
 /**
  * Internal dependencies
  */
-import { Flex } from '../../flex';
-import BaseUnitControl from '../../unit-control';
-import { rtl } from '../../utils';
-import type { BoxUnitControlProps } from '../types';
-
-export const Root = styled.div`
-	box-sizing: border-box;
-	max-width: 235px;
-	padding-bottom: 12px;
-	width: 100%;
+import BoxControlIcon from '../icon';
+import Button from '../../button';
+import { HStack } from '../../h-stack';
+import RangeControl from '../../range-control';
+import UnitControl from '../../unit-control';
+import { space } from '../../utils/space';
+
+export const StyledUnitControl = styled( UnitControl )`
+	max-width: 90px;
 `;
 
-export const Header = styled( Flex )`
-	margin-bottom: 8px;
+export const InputWrapper = styled( HStack )`
+	grid-column: 1 / span 3;
 `;
 
-export const HeaderControlWrapper = styled( Flex )`
-	min-height: 30px;
-	gap: 0;
+export const ResetButton = styled( Button )`
+	grid-area: 1 / 2;
+	justify-self: end;
 `;
 
-export const UnitControlWrapper = styled.div`
-	box-sizing: border-box;
-	max-width: 80px;
+export const LinkedButtonWrapper = styled.div`
+	grid-area: 1 / 3;
+	justify-self: end;
 `;
 
-export const LayoutContainer = styled( Flex )`
-	justify-content: center;
-	padding-top: 8px;
+export const FlexedBoxControlIcon = styled( BoxControlIcon )`
+	flex: 0 0 auto;
 `;
 
-export const Layout = styled( Flex )`
-	position: relative;
-	height: 100%;
+export const FlexedRangeControl = styled( RangeControl )`
 	width: 100%;
-	justify-content: flex-start;
-`;
-
-const unitControlBorderRadiusStyles = ( {
-	isFirst,
-	isLast,
-	isOnly,
-}: Pick< BoxUnitControlProps, 'isFirst' | 'isLast' | 'isOnly' > ) => {
-	if ( isFirst ) {
-		return rtl( { borderTopRightRadius: 0, borderBottomRightRadius: 0 } )();
-	}
-	if ( isLast ) {
-		return rtl( { borderTopLeftRadius: 0, borderBottomLeftRadius: 0 } )();
-	}
-	if ( isOnly ) {
-		return css( { borderRadius: 2 } );
-	}
-
-	return css( {
-		borderRadius: 0,
-	} );
-};
-
-const unitControlMarginStyles = ( {
-	isFirst,
-	isOnly,
-}: Pick< BoxUnitControlProps, 'isFirst' | 'isOnly' > ) => {
-	const marginLeft = isFirst || isOnly ? 0 : -1;
-
-	return rtl( { marginLeft } )();
-};
-
-export const UnitControl = styled( BaseUnitControl )`
-	max-width: 60px;
-	${ unitControlBorderRadiusStyles };
-	${ unitControlMarginStyles };
+	margin-inline-end: ${ space( 2 ) };
 `;