From d945b80778ed39e224a5ab57501b09c0e9dbb738 Mon Sep 17 00:00:00 2001 From: Marco Ciampini Date: Wed, 16 Mar 2022 13:41:54 +0100 Subject: [PATCH 1/5] `UnitControl`: mark `unit` prop as deprecated --- packages/components/src/unit-control/index.tsx | 10 ++++++++++ packages/components/src/unit-control/types.ts | 8 +++++++- 2 files changed, 17 insertions(+), 1 deletion(-) diff --git a/packages/components/src/unit-control/index.tsx b/packages/components/src/unit-control/index.tsx index 956cbdbd087e1c..4176031c85e497 100644 --- a/packages/components/src/unit-control/index.tsx +++ b/packages/components/src/unit-control/index.tsx @@ -15,6 +15,7 @@ import classnames from 'classnames'; /** * WordPress dependencies */ +import deprecated from '@wordpress/deprecated'; import { forwardRef, useMemo, useRef, useEffect } from '@wordpress/element'; import { __ } from '@wordpress/i18n'; @@ -57,6 +58,15 @@ function UnforwardedUnitControl( }: WordPressComponentProps< UnitControlProps, 'input', false >, forwardedRef: ForwardedRef< any > ) { + if ( typeof unitProp !== 'undefined' ) { + deprecated( 'UnitControl unit prop', { + since: '5.6', + hint: + 'Please provide a unit with a value through the `value` prop.', + version: '6.2', + } ); + } + // The `value` prop, in theory, should not be `null`, but the following line // ensures it fallback to `undefined` in case a consumer of `UnitControl` // still passes `null` as a `value`. diff --git a/packages/components/src/unit-control/types.ts b/packages/components/src/unit-control/types.ts index 46d8707b9639ff..2cd20462ed1d40 100644 --- a/packages/components/src/unit-control/types.ts +++ b/packages/components/src/unit-control/types.ts @@ -73,7 +73,7 @@ export type UnitSelectControlProps = { }; // TODO: when available, should (partially) extend `NumberControl` props. -export type UnitControlProps = UnitSelectControlProps & +export type UnitControlProps = Omit< UnitSelectControlProps, 'unit' > & Pick< InputControlProps, 'hideLabelFromVision' > & { __unstableStateReducer?: StateReducer; __unstableInputWidth?: CSSProperties[ 'width' ]; @@ -105,6 +105,12 @@ export type UnitControlProps = UnitSelectControlProps & * Callback when the `unit` changes. */ onUnitChange?: UnitControlOnChangeCallback; + /** + * Current unit. _Note: this prop is deprecated. Instead, provide a unit with a value through the `value` prop._ + * + * @deprecated + */ + unit?: string; /** * Current value. If passed as a string, the current unit will be inferred from this value. * For example, a `value` of "50%" will set the current unit to `%`. From 1a6535460a19e84c497d0a21cbdd22f323177cfe Mon Sep 17 00:00:00 2001 From: Marco Ciampini Date: Wed, 16 Mar 2022 13:43:06 +0100 Subject: [PATCH 2/5] Update 's unit tests --- .../components/src/unit-control/test/index.js | 24 ++++++++++++------- 1 file changed, 15 insertions(+), 9 deletions(-) diff --git a/packages/components/src/unit-control/test/index.js b/packages/components/src/unit-control/test/index.js index e3fd4c79199bf4..b6ae780bde913c 100644 --- a/packages/components/src/unit-control/test/index.js +++ b/packages/components/src/unit-control/test/index.js @@ -100,7 +100,7 @@ describe( 'UnitControl', () => { } ); it( 'should not render select, if units are disabled', () => { - render( ); + render( ); const input = getInput(); const select = getSelect(); @@ -224,17 +224,24 @@ describe( 'UnitControl', () => { describe( 'Unit', () => { it( 'should update unit value on change', async () => { - let state = 'px'; + let state = '14rem'; const setState = ( nextState ) => ( state = nextState ); + const spy = jest.fn(); + const { user } = render( - + ); const select = getSelect(); - await user.selectOptions( select, [ 'em' ] ); + await user.selectOptions( select, [ 'px' ] ); - expect( state ).toBe( 'em' ); + expect( spy ).toHaveBeenCalledWith( 'px', expect.anything() ); + expect( state ).toBe( '14px' ); } ); it( 'should render customized units, if defined', () => { @@ -319,7 +326,6 @@ describe( 'UnitControl', () => { const { user } = render( @@ -450,16 +456,16 @@ describe( 'UnitControl', () => { expect( state ).toBe( '123rem' ); } ); - it( 'should update unit after initial render and with new unit prop', () => { + it( 'should update unit after initial render and with new unit prop', async () => { const { rerender } = render( ); const select = getSelect(); expect( select.value ).toBe( '%' ); - rerender( ); + rerender( ); - expect( select.value ).toBe( 'em' ); + await waitFor( () => expect( select.value ).toBe( 'vh' ) ); } ); it( 'should fallback to default unit if parsed unit is invalid', () => { From ad89089f0390c1e371625b6f0f8d9aed059a759c Mon Sep 17 00:00:00 2001 From: Marco Ciampini Date: Wed, 16 Mar 2022 13:52:41 +0100 Subject: [PATCH 3/5] CHANGELOG --- packages/components/CHANGELOG.md | 4 ++++ 1 file changed, 4 insertions(+) diff --git a/packages/components/CHANGELOG.md b/packages/components/CHANGELOG.md index b185e94266aa14..b8d1a042f61f5b 100644 --- a/packages/components/CHANGELOG.md +++ b/packages/components/CHANGELOG.md @@ -20,6 +20,10 @@ - `NumberControl`: commit (and constrain) value on `blur` event ([#39186](https://github.com/WordPress/gutenberg/pull/39186)). +### Deprecation + +- `unit` prop in `UnitControl` marked as deprecated ([#39503](https://github.com/WordPress/gutenberg/pull/39503)). + ## 19.6.0 (2022-03-11) ### Enhancements From 181b9c0328507f2692bd72fa689423b655f7bdd5 Mon Sep 17 00:00:00 2001 From: Marco Ciampini Date: Thu, 17 Mar 2022 10:11:30 +0100 Subject: [PATCH 4/5] Update comment Co-authored-by: Mitchell Austin --- packages/components/src/unit-control/index.tsx | 3 +-- 1 file changed, 1 insertion(+), 2 deletions(-) diff --git a/packages/components/src/unit-control/index.tsx b/packages/components/src/unit-control/index.tsx index 4176031c85e497..b48fa870362a6c 100644 --- a/packages/components/src/unit-control/index.tsx +++ b/packages/components/src/unit-control/index.tsx @@ -61,8 +61,7 @@ function UnforwardedUnitControl( if ( typeof unitProp !== 'undefined' ) { deprecated( 'UnitControl unit prop', { since: '5.6', - hint: - 'Please provide a unit with a value through the `value` prop.', + hint: 'The unit should be provided within the `value` prop.', version: '6.2', } ); } From ebf89dd4370c16e52d89599f8bbccf450ff537e3 Mon Sep 17 00:00:00 2001 From: Marco Ciampini Date: Fri, 18 Mar 2022 19:03:10 +0100 Subject: [PATCH 5/5] Use `in` operator to check if the deprecated `unit` prop is passed to `UnitControl` --- packages/components/src/unit-control/index.tsx | 16 +++++++++++----- 1 file changed, 11 insertions(+), 5 deletions(-) diff --git a/packages/components/src/unit-control/index.tsx b/packages/components/src/unit-control/index.tsx index b48fa870362a6c..1b943dd7134fca 100644 --- a/packages/components/src/unit-control/index.tsx +++ b/packages/components/src/unit-control/index.tsx @@ -37,7 +37,14 @@ import type { UnitControlProps, UnitControlOnChangeCallback } from './types'; import type { StateReducer } from '../input-control/reducer/state'; function UnforwardedUnitControl( - { + unitControlProps: WordPressComponentProps< + UnitControlProps, + 'input', + false + >, + forwardedRef: ForwardedRef< any > +) { + const { __unstableStateReducer: stateReducerProp, autoComplete = 'off', className, @@ -55,10 +62,9 @@ function UnforwardedUnitControl( units: unitsProp = CSS_UNITS, value: valueProp, ...props - }: WordPressComponentProps< UnitControlProps, 'input', false >, - forwardedRef: ForwardedRef< any > -) { - if ( typeof unitProp !== 'undefined' ) { + } = unitControlProps; + + if ( 'unit' in unitControlProps ) { deprecated( 'UnitControl unit prop', { since: '5.6', hint: 'The unit should be provided within the `value` prop.',