diff --git a/packages/components/src/unit-control/index.tsx b/packages/components/src/unit-control/index.tsx index cd5bf4e478768..a52ec87313fd4 100644 --- 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 index e5557307b0b0d..4c54de8efb34f 100644 --- 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 index f97d168e7f10e..9164502668a2b 100644 --- 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 `