UnitControl: Add opt-in prop for next 40px default size

WordPress · Sep 6, 2023 · bc60e00 · bc60e00
1 parent 436486d
commit bc60e00
Show file tree

Hide file tree

Showing 3 changed files with 26 additions and 12 deletions.
diff --git a/packages/components/src/unit-control/index.tsx b/packages/components/src/unit-control/index.tsx
@@ -26,6 +26,7 @@ import {
 import { useControlledState } from '../utils/hooks';
 import { escapeRegExp } from '../utils/strings';
 import type { UnitControlProps, UnitControlOnChangeCallback } from './types';
+import { useDeprecated36pxDefaultSizeProp } from '../utils/use-deprecated-props';
 
 function UnforwardedUnitControl(
 	unitControlProps: WordPressComponentProps<
@@ -55,7 +56,11 @@ function UnforwardedUnitControl(
 		value: valueProp,
 		onFocus: onFocusProp,
 		...props
-	} = unitControlProps;
+	} = useDeprecated36pxDefaultSizeProp(
+		unitControlProps,
+		'wp.components.UnitControl',
+		'6.4'
+	);
 
 	if ( 'unit' in unitControlProps ) {
 		deprecated( 'UnitControl unit prop', {
@@ -177,7 +182,12 @@ function UnforwardedUnitControl(
 			disabled={ disabled }
 			isUnitSelectTabbable={ isUnitSelectTabbable }
 			onChange={ handleOnUnitChange }
-			size={ size }
+			size={
+				size === 'small' ||
+				( size === 'default' && ! props.__next40pxDefaultSize )
+					? 'small'
+					: 'default'
+			}
 			unit={ unit }
 			units={ units }
 			onFocus={ onFocusProp }

diff --git a/packages/components/src/unit-control/styles/unit-control-styles.ts b/packages/components/src/unit-control/styles/unit-control-styles.ts
@@ -36,7 +36,7 @@ export const ValueInput = styled( NumberControl )`
 
 const baseUnitLabelStyles = ( { selectSize }: SelectProps ) => {
 	const sizes = {
-		default: css`
+		small: css`
 			box-sizing: border-box;
 			padding: 2px 1px;
 			width: 20px;
@@ -47,7 +47,7 @@ const baseUnitLabelStyles = ( { selectSize }: SelectProps ) => {
 			text-transform: uppercase;
 			text-align-last: center;
 		`,
-		large: css`
+		default: css`
 			box-sizing: border-box;
 			min-width: 24px;
 			max-width: 48px;
@@ -64,7 +64,7 @@ const baseUnitLabelStyles = ( { selectSize }: SelectProps ) => {
 		`,
 	};
 
-	return selectSize === '__unstable-large' ? sizes.large : sizes.default;
+	return sizes[ selectSize ];
 };
 
 export const UnitLabel = styled.div< SelectProps >`
@@ -79,7 +79,7 @@ export const UnitLabel = styled.div< SelectProps >`
 
 const unitSelectSizes = ( { selectSize = 'default' }: SelectProps ) => {
 	const sizes = {
-		default: css`
+		small: css`
 			height: 100%;
 			border: 1px solid transparent;
 			transition: box-shadow 0.1s linear, border 0.1s linear;
@@ -99,7 +99,7 @@ const unitSelectSizes = ( { selectSize = 'default' }: SelectProps ) => {
 				z-index: 1;
 			}
 		`,
-		large: css`
+		default: css`
 			display: flex;
 			justify-content: center;
 			align-items: center;
@@ -119,7 +119,7 @@ const unitSelectSizes = ( { selectSize = 'default' }: SelectProps ) => {
 		`,
 	};
 
-	return selectSize === '__unstable-large' ? sizes.large : sizes.default;
+	return sizes[ selectSize ];
 };
 
 export const UnitSelect = styled.select< SelectProps >`

diff --git a/packages/components/src/unit-control/types.ts b/packages/components/src/unit-control/types.ts
@@ -9,11 +9,10 @@ import type { FocusEventHandler } from 'react';
 import type {
 	InputChangeCallback,
 	InputControlProps,
-	Size as InputSize,
 } from '../input-control/types';
 import type { NumberControlProps } from '../number-control/types';
 
-export type SelectSize = InputSize;
+export type SelectSize = 'default' | 'small';
 
 export type WPUnitControlUnit = {
 	/**
@@ -42,7 +41,7 @@ export type UnitControlOnChangeCallback = InputChangeCallback< {
 	data?: WPUnitControlUnit;
 } >;
 
-export type UnitSelectControlProps = Pick< InputControlProps, 'size' > & {
+export type UnitSelectControlProps = {
 	/**
 	 * Whether the control can be focused via keyboard navigation.
 	 *
@@ -53,6 +52,10 @@ export type UnitSelectControlProps = Pick< InputControlProps, 'size' > & {
 	 * A callback function invoked when the value is changed.
 	 */
 	onChange?: UnitControlOnChangeCallback;
+	/**
+	 * The size of the unit select.
+	 */
+	size?: SelectSize;
 	/**
 	 * Current unit.
 	 */
@@ -65,7 +68,8 @@ export type UnitSelectControlProps = Pick< InputControlProps, 'size' > & {
 	units?: WPUnitControlUnit[];
 };
 
-export type UnitControlProps = Omit< UnitSelectControlProps, 'unit' > &
+export type UnitControlProps = Pick< InputControlProps, 'size' > &
+	Omit< UnitSelectControlProps, 'size' | 'unit' > &
 	Omit< NumberControlProps, 'spinControls' | 'suffix' | 'type' > & {
 		/**
 		 * If `true`, the unit `<select>` is hidden.