Allow clearing of NumberControl

Add new prop to determine if NumberControl should allow empty string value.

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

@@ -27,6 +27,14 @@ const Example = () => {
 
 ## Props
 
+### allowEmpty
+
+If true, allows an empty string as a valid value.
+
+-   Type: `Boolean`
+-   Required: No
+-   Default: `false`
+
 ### dragDirection
 
 Determines the drag axis to increment/decrement the value.

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

@@ -29,6 +29,7 @@ export function NumberControl(
 		hideHTMLArrows = false,
 		isDragEnabled = true,
 		isShiftStepEnabled = true,
+		allowEmpty = false,
 		label,
 		max = Infinity,
 		min = -Infinity,
@@ -155,7 +156,11 @@ export function NumberControl(
 			type === inputControlActionTypes.PRESS_ENTER ||
 			type === inputControlActionTypes.COMMIT
 		) {
-			state.value = roundClamp( currentValue, min, max, step );
+			const applyEmptyValue = allowEmpty && currentValue === '';
+
+			state.value = applyEmptyValue
+				? currentValue
+				: roundClamp( currentValue, min, max, step );
 		}
 
 		return state;

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

@@ -92,6 +92,17 @@ describe( 'NumberControl', () => {
 
 			expect( input.value ).toBe( '0' );
 		} );
+
+		it( 'should accept empty string on ENTER keypress', () => {
+			render( <NumberControl value={ 5 } allowEmpty={ true } /> );
+
+			const input = getInput();
+			input.focus();
+			fireEvent.change( input, { target: { value: '' } } );
+			fireKeyDown( { keyCode: ENTER } );
+
+			expect( input.value ).toBe( '' );
+		} );
 	} );
 
 	describe( 'Key UP interactions', () => {