From 5da089b4e1f27e91965cea0d02942e10d88bcd48 Mon Sep 17 00:00:00 2001 From: Marco Ciampini Date: Tue, 3 May 2022 12:38:35 +0200 Subject: [PATCH 1/5] Fix controlled value of `unit` when the `units` prop only has one unit --- packages/components/src/unit-control/index.tsx | 2 +- packages/components/src/unit-control/test/index.tsx | 7 +------ 2 files changed, 2 insertions(+), 7 deletions(-) diff --git a/packages/components/src/unit-control/index.tsx b/packages/components/src/unit-control/index.tsx index 3296438b04b8c4..735cde6b3f30c3 100644 --- a/packages/components/src/unit-control/index.tsx +++ b/packages/components/src/unit-control/index.tsx @@ -88,7 +88,7 @@ function UnforwardedUnitControl( ); const [ unit, setUnit ] = useControlledState< string | undefined >( - unitProp, + units.length === 1 ? units[ 0 ].label : unitProp, { initial: parsedUnit, fallback: '', diff --git a/packages/components/src/unit-control/test/index.tsx b/packages/components/src/unit-control/test/index.tsx index c57af0e75a7379..1ccf69f9baf488 100644 --- a/packages/components/src/unit-control/test/index.tsx +++ b/packages/components/src/unit-control/test/index.tsx @@ -135,12 +135,7 @@ describe( 'UnitControl', () => { } ); it( 'should render label if single units', () => { - render( - - ); + render( ); const select = screen.queryByRole( 'combobox' ); const label = screen.getByText( '%' ); From 0a8df80580af4cf78386559e49deab72958725a3 Mon Sep 17 00:00:00 2001 From: Marco Ciampini Date: Tue, 3 May 2022 12:53:32 +0200 Subject: [PATCH 2/5] Restore simpler Storybook "single unit" example --- .../src/unit-control/stories/index.tsx | 36 ++----------------- 1 file changed, 3 insertions(+), 33 deletions(-) diff --git a/packages/components/src/unit-control/stories/index.tsx b/packages/components/src/unit-control/stories/index.tsx index 5fdace14370ea6..87dfd3a84c602d 100644 --- a/packages/components/src/unit-control/stories/index.tsx +++ b/packages/components/src/unit-control/stories/index.tsx @@ -109,40 +109,10 @@ TweakingTheNumberInput.args = { /** * When only one unit is available, the unit selection dropdown becomes static text. */ -export const WithSingleUnitControlled: ComponentStory< +export const WithSingleUnit: ComponentStory< typeof UnitControl -> = ( { onChange, ...args } ) => { - // Starting value is `undefined` - const [ value, setValue ] = useState< string | undefined >( undefined ); - - return ( -
- { - setValue( v ); - onChange?.( v, extra ); - } } - /> -
- ); -}; -WithSingleUnitControlled.args = { - ...Default.args, - units: CSS_UNITS.slice( 0, 1 ), -}; - -export const WithSingleUnitUncontrolled: ComponentStory< - typeof UnitControl -> = ( args ) => { - return ( -
- -
- ); -}; -WithSingleUnitUncontrolled.args = { +> = DefaultTemplate.bind( {} ); +WithSingleUnit.args = { ...Default.args, units: CSS_UNITS.slice( 0, 1 ), }; From 1cee4e3e330ef8d3dc883f566b7ee7a36b99c315 Mon Sep 17 00:00:00 2001 From: Marco Ciampini Date: Tue, 3 May 2022 12:57:05 +0200 Subject: [PATCH 3/5] Add one more test to check behaviour of component when single units --- .../src/unit-control/test/index.tsx | 30 +++++++++++++++++++ 1 file changed, 30 insertions(+) diff --git a/packages/components/src/unit-control/test/index.tsx b/packages/components/src/unit-control/test/index.tsx index 1ccf69f9baf488..7c0f4ed99048d2 100644 --- a/packages/components/src/unit-control/test/index.tsx +++ b/packages/components/src/unit-control/test/index.tsx @@ -314,6 +314,36 @@ describe( 'UnitControl', () => { expect.anything() ); } ); + + it( 'should update value correctly when typed and blurred when a single unit is passed', async () => { + const onChangeSpy = jest.fn(); + render( + <> + + + + ); + + const input = getInput(); + await user.type( input, '62' ); + + expect( onChangeSpy ).toHaveBeenLastCalledWith( + '62%', + expect.anything() + ); + + // Start counting again calls to `onChangeSpy`. + onChangeSpy.mockClear(); + + // Clicking on the button should cause the `onBlur` callback to fire. + const button = screen.getByRole( 'button' ); + await user.click( button ); + + expect( onChangeSpy ).not.toHaveBeenCalled(); + } ); } ); describe( 'Unit', () => { From c86a634ba667118824809367cf743c38f4e25633 Mon Sep 17 00:00:00 2001 From: Marco Ciampini Date: Tue, 3 May 2022 19:39:20 +0200 Subject: [PATCH 4/5] CHANGELOG --- packages/components/CHANGELOG.md | 2 ++ 1 file changed, 2 insertions(+) diff --git a/packages/components/CHANGELOG.md b/packages/components/CHANGELOG.md index 5011f643491944..63a0fda3d0ef21 100644 --- a/packages/components/CHANGELOG.md +++ b/packages/components/CHANGELOG.md @@ -19,6 +19,8 @@ - The `Button` component now displays the label as the tooltip for icon only buttons. ([#40716](https://github.com/WordPress/gutenberg/pull/40716)) - Use fake timers and fix usage of async methods from `@testing-library/user-event`. ([#40790](https://github.com/WordPress/gutenberg/pull/40790)) - UnitControl: avoid calling onChange callback twice when unit changes. ([#40796](https://github.com/WordPress/gutenberg/pull/40796)) +- `UnitControl`: show unit label when units prop has only one unit. ([#40784](https://github.com/WordPress/gutenberg/pull/40784)) + ### Internal From 35f2e35ab3ce8a5f4897b0e181a5f73f1fd247f5 Mon Sep 17 00:00:00 2001 From: Marco Ciampini Date: Wed, 4 May 2022 08:41:19 +0200 Subject: [PATCH 5/5] Update packages/components/src/unit-control/index.tsx Co-authored-by: Aaron Robertshaw <60436221+aaronrobertshaw@users.noreply.github.com> --- packages/components/src/unit-control/index.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/components/src/unit-control/index.tsx b/packages/components/src/unit-control/index.tsx index 735cde6b3f30c3..440dc11b94e8b9 100644 --- a/packages/components/src/unit-control/index.tsx +++ b/packages/components/src/unit-control/index.tsx @@ -88,7 +88,7 @@ function UnforwardedUnitControl( ); const [ unit, setUnit ] = useControlledState< string | undefined >( - units.length === 1 ? units[ 0 ].label : unitProp, + units.length === 1 ? units[ 0 ].value : unitProp, { initial: parsedUnit, fallback: '',