@wordpress/components 25.12.0 → 25.14.0

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

@@ -12,6 +12,7 @@ import styled from '@emotion/styled';
 import { COLORS, font, rtl, CONFIG } from '../utils';
 import { space } from '../utils/space';
 import Icon from '../icon';
+import { Truncate } from '../truncate';
 import type { DropdownMenuContext } from './types';
 
 const ANIMATION_PARAMS = {
@@ -20,13 +21,16 @@ const ANIMATION_PARAMS = {
 	EASING: 'cubic-bezier( 0.16, 1, 0.3, 1 )',
 };
 
-const CONTENT_WRAPPER_PADDING = space( 2 );
-const ITEM_PREFIX_WIDTH = space( 7 );
-const ITEM_PADDING_INLINE_START = space( 2 );
-const ITEM_PADDING_INLINE_END = space( 2.5 );
+const CONTENT_WRAPPER_PADDING = space( 1 );
+const ITEM_PADDING_BLOCK = space( 2 );
+const ITEM_PADDING_INLINE = space( 3 );
 
-// TODO: should bring this into the config, and make themeable
-const DEFAULT_BORDER_COLOR = COLORS.ui.borderDisabled;
+// TODO:
+// - those values are different from saved variables?
+// - should bring this into the config, and make themeable
+// - border color and divider color are different?
+const DEFAULT_BORDER_COLOR = COLORS.gray[ 300 ];
+const DIVIDER_COLOR = COLORS.gray[ 200 ];
 const TOOLBAR_VARIANT_BORDER_COLOR = COLORS.gray[ '900' ];
 const DEFAULT_BOX_SHADOW = `0 0 0 ${ CONFIG.borderWidth } ${ DEFAULT_BORDER_COLOR }, ${ CONFIG.popoverShadow }`;
 const TOOLBAR_VARIANT_BOX_SHADOW = `0 0 0 ${ CONFIG.borderWidth } ${ TOOLBAR_VARIANT_BORDER_COLOR }`;
@@ -71,12 +75,18 @@ export const DropdownMenu = styled( Ariakit.Menu )<
 	/* TODO: is there a way to read the sass variable? */
 	z-index: 1000000;
 
-	min-width: 220px;
+	display: grid;
+	grid-template-columns: minmax( 0, max-content ) 1fr;
+	grid-template-rows: auto;
+
+	box-sizing: border-box;
+	min-width: 160px;
+	max-width: 320px;
 	max-height: var( --popover-available-height );
 	padding: ${ CONTENT_WRAPPER_PADDING };
 
 	background-color: ${ COLORS.ui.background };
-	border-radius: ${ CONFIG.radiusBlockUi };
+	border-radius: 4px;
 	${ ( props ) => css`
 		box-shadow: ${ props.variant === 'toolbar'
 			? TOOLBAR_VARIANT_BOX_SHADOW
@@ -110,102 +120,55 @@ export const DropdownMenu = styled( Ariakit.Menu )<
 	}
 `;
 
-const itemPrefix = css`
-	/* !important is to override some inline styles set by Ariakit */
-	width: ${ ITEM_PREFIX_WIDTH } !important;
-	/* !important is to override some inline styles set by Ariakit */
-	height: auto !important;
-	display: inline-flex;
-	align-items: center;
-	justify-content: center;
-	/* Prefixes don't get affected by the item's inline start padding */
-	margin-inline-start: calc( -1 * ${ ITEM_PADDING_INLINE_START } );
-	/*
-		Negative margin allows the suffix to be as tall as the whole item
-		(incl. padding) before increasing the items' height. This can be useful,
-		e.g., when using icons that are bigger than 20x20 px
-	*/
-	margin-top: ${ space( -2 ) };
-	margin-bottom: ${ space( -2 ) };
-`;
-
-const itemSuffix = css`
-	width: max-content;
-	display: inline-flex;
-	align-items: center;
-	justify-content: center;
-	/* Push prefix to the inline-end of the item */
-	margin-inline-start: auto;
-	/* Minimum space between the item's content and suffix */
-	padding-inline-start: ${ space( 6 ) };
-	/*
-		Negative margin allows the suffix to be as tall as the whole item
-		(incl. padding) before increasing the items' height. This can be useful,
-		e.g., when using icons that are bigger than 20x20 px
-	*/
-	margin-top: ${ space( -2 ) };
-	margin-bottom: ${ space( -2 ) };
-
-	/*
-		Override color in normal conditions, but inherit the item's color
-	  for altered conditions.
-
-		TODO:
-		  - For now, used opacity like for disabled item, which makes it work
-			  regardless of the theme
-		  - how do we translate this for themes? Should we have a new variable
-		for "secondary" text?
-	*/
-	opacity: 0.6;
+const baseItem = css`
+	all: unset;
 
-	/* when the parent item is hovered / focused */
-	[data-active-item] > &,
-	/* when the parent item is a submenu trigger and the submenu is open */
-	[aria-expanded='true'] > &,
-	/* when the parent item is disabled */
-	[aria-disabled='true'] > & {
-		opacity: 1;
-	}
-`;
+	position: relative;
+	min-height: ${ space( 10 ) };
+	box-sizing: border-box;
 
-export const ItemPrefixWrapper = styled.span`
-	${ itemPrefix }
-`;
+	/* Occupy the width of all grid columns (ie. full width) */
+	grid-column: 1 / -1;
 
-export const ItemSuffixWrapper = styled.span`
-	${ itemSuffix }
-`;
+	/*
+	 * Define a grid layout which inherits the same columns configuration
+	 * from the parent layout (ie. subgrid).
+	 */
+	display: grid;
+	grid-template-columns: subgrid;
+	align-items: center;
 
-const baseItem = css`
-	all: unset;
 	font-size: ${ font( 'default.fontSize' ) };
 	font-family: inherit;
 	font-weight: normal;
 	line-height: 20px;
+
 	color: ${ COLORS.gray[ 900 ] };
 	border-radius: ${ CONFIG.radiusBlockUi };
-	display: flex;
-	align-items: center;
-	padding: ${ space( 2 ) } ${ ITEM_PADDING_INLINE_END } ${ space( 2 ) }
-		${ ITEM_PADDING_INLINE_START };
-	position: relative;
+
+	padding-block: ${ ITEM_PADDING_BLOCK };
+	padding-inline: ${ ITEM_PADDING_INLINE };
+
+	/*
+	 * Make sure that, when an item is scrolled into view (eg. while using the
+	 * keyboard to move focus), the whole item comes into view
+	 */
+	scroll-margin: ${ CONTENT_WRAPPER_PADDING };
+
 	user-select: none;
 	outline: none;
 
 	&[aria-disabled='true'] {
-		/*
-		TODO:
-			- we need a disabled color in the Theme variables
-			- design specs use opacity instead of setting a new text color
-	*/
-		opacity: 0.5;
-		pointer-events: none;
+		color: ${ COLORS.ui.textDisabled };
+		cursor: not-allowed;
 	}
 
 	/* Hover */
-	&[data-active-item] {
-		/* TODO: reconcile with global focus styles */
-		background-color: ${ COLORS.gray[ '100' ] };
+	&[data-active-item]:not( [data-focus-visible] ):not(
+			[aria-disabled='true']
+		) {
+		background-color: ${ COLORS.theme.accent };
+		color: ${ COLORS.white };
 	}
 
 	/* Keyboard focus (focus-visible) */
@@ -224,74 +187,159 @@ const baseItem = css`
 
 	/* When the item is the trigger of an open submenu */
 	${ DropdownMenu }:not(:focus) &:not(:focus)[aria-expanded="true"] {
-		/* TODO: should we style submenu triggers any different? */
+		background-color: ${ COLORS.gray[ 100 ] };
+		color: ${ COLORS.gray[ 900 ] };
 	}
 
 	svg {
 		fill: currentColor;
 	}
-
-	&:not( :has( ${ ItemPrefixWrapper } ) ) {
-		padding-inline-start: ${ ITEM_PREFIX_WIDTH };
-	}
 `;
 
 export const DropdownMenuItem = styled( Ariakit.MenuItem )`
-	${ baseItem }
+	${ baseItem };
 `;
 
 export const DropdownMenuCheckboxItem = styled( Ariakit.MenuItemCheckbox )`
-	${ baseItem }
+	${ baseItem };
 `;
 
 export const DropdownMenuRadioItem = styled( Ariakit.MenuItemRadio )`
-	${ baseItem }
+	${ baseItem };
 `;
 
-export const DropdownMenuGroup = styled( Ariakit.MenuGroup )``;
+export const ItemPrefixWrapper = styled.span`
+	/* Always occupy the first column, even when auto-collapsing */
+	grid-column: 1;
+
+	/*
+	 * Even when the item is not checked, occupy the same screen space to avoid
+	 * the space collapside when no items are checked.
+	 */
+	${ DropdownMenuCheckboxItem } > &,
+	${ DropdownMenuRadioItem } > & {
+		/* Same width as the check icons */
+		min-width: ${ space( 6 ) };
+	}
+
+	${ DropdownMenuCheckboxItem } > &,
+	${ DropdownMenuRadioItem } > &,
+	&:not( :empty ) {
+		margin-inline-end: ${ space( 2 ) };
+	}
+
+	display: flex;
+	align-items: center;
+	justify-content: center;
+
+	color: ${ COLORS.gray[ '700' ] };
+
+	/*
+	* When the parent menu item is active, except when it's a non-focused/hovered
+	* submenu trigger (in that case, color should not be inherited)
+	*/
+	[data-active-item]:not( [data-focus-visible] ) > &,
+	/* When the parent menu item is disabled */
+	[aria-disabled='true'] > & {
+		color: inherit;
+	}
+`;
+
+export const DropdownMenuItemContentWrapper = styled.div`
+	/*
+	 * Always occupy the second column, since the first column
+	 * is taken by the prefix wrapper (when displayed).
+	 */
+	grid-column: 2;
+
+	display: flex;
+	align-items: center;
+	justify-content: space-between;
+	gap: ${ space( 3 ) };
+
+	pointer-events: none;
+`;
+
+export const DropdownMenuItemChildrenWrapper = styled.div`
+	flex: 1;
+
+	display: inline-flex;
+	flex-direction: column;
+	gap: ${ space( 1 ) };
+`;
+
+export const ItemSuffixWrapper = styled.span`
+	flex: 0;
+	width: max-content;
 
-export const DropdownMenuGroupLabel = styled( Ariakit.MenuGroupLabel )`
-	box-sizing: border-box;
 	display: flex;
 	align-items: center;
-	min-height: ${ space( 8 ) };
-
-	padding: ${ space( 2 ) } ${ ITEM_PADDING_INLINE_END } ${ space( 2 ) }
-		${ ITEM_PREFIX_WIDTH };
-	/* TODO: color doesn't match available UI variables */
-	color: ${ COLORS.gray[ 700 ] };
-
-	/* TODO: font size doesn't match available ones via "font" utils */
-	font-size: 11px;
-	line-height: 1.4;
-	font-weight: 500;
-	text-transform: uppercase;
+	justify-content: center;
+	gap: ${ space( 3 ) };
+
+	color: ${ COLORS.gray[ '700' ] };
+
+	/*
+	 * When the parent menu item is active, except when it's a non-focused/hovered
+	 * submenu trigger (in that case, color should not be inherited)
+	 */
+	[data-active-item]:not( [data-focus-visible] ) *:not(${ DropdownMenu }) &,
+	/* When the parent menu item is disabled */
+	[aria-disabled='true'] *:not(${ DropdownMenu }) & {
+		color: inherit;
+	}
+`;
+
+export const DropdownMenuGroup = styled( Ariakit.MenuGroup )`
+	/* Ignore this element when calculating the layout. Useful for subgrid */
+	display: contents;
 `;
 
 export const DropdownMenuSeparator = styled( Ariakit.MenuSeparator )<
 	Pick< DropdownMenuContext, 'variant' >
 >`
+	/* Occupy the width of all grid columns (ie. full width) */
+	grid-column: 1 / -1;
+
 	border: none;
 	height: ${ CONFIG.borderWidth };
-	/* TODO: doesn't match border color from variables */
 	background-color: ${ ( props ) =>
 		props.variant === 'toolbar'
 			? TOOLBAR_VARIANT_BORDER_COLOR
-			: DEFAULT_BORDER_COLOR };
-	/* Negative horizontal margin to make separator go from side to side */
-	margin: ${ space( 2 ) } calc( -1 * ${ CONTENT_WRAPPER_PADDING } );
+			: DIVIDER_COLOR };
+	/* Align with menu items' content */
+	margin-block: ${ space( 2 ) };
+	margin-inline: ${ ITEM_PADDING_INLINE };
 
 	/* Only visible in Windows High Contrast mode */
 	outline: 2px solid transparent;
 `;
 
 export const SubmenuChevronIcon = styled( Icon )`
+	width: ${ space( 1.5 ) };
 	${ rtl(
 		{
-			transform: `scaleX(1) translateX(${ space( 2 ) })`,
+			transform: `scaleX(1)`,
 		},
 		{
-			transform: `scaleX(-1) translateX(${ space( 2 ) })`,
+			transform: `scaleX(-1)`,
 		}
-	) }
+	) };
+`;
+
+export const DropdownMenuItemLabel = styled( Truncate )`
+	font-size: ${ font( 'default.fontSize' ) };
+	line-height: 20px;
+	color: inherit;
+`;
+
+export const DropdownMenuItemHelpText = styled( Truncate )`
+	font-size: ${ font( 'helpText.fontSize' ) };
+	line-height: 16px;
+	color: ${ COLORS.gray[ '700' ] };
+
+	[data-active-item]:not( [data-focus-visible] ) *:not( ${ DropdownMenu } ) &,
+	[aria-disabled='true'] *:not( ${ DropdownMenu } ) & {
+		color: inherit;
+	}
 `;

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

@@ -16,7 +16,6 @@ import {
 	DropdownMenu,
 	DropdownMenuCheckboxItem,
 	DropdownMenuItem,
-	DropdownMenuGroupLabel,
 	DropdownMenuRadioItem,
 	DropdownMenuSeparator,
 	DropdownMenuGroup,
@@ -134,8 +133,9 @@ describe( 'DropdownMenu', () => {
 			await press.ArrowDown();
 
 			// DropdownMenu open, focus is on the first focusable item
+			// (disabled items are still focusable and accessible)
 			expect(
-				screen.getByRole( 'menuitem', { name: 'Second item' } )
+				screen.getByRole( 'menuitem', { name: 'First item' } )
 			).toHaveFocus();
 		} );
 
@@ -163,8 +163,9 @@ describe( 'DropdownMenu', () => {
 			await press.Space();
 
 			// DropdownMenu open, focus is on the first focusable item
+			// (disabled items are still focusable and accessible
 			expect(
-				screen.getByRole( 'menuitem', { name: 'Second item' } )
+				screen.getByRole( 'menuitem', { name: 'First item' } )
 			).toHaveFocus();
 		} );
 
@@ -452,9 +453,6 @@ describe( 'DropdownMenu', () => {
 				return (
 					<DropdownMenu trigger={ <button>Open dropdown</button> }>
 						<DropdownMenuGroup>
-							<DropdownMenuGroupLabel>
-								Radio group label
-							</DropdownMenuGroupLabel>
 							<DropdownMenuRadioItem
 								name="radio-test"
 								value="radio-one"
@@ -532,9 +530,6 @@ describe( 'DropdownMenu', () => {
 			render(
 				<DropdownMenu trigger={ <button>Open dropdown</button> }>
 					<DropdownMenuGroup>
-						<DropdownMenuGroupLabel>
-							Radio group label
-						</DropdownMenuGroupLabel>
 						<DropdownMenuRadioItem
 							name="radio-test"
 							value="radio-one"
@@ -991,7 +986,7 @@ describe( 'DropdownMenu', () => {
 			// The contents of the suffix are rendered after the item's children
 			expect(
 				screen.getByRole( 'menuitemradio', {
-					name: 'Radio item oneRadio suffix',
+					name: 'Radio item one Radio suffix',
 				} )
 			).toBeInTheDocument();
 		} );

package/src/dropdown-menu-v2-ariakit/types.ts

@@ -88,13 +88,6 @@ export interface DropdownMenuGroupProps {
 	children: React.ReactNode;
 }
 
-export interface DropdownMenuGroupLabelProps {
-	/**
-	 * The contents of the dropdown menu group label.
-	 */
-	children: React.ReactNode;
-}
-
 export interface DropdownMenuItemProps {
 	/**
 	 * The contents of the menu item.

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

@@ -23,6 +23,7 @@ const noop = () => {};
 
 export default function FocalPointPickerControls( {
 	__nextHasNoMarginBottom,
+	__next40pxDefaultSize,
 	hasHelpText,
 	onChange = noop,
 	point = {
@@ -51,8 +52,10 @@ export default function FocalPointPickerControls( {
 			className="focal-point-picker__controls"
 			__nextHasNoMarginBottom={ __nextHasNoMarginBottom }
 			hasHelpText={ hasHelpText }
+			gap={ 4 }
 		>
 			<FocalPointUnitControl
+				__next40pxDefaultSize={ __next40pxDefaultSize }
 				label={ __( 'Left' ) }
 				aria-label={ __( 'Focal point left position' ) }
 				value={ [ valueX, '%' ].join( '' ) }
@@ -66,6 +69,7 @@ export default function FocalPointPickerControls( {
 				dragDirection="e"
 			/>
 			<FocalPointUnitControl
+				__next40pxDefaultSize={ __next40pxDefaultSize }
 				label={ __( 'Top' ) }
 				aria-label={ __( 'Focal point top position' ) }
 				value={ [ valueY, '%' ].join( '' ) }

package/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 ) => {

package/src/focal-point-picker/styles/focal-point-picker-style.ts

@@ -53,7 +53,7 @@ export const MediaPlaceholder = styled.div`
 `;
 
 export const StyledUnitControl = styled( UnitControl )`
