@wordpress/components 25.15.0 → 25.16.0

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

package/src/box-control/test/index.tsx

@@ -1,7 +1,7 @@
 /**
  * External dependencies
  */
-import { render, screen } from '@testing-library/react';
+import { fireEvent, render, screen } from '@testing-library/react';
 import userEvent from '@testing-library/user-event';
 
 /**
@@ -33,7 +33,10 @@ describe( 'BoxControl', () => {
 			render( <BoxControl onChange={ () => {} } /> );
 
 			expect(
-				screen.getByRole( 'textbox', { name: 'Box Control' } )
+				screen.getByRole( 'group', { name: 'Box Control' } )
+			).toBeVisible();
+			expect(
+				screen.getByRole( 'textbox', { name: 'All sides' } )
 			).toBeVisible();
 		} );
 
@@ -42,15 +45,41 @@ describe( 'BoxControl', () => {
 
 			render( <BoxControl onChange={ () => {} } /> );
 
-			const input = screen.getByRole( 'textbox', {
-				name: 'Box Control',
-			} );
+			const input = screen.getByRole( 'textbox', { name: 'All sides' } );
 
 			await user.type( input, '100' );
 			await user.keyboard( '{Enter}' );
 
 			expect( input ).toHaveValue( '100' );
 		} );
+
+		it( 'should update input values when interacting with slider', () => {
+			render( <BoxControl onChange={ () => {} } /> );
+
+			const slider = screen.getByRole( 'slider' );
+
+			fireEvent.change( slider, { target: { value: 50 } } );
+
+			expect( slider ).toHaveValue( '50' );
+			expect(
+				screen.getByRole( 'textbox', { name: 'All sides' } )
+			).toHaveValue( '50' );
+		} );
+
+		it( 'should update slider values when interacting with input', async () => {
+			const user = userEvent.setup();
+			render( <BoxControl onChange={ () => {} } /> );
+
+			const input = screen.getByRole( 'textbox', {
+				name: 'All sides',
+			} );
+
+			await user.type( input, '50' );
+			await user.keyboard( '{Enter}' );
+
+			expect( input ).toHaveValue( '50' );
+			expect( screen.getByRole( 'slider' ) ).toHaveValue( '50' );
+		} );
 	} );
 
 	describe( 'Reset', () => {
@@ -60,7 +89,7 @@ describe( 'BoxControl', () => {
 			render( <BoxControl onChange={ () => {} } /> );
 
 			const input = screen.getByRole( 'textbox', {
-				name: 'Box Control',
+				name: 'All sides',
 			} );
 
 			await user.type( input, '100' );
@@ -79,7 +108,7 @@ describe( 'BoxControl', () => {
 			render( <Example /> );
 
 			const input = screen.getByRole( 'textbox', {
-				name: 'Box Control',
+				name: 'All sides',
 			} );
 
 			await user.type( input, '100' );
@@ -98,7 +127,7 @@ describe( 'BoxControl', () => {
 			render( <Example /> );
 
 			const input = screen.getByRole( 'textbox', {
-				name: 'Box Control',
+				name: 'All sides',
 			} );
 
 			await user.type( input, '100' );
@@ -118,7 +147,7 @@ describe( 'BoxControl', () => {
 			render( <BoxControl onChange={ ( v ) => spyChange( v ) } /> );
 
 			const input = screen.getByRole( 'textbox', {
-				name: 'Box Control',
+				name: 'All sides',
 			} );
 
 			await user.type( input, '100' );
@@ -152,21 +181,49 @@ describe( 'BoxControl', () => {
 			);
 
 			await user.type(
-				screen.getByRole( 'textbox', { name: 'Top' } ),
+				screen.getByRole( 'textbox', { name: 'Top side' } ),
 				'100'
 			);
 
 			expect(
-				screen.getByRole( 'textbox', { name: 'Top' } )
+				screen.getByRole( 'textbox', { name: 'Top side' } )
 			).toHaveValue( '100' );
 			expect(
-				screen.getByRole( 'textbox', { name: 'Right' } )
+				screen.getByRole( 'textbox', { name: 'Right side' } )
 			).not.toHaveValue();
 			expect(
-				screen.getByRole( 'textbox', { name: 'Bottom' } )
+				screen.getByRole( 'textbox', { name: 'Bottom side' } )
 			).not.toHaveValue();
 			expect(
-				screen.getByRole( 'textbox', { name: 'Left' } )
+				screen.getByRole( 'textbox', { name: 'Left side' } )
+			).not.toHaveValue();
+		} );
+
+		it( 'should update a single side value when using slider unlinked', async () => {
+			const user = userEvent.setup();
+
+			render( <Example /> );
+
+			await user.click(
+				screen.getByRole( 'button', { name: 'Unlink sides' } )
+			);
+
+			const slider = screen.getByRole( 'slider', { name: 'Right side' } );
+
+			fireEvent.change( slider, { target: { value: 50 } } );
+
+			expect( slider ).toHaveValue( '50' );
+			expect(
+				screen.getByRole( 'textbox', { name: 'Top side' } )
+			).not.toHaveValue();
+			expect(
+				screen.getByRole( 'textbox', { name: 'Right side' } )
+			).toHaveValue( '50' );
+			expect(
+				screen.getByRole( 'textbox', { name: 'Bottom side' } )
+			).not.toHaveValue();
+			expect(
+				screen.getByRole( 'textbox', { name: 'Left side' } )
 			).not.toHaveValue();
 		} );
 
@@ -181,17 +238,68 @@ describe( 'BoxControl', () => {
 
 			await user.type(
 				screen.getByRole( 'textbox', {
-					name: 'Vertical',
+					name: 'Top and bottom sides',
 				} ),
 				'100'
 			);
 
 			expect(
-				screen.getByRole( 'textbox', { name: 'Vertical' } )
+				screen.getByRole( 'textbox', { name: 'Top and bottom sides' } )
 			).toHaveValue( '100' );
 			expect(
-				screen.getByRole( 'textbox', { name: 'Horizontal' } )
+				screen.getByRole( 'textbox', { name: 'Left and right sides' } )
+			).not.toHaveValue();
+		} );
+
+		it( 'should update a whole axis using a slider when value is changed when unlinked', async () => {
+			const user = userEvent.setup();
+
+			render( <Example splitOnAxis /> );
+
+			await user.click(
+				screen.getByRole( 'button', { name: 'Unlink sides' } )
+			);
+
+			const slider = screen.getByRole( 'slider', {
+				name: 'Left and right sides',
+			} );
+
+			fireEvent.change( slider, { target: { value: 50 } } );
+
+			expect( slider ).toHaveValue( '50' );
+			expect(
+				screen.getByRole( 'textbox', { name: 'Top and bottom sides' } )
 			).not.toHaveValue();
+			expect(
+				screen.getByRole( 'textbox', { name: 'Left and right sides' } )
+			).toHaveValue( '50' );
+		} );
+
+		it( 'should show "Mixed" label when sides have different values but are linked', async () => {
+			const user = userEvent.setup();
+
+			render( <Example /> );
+
+			const unlinkButton = screen.getByRole( 'button', {
+				name: 'Unlink sides',
+			} );
+
+			await user.click( unlinkButton );
+
+			await user.type(
+				screen.getByRole( 'textbox', {
+					name: 'Right side',
+				} ),
+				'13'
+			);
+
+			expect(
+				screen.getByRole( 'textbox', { name: 'Right side' } )
+			).toHaveValue( '13' );
+
+			await user.click( unlinkButton );
+
+			expect( screen.getByPlaceholderText( 'Mixed' ) ).toHaveValue( '' );
 		} );
 	} );
 
@@ -287,7 +395,7 @@ describe( 'BoxControl', () => {
 			render( <BoxControl onChange={ onChangeSpy } /> );
 
 			const valueInput = screen.getByRole( 'textbox', {
-				name: 'Box Control',
+				name: 'All sides',
 			} );
 			const unitSelect = screen.getByRole( 'combobox', {
 				name: 'Select unit',

package/src/box-control/types.ts

@@ -1,8 +1,3 @@
-/**
- * External dependencies
- */
-import type { useHover } from '@use-gesture/react';
-
 /**
  * Internal dependencies
  */
