From 08d22fd3daf13440ab792f24bdc28d02adda2ffb Mon Sep 17 00:00:00 2001 From: Marco Ciampini Date: Mon, 21 Mar 2022 11:32:47 +0100 Subject: [PATCH] `UnitControl`: mark `unit` prop as deprecated (#39503) * `UnitControl`: mark `unit` prop as deprecated * Update 's unit tests * CHANGELOG * Update comment Co-authored-by: Mitchell Austin * Use `in` operator to check if the deprecated `unit` prop is passed to `UnitControl` Co-authored-by: Mitchell Austin --- packages/components/CHANGELOG.md | 4 ++++ .../components/src/unit-control/index.tsx | 23 ++++++++++++++---- .../components/src/unit-control/test/index.js | 24 ++++++++++++------- packages/components/src/unit-control/types.ts | 8 ++++++- 4 files changed, 45 insertions(+), 14 deletions(-) diff --git a/packages/components/CHANGELOG.md b/packages/components/CHANGELOG.md index b185e94266aa1..b8d1a042f61f5 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 diff --git a/packages/components/src/unit-control/index.tsx b/packages/components/src/unit-control/index.tsx index 956cbdbd087e1..1b943dd7134fc 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'; @@ -36,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, @@ -54,9 +62,16 @@ function UnforwardedUnitControl( units: unitsProp = CSS_UNITS, value: valueProp, ...props - }: WordPressComponentProps< UnitControlProps, 'input', false >, - forwardedRef: ForwardedRef< any > -) { + } = unitControlProps; + + if ( 'unit' in unitControlProps ) { + deprecated( 'UnitControl unit prop', { + since: '5.6', + hint: 'The unit should be provided within 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/test/index.js b/packages/components/src/unit-control/test/index.js index e3fd4c79199bf..b6ae780bde913 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', () => { diff --git a/packages/components/src/unit-control/types.ts b/packages/components/src/unit-control/types.ts index 46d8707b9639f..2cd20462ed1d4 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 `%`.