Make __next40pxDefaultSize prop opt in

WordPress · Dec 6, 2023 · 5ef1b29 · 5ef1b29
1 parent 0550447
commit 5ef1b29
Show file tree

Hide file tree

Showing 3 changed files with 12 additions and 1 deletion.
diff --git a/packages/components/src/focal-point-picker/controls.tsx b/packages/components/src/focal-point-picker/controls.tsx
@@ -23,6 +23,7 @@ const noop = () => {};
 
 export default function FocalPointPickerControls( {
 	__nextHasNoMarginBottom,
+	__next40pxDefaultSize,
 	hasHelpText,
 	onChange = noop,
 	point = {
@@ -54,6 +55,7 @@ export default function FocalPointPickerControls( {
 			gap={ 4 }
 		>
 			<FocalPointUnitControl
+				__next40pxDefaultSize={ __next40pxDefaultSize }
 				label={ __( 'Left' ) }
 				aria-label={ __( 'Focal point left position' ) }
 				value={ [ valueX, '%' ].join( '' ) }
@@ -67,6 +69,7 @@ export default function FocalPointPickerControls( {
 				dragDirection="e"
 			/>
 			<FocalPointUnitControl
+				__next40pxDefaultSize={ __next40pxDefaultSize }
 				label={ __( 'Top' ) }
 				aria-label={ __( 'Focal point top position' ) }
 				value={ [ valueY, '%' ].join( '' ) }
@@ -86,7 +89,6 @@ export default function FocalPointPickerControls( {
 function FocalPointUnitControl( props: UnitControlProps ) {
 	return (
 		<StyledUnitControl
-			__next40pxDefaultSize
 			className="focal-point-picker__controls-position-unit-control"
 			labelPosition="top"
 			max={ TEXTCONTROL_MAX }

diff --git a/packages/components/src/focal-point-picker/index.tsx b/packages/components/src/focal-point-picker/index.tsx
@@ -84,6 +84,7 @@ const GRID_OVERLAY_TIMEOUT = 600;
  */
 export function FocalPointPicker( {
 	__nextHasNoMarginBottom,
+	__next40pxDefaultSize = false,
 	autoPlay = true,
 	className,
 	help,
@@ -273,6 +274,7 @@ export function FocalPointPicker( {
 			</MediaWrapper>
 			<Controls
 				__nextHasNoMarginBottom={ __nextHasNoMarginBottom }
+				__next40pxDefaultSize={ __next40pxDefaultSize }
 				hasHelpText={ !! help }
 				point={ { x, y } }
 				onChange={ ( value ) => {

diff --git a/packages/components/src/focal-point-picker/types.ts b/packages/components/src/focal-point-picker/types.ts
@@ -26,6 +26,12 @@ export type FocalPointPickerProps = Pick<
 	 * @default false
 	 */
 	__nextHasNoMarginBottom?: boolean;
+	/**
+	 * Start opting into the larger default height that will become the default size in a future version.
+	 *
+	 * @default false
+	 */
+	__next40pxDefaultSize?: boolean;
 	/**
 	 * Autoplays HTML5 video. This only applies to video sources (`url`).
 	 *
@@ -62,6 +68,7 @@ export type FocalPointPickerProps = Pick<
 
 export type FocalPointPickerControlsProps = {
 	__nextHasNoMarginBottom?: boolean;
+	__next40pxDefaultSize?: boolean;
 	/**
 	 * A bit of extra bottom margin will be added if a `help` text
 	 * needs to be rendered under it.