-	width: 100px;
+	width: 100%;
 `;
 
 const deprecatedBottomMargin = ( {

package/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.

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

@@ -27,6 +27,7 @@ const CUSTOM_OPTION: FontSizePickerSelectOption = {
 
 const FontSizePickerSelect = ( props: FontSizePickerSelectProps ) => {
 	const {
+		__next40pxDefaultSize,
 		fontSizes,
 		value,
 		disableCustomFontSizes,
@@ -67,6 +68,7 @@ const FontSizePickerSelect = ( props: FontSizePickerSelectProps ) => {
 
 	return (
 		<CustomSelectControl
+			__next40pxDefaultSize={ __next40pxDefaultSize }
 			__nextUnconstrainedWidth
 			className="components-font-size-picker__select"
 			label={ __( 'Font size' ) }

package/src/font-size-picker/font-size-picker-toggle-group.tsx

@@ -14,10 +14,18 @@ import { T_SHIRT_ABBREVIATIONS, T_SHIRT_NAMES } from './constants';
 import type { FontSizePickerToggleGroupProps } from './types';
 
 const FontSizePickerToggleGroup = ( props: FontSizePickerToggleGroupProps ) => {
-	const { fontSizes, value, __nextHasNoMarginBottom, size, onChange } = props;
+	const {
+		fontSizes,
+		value,
+		__nextHasNoMarginBottom,
+		__next40pxDefaultSize,
+		size,
+		onChange,
+	} = props;
 	return (
 		<ToggleGroupControl
 			__nextHasNoMarginBottom={ __nextHasNoMarginBottom }
+			__next40pxDefaultSize={ __next40pxDefaultSize }
 			label={ __( 'Font size' ) }
 			hideLabelFromVision
 			value={ value }

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

@@ -45,6 +45,7 @@ const UnforwardedFontSizePicker = (
 	const {
 		/** Start opting into the new margin-free styles that will become the default in a future version. */
 		__nextHasNoMarginBottom = false,
+		__next40pxDefaultSize = false,
 		fallbackFontSize,
 		fontSizes = [],
 		disableCustomFontSizes = false,
@@ -165,6 +166,7 @@ const UnforwardedFontSizePicker = (
 					shouldUseSelectControl &&
 					! showCustomValueControl && (
 						<FontSizePickerSelect
+							__next40pxDefaultSize={ __next40pxDefaultSize }
 							fontSizes={ fontSizes }
 							value={ value }
 							disableCustomFontSizes={ disableCustomFontSizes }
@@ -194,6 +196,7 @@ const UnforwardedFontSizePicker = (
 						fontSizes={ fontSizes }
 						value={ value }
 						__nextHasNoMarginBottom={ __nextHasNoMarginBottom }
+						__next40pxDefaultSize={ __next40pxDefaultSize }
 						size={ size }
 						onChange={ ( newValue ) => {
 							if ( newValue === undefined ) {
@@ -214,6 +217,7 @@ const UnforwardedFontSizePicker = (
 					<Flex className="components-font-size-picker__custom-size-control">
 						<FlexItem isBlock>
 							<UnitControl
+								__next40pxDefaultSize={ __next40pxDefaultSize }
 								label={ __( 'Custom' ) }
 								labelPosition="top"
 								hideLabelFromVision
@@ -241,6 +245,9 @@ const UnforwardedFontSizePicker = (
 										__nextHasNoMarginBottom={
 											__nextHasNoMarginBottom
 										}
+										__next40pxDefaultSize={
+											__next40pxDefaultSize
+										}
 										className="components-font-size-picker__custom-input"
 										label={ __( 'Custom Size' ) }
 										hideLabelFromVision
@@ -276,9 +283,10 @@ const UnforwardedFontSizePicker = (
 									variant="secondary"
 									__next40pxDefaultSize
 									size={
-										size !== '__unstable-large'
-											? 'small'
-											: 'default'
+										size === '__unstable-large' ||
+										props.__next40pxDefaultSize
+											? 'default'
+											: 'small'
 									}
 								>
 									{ __( 'Reset' ) }

package/src/font-size-picker/types.ts

@@ -57,6 +57,12 @@ export type FontSizePickerProps = {
 	 * @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;
 	/**
 	 * Size of the control.
 	 *
@@ -93,6 +99,7 @@ export type FontSizePickerSelectProps = Pick<
 	>;
 	onChange: NonNullable< FontSizePickerProps[ 'onChange' ] >;
 	onSelectCustom: () => void;
+	__next40pxDefaultSize: boolean;
 };
 
 export type FontSizePickerSelectOption = {
@@ -104,7 +111,7 @@ export type FontSizePickerSelectOption = {
 
 export type FontSizePickerToggleGroupProps = Pick<
 	FontSizePickerProps,
-	'value' | 'size' | '__nextHasNoMarginBottom'
+	'value' | 'size' | '__nextHasNoMarginBottom' | '__next40pxDefaultSize'
 > & {
 	fontSizes: NonNullable< FontSizePickerProps[ 'fontSizes' ] >;
 	onChange: NonNullable< FontSizePickerProps[ 'onChange' ] >;