From da7a927a838427a3ea9a0d3a3b0e1a98a430325a Mon Sep 17 00:00:00 2001
From: Ari Stathopoulos <aristath@gmail.com>
Date: Fri, 18 Jun 2021 09:54:41 +0300
Subject: [PATCH] Fix: Allow decimals in spacing controls (#32692)

* Add a default step to all CSS units

* add step to roundClamp
---
 packages/components/src/number-control/index.js |  2 +-
 packages/components/src/unit-control/utils.js   | 15 +++++++++++++++
 2 files changed, 16 insertions(+), 1 deletion(-)

diff --git a/packages/components/src/number-control/index.js b/packages/components/src/number-control/index.js
index 519cbbb57f064..86cbe0dca6b2d 100644
--- a/packages/components/src/number-control/index.js
+++ b/packages/components/src/number-control/index.js
@@ -155,7 +155,7 @@ export function NumberControl(
 			type === inputControlActionTypes.PRESS_ENTER ||
 			type === inputControlActionTypes.COMMIT
 		) {
-			state.value = roundClamp( currentValue, min, max );
+			state.value = roundClamp( currentValue, min, max, step );
 		}
 
 		return state;
diff --git a/packages/components/src/unit-control/utils.js b/packages/components/src/unit-control/utils.js
index 570408b20a23a..7631cde1a061e 100644
--- a/packages/components/src/unit-control/utils.js
+++ b/packages/components/src/unit-control/utils.js
@@ -17,90 +17,105 @@ const allUnits = {
 		label: isWeb ? 'px' : __( 'Pixels (px)' ),
 		default: '',
 		a11yLabel: __( 'Pixels (px)' ),
+		step: 1,
 	},
 	percent: {
 		value: '%',
 		label: isWeb ? '%' : __( 'Percentage (%)' ),
 		default: '',
 		a11yLabel: __( 'Percent (%)' ),
+		step: 0.1,
 	},
 	em: {
 		value: 'em',
 		label: isWeb ? 'em' : __( 'Relative to parent font size (em)' ),
 		default: '',
 		a11yLabel: _x( 'ems', 'Relative to parent font size (em)' ),
+		step: 0.01,
 	},
 	rem: {
 		value: 'rem',
 		label: isWeb ? 'rem' : __( 'Relative to root font size (rem)' ),
 		default: '',
 		a11yLabel: _x( 'rems', 'Relative to root font size (rem)' ),
+		step: 0.01,
 	},
 	vw: {
 		value: 'vw',
 		label: isWeb ? 'vw' : __( 'Viewport width (vw)' ),
 		default: '',
 		a11yLabel: __( 'Viewport width (vw)' ),
+		step: 0.1,
 	},
 	vh: {
 		value: 'vh',
 		label: isWeb ? 'vh' : __( 'Viewport height (vh)' ),
 		default: '',
 		a11yLabel: __( 'Viewport height (vh)' ),
+		step: 0.1,
 	},
 	vmin: {
 		value: 'vmin',
 		label: isWeb ? 'vmin' : __( 'Viewport smallest dimension (vmin)' ),
 		default: '',
 		a11yLabel: __( 'Viewport smallest dimension (vmin)' ),
+		step: 0.1,
 	},
 	vmax: {
 		value: 'vmax',
 		label: isWeb ? 'vmax' : __( 'Viewport largest dimension (vmax)' ),
 		default: '',
 		a11yLabel: __( 'Viewport largest dimension (vmax)' ),
+		step: 0.1,
 	},
 	ch: {
 		value: 'ch',
 		label: isWeb ? 'ch' : __( 'Width of the zero (0) character (ch)' ),
 		default: '',
 		a11yLabel: __( 'Width of the zero (0) character (ch)' ),
+		step: 0.01,
 	},
 	ex: {
 		value: 'ex',
 		label: isWeb ? 'ex' : __( 'x-height of the font (ex)' ),
 		default: '',
 		a11yLabel: __( 'x-height of the font (ex)' ),
+		step: 0.01,
 	},
 	cm: {
 		value: 'cm',
 		label: isWeb ? 'cm' : __( 'Centimeters (cm)' ),
 		default: '',
 		a11yLabel: __( 'Centimeters (cm)' ),
+		step: 0.001,
 	},
 	mm: {
 		value: 'mm',
 		label: isWeb ? 'mm' : __( 'Millimeters (mm)' ),
 		default: '',
 		a11yLabel: __( 'Millimeters (mm)' ),
+		step: 0.1,
 	},
 	in: {
 		value: 'in',
 		label: isWeb ? 'in' : __( 'Inches (in)' ),
 		default: '',
 		a11yLabel: __( 'Inches (in)' ),
+		step: 0.001,
 	},
 	pc: {
 		value: 'pc',
 		label: isWeb ? 'pc' : __( 'Picas (pc)' ),
 		default: '',
 		a11yLabel: __( 'Picas (pc)' ),
+		step: 1,
 	},
 	pt: {
 		value: 'pt',
 		label: isWeb ? 'pt' : __( 'Points (pt)' ),
 		default: '',
 		a11yLabel: __( 'Points (pt)' ),
+		step: 1,
 	},
 };