From f796784b3dc03d9984af70c3efdfdebcf3788c62 Mon Sep 17 00:00:00 2001
From: Aaron Robertshaw <60436221+aaronrobertshaw@users.noreply.github.com>
Date: Fri, 16 Jul 2021 12:34:57 +1000
Subject: [PATCH] Switch to using required prop for accepting empty strings

To be more in line with an HTML number input, this changes the NumberControl to check the required prop to determine whether an empty string is valid or not.
---
 .../components/src/number-control/README.md   | 15 +++++------
 .../components/src/number-control/index.js    |  5 ++--
 .../src/number-control/test/index.js          | 26 +++++++++++++++++--
 3 files changed, 34 insertions(+), 12 deletions(-)

diff --git a/packages/components/src/number-control/README.md b/packages/components/src/number-control/README.md
index 0d8f8d48a133c..9c1275beccb58 100644
--- a/packages/components/src/number-control/README.md
+++ b/packages/components/src/number-control/README.md
@@ -27,14 +27,6 @@ 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.
@@ -89,6 +81,13 @@ The position of the label (`top`, `side`, `bottom`, or `edge`).
 -   Type: `String`
 -   Required: No
 
+### required
+
+If boolean false, allows an empty string as a valid value.
+
+-   Type: `Boolean`
+-   Required: No
+
 ### 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`.
diff --git a/packages/components/src/number-control/index.js b/packages/components/src/number-control/index.js
index c52ebb1931f80..032a253e18d63 100644
--- a/packages/components/src/number-control/index.js
+++ b/packages/components/src/number-control/index.js
@@ -29,10 +29,10 @@ export function NumberControl(
 		hideHTMLArrows = false,
 		isDragEnabled = true,
 		isShiftStepEnabled = true,
-		allowEmpty = false,
 		label,
 		max = Infinity,
 		min = -Infinity,
+		required,
 		shiftStep = 10,
 		step = 1,
 		type: typeProp = 'number',
@@ -156,7 +156,7 @@ export function NumberControl(
 			type === inputControlActionTypes.PRESS_ENTER ||
 			type === inputControlActionTypes.COMMIT
 		) {
-			const applyEmptyValue = allowEmpty && currentValue === '';
+			const applyEmptyValue = required === false && currentValue === '';
 
 			state.value = applyEmptyValue
 				? currentValue
@@ -179,6 +179,7 @@ export function NumberControl(
 			max={ max }
 			min={ min }
 			ref={ ref }
+			required={ required }
 			step={ jumpStep }
 			type={ typeProp }
 			value={ valueProp }
diff --git a/packages/components/src/number-control/test/index.js b/packages/components/src/number-control/test/index.js
index d2b799554ff88..1e35166f60733 100644
--- a/packages/components/src/number-control/test/index.js
+++ b/packages/components/src/number-control/test/index.js
@@ -93,8 +93,8 @@ describe( 'NumberControl', () => {
 			expect( input.value ).toBe( '0' );
 		} );
 
-		it( 'should accept empty string on ENTER keypress', () => {
-			render( <NumberControl value={ 5 } allowEmpty={ true } /> );
+		it( 'should accept empty string on ENTER keypress for optional field', () => {
+			render( <NumberControl value={ 5 } required={ false } /> );
 
 			const input = getInput();
 			input.focus();
@@ -103,6 +103,28 @@ describe( 'NumberControl', () => {
 
 			expect( input.value ).toBe( '' );
 		} );
+
+		it( 'should 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( '0' );
+		} );
+
+		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' );
+		} );
 	} );
 
 	describe( 'Key UP interactions', () => {