NumberControl: Allow empty values

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

@@ -81,6 +81,14 @@ The position of the label (`top`, `side`, `bottom`, or `edge`).
 -   Type: `String`
 -   Required: No
 
+### required
+
+If `true` enforces a valid number within the control's min/max range. If `false` allows an empty string as a valid value.
+
+-   Type: `Boolean`
+-   Required: No
+-   Default: `false`
+
 ### shiftStep
 
 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`.

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

@@ -32,6 +32,7 @@ export function NumberControl(
 		label,
 		max = Infinity,
 		min = -Infinity,
+		required = false,
 		shiftStep = 10,
 		step = 1,
 		type: typeProp = 'number',
@@ -155,7 +156,11 @@ export function NumberControl(
 			type === inputControlActionTypes.PRESS_ENTER ||
 			type === inputControlActionTypes.COMMIT
 		) {
-			state.value = roundClamp( currentValue, min, max, step );
+			const applyEmptyValue = required === false && currentValue === '';
+
+			state.value = applyEmptyValue
+				? currentValue
+				: roundClamp( currentValue, min, max, step );
 		}
 
 		return state;
@@ -174,6 +179,7 @@ export function NumberControl(
 			max={ max }
 			min={ min }
 			ref={ ref }
+			required={ required }
 			step={ jumpStep }
 			type={ typeProp }
 			value={ valueProp }

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

@@ -30,6 +30,7 @@ function Example() {
 		min: number( 'min', 0 ),
 		max: number( 'max', 100 ),
 		placeholder: text( 'placeholder', 0 ),
+		required: boolean( 'required', false ),
 		shiftStep: number( 'shiftStep', 10 ),
 		step: number( 'step', 1 ),
 	};

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

@@ -82,14 +82,58 @@ describe( 'NumberControl', () => {
 			expect( input.value ).toBe( '0' );
 		} );
 
-		it( 'should parse to number value on ENTER keypress', () => {
-			render( <NumberControl value={ 5 } /> );
+		it( 'should parse to number value on ENTER keypress when required', () => {
+			render( <NumberControl value={ 5 } required={ true } /> );
+
+			const input = getInput();
+			input.focus();
+			fireEvent.change( input, { target: { value: '10 abc' } } );
+			fireKeyDown( { keyCode: ENTER } );
+
+			expect( input.value ).toBe( '0' );
+		} );
+
+		it( 'should parse to empty string on ENTER keypress when not required', () => {
+			render( <NumberControl value={ 5 } required={ false } /> );
 
 			const input = getInput();
 			input.focus();
 			fireEvent.change( input, { target: { value: '10 abc' } } );
 			fireKeyDown( { keyCode: ENTER } );
 
+			expect( input.value ).toBe( '' );
+		} );
+
+		it( 'should accept empty string on ENTER keypress for optional field', () => {
+			render( <NumberControl value={ 5 } required={ false } /> );
+
+			const input = getInput();
+			input.focus();
+			fireEvent.change( input, { target: { value: '' } } );
+			fireKeyDown( { keyCode: ENTER } );
+
+			expect( input.value ).toBe( '' );
+		} );
+
+		it( 'should not enforce numerical value for empty string when required is omitted', () => {
+			render( <NumberControl value={ 5 } /> );
+
+			const input = getInput();
+			input.focus();
+			fireEvent.change( input, { target: { value: '' } } );
+			fireKeyDown( { keyCode: ENTER } );
+
+			expect( input.value ).toBe( '' );
+		} );
+
+		it( 'should enforce numerical value for empty string when required', () => {
+			render( <NumberControl value={ 5 } required={ true } /> );
+
+			const input = getInput();
+			input.focus();
+			fireEvent.change( input, { target: { value: '' } } );
+			fireKeyDown( { keyCode: ENTER } );
+
 			expect( input.value ).toBe( '0' );
 		} );
 	} );