UnitControl: Add support for unit step per unit type (#30376)

* add support for unit step per unit type * remove default step value from CSS_UNITS const * add react native support * missed step on native RangeCell add comments * allow props to override unit steps * Update packages/components/src/unit-control/index.js Co-authored-by: Miguel Fonseca <[email protected]> * updates from review -> remove setting default first unit tidy code + comments * Use capitals in comments * Use block commments instead of single line * Apply suggestions from code review Co-authored-by: Miguel Fonseca <[email protected]> Co-authored-by: Miguel Fonseca <[email protected]>
WordPress · May 11, 2021 · 132fec1 · 132fec1
1 parent 7169054
commit 132fec1
Show file tree

Hide file tree

Showing 2 changed files with 25 additions and 0 deletions.
diff --git a/packages/components/src/unit-control/index.js b/packages/components/src/unit-control/index.js
@@ -158,6 +158,17 @@ function UnitControl(
 		/>
 	) : null;
 
+	let step = props.step;
+
+	/*
+	 * If no step prop has been passed, lookup the active unit and
+	 * try to get step from `units`, or default to a value of `1`
+	 */
+	if ( ! step && units ) {
+		const activeUnit = units.find( ( option ) => option.value === unit );
+		step = activeUnit?.step ?? 1;
+	}
+
 	return (
 		<Root className="components-unit-control-wrapper" style={ style }>
 			<ValueInput
@@ -177,6 +188,7 @@ function UnitControl(
 				size={ size }
 				suffix={ inputSuffix }
 				value={ value }
+				step={ step }
 				__unstableStateReducer={ composeStateReducers(
 					unitControlStateReducer,
 					stateReducer

diff --git a/packages/components/src/unit-control/index.native.js b/packages/components/src/unit-control/index.native.js
@@ -123,6 +123,17 @@ function UnitControl( {
 		);
 	}, [ pickerRef, units, onUnitChange, getAnchor ] );
 
+	let step = props.step;
+
+	/*
+	 * If no step prop has been passed, lookup the active unit and
+	 * try to get step from `units`, or default to a value of `1`
+	 */
+	if ( ! step && units ) {
+		const activeUnit = units.find( ( option ) => option.value === unit );
+		step = activeUnit?.step ?? 1;
+	}
+
 	return (
 		<>
 			{ unit !== '%' ? (
@@ -133,6 +144,7 @@ function UnitControl( {
 					onChange={ onChange }
 					separatorType={ separatorType }
 					value={ value }
+					step={ step }
 					defaultValue={ initialControlValue }
 					shouldDisplayTextInput
 					decimalNum={ unit === 'px' ? 0 : decimalNum }
@@ -149,6 +161,7 @@ function UnitControl( {
 					minimumValue={ min }
 					maximumValue={ max }
 					value={ value }
+					step={ step }
 					unit={ unit }
 					defaultValue={ initialControlValue }
 					separatorType={ separatorType }