RangeControl: Integrate NumberControl + update internal state flow

packages/components/CHANGELOG.md

@@ -2,6 +2,10 @@
 
 ## Unreleased
 
+### Breaking Change
+
+- `NumberControl` no longer automatically transforms values when rendering `value` into a `<input />` HTML element.
+
 ## 9.6.0 (2020-05-14)
 
 ### Bug Fix

packages/components/src/box-control/index.js

@@ -39,10 +39,9 @@ const defaultInputProps = {
 };
 
 function useUniqueId( idProp ) {
-	const instanceId = useInstanceId( BoxControl );
-	const id = `inspector-box-control-${ instanceId }`;
+	const instanceId = useInstanceId( BoxControl, 'inspector-box-control' );
 
-	return idProp || id;
+	return idProp || instanceId;
 }
 export default function BoxControl( {
 	id: idProp,

packages/components/src/input-control/index.js

@@ -17,7 +17,7 @@ import Backdrop from './backdrop';
 import InputField from './input-field';
 import Label from './label';
 import { Container, Root, Suffix } from './styles/input-control-styles';
-import { isValueEmpty } from './utils';
+import { isValueEmpty } from '../utils/values';
 
 function useUniqueId( idProp ) {
 	const instanceId = useInstanceId( InputControl );

packages/components/src/input-control/input-field.js

@@ -12,9 +12,10 @@ import { UP, DOWN, ENTER } from '@wordpress/keycodes';
 /**
  * Internal dependencies
  */
-import { useDragCursor, isValueEmpty } from './utils';
+import { useDragCursor } from './utils';
 import { Input } from './styles/input-control-styles';
 import { useInputControlStateReducer } from './state';
+import { isValueEmpty } from '../utils/values';
 
 function InputField(
 	{

packages/components/src/input-control/utils.js

@@ -3,33 +3,24 @@
  */
 import { useEffect } from '@wordpress/element';
 
-/**
- * Internal dependencies
- */
-import { getRTL } from '../utils/style-mixins';
-
 /**
  * Gets a CSS cursor value based on a drag direction.
  *
  * @param {string} dragDirection The drag direction.
  * @return {string} The CSS cursor value.
  */
 export function getDragCursor( dragDirection ) {
-	const isRtl = getRTL();
-	let dragCursor = 'n-resize';
+	let dragCursor = 'ns-resize';
 
 	switch ( dragDirection ) {
 		case 'n':
-			dragCursor = 'n-resize';
-			break;
-		case 'e':
-			dragCursor = isRtl ? 'w-resize' : 'e-resize';
-			break;
 		case 's':
-			dragCursor = 's-resize';
+			dragCursor = 'ns-resize';
 			break;
+
+		case 'e':
 		case 'w':
-			dragCursor = isRtl ? 'e-resize' : 'w-resize';
+			dragCursor = 'ew-resize';
 			break;
 	}
 
@@ -59,16 +50,3 @@ export function useDragCursor( isDragging, dragDirection ) {
 
 	return dragCursor;
 }
-
-/**
- * Determines if a value is empty, null, or undefined.
- *
- * @param {any} value The value to check.
- * @return {boolean} Whether value is empty.
- */
-export function isValueEmpty( value ) {
-	const isNullish = typeof value === 'undefined' || value === null;
-	const isEmptyString = value === '';
-
-	return isNullish || isEmptyString;
-}

packages/components/src/number-control/README.md

@@ -65,7 +65,7 @@ If true, pressing `UP` or `DOWN` along with the `SHIFT` key will increment the v
 
 ### shiftStep
 
-Amount to increment by when the `SHIFT` key is held down.
+Amount to increment by when the `SHIFT` key is held down. This shift value is a multiplier to the `step` value. For example, if the `step` value is `5`, and `shiftStep` is `10`, each jump would increment/decrement by `50`.
 
 -   Type: `Number`
 -   Required: No

packages/components/src/number-control/index.js

@@ -1,7 +1,6 @@
 /**
  * External dependencies
  */
-import { clamp } from 'lodash';
 import classNames from 'classnames';
 
 /**
@@ -13,13 +12,14 @@ import { forwardRef } from '@wordpress/element';
  * Internal dependencies
  */
 import { Input } from './styles/number-control-styles';
-import { add, getValue, roundClamp, subtract } from './utils';
-import { isValueEmpty } from '../input-control/utils';
 import {
 	inputControlActionTypes,
 	composeStateReducers,
 } from '../input-control/state';
 import { useRTL } from '../utils/style-mixins';
+import { add, subtract, roundClamp } from '../utils/math';
+import { useJumpStep } from '../utils/hooks';
+import { isValueEmpty } from '../utils/values';
 
 export function NumberControl(
 	{
@@ -40,9 +40,14 @@ export function NumberControl(
 	},
 	ref
 ) {
-	const initialValue = getValue( valueProp, min, max );
-	const baseValue = clamp( 0, min, max );
 	const isRtl = useRTL();
+	const baseValue = roundClamp( 0, min, max, step );
+
+	const jumpStep = useJumpStep( {
+		step,
+		shiftStep,
+		isShiftStepEnabled,
+	} );
 
 	const autoComplete = typeProp === 'number' ? 'off' : null;
 	const classes = classNames( 'components-number-control', className );
@@ -59,7 +64,6 @@ export function NumberControl(
 	const numberControlStateReducer = ( state, action ) => {
 		const { type, payload } = action;
 		const event = payload?.event;
-
 		const currentValue = state.value;
 
 		/**
@@ -72,7 +76,7 @@ export function NumberControl(
 			const enableShift = event.shiftKey && isShiftStepEnabled;
 
 			const incrementalValue = enableShift
-				? parseFloat( shiftStep )
+				? parseFloat( shiftStep ) * parseFloat( step )
 				: parseFloat( step );
 			let nextValue = isValueEmpty( currentValue )
 				? baseValue
@@ -101,7 +105,9 @@ export function NumberControl(
 		if ( type === inputControlActionTypes.DRAG && isDragEnabled ) {
 			const { delta, shiftKey } = payload;
 			const [ x, y ] = delta;
-			const modifier = shiftKey ? shiftStep : 1;
+			const modifier = shiftKey
+				? parseFloat( shiftStep ) * parseFloat( step )
+				: parseFloat( step );
 
 			let directionModifier;
 			let directionBaseValue;
@@ -169,8 +175,9 @@ export function NumberControl(
 			max={ max }
 			min={ min }
 			ref={ ref }
+			step={ jumpStep }
 			type={ typeProp }
-			value={ initialValue }
+			value={ valueProp }
 			__unstableStateReducer={ composeStateReducers(
 				numberControlStateReducer,
 				stateReducer