@wordpress/components 28.13.1-next.082ed6819.0 → 29.0.0

package/src/box-control/index.tsx

@@ -9,13 +9,10 @@ import { __ } from '@wordpress/i18n';
  * Internal dependencies
  */
 import { BaseControl } from '../base-control';
-import AllInputControl from './all-input-control';
-import InputControls from './input-controls';
-import AxialInputControls from './axial-input-controls';
+import InputControl from './input-control';
 import LinkedButton from './linked-button';
 import { Grid } from '../grid';
 import {
-	FlexedBoxControlIcon,
 	InputWrapper,
 	ResetButton,
 	LinkedButtonWrapper,
@@ -24,8 +21,9 @@ import { parseQuantityAndUnitFromRawValue } from '../unit-control/utils';
 import {
 	DEFAULT_VALUES,
 	getInitialSide,
-	isValuesMixed,
+	isValueMixed,
 	isValuesDefined,
+	getAllowedSides,
 } from './utils';
 import { useControlledState } from '../utils/hooks';
 import type {
@@ -33,6 +31,7 @@ import type {
 	BoxControlProps,
 	BoxControlValue,
 } from './types';
+import { maybeWarnDeprecated36pxSize } from '../utils/deprecated-36px-size';
 
 const defaultInputProps = {
 	min: 0,
@@ -51,23 +50,24 @@ function useUniqueId( idProp?: string ) {
  * used as an input control for values like `padding` or `margin`.
  *
  * ```jsx
+ * import { useState } from 'react';
  * import { BoxControl } from '@wordpress/components';
- * import { useState } from '@wordpress/element';
  *
  * function Example() {
- * 	const [ values, setValues ] = useState( {
- * 		top: '50px',
- * 		left: '10%',
- * 		right: '10%',
- * 		bottom: '50px',
- * 	} );
+ *   const [ values, setValues ] = useState( {
+ *     top: '50px',
+ *     left: '10%',
+ *     right: '10%',
+ *     bottom: '50px',
+ *   } );
  *
- * 	return (
- * 		<BoxControl
- * 			values={ values }
- * 			onChange={ ( nextValues ) => setValues( nextValues ) }
- * 		/>
- * 	);
+ *   return (
+ *     <BoxControl
+ *       __next40pxDefaultSize
+ *       values={ values }
+ *       onChange={ setValues }
+ *     />
+ *   );
  * };
  * ```
  */
@@ -95,7 +95,7 @@ function BoxControl( {
 
 	const [ isDirty, setIsDirty ] = useState( hasInitialValue );
 	const [ isLinked, setIsLinked ] = useState(
-		! hasInitialValue || ! isValuesMixed( inputValues ) || hasOneSide
+		! hasInitialValue || ! isValueMixed( inputValues ) || hasOneSide
 	);
 
 	const [ side, setSide ] = useState< BoxControlIconProps[ 'side' ] >(
@@ -141,6 +141,8 @@ function BoxControl( {
 	};
 
 	const inputControlProps = {
+		onMouseOver,
+		onMouseOut,
 		...inputProps,
 		onChange: handleOnChange,
 		onFocus: handleOnFocus,
@@ -150,11 +152,16 @@ function BoxControl( {
 		setSelectedUnits,
 		sides,
 		values: inputValues,
-		onMouseOver,
-		onMouseOut,
 		__next40pxDefaultSize,
 	};
 
+	maybeWarnDeprecated36pxSize( {
+		componentName: 'BoxControl',
+		__next40pxDefaultSize,
+		size: undefined,
+	} );
+	const sidesToRender = getAllowedSides( sides );
+
 	return (
 		<Grid
 			id={ id }
@@ -168,8 +175,7 @@ function BoxControl( {
 			</BaseControl.VisualLabel>
 			{ isLinked && (
 				<InputWrapper>
-					<FlexedBoxControlIcon side={ side } sides={ sides } />
-					<AllInputControl { ...inputControlProps } />
+					<InputControl side="all" { ...inputControlProps } />
 				</InputWrapper>
 			) }
 			{ ! hasOneSide && (
@@ -181,12 +187,24 @@ function BoxControl( {
 				</LinkedButtonWrapper>
 			) }
 
-			{ ! isLinked && splitOnAxis && (
-				<AxialInputControls { ...inputControlProps } />
-			) }
-			{ ! isLinked && ! splitOnAxis && (
-				<InputControls { ...inputControlProps } />
-			) }
+			{ ! isLinked &&
+				splitOnAxis &&
+				[ 'vertical', 'horizontal' ].map( ( axis ) => (
+					<InputControl
+						key={ axis }
+						side={ axis as 'horizontal' | 'vertical' }
+						{ ...inputControlProps }
+					/>
+				) ) }
+			{ ! isLinked &&
+				! splitOnAxis &&
+				Array.from( sidesToRender ).map( ( axis ) => (
+					<InputControl
+						key={ axis }
+						side={ axis }
+						{ ...inputControlProps }
+					/>
+				) ) }
 			{ allowReset && (
 				<ResetButton
 					className="component-box-control__reset-button"

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

@@ -0,0 +1,197 @@
+/**
+ * WordPress dependencies
+ */
+import { useInstanceId } from '@wordpress/compose';
+import { __ } from '@wordpress/i18n';
+
+/**
+ * Internal dependencies
+ */
+import Tooltip from '../tooltip';
+import { parseQuantityAndUnitFromRawValue } from '../unit-control/utils';
+import {
+	CUSTOM_VALUE_SETTINGS,
+	getAllowedSides,
+	getMergedValue,
+	isValueMixed,
+	isValuesDefined,
+	LABELS,
+} from './utils';
+import {
+	FlexedBoxControlIcon,
+	FlexedRangeControl,
+	InputWrapper,
+	StyledUnitControl,
+} from './styles/box-control-styles';
+import type { BoxControlInputControlProps, BoxControlValue } from './types';
+
+const noop = () => {};
+
+function getSidesToModify(
+	side: BoxControlInputControlProps[ 'side' ],
+	sides: BoxControlInputControlProps[ 'sides' ],
+	isAlt?: boolean
+) {
+	const allowedSides = getAllowedSides( sides );
+
+	let modifiedSides: ( keyof BoxControlValue )[] = [];
+	switch ( side ) {
+		case 'all':
+			modifiedSides = [ 'top', 'bottom', 'left', 'right' ];
+			break;
+		case 'horizontal':
+			modifiedSides = [ 'left', 'right' ];
+			break;
+		case 'vertical':
+			modifiedSides = [ 'top', 'bottom' ];
+			break;
+		default:
+			modifiedSides = [ side ];
+	}
+
+	if ( isAlt ) {
+		switch ( side ) {
+			case 'top':
+				modifiedSides.push( 'bottom' );
+				break;
+			case 'bottom':
+				modifiedSides.push( 'top' );
+				break;
+			case 'left':
+				modifiedSides.push( 'left' );
+				break;
+			case 'right':
+				modifiedSides.push( 'right' );
+				break;
+		}
+	}
+
+	return modifiedSides.filter( ( s ) => allowedSides.has( s ) );
+}
+
+export default function BoxInputControl( {
+	__next40pxDefaultSize,
+	onChange = noop,
+	onFocus = noop,
+	values,
+	selectedUnits,
+	setSelectedUnits,
+	sides,
+	side,
+	...props
+}: BoxControlInputControlProps ) {
+	const defaultValuesToModify = getSidesToModify( side, sides );
+
+	const handleOnFocus = ( event: React.FocusEvent< HTMLInputElement > ) => {
+		onFocus( event, { side } );
+	};
+
+	const handleOnChange = ( nextValues: BoxControlValue ) => {
+		onChange( nextValues );
+	};
+
+	const handleOnValueChange = (
+		next?: string,
+		extra?: { event: React.SyntheticEvent< Element, Event > }
+	) => {
+		const nextValues = { ...values };
+		const isNumeric = next !== undefined && ! isNaN( parseFloat( next ) );
+		const nextValue = isNumeric ? next : undefined;
+		const modifiedSides = getSidesToModify(
+			side,
+			sides,
+			/**
+			 * 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?
+			!! extra?.event.altKey
+		);
+
+		modifiedSides.forEach( ( modifiedSide ) => {
+			nextValues[ modifiedSide ] = nextValue;
+		} );
+
+		handleOnChange( nextValues );
+	};
+
+	const handleOnUnitChange = ( next?: string ) => {
+		const newUnits = { ...selectedUnits };
+		defaultValuesToModify.forEach( ( modifiedSide ) => {
+			newUnits[ modifiedSide ] = next;
+		} );
+		setSelectedUnits( newUnits );
+	};
+
+	const mergedValue = getMergedValue( values, defaultValuesToModify );
+	const hasValues = isValuesDefined( values );
+	const isMixed =
+		hasValues &&
+		defaultValuesToModify.length > 1 &&
+		isValueMixed( values, defaultValuesToModify );
+	const [ parsedQuantity, parsedUnit ] =
+		parseQuantityAndUnitFromRawValue( mergedValue );
+	const computedUnit = hasValues
+		? parsedUnit
+		: selectedUnits[ defaultValuesToModify[ 0 ] ];
+	const generatedId = useInstanceId( BoxInputControl, 'box-control-input' );
+	const inputId = [ generatedId, side ].join( '-' );
+	const isMixedUnit =
+		defaultValuesToModify.length > 1 &&
+		mergedValue === undefined &&
+		defaultValuesToModify.some(
+			( s ) => selectedUnits[ s ] !== computedUnit
+		);
+	const usedValue =
+		mergedValue === undefined && computedUnit ? computedUnit : mergedValue;
+	const mixedPlaceholder = isMixed || isMixedUnit ? __( 'Mixed' ) : undefined;
+
+	return (
+		<InputWrapper key={ `box-control-${ side }` } expanded>
+			<FlexedBoxControlIcon side={ side } sides={ sides } />
+			<Tooltip placement="top-end" text={ LABELS[ side ] }>
+				<StyledUnitControl
+					{ ...props }
+					__shouldNotWarnDeprecated36pxSize
+					__next40pxDefaultSize={ __next40pxDefaultSize }
+					className="component-box-control__unit-control"
+					id={ inputId }
+					isPressEnterToChange
+					disableUnits={ isMixed || isMixedUnit }
+					value={ usedValue }
+					onChange={ handleOnValueChange }
+					onUnitChange={ handleOnUnitChange }
+					onFocus={ handleOnFocus }
+					label={ LABELS[ side ] }
+					placeholder={ mixedPlaceholder }
+					hideLabelFromVision
+				/>
+			</Tooltip>
+
+			<FlexedRangeControl
+				__nextHasNoMarginBottom
+				__next40pxDefaultSize={ __next40pxDefaultSize }
+				__shouldNotWarnDeprecated36pxSize
+				aria-controls={ inputId }
+				label={ LABELS[ side ] }
+				hideLabelFromVision
+				onChange={ ( newValue ) => {
+					handleOnValueChange(
+						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 }
+			/>
+		</InputWrapper>
+	);
+}

package/src/box-control/stories/index.story.tsx

@@ -17,7 +17,7 @@ const meta: Meta< typeof BoxControl > = {
 	title: 'Components/BoxControl',
 	component: BoxControl,
 	argTypes: {
-		values: { control: { type: null } },
+		values: { control: false },
 	},
 	parameters: {
 		actions: { argTypesRegex: '^on.*' },
@@ -49,6 +49,7 @@ const TemplateControlled: StoryFn< typeof BoxControl > = ( props ) => {
 export const Default = TemplateUncontrolled.bind( {} );
 Default.args = {
 	label: 'Label',
+	__next40pxDefaultSize: true,
 };
 
 export const Controlled = TemplateControlled.bind( {} );

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

@@ -15,11 +15,14 @@ import { useState } from '@wordpress/element';
 import BoxControl from '..';
 import type { BoxControlProps, BoxControlValue } from '../types';
 
-const Example = ( extraProps: Omit< BoxControlProps, 'onChange' > ) => {
+const ControlledBoxControl = (
+	extraProps: Omit< BoxControlProps, 'onChange' >
+) => {
 	const [ state, setState ] = useState< BoxControlValue >();
 
 	return (
 		<BoxControl
+			__next40pxDefaultSize
 			values={ state }
 			onChange={ ( next ) => setState( next ) }
 			{ ...extraProps }
@@ -27,10 +30,17 @@ const Example = ( extraProps: Omit< BoxControlProps, 'onChange' > ) => {
 	);
 };
 
+const UncontrolledBoxControl = ( {
+	onChange = () => {},
+	...props
+}: Omit< BoxControlProps, 'onChange' > & {
+	onChange?: BoxControlProps[ 'onChange' ];
+} ) => <BoxControl __next40pxDefaultSize onChange={ onChange } { ...props } />;
+
 describe( 'BoxControl', () => {
 	describe( 'Basic rendering', () => {
 		it( 'should render a box control input', () => {
-			render( <BoxControl onChange={ () => {} } /> );
+			render( <UncontrolledBoxControl /> );
 
 			expect(
 				screen.getByRole( 'group', { name: 'Box Control' } )
@@ -43,7 +53,7 @@ describe( 'BoxControl', () => {
 		it( 'should update values when interacting with input', async () => {
 			const user = userEvent.setup();
 
-			render( <BoxControl onChange={ () => {} } /> );
+			render( <UncontrolledBoxControl /> );
 
 			const input = screen.getByRole( 'textbox', { name: 'All sides' } );
 
@@ -54,7 +64,7 @@ describe( 'BoxControl', () => {
 		} );
 
 		it( 'should update input values when interacting with slider', () => {
-			render( <BoxControl onChange={ () => {} } /> );
+			render( <UncontrolledBoxControl /> );
 
 			const slider = screen.getByRole( 'slider' );
 
@@ -68,7 +78,7 @@ describe( 'BoxControl', () => {
 
 		it( 'should update slider values when interacting with input', async () => {
 			const user = userEvent.setup();
-			render( <BoxControl onChange={ () => {} } /> );
+			render( <UncontrolledBoxControl /> );
 
 			const input = screen.getByRole( 'textbox', {
 				name: 'All sides',
@@ -82,7 +92,7 @@ describe( 'BoxControl', () => {
 		} );
 
 		it( 'should render the number input with a default min value of 0', () => {
-			render( <BoxControl onChange={ () => {} } /> );
+			render( <UncontrolledBoxControl /> );
 
 			const input = screen.getByRole( 'textbox', { name: 'All sides' } );
 
@@ -91,10 +101,7 @@ describe( 'BoxControl', () => {
 
 		it( 'should pass down `inputProps` to the underlying number input', () => {
 			render(
-				<BoxControl
-					onChange={ () => {} }
-					inputProps={ { min: 10, max: 50 } }
-				/>
+				<UncontrolledBoxControl inputProps={ { min: 10, max: 50 } } />
 			);
 
 			const input = screen.getByRole( 'textbox', { name: 'All sides' } );
@@ -108,7 +115,7 @@ describe( 'BoxControl', () => {
 		it( 'should reset values when clicking Reset', async () => {
 			const user = userEvent.setup();
 
-			render( <BoxControl onChange={ () => {} } /> );
+			render( <UncontrolledBoxControl /> );
 
 			const input = screen.getByRole( 'textbox', {
 				name: 'All sides',
@@ -127,7 +134,7 @@ describe( 'BoxControl', () => {
 		it( 'should reset values when clicking Reset, if controlled', async () => {
 			const user = userEvent.setup();
 
-			render( <Example /> );
+			render( <ControlledBoxControl /> );
 
 			const input = screen.getByRole( 'textbox', {
 				name: 'All sides',
@@ -146,7 +153,7 @@ describe( 'BoxControl', () => {
 		it( 'should reset values when clicking Reset, if controlled <-> uncontrolled state changes', async () => {
 			const user = userEvent.setup();
 
-			render( <Example /> );
+			render( <ControlledBoxControl /> );
 
 			const input = screen.getByRole( 'textbox', {
 				name: 'All sides',
@@ -166,7 +173,9 @@ describe( 'BoxControl', () => {
 			const user = userEvent.setup();
 			const spyChange = jest.fn();
 
-			render( <BoxControl onChange={ ( v ) => spyChange( v ) } /> );
+			render(
+				<UncontrolledBoxControl onChange={ ( v ) => spyChange( v ) } />
+			);
 
 			const input = screen.getByRole( 'textbox', {
 				name: 'All sides',
@@ -196,7 +205,7 @@ describe( 'BoxControl', () => {
 		it( 'should update a single side value when unlinked', async () => {
 			const user = userEvent.setup();
 
-			render( <Example /> );
+			render( <ControlledBoxControl /> );
 
 			await user.click(
 				screen.getByRole( 'button', { name: 'Unlink sides' } )
@@ -224,7 +233,7 @@ describe( 'BoxControl', () => {
 		it( 'should update a single side value when using slider unlinked', async () => {
 			const user = userEvent.setup();
 
-			render( <Example /> );
+			render( <ControlledBoxControl /> );
 
 			await user.click(
 				screen.getByRole( 'button', { name: 'Unlink sides' } )
@@ -252,7 +261,7 @@ describe( 'BoxControl', () => {
 		it( 'should update a whole axis when value is changed when unlinked', async () => {
 			const user = userEvent.setup();
 
-			render( <Example splitOnAxis /> );
+			render( <ControlledBoxControl splitOnAxis /> );
 
 			await user.click(
 				screen.getByRole( 'button', { name: 'Unlink sides' } )
@@ -276,7 +285,7 @@ describe( 'BoxControl', () => {
 		it( 'should update a whole axis using a slider when value is changed when unlinked', async () => {
 			const user = userEvent.setup();
 
-			render( <Example splitOnAxis /> );
+			render( <ControlledBoxControl splitOnAxis /> );
 
 			await user.click(
 				screen.getByRole( 'button', { name: 'Unlink sides' } )
@@ -300,7 +309,7 @@ describe( 'BoxControl', () => {
 		it( 'should show "Mixed" label when sides have different values but are linked', async () => {
 			const user = userEvent.setup();
 
-			render( <Example /> );
+			render( <ControlledBoxControl /> );
 
 			const unlinkButton = screen.getByRole( 'button', {
 				name: 'Unlink sides',
@@ -330,7 +339,7 @@ describe( 'BoxControl', () => {
 			const user = userEvent.setup();
 
 			// Render control.
-			render( <BoxControl onChange={ () => {} } /> );
+			render( <UncontrolledBoxControl /> );
 
 			// Make unit selection on all input control.
 			await user.selectOptions(
@@ -362,7 +371,7 @@ describe( 'BoxControl', () => {
 			const user = userEvent.setup();
 
 			// Render control.
-			const { rerender } = render( <BoxControl onChange={ () => {} } /> );
+			const { rerender } = render( <UncontrolledBoxControl /> );
 
 			// Make unit selection on all input control.
 			await user.selectOptions(
@@ -390,9 +399,7 @@ describe( 'BoxControl', () => {
 			} );
 
 			// Rerender with individual side value & confirm unit is selected.
-			rerender(
-				<BoxControl values={ { top: '2.5em' } } onChange={ () => {} } />
-			);
+			rerender( <UncontrolledBoxControl values={ { top: '2.5em' } } /> );
 
 			const rerenderedControls = screen.getAllByRole( 'combobox', {
 				name: 'Select unit',
@@ -414,7 +421,7 @@ describe( 'BoxControl', () => {
 			const user = userEvent.setup();
 			const onChangeSpy = jest.fn();
 
-			render( <BoxControl onChange={ onChangeSpy } /> );
+			render( <UncontrolledBoxControl onChange={ onChangeSpy } /> );
 
 			const valueInput = screen.getByRole( 'textbox', {
 				name: 'All sides',
@@ -443,7 +450,7 @@ describe( 'BoxControl', () => {
 			const user = userEvent.setup();
 			const setState = jest.fn();
 
-			render( <BoxControl onChange={ setState } /> );
+			render( <UncontrolledBoxControl onChange={ setState } /> );
 
 			await user.selectOptions(
 				screen.getByRole( 'combobox', {