From e9e64e03a9247ea49d70f6c33b9860b712b7d644 Mon Sep 17 00:00:00 2001 From: Marco Ciampini Date: Wed, 20 Jul 2022 20:50:11 +0200 Subject: [PATCH 1/4] add unit test --- .../src/range-control/test/index.tsx | 30 +++++++++++++++++++ 1 file changed, 30 insertions(+) diff --git a/packages/components/src/range-control/test/index.tsx b/packages/components/src/range-control/test/index.tsx index 1d241ddbe0f33..5a9b83ab0bed8 100644 --- a/packages/components/src/range-control/test/index.tsx +++ b/packages/components/src/range-control/test/index.tsx @@ -200,6 +200,36 @@ describe( 'RangeControl', () => { expect( rangeInput?.value ).toBe( '10' ); } ); + + it( 'should clamp initialPosition between min and max on first render, and on reset', () => { + render( + + ); + + const numberInput = getNumberInput(); + const rangeInput = getRangeInput(); + const resetButton = getResetButton(); + + // Value should be clamped on initial load + expect( numberInput?.value ).toBe( '100' ); + expect( rangeInput?.value ).toBe( '100' ); + + fireChangeEvent( numberInput, '50' ); + + expect( numberInput?.value ).toBe( '50' ); + expect( rangeInput?.value ).toBe( '50' ); + + // Value should be clamped after resetting + fireEvent.click( resetButton as Element ); + + expect( numberInput?.value ).toBe( '100' ); + expect( rangeInput?.value ).toBe( '100' ); + } ); } ); describe( 'input field', () => { From d193482cd4bbc7a7eef6a6251f48b7ab7537d8a9 Mon Sep 17 00:00:00 2001 From: Marco Ciampini Date: Wed, 20 Jul 2022 20:51:15 +0200 Subject: [PATCH 2/4] clamp initialValue --- packages/components/src/range-control/utils.ts | 5 ++++- 1 file changed, 4 insertions(+), 1 deletion(-) diff --git a/packages/components/src/range-control/utils.ts b/packages/components/src/range-control/utils.ts index 78657f9e32e7a..39cdc7b9f6f12 100644 --- a/packages/components/src/range-control/utils.ts +++ b/packages/components/src/range-control/utils.ts @@ -50,7 +50,10 @@ export function useControlledRangeValue( const { min, max, value: valueProp, initial } = settings; const [ state, setInternalState ] = useControlledState( floatClamp( valueProp, min, max ), - { initial, fallback: null } + { + initial: floatClamp( initial ?? null, min, max ), + fallback: null, + } ); const setState = useCallback( From 45d18d4fd9ab3cb3a70c95b0e461a034787486df Mon Sep 17 00:00:00 2001 From: Marco Ciampini Date: Wed, 20 Jul 2022 21:00:39 +0200 Subject: [PATCH 3/4] CHANGELOG --- packages/components/CHANGELOG.md | 1 + 1 file changed, 1 insertion(+) diff --git a/packages/components/CHANGELOG.md b/packages/components/CHANGELOG.md index 9787549b84f31..92faec70fb1b8 100644 --- a/packages/components/CHANGELOG.md +++ b/packages/components/CHANGELOG.md @@ -6,6 +6,7 @@ - `CustomSelectControl`: Fix font size and hover/focus style inconsistencies with `SelectControl` ([#42460](https://github.com/WordPress/gutenberg/pull/42460/)). - `AnglePickerControl`: Fix gap between elements in RTL mode ([#42534](https://github.com/WordPress/gutenberg/pull/42534)). +- `RangeControl`: clamp initialPosition between min and max values ([#42571](https://github.com/WordPress/gutenberg/pull/42571)). ### Enhancements From 5569910799a54af960803ad189153ce8a583b99e Mon Sep 17 00:00:00 2001 From: Marco Ciampini Date: Thu, 21 Jul 2022 07:54:24 +0200 Subject: [PATCH 4/4] Update docs --- packages/components/src/range-control/README.md | 2 +- packages/components/src/range-control/types.ts | 4 +++- 2 files changed, 4 insertions(+), 2 deletions(-) diff --git a/packages/components/src/range-control/README.md b/packages/components/src/range-control/README.md index 774ced541200e..121b74e93339d 100644 --- a/packages/components/src/range-control/README.md +++ b/packages/components/src/range-control/README.md @@ -184,7 +184,7 @@ An icon to be shown above the slider next to its container title. ### `initialPosition`: `number` -If no value exists this prop contains the slider starting position. +The slider starting position, used when no `value` is passed. The `initialPosition` will be clamped between the provided `min` and `max` prop values. - Required: No - Platform: Web | Mobile diff --git a/packages/components/src/range-control/types.ts b/packages/components/src/range-control/types.ts index 02a5a870317fe..67682be3fd845 100644 --- a/packages/components/src/range-control/types.ts +++ b/packages/components/src/range-control/types.ts @@ -119,7 +119,9 @@ export type RangeControlProps< IconProps = unknown > = Pick< */ icon?: string; /** - * If no value exists this prop contains the slider starting position. + * The slider starting position, used when no `value` is passed. + * The `initialPosition` will be clamped between the provided `min` + * and `max` prop values. */ initialPosition?: number; /**