From efdce4e3f64c050a34995faec26b0914c5788088 Mon Sep 17 00:00:00 2001 From: Mitchell Austin Date: Tue, 21 Sep 2021 12:09:44 -0700 Subject: [PATCH 1/2] Remove shift-stepping from range in RangeControl --- packages/components/CHANGELOG.md | 12 ++++++++++-- packages/components/src/range-control/README.md | 10 ++++++++-- packages/components/src/range-control/index.js | 2 -- .../components/src/range-control/input-range.js | 17 ----------------- 4 files changed, 18 insertions(+), 23 deletions(-) diff --git a/packages/components/CHANGELOG.md b/packages/components/CHANGELOG.md index f552d39ca4acd..3e7ab5f9018b3 100644 --- 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 `` ([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 index 203e6992f0dea..0a44999f33fd9 100644 --- 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 index 6c3094c8b7175..c7c718df9fa04 100644 --- 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 index 6a0f57bd8e0ff..ddc091b60de8d 100644 --- 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 } From 6bcaddf38b977d78b7290fcc9e13e15cb91ce05e Mon Sep 17 00:00:00 2001 From: Mitchell Austin Date: Wed, 22 Sep 2021 09:34:49 -0700 Subject: [PATCH 2/2] Apply suggestions from code review Co-authored-by: Marco Ciampini --- packages/components/CHANGELOG.md | 2 +- packages/components/src/range-control/README.md | 4 ++-- 2 files changed, 3 insertions(+), 3 deletions(-) diff --git a/packages/components/CHANGELOG.md b/packages/components/CHANGELOG.md index 3e7ab5f9018b3..da076b23a46d4 100644 --- a/packages/components/CHANGELOG.md +++ b/packages/components/CHANGELOG.md @@ -10,7 +10,7 @@ ### 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)). +- Fixed rounding of value in `RangeControl` component when it loses focus while the `SHIFT` key is held. ([#35020](https://github.com/WordPress/gutenberg/pull/35020)). ### Internal diff --git a/packages/components/src/range-control/README.md b/packages/components/src/range-control/README.md index 0a44999f33fd9..d45529e98bc00 100644 --- a/packages/components/src/range-control/README.md +++ b/packages/components/src/range-control/README.md @@ -170,7 +170,7 @@ If no value exists this prop contains the slider starting position. - Required: No - Platform: Web | Mobile -### isShiftStepEnabled +#### isShiftStepEnabled 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. @@ -286,7 +286,7 @@ The stepping interval between `min` and `max` values. Step is used both for user - Required: No - Platform: Web -### shiftStep +#### 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`.