BoxControl: stop using UnitControl's deprecated unit prop (#39511)

* Stop using `unit` prop in `AllInputControl` * Stop using `unit` prop in `AxialInputControls` * Stop using `unit` prop in `InputControls` * CHANGELOG
WordPress · Mar 17, 2022 · 0d19bcb · 0d19bcb
1 parent 0a41b4b
commit 0d19bcb
Show file tree

Hide file tree

Showing 5 changed files with 94 additions and 62 deletions.
diff --git a/packages/components/CHANGELOG.md b/packages/components/CHANGELOG.md
@@ -13,6 +13,7 @@
 ### Internal
 
 -   Delete the `composeStateReducers` utility function ([#39262](https://github.com/WordPress/gutenberg/pull/39262)).
+-   `BoxControl`: stop using `UnitControl`'s deprecated `unit` prop ([#39511](https://github.com/WordPress/gutenberg/pull/39511)).
 
 ## 19.6.0 (2022-03-11)
 

diff --git a/packages/components/src/box-control/all-input-control.js b/packages/components/src/box-control/all-input-control.js
@@ -10,7 +10,6 @@ import {
 	ALL_SIDES,
 	LABELS,
 	getAllValue,
-	getAllUnitFallback,
 	isValuesMixed,
 	isValuesDefined,
 } from './utils';
@@ -26,17 +25,11 @@ export default function AllInputControl( {
 	setSelectedUnits,
 	...props
 } ) {
-	const allValue = getAllValue( values, sides );
+	const allValue = getAllValue( values, selectedUnits, sides );
 	const hasValues = isValuesDefined( values );
-	const isMixed = hasValues && isValuesMixed( values, sides );
+	const isMixed = hasValues && isValuesMixed( values, selectedUnits, sides );
 	const allPlaceholder = isMixed ? LABELS.mixed : null;
 
-	// Set meaningful unit selection if no allValue and user has previously
-	// selected units without assigning values while controls were unlinked.
-	const allUnitFallback = ! allValue
-		? getAllUnitFallback( selectedUnits )
-		: undefined;
-
 	const handleOnFocus = ( event ) => {
 		onFocus( event, { side: 'all' } );
 	};
@@ -104,7 +97,6 @@ export default function AllInputControl( {
 			disableUnits={ isMixed }
 			isOnly
 			value={ allValue }
-			unit={ allUnitFallback }
 			onChange={ handleOnChange }
 			onUnitChange={ handleOnUnitChange }
 			onFocus={ handleOnFocus }

diff --git a/packages/components/src/box-control/axial-input-controls.js b/packages/components/src/box-control/axial-input-controls.js
@@ -1,6 +1,7 @@
 /**
  * Internal dependencies
  */
+import { parseQuantityAndUnitFromRawValue } from '../unit-control/utils';
 import UnitControl from './unit-control';
 import { LABELS } from './utils';
 import { Layout } from './styles/box-control-styles';
@@ -113,27 +114,37 @@ export default function AxialInputControls( {
 			align="top"
 			className="component-box-control__vertical-horizontal-input-controls"
 		>
-			{ filteredSides.map( ( side ) => (
-				<UnitControl
-					{ ...props }
-					isFirst={ first === side }
-					isLast={ last === side }
-					isOnly={ only === side }
-					value={ side === 'vertical' ? values.top : values.left }
-					unit={
-						side === 'vertical'
-							? selectedUnits.top
-							: selectedUnits.left
-					}
-					onChange={ createHandleOnChange( side ) }
-					onUnitChange={ createHandleOnUnitChange( side ) }
-					onFocus={ createHandleOnFocus( side ) }
-					onHoverOn={ createHandleOnHoverOn( side ) }
-					onHoverOff={ createHandleOnHoverOff( side ) }
-					label={ LABELS[ side ] }
-					key={ side }
-				/>
-			) ) }
+			{ filteredSides.map( ( side ) => {
+				const [
+					parsedQuantity,
+					parsedUnit,
+				] = parseQuantityAndUnitFromRawValue(
+					side === 'vertical' ? values.top : values.left
+				);
+				const selectedUnit =
+					side === 'vertical'
+						? selectedUnits.top
+						: selectedUnits.left;
+				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 }
+					/>
+				);
+			} ) }
 		</Layout>
 	);
 }
diff --git a/packages/components/src/box-control/input-controls.js b/packages/components/src/box-control/input-controls.js
@@ -7,6 +7,7 @@ import { noop } from 'lodash';
  * Internal dependencies
  */
 import UnitControl from './unit-control';
+import { parseQuantityAndUnitFromRawValue } from '../unit-control/utils';
 import { ALL_SIDES, LABELS } from './utils';
 import { LayoutContainer, Layout } from './styles/box-control-styles';
 
@@ -91,25 +92,35 @@ export default function BoxInputControls( {
 				align="top"
 				className="component-box-control__input-controls"
 			>
-				{ filteredSides.map( ( side ) => (
-					<UnitControl
-						{ ...props }
-						isFirst={ first === side }
-						isLast={ last === side }
-						isOnly={ only === side }
-						value={ values[ side ] }
-						unit={
-							values[ side ] ? undefined : selectedUnits[ side ]
-						}
-						onChange={ createHandleOnChange( side ) }
-						onUnitChange={ createHandleOnUnitChange( side ) }
-						onFocus={ createHandleOnFocus( side ) }
-						onHoverOn={ createHandleOnHoverOn( side ) }
-						onHoverOff={ createHandleOnHoverOff( side ) }
-						label={ LABELS[ side ] }
-						key={ `box-control-${ side }` }
-					/>
-				) ) }
+				{ filteredSides.map( ( side ) => {
+					const [
+						parsedQuantity,
+						parsedUnit,
+					] = parseQuantityAndUnitFromRawValue( values[ side ] );
+
+					const computedUnit = values[ side ]
+						? parsedUnit
+						: selectedUnits[ side ];
+
+					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 ) }
+							label={ LABELS[ side ] }
+							key={ `box-control-${ side }` }
+						/>
+					);
+				} ) }
 			</Layout>
 		</LayoutContainer>
 	);

diff --git a/packages/components/src/box-control/utils.js b/packages/components/src/box-control/utils.js
@@ -61,24 +61,32 @@ function mode( arr ) {
  * Gets the 'all' input value and unit from values data.
  *
  * @param {Object} values         Box values.
+ * @param {Object} selectedUnits  Box units.
  * @param {Array}  availableSides Available box sides to evaluate.
  *
  * @return {string} A value + unit for the 'all' input.
  */
-export function getAllValue( values = {}, availableSides = ALL_SIDES ) {
+export function getAllValue(
+	values = {},
+	selectedUnits,
+	availableSides = ALL_SIDES
+) {
 	const sides = normalizeSides( availableSides );
 	const parsedQuantitiesAndUnits = sides.map( ( side ) =>
 		parseQuantityAndUnitFromRawValue( values[ side ] )
 	);
-	const allValues = parsedQuantitiesAndUnits.map(
+	const allParsedQuantities = parsedQuantitiesAndUnits.map(
 		( value ) => value[ 0 ] ?? ''
 	);
-	const allUnits = parsedQuantitiesAndUnits.map( ( value ) => value[ 1 ] );
+	const allParsedUnits = parsedQuantitiesAndUnits.map(
+		( value ) => value[ 1 ]
+	);
 
-	const value = allValues.every( ( v ) => v === allValues[ 0 ] )
-		? allValues[ 0 ]
+	const commonQuantity = allParsedQuantities.every(
+		( v ) => v === allParsedQuantities[ 0 ]
+	)
+		? allParsedQuantities[ 0 ]
 		: '';
-	const unit = mode( allUnits );
 
 	/**
 	 * The isNumber check is important. On reset actions, the incoming value
@@ -89,9 +97,17 @@ export function getAllValue( values = {}, availableSides = ALL_SIDES ) {
 	 * isNumber() is more specific for these cases, rather than relying on a
 	 * simple truthy check.
 	 */
-	const allValue = isNumber( value ) ? `${ value }${ unit }` : undefined;
+	let commonUnit;
+	if ( isNumber( commonQuantity ) ) {
+		commonUnit = mode( allParsedUnits );
+	} else {
+		// Set meaningful unit selection if no commonQuantity and user has previously
+		// selected units without assigning values while controls were unlinked.
+		commonUnit =
+			getAllUnitFallback( selectedUnits ) ?? mode( allParsedUnits );
+	}
 
-	return allValue;
+	return [ commonQuantity, commonUnit ].join( '' );
 }
 
 /**
@@ -113,13 +129,14 @@ export function getAllUnitFallback( selectedUnits ) {
 /**
  * Checks to determine if values are mixed.
  *
- * @param {Object} values Box values.
- * @param {Array}  sides  Available box sides to evaluate.
+ * @param {Object} values        Box values.
+ * @param {Object} selectedUnits Box units.
+ * @param {Array}  sides         Available box sides to evaluate.
  *
  * @return {boolean} Whether values are mixed.
  */
-export function isValuesMixed( values = {}, sides = ALL_SIDES ) {
-	const allValue = getAllValue( values, sides );
+export function isValuesMixed( values = {}, selectedUnits, sides = ALL_SIDES ) {
+	const allValue = getAllValue( values, selectedUnits, sides );
 	const isMixed = isNaN( parseFloat( allValue ) );
 
 	return isMixed;