@@ -16,6 +11,10 @@ export type BoxControlValue = {
 	left?: string;
 };
 
+export type CustomValueUnits = {
+	[ key: string ]: { max: number; step: number };
+};
+
 type UnitControlPassthroughProps = Omit<
 	UnitControlProps,
 	'label' | 'onChange' | 'onFocus' | 'onMouseOver' | 'onMouseOut' | 'units'
@@ -72,6 +71,12 @@ export type BoxControlProps = Pick<
 	 * The current values of the control, expressed as an object of `top`, `right`, `bottom`, and `left` values.
 	 */
 	values?: BoxControlValue;
+	/**
+	 * Start opting into the larger default height that will become the default size in a future version.
+	 *
+	 * @default false
+	 */
+	__next40pxDefaultSize?: boolean;
 };
 
 export type BoxControlInputControlProps = UnitControlPassthroughProps & {
@@ -92,22 +97,6 @@ export type BoxControlInputControlProps = UnitControlPassthroughProps & {
 	values: BoxControlValue;
 };
 
-export type BoxUnitControlProps = UnitControlPassthroughProps &
-	Pick< UnitControlProps, 'onChange' | 'onFocus' > & {
-		isFirst?: boolean;
-		isLast?: boolean;
-		isOnly?: boolean;
-		label?: string;
-		onHoverOff?: (
-			event: ReturnType< typeof useHover >[ 'event' ],
-			state: Omit< ReturnType< typeof useHover >, 'event' >
-		) => void;
-		onHoverOn?: (
-			event: ReturnType< typeof useHover >[ 'event' ],
-			state: Omit< ReturnType< typeof useHover >, 'event' >
-		) => void;
-	};
-
 export type BoxControlIconProps = {
 	/**
 	 * @default 24

package/src/box-control/utils.ts

@@ -7,17 +7,52 @@ import { __ } from '@wordpress/i18n';
  * Internal dependencies
  */
 import { parseQuantityAndUnitFromRawValue } from '../unit-control/utils';
-import type { BoxControlProps, BoxControlValue } from './types';
+import type {
+	BoxControlProps,
+	BoxControlValue,
+	CustomValueUnits,
+} from './types';
+
+export const CUSTOM_VALUE_SETTINGS: CustomValueUnits = {
+	px: { max: 300, step: 1 },
+	'%': { max: 100, step: 1 },
+	vw: { max: 100, step: 1 },
+	vh: { max: 100, step: 1 },
+	em: { max: 10, step: 0.1 },
+	rm: { max: 10, step: 0.1 },
+	svw: { max: 100, step: 1 },
+	lvw: { max: 100, step: 1 },
+	dvw: { max: 100, step: 1 },
+	svh: { max: 100, step: 1 },
+	lvh: { max: 100, step: 1 },
+	dvh: { max: 100, step: 1 },
+	vi: { max: 100, step: 1 },
+	svi: { max: 100, step: 1 },
+	lvi: { max: 100, step: 1 },
+	dvi: { max: 100, step: 1 },
+	vb: { max: 100, step: 1 },
+	svb: { max: 100, step: 1 },
+	lvb: { max: 100, step: 1 },
+	dvb: { max: 100, step: 1 },
+	vmin: { max: 100, step: 1 },
+	svmin: { max: 100, step: 1 },
+	lvmin: { max: 100, step: 1 },
+	dvmin: { max: 100, step: 1 },
+	vmax: { max: 100, step: 1 },
+	svmax: { max: 100, step: 1 },
+	lvmax: { max: 100, step: 1 },
+	dvmax: { max: 100, step: 1 },
+};
 
 export const LABELS = {
-	all: __( 'All' ),
-	top: __( 'Top' ),
-	bottom: __( 'Bottom' ),
-	left: __( 'Left' ),
-	right: __( 'Right' ),
+	all: __( 'All sides' ),
+	top: __( 'Top side' ),
+	bottom: __( 'Bottom side' ),
+	left: __( 'Left side' ),
+	right: __( 'Right side' ),
 	mixed: __( 'Mixed' ),
-	vertical: __( 'Vertical' ),
-	horizontal: __( 'Horizontal' ),
+	vertical: __( 'Top and bottom sides' ),
+	horizontal: __( 'Left and right sides' ),
 };
 
 export const DEFAULT_VALUES = {