Remove shift-stepping from range in RangeControl

WordPress · Sep 22, 2021 · efdce4e · efdce4e
1 parent 860507a
commit efdce4e
Show file tree

Hide file tree

Showing 4 changed files with 18 additions and 23 deletions.
diff --git a/packages/components/CHANGELOG.md b/packages/components/CHANGELOG.md
@@ -2,10 +2,19 @@
 
 ## Unreleased
 
-### Breaking changes
+### Breaking Changes
 
 -   Removed the deprecated `position` and `menuLabel` from the `DropdownMenu` component ([#34537](https://github.com/WordPress/gutenberg/pull/34537)).
 -   Removed the deprecated `onClickOutside` prop from the `Popover` component ([#34537](https://github.com/WordPress/gutenberg/pull/34537)).
+-   Changed `RangeControl` component to not apply `shiftStep` to inputs from its `<input type="range"/>` ([35020](https://github.com/WordPress/gutenberg/pull/35020)).
+
+### Bug Fix
+
+-   Fixed rounding of value in `RangeControl` component when it looses focus while the `SHIFT` key is held. ([#34363](https://github.com/WordPress/gutenberg/issues/34363)).
+
+### Internal
+
+-   Deleted the `createComponent` utility function ([#34929](https://github.com/WordPress/gutenberg/pull/34929)).
 
 ## 17.0.0 (2021-09-09)
 
@@ -22,7 +31,6 @@
 ### Internal
 
 -   Renamed `PolymorphicComponent*` types to `WordPressComponent*` ([#34330](https://github.com/WordPress/gutenberg/pull/34330)).
--   Deleted the `createComponent` utility function ([#34929](https://github.com/WordPress/gutenberg/pull/34929)).
 
 ## 16.0.0 (2021-08-23)
 

diff --git a/packages/components/src/range-control/README.md b/packages/components/src/range-control/README.md
@@ -172,11 +172,10 @@ If no value exists this prop contains the slider starting position.
 
 ### isShiftStepEnabled
 
-If true, pressing `UP` or `DOWN` along with the `SHIFT` key will increment the value by the `shiftStep` value.
+Passed as a prop to the `NumberControl` component and is only applicable if `withInputField` is true. If true, while the number input has focus, pressing `UP` or `DOWN` along with the `SHIFT` key will change the value by the `shiftStep` value.
 
 -   Type: `Boolean`
 -   Required: No
--   Default: `true`
 
 #### marks
 
@@ -287,6 +286,13 @@ The stepping interval between `min` and `max` values. Step is used both for user
 -   Required: No
 -   Platform: Web
 
+### shiftStep
+
+Passed as a prop to the `NumberControl` component and is only applicable if `withInputField` and `isShiftStepEnabled` are both true and while the number input has focus. Acts as a multiplier of `step`.
+
+-   Type: `Number`
+-   Required: No
+
 #### trackColor
 
 Customizes the (background) color of the track element.

diff --git a/packages/components/src/range-control/index.js b/packages/components/src/range-control/index.js
@@ -217,7 +217,6 @@ function RangeControl(
 						describedBy={ describedBy }
 						disabled={ disabled }
 						id={ id }
-						isShiftStepEnabled={ isShiftStepEnabled }
 						label={ label }
 						max={ max }
 						min={ min }
@@ -227,7 +226,6 @@ function RangeControl(
 						onMouseMove={ onMouseMove }
 						onMouseLeave={ onMouseLeave }
 						ref={ setRef }
-						shiftStep={ shiftStep }
 						step={ step }
 						value={ inputSliderValue }
 					/>

diff --git a/packages/components/src/range-control/input-range.js b/packages/components/src/range-control/input-range.js
@@ -14,33 +14,20 @@ import { forwardRef } from '@wordpress/element';
  */
 import { InputRange as BaseInputRange } from './styles/range-control-styles';
 import { useDebouncedHoverInteraction } from './utils';
-import { useJumpStep } from '../utils/hooks';
 
 function InputRange(
 	{
 		describedBy,
-		isShiftStepEnabled = true,
 		label,
 		onHideTooltip = noop,
 		onMouseLeave = noop,
-		step = 1,
-		onBlur = noop,
-		onChange = noop,
-		onFocus = noop,
 		onMouseMove = noop,
 		onShowTooltip = noop,
-		shiftStep = 10,
 		value,
 		...props
 	},
 	ref
 ) {
-	const jumpStep = useJumpStep( {
-		step,
-		shiftStep,
-		isShiftStepEnabled,
-	} );
-
 	const hoverInteractions = useDebouncedHoverInteraction( {
 		onHide: onHideTooltip,
 		onMouseLeave,
@@ -55,11 +42,7 @@ function InputRange(
 			aria-describedby={ describedBy }
 			aria-label={ label }
 			aria-hidden={ false }
-			onBlur={ onBlur }
-			onChange={ onChange }
-			onFocus={ onFocus }
 			ref={ ref }
-			step={ jumpStep }
 			tabIndex={ 0 }
 			type="range"
 			value={ value }