Revisions

packages/components/CHANGELOG.md

@@ -1,3 +1,13 @@
+## 7.2.0 (Unreleased)
+
+### Improvements
+
+- Make `RangeControl` validation rely on the `checkValidity` provided by the browsers instead of using our own validation.
+
+### Bug Fixes
+
+- Fix a problem that made `RangeControl` not work as expected with float values.
+
 ## 7.1.0 (2019-03-06)
 
 ### New Features
@@ -9,13 +19,11 @@
 - `withFilters` has been optimized to avoid binding hook handlers for each mounted instance of the component, instead using a single centralized hook delegator.
 - `withFilters` has been optimized to reuse a single shared component definition for all filtered instances of the component.
 - Make `RangeControl` validate min and max properties.
-- Allow users to choose if `RangeControl` input is required or not. Defaults to not be required.
 
 ### Bug Fixes
 
 - Resolves a conflict where two instance of Slot would produce an inconsistent or duplicated rendering output.
 - Allow years between 0 and 1970 in DateTime component.
-- Fix a bug that made `RangeControl` not work as expected with float values; Started relying on the browser validations instead of our own.
 
 ### New Feature
 

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

@@ -184,14 +184,6 @@ The maximum value accepted. If higher values are inserted onChange will not be c
 - Type: `Number`
 - Required: No
 
-#### required
-
-If true having the input field empty is invalid. If false having the input field empty is valid.
-
-- Type: `Boolean`
-- Required: Yes
-- Default: false
-
 ## Related components
 
 - To collect a numerical input in a text field, use the `TextControl` component.

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

@@ -30,7 +30,6 @@ function RangeControl( {
 	min,
 	max,
 	setState,
-	required = false,
 	...props
 } ) {
 	const id = `inspector-range-control-${ instanceId }`;
@@ -60,8 +59,8 @@ function RangeControl( {
 		// The input is valid, reset the local state property used to temporaly save the value,
 		// and call onChange with the new value as a number.
 		resetCurrentInput();
-		onChange( ( newValue === undefined || newValue === '' ) ?
-			newValue :
+		onChange( ( newValue === '' ) ?
+			undefined :
 			parseFloat( newValue )
 		);
 	};
@@ -81,7 +80,6 @@ function RangeControl( {
 				className="components-range-control__slider"
 				id={ id }
 				type="range"
-				required={ required }
 				value={ initialSliderValue }
 				onChange={ onChangeValue }
 				aria-describedby={ !! help ? id + '__help' : undefined }
@@ -92,7 +90,6 @@ function RangeControl( {
 			<input
 				className="components-range-control__number"
 				type="number"
-				required={ required }
 				onChange={ onChangeValue }
 				aria-label={ label }
 				value={ currentInputValue }