UnitControl: mark unit prop as deprecated

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

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`.

packages/components/src/unit-control/test/index.js

@@ -100,7 +100,7 @@ describe( 'UnitControl', () => {
 		} );
 
 		it( 'should not render select, if units are disabled', () => {
-			render( <UnitControl unit="em" units={ [] } /> );
+			render( <UnitControl value="3em" units={ [] } /> );
 			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(
-				<UnitControl unit={ state } onUnitChange={ setState } />
+				<UnitControl
+					value={ state }
+					onChange={ setState }
+					onUnitChange={ spy }
+				/>
 			);
 
 			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(
 				<UnitControl
 					value={ state }
-					unit="%"
 					units={ [ { value: '%', label: '%' } ] }
 					onChange={ setState }
 				/>
@@ -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( <UnitControl value={ '10%' } /> );
 
 			const select = getSelect();
 
 			expect( select.value ).toBe( '%' );
 
-			rerender( <UnitControl value={ '20' } unit="em" /> );
+			rerender( <UnitControl value={ '20vh' } /> );
 
-			expect( select.value ).toBe( 'em' );
+			await waitFor( () => expect( select.value ).toBe( 'vh' ) );
 		} );
 
 		it( 'should fallback to default unit if parsed unit is invalid', () => {

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 `%`.