@wordpress/components 28.3.0 → 28.5.0

package/src/dropdown-menu/stories/index.story.tsx

@@ -1,7 +1,7 @@
 /**
  * External dependencies
  */
-import type { Meta, StoryFn } from '@storybook/react';
+import type { Meta, StoryObj } from '@storybook/react';
 
 /**
  * Internal dependencies
@@ -43,39 +43,35 @@ const meta: Meta< typeof DropdownMenu > = {
 };
 export default meta;
 
-const Template: StoryFn< typeof DropdownMenu > = ( props ) => (
-	<div style={ { height: 150 } }>
-		<DropdownMenu { ...props } />
-	</div>
-);
-
-export const Default = Template.bind( {} );
-Default.args = {
-	label: 'Select a direction.',
-	icon: menu,
-	controls: [
-		{
-			title: 'First Menu Item Label',
-			icon: arrowUp,
-			// eslint-disable-next-line no-console
-			onClick: () => console.log( 'up!' ),
-		},
-		{
-			title: 'Second Menu Item Label',
-			icon: arrowDown,
-			// eslint-disable-next-line no-console
-			onClick: () => console.log( 'down!' ),
-		},
-	],
+export const Default: StoryObj< typeof DropdownMenu > = {
+	args: {
+		label: 'Select a direction.',
+		icon: menu,
+		controls: [
+			{
+				title: 'First Menu Item Label',
+				icon: arrowUp,
+				// eslint-disable-next-line no-console
+				onClick: () => console.log( 'up!' ),
+			},
+			{
+				title: 'Second Menu Item Label',
+				icon: arrowDown,
+				// eslint-disable-next-line no-console
+				onClick: () => console.log( 'down!' ),
+			},
+		],
+	},
 };
 
-export const WithChildren = Template.bind( {} );
-// Adding custom source because Storybook is not able to show the contents of
-// the `children` prop correctly in the code snippet.
-WithChildren.parameters = {
-	docs: {
-		source: {
-			code: `<DropdownMenu label="Select a direction." icon={ more }>
+export const WithChildren: StoryObj< typeof DropdownMenu > = {
+	...Default,
+	// Adding custom source because Storybook is not able to show the contents of
+	// the `children` prop correctly in the code snippet.
+	parameters: {
+		docs: {
+			source: {
+				code: `<DropdownMenu label="Select a direction." icon={ more }>
   <MenuGroup>
     <MenuItem icon={ arrowUp } onClick={ onClose }>
       Move Up
@@ -90,29 +86,30 @@ WithChildren.parameters = {
     </MenuItem>
   </MenuGroup>
 </DropdownMenu>`,
-			language: 'jsx',
-			type: 'auto',
+				language: 'jsx',
+				type: 'auto',
+			},
 		},
 	},
-};
-WithChildren.args = {
-	label: 'Select a direction.',
-	icon: more,
-	children: ( { onClose } ) => (
-		<>
-			<MenuGroup>
-				<MenuItem icon={ arrowUp } onClick={ onClose }>
-					Move Up
-				</MenuItem>
-				<MenuItem icon={ arrowDown } onClick={ onClose }>
-					Move Down
-				</MenuItem>
-			</MenuGroup>
-			<MenuGroup>
-				<MenuItem icon={ trash } onClick={ onClose }>
-					Remove
-				</MenuItem>
-			</MenuGroup>
-		</>
-	),
+	args: {
+		label: 'Select a direction.',
+		icon: more,
+		children: ( { onClose } ) => (
+			<>
+				<MenuGroup>
+					<MenuItem icon={ arrowUp } onClick={ onClose }>
+						Move Up
+					</MenuItem>
+					<MenuItem icon={ arrowDown } onClick={ onClose }>
+						Move Down
+					</MenuItem>
+				</MenuGroup>
+				<MenuGroup>
+					<MenuItem icon={ trash } onClick={ onClose }>
+						Remove
+					</MenuItem>
+				</MenuGroup>
+			</>
+		),
+	},
 };

package/src/dropdown-menu-v2/stories/index.story.tsx

@@ -65,18 +65,6 @@ const meta: Meta< typeof DropdownMenu > = {
 			source: { excludeDecorators: true },
 		},
 	},
-	decorators: [
-		// Layout wrapper
-		( Story ) => (
-			<div
-				style={ {
-					minHeight: '300px',
-				} }
-			>
-				<Story />
-			</div>
-		),
-	],
 };
 export default meta;
 

package/src/dropdown-menu-v2/styles.ts

@@ -101,23 +101,23 @@ export const DropdownMenu = styled( Ariakit.Menu )<
 	outline: 2px solid transparent !important;
 
 	/* Animation */
-	animation-duration: ${ ANIMATION_PARAMS.DURATION };
-	animation-timing-function: ${ ANIMATION_PARAMS.EASING };
-	will-change: transform, opacity;
-	/* Default animation.*/
-	animation-name: ${ slideDownAndFade };
-
-	&[data-side='right'] {
-		animation-name: ${ slideLeftAndFade };
-	}
-	&[data-side='bottom'] {
-		animation-name: ${ slideUpAndFade };
-	}
-	&[data-side='left'] {
-		animation-name: ${ slideRightAndFade };
-	}
-	@media ( prefers-reduced-motion ) {
-		animation-duration: 0s;
+	&[data-open] {
+		@media not ( prefers-reduced-motion ) {
+			animation-duration: ${ ANIMATION_PARAMS.DURATION };
+			animation-timing-function: ${ ANIMATION_PARAMS.EASING };
+			will-change: transform, opacity;
+			/* Default animation.*/
+			animation-name: ${ slideDownAndFade };
+			&[data-side='left'] {
+				animation-name: ${ slideLeftAndFade };
+			}
+			&[data-side='up'] {
+				animation-name: ${ slideUpAndFade };
+			}
+			&[data-side='right'] {
+				animation-name: ${ slideRightAndFade };
+			}
+		}
 	}
 `;
 
@@ -344,6 +344,7 @@ export const DropdownMenuItemHelpText = styled( Truncate )`
 	font-size: ${ font( 'helpText.fontSize' ) };
 	line-height: 16px;
 	color: ${ COLORS.gray[ '700' ] };
+	word-break: break-all;
 
 	[data-active-item]:not( [data-focus-visible] ) *:not( ${ DropdownMenu } ) &,
 	[aria-disabled='true'] *:not( ${ DropdownMenu } ) & {

package/src/dropdown-menu-v2/test/index.tsx

@@ -2,7 +2,7 @@
  * External dependencies
  */
 import { render, screen, waitFor } from '@testing-library/react';
-import { press, click, hover, sleep, type } from '@ariakit/test';
+import { press, click, hover, type } from '@ariakit/test';
 
 /**
  * WordPress dependencies
@@ -128,7 +128,6 @@ describe( 'DropdownMenu', () => {
 			} );
 
 			// Move focus on the toggle
-			await sleep();
 			await press.Tab();
 
 			expect( toggleButton ).toHaveFocus();
@@ -159,7 +158,6 @@ describe( 'DropdownMenu', () => {
 			} );
 
 			// Move focus on the toggle
-			await sleep();
 			await press.Tab();
 
 			expect( toggleButton ).toHaveFocus();
@@ -915,7 +913,6 @@ describe( 'DropdownMenu', () => {
 
 			// The outer button can be focused by pressing tab. Doing so will cause
 			// the DropdownMenu to close.
-			await sleep();
 			await press.Tab();
 			expect( outerButton ).toBeInTheDocument();
 			expect( screen.queryByRole( 'menu' ) ).not.toBeInTheDocument();

package/src/focal-point-picker/README.md

@@ -28,6 +28,7 @@ const Example = () => {
 	return (
 		<>
 			<FocalPointPicker
+			  __nextHasNoMarginBottom
 				url={ url }
 				value={ focalPoint }
 				onDragStart={ setFocalPoint }
@@ -98,3 +99,11 @@ Callback which is called at the start of drag operations.
 -   Required: No
 
 Function which is called before internal updates to the value state. It receives the upcoming value and may return a modified one.
+
+#### __nextHasNoMarginBottom
+
+Start opting into the new margin-free styles that will become the default in a future version.
+
+-   Type: `Boolean`
+-   Required: No
+-   Default: `false`

package/src/focal-point-picker/index.tsx

@@ -70,6 +70,7 @@ const GRID_OVERLAY_TIMEOUT = 600;
  * 	return (
  * 		<>
  * 			<FocalPointPicker
+ *        __nextHasNoMarginBottom
  * 				url={ url }
  * 				value={ focalPoint }
  * 				onDragStart={ setFocalPoint }

package/src/font-size-picker/README.md

@@ -92,7 +92,7 @@ Size of the control.
 Available units for custom font size selection.
 
 -   Required: No
--   Default: `[ 'px', 'em', 'rem' ]`
+-   Default: `[ 'px', 'em', 'rem', 'vw', 'vh' ]`
 
 ### `value`: `number | string`
 

package/src/font-size-picker/font-size-picker-select.tsx

@@ -6,7 +6,7 @@ import { __, sprintf } from '@wordpress/i18n';
 /**
  * Internal dependencies
  */
-import CustomSelectControl from '../custom-select-control-v2/legacy-component';
+import CustomSelectControl from '../custom-select-control';
 import { parseQuantityAndUnitFromRawValue } from '../unit-control';
 import type {
 	FontSizePickerSelectProps,
@@ -56,7 +56,7 @@ const FontSizePickerSelect = ( props: FontSizePickerSelectProps ) => {
 				key: fontSize.slug,
 				name: fontSize.name || fontSize.slug,
 				value: fontSize.size,
-				__experimentalHint: hint,
+				hint,
 			};
 		} ),
 		...( disableCustomFontSizes ? [] : [ CUSTOM_OPTION ] ),
@@ -79,7 +79,7 @@ const FontSizePickerSelect = ( props: FontSizePickerSelectProps ) => {
 			) }
 			options={ options }
 			value={ selectedOption }
-			__experimentalShowSelectedHint
+			showSelectedHint
 			onChange={ ( {
 				selectedItem,
 			}: {

package/src/font-size-picker/index.tsx

@@ -38,6 +38,8 @@ import { T_SHIRT_NAMES } from './constants';
 
 const DEFAULT_UNITS = [ 'px', 'em', 'rem', 'vw', 'vh' ];
 
+const MAX_TOGGLE_GROUP_SIZES = 5;
+
 const UnforwardedFontSizePicker = (
 	props: FontSizePickerProps,
 	ref: ForwardedRef< any >
@@ -59,43 +61,49 @@ const UnforwardedFontSizePicker = (
 		availableUnits: unitsProp,
 	} );
 
-	const shouldUseSelectControl = fontSizes.length > 5;
 	const selectedFontSize = fontSizes.find(
 		( fontSize ) => fontSize.size === value
 	);
 	const isCustomValue = !! value && ! selectedFontSize;
 
-	const [ showCustomValueControl, setShowCustomValueControl ] = useState(
-		! disableCustomFontSizes && isCustomValue
-	);
-
-	const headerHint = useMemo( () => {
-		if ( showCustomValueControl ) {
-			return __( 'Custom' );
-		}
+	// Initially request a custom picker if the value is not from the predef list.
+	const [ userRequestedCustom, setUserRequestedCustom ] =
+		useState( isCustomValue );
 
-		if ( ! shouldUseSelectControl ) {
-			if ( selectedFontSize ) {
-				return (
-					selectedFontSize.name ||
-					T_SHIRT_NAMES[ fontSizes.indexOf( selectedFontSize ) ]
-				);
-			}
-			return '';
-		}
+	let currentPickerType;
+	if ( ! disableCustomFontSizes && userRequestedCustom ) {
+		// While showing the custom value picker, switch back to predef only if
+		// `disableCustomFontSizes` is set to `true`.
+		currentPickerType = 'custom' as const;
+	} else {
+		currentPickerType =
+			fontSizes.length > MAX_TOGGLE_GROUP_SIZES
+				? ( 'select' as const )
+				: ( 'togglegroup' as const );
+	}
 
-		const commonUnit = getCommonSizeUnit( fontSizes );
-		if ( commonUnit ) {
-			return `(${ commonUnit })`;
+	const headerHint = useMemo( () => {
+		switch ( currentPickerType ) {
+			case 'custom':
+				return __( 'Custom' );
+			case 'togglegroup':
+				if ( selectedFontSize ) {
+					return (
+						selectedFontSize.name ||
+						T_SHIRT_NAMES[ fontSizes.indexOf( selectedFontSize ) ]
+					);
+				}
+				break;
+			case 'select':
+				const commonUnit = getCommonSizeUnit( fontSizes );
+				if ( commonUnit ) {
+					return `(${ commonUnit })`;
+				}
+				break;
 		}
 
 		return '';
-	}, [
-		showCustomValueControl,
-		shouldUseSelectControl,
-		selectedFontSize,
-		fontSizes,
-	] );
+	}, [ currentPickerType, selectedFontSize, fontSizes ] );
 
 	if ( fontSizes.length === 0 && disableCustomFontSizes ) {
 		return null;
@@ -133,53 +141,45 @@ const UnforwardedFontSizePicker = (
 					{ ! disableCustomFontSizes && (
 						<HeaderToggle
 							label={
-								showCustomValueControl
+								currentPickerType === 'custom'
 									? __( 'Use size preset' )
 									: __( 'Set custom size' )
 							}
 							icon={ settings }
-							onClick={ () => {
-								setShowCustomValueControl(
-									! showCustomValueControl
-								);
-							} }
-							isPressed={ showCustomValueControl }
+							onClick={ () =>
+								setUserRequestedCustom( ! userRequestedCustom )
+							}
+							isPressed={ currentPickerType === 'custom' }
 							size="small"
 						/>
 					) }
 				</Header>
 			</Spacer>
 			<div>
-				{ !! fontSizes.length &&
-					shouldUseSelectControl &&
-					! showCustomValueControl && (
-						<FontSizePickerSelect
-							__next40pxDefaultSize={ __next40pxDefaultSize }
-							fontSizes={ fontSizes }
-							value={ value }
-							disableCustomFontSizes={ disableCustomFontSizes }
-							size={ size }
-							onChange={ ( newValue ) => {
-								if ( newValue === undefined ) {
-									onChange?.( undefined );
-								} else {
-									onChange?.(
-										hasUnits
-											? newValue
-											: Number( newValue ),
-										fontSizes.find(
-											( fontSize ) =>
-												fontSize.size === newValue
-										)
-									);
-								}
-							} }
-							onSelectCustom={ () =>
-								setShowCustomValueControl( true )
+				{ currentPickerType === 'select' && (
+					<FontSizePickerSelect
+						__next40pxDefaultSize={ __next40pxDefaultSize }
+						fontSizes={ fontSizes }
+						value={ value }
+						disableCustomFontSizes={ disableCustomFontSizes }
+						size={ size }
+						onChange={ ( newValue ) => {
+							if ( newValue === undefined ) {
+								onChange?.( undefined );
+							} else {
+								onChange?.(
+									hasUnits ? newValue : Number( newValue ),
+									fontSizes.find(
+										( fontSize ) =>
+											fontSize.size === newValue
+									)
+								);
 							}
-						/>
-					) }
-				{ ! shouldUseSelectControl && ! showCustomValueControl && (
+						} }
+						onSelectCustom={ () => setUserRequestedCustom( true ) }
+					/>
+				) }
+				{ currentPickerType === 'togglegroup' && (
 					<FontSizePickerToggleGroup
 						fontSizes={ fontSizes }
 						value={ value }
@@ -200,7 +200,7 @@ const UnforwardedFontSizePicker = (
 						} }
 					/>
 				) }
-				{ ! disableCustomFontSizes && showCustomValueControl && (
+				{ currentPickerType === 'custom' && (
 					<Flex className="components-font-size-picker__custom-size-control">
 						<FlexItem isBlock>
 							<UnitControl
@@ -210,6 +210,8 @@ const UnforwardedFontSizePicker = (
 								hideLabelFromVision
 								value={ value }
 								onChange={ ( newValue ) => {
+									setUserRequestedCustom( true );
+
 									if ( newValue === undefined ) {
 										onChange?.( undefined );
 									} else {
@@ -240,6 +242,8 @@ const UnforwardedFontSizePicker = (
 										initialPosition={ fallbackFontSize }
 										withInputField={ false }
 										onChange={ ( newValue ) => {
+											setUserRequestedCustom( true );
+
 											if ( newValue === undefined ) {
 												onChange?.( undefined );
 											} else if ( hasUnits ) {