@wordpress/components 25.1.0 → 25.1.1

package/src/box-control/test/index.tsx

@@ -46,15 +46,10 @@ describe( 'BoxControl', () => {
 				name: 'Box Control',
 			} );
 
-			await user.type( input, '100%' );
+			await user.type( input, '100' );
 			await user.keyboard( '{Enter}' );
 
 			expect( input ).toHaveValue( '100' );
-			expect(
-				screen.getByRole( 'combobox', {
-					name: 'Select unit',
-				} )
-			).toHaveValue( '%' );
 		} );
 	} );
 
@@ -67,20 +62,15 @@ describe( 'BoxControl', () => {
 			const input = screen.getByRole( 'textbox', {
 				name: 'Box Control',
 			} );
-			const select = screen.getByRole( 'combobox', {
-				name: 'Select unit',
-			} );
 
-			await user.type( input, '100px' );
+			await user.type( input, '100' );
 			await user.keyboard( '{Enter}' );
 
 			expect( input ).toHaveValue( '100' );
-			expect( select ).toHaveValue( 'px' );
 
 			await user.click( screen.getByRole( 'button', { name: 'Reset' } ) );
 
 			expect( input ).toHaveValue( '' );
-			expect( select ).toHaveValue( 'px' );
 		} );
 
 		it( 'should reset values when clicking Reset, if controlled', async () => {
@@ -91,20 +81,15 @@ describe( 'BoxControl', () => {
 			const input = screen.getByRole( 'textbox', {
 				name: 'Box Control',
 			} );
-			const select = screen.getByRole( 'combobox', {
-				name: 'Select unit',
-			} );
 
-			await user.type( input, '100px' );
+			await user.type( input, '100' );
 			await user.keyboard( '{Enter}' );
 
 			expect( input ).toHaveValue( '100' );
-			expect( select ).toHaveValue( 'px' );
 
 			await user.click( screen.getByRole( 'button', { name: 'Reset' } ) );
 
 			expect( input ).toHaveValue( '' );
-			expect( select ).toHaveValue( 'px' );
 		} );
 
 		it( 'should reset values when clicking Reset, if controlled <-> uncontrolled state changes', async () => {
@@ -115,20 +100,15 @@ describe( 'BoxControl', () => {
 			const input = screen.getByRole( 'textbox', {
 				name: 'Box Control',
 			} );
-			const select = screen.getByRole( 'combobox', {
-				name: 'Select unit',
-			} );
 
-			await user.type( input, '100px' );
+			await user.type( input, '100' );
 			await user.keyboard( '{Enter}' );
 
 			expect( input ).toHaveValue( '100' );
-			expect( select ).toHaveValue( 'px' );
 
 			await user.click( screen.getByRole( 'button', { name: 'Reset' } ) );
 
 			expect( input ).toHaveValue( '' );
-			expect( select ).toHaveValue( 'px' );
 		} );
 
 		it( 'should persist cleared value when focus changes', async () => {
@@ -141,15 +121,10 @@ describe( 'BoxControl', () => {
 				name: 'Box Control',
 			} );
 
-			await user.type( input, '100%' );
+			await user.type( input, '100' );
 			await user.keyboard( '{Enter}' );
 
 			expect( input ).toHaveValue( '100' );
-			expect(
-				screen.getByRole( 'combobox', {
-					name: 'Select unit',
-				} )
-			).toHaveValue( '%' );
 
 			await user.clear( input );
 			expect( input ).toHaveValue( '' );
@@ -178,9 +153,8 @@ describe( 'BoxControl', () => {
 
 			await user.type(
 				screen.getByRole( 'textbox', { name: 'Top' } ),
-				'100px'
+				'100'
 			);
-			await user.keyboard( '{Enter}' );
 
 			expect(
 				screen.getByRole( 'textbox', { name: 'Top' } )
@@ -194,12 +168,6 @@ describe( 'BoxControl', () => {
 			expect(
 				screen.getByRole( 'textbox', { name: 'Left' } )
 			).not.toHaveValue();
-
-			screen
-				.getAllByRole( 'combobox', { name: 'Select unit' } )
-				.forEach( ( combobox ) => {
-					expect( combobox ).toHaveValue( 'px' );
-				} );
 		} );
 
 		it( 'should update a whole axis when value is changed when unlinked', async () => {
@@ -215,9 +183,8 @@ describe( 'BoxControl', () => {
 				screen.getByRole( 'textbox', {
 					name: 'Vertical',
 				} ),
-				'100px'
+				'100'
 			);
-			await user.keyboard( '{Enter}' );
 
 			expect(
 				screen.getByRole( 'textbox', { name: 'Vertical' } )
@@ -225,12 +192,6 @@ describe( 'BoxControl', () => {
 			expect(
 				screen.getByRole( 'textbox', { name: 'Horizontal' } )
 			).not.toHaveValue();
-
-			screen
-				.getAllByRole( 'combobox', { name: 'Select unit' } )
-				.forEach( ( combobox ) => {
-					expect( combobox ).toHaveValue( 'px' );
-				} );
 		} );
 	} );
 
@@ -321,23 +282,30 @@ describe( 'BoxControl', () => {
 	describe( 'onChange updates', () => {
 		it( 'should call onChange when values contain more than just CSS units', async () => {
 			const user = userEvent.setup();
-			const setState = jest.fn();
+			const onChangeSpy = jest.fn();
 
-			render( <BoxControl onChange={ setState } /> );
+			render( <BoxControl onChange={ onChangeSpy } /> );
 
-			await user.type(
-				screen.getByRole( 'textbox', {
-					name: 'Box Control',
-				} ),
-				'7.5rem'
-			);
-			await user.keyboard( '{Enter}' );
+			const valueInput = screen.getByRole( 'textbox', {
+				name: 'Box Control',
+			} );
+			const unitSelect = screen.getByRole( 'combobox', {
+				name: 'Select unit',
+			} );
 
-			expect( setState ).toHaveBeenCalledWith( {
-				top: '7.5rem',
-				right: '7.5rem',
-				bottom: '7.5rem',
-				left: '7.5rem',
+			// Typing the first letter of a unit blurs the input and focuses the combobox.
+			await user.type( valueInput, '7r' );
+
+			expect( unitSelect ).toHaveFocus();
+
+			// The correct expected behavior would be for the values to have "rem"
+			// as their unit, but the test environment doesn't seem to change
+			// values on `select` elements when using the keyboard.
+			expect( onChangeSpy ).toHaveBeenLastCalledWith( {
+				top: '7px',
+				right: '7px',
+				bottom: '7px',
+				left: '7px',
 			} );
 		} );
 

package/src/button/stories/e2e/index.tsx

@@ -56,3 +56,25 @@ export const Icon = VariantStates.bind( {} );
 Icon.args = {
 	icon: wordpress,
 };
+
+export const Dashicons: ComponentStory< typeof Button > = ( props ) => {
+	return (
+		<div style={ { display: 'flex', gap: 8 } }>
+			<Button { ...props } />
+			<Button { ...props }>Children</Button>
+			<Button { ...props } iconPosition="right">
+				Children (icon right)
+			</Button>
+			<Button { ...props } text="Text" />
+			<Button
+				{ ...props }
+				text="Text (icon right)"
+				iconPosition="right"
+			/>
+		</div>
+	);
+};
+Dashicons.args = {
+	icon: 'editor-help',
+	variant: 'primary',
+};

package/src/button/style.scss

@@ -168,11 +168,6 @@
 			background: rgba(var(--wp-admin-theme-color--rgb), 0.08);
 		}
 
-		.dashicon {
-			display: inline-block;
-			flex: 0 0 auto;
-		}
-
 		// Pull left if the tertiary button stands alone after a description, so as to vertically align with items above.
 		p + & {
 			margin-left: -($grid-unit-15 * 0.5);
@@ -296,10 +291,11 @@
 		}
 
 		.dashicon {
-			display: inline-block;
-			flex: 0 0 auto;
-			margin-left: 2px;
-			margin-right: 2px;
+			display: inline-flex;
+			justify-content: center;
+			align-items: center;
+			padding: 2px;
+			box-sizing: content-box;
 		}
 
 		&.has-text {
@@ -308,10 +304,6 @@
 			padding-left: $grid-unit-10;
 			gap: $grid-unit-05;
 		}
-
-		&.has-text .dashicon {
-			margin-right: $grid-unit-10 + 2px;
-		}
 	}
 
 	// Toggled style.

package/src/circular-option-picker/types.ts

@@ -12,7 +12,7 @@ import type { Icon } from '@wordpress/icons';
  * Internal dependencies
  */
 import type { ButtonAsButtonProps } from '../button/types';
-import type Dropdown from '../dropdown';
+import type { DropdownProps } from '../dropdown/types';
 import type { WordPressComponentProps } from '../ui/context';
 
 export type CircularOptionPickerProps = {
@@ -44,10 +44,7 @@ export type DropdownLinkActionProps = {
 		'children'
 	>;
 	linkText: string;
-	dropdownProps: Omit<
-		React.ComponentProps< typeof Dropdown >,
-		'className' | 'renderToggle'
-	>;
+	dropdownProps: Omit< DropdownProps, 'className' | 'renderToggle' >;
 	className?: string;
 };
 

package/src/clipboard-button/{index.js → index.tsx}

@@ -14,17 +14,11 @@ import deprecated from '@wordpress/deprecated';
  * Internal dependencies
  */
 import Button from '../button';
+import type { ClipboardButtonProps } from './types';
+import type { WordPressComponentProps } from '../ui/context';
 
 const TIMEOUT = 4000;
 
-/**
- * @param {Object}                    props
- * @param {string}                    [props.className]
- * @param {import('react').ReactNode} props.children
- * @param {() => void}                props.onCopy
- * @param {() => void}                [props.onFinishCopy]
- * @param {string}                    props.text
- */
 export default function ClipboardButton( {
 	className,
 	children,
@@ -32,18 +26,18 @@ export default function ClipboardButton( {
 	onFinishCopy,
 	text,
 	...buttonProps
-} ) {
+}: WordPressComponentProps< ClipboardButtonProps, 'button', false > ) {
 	deprecated( 'wp.components.ClipboardButton', {
 		since: '5.8',
 		alternative: 'wp.compose.useCopyToClipboard',
 	} );
 
-	/** @type {import('react').MutableRefObject<ReturnType<setTimeout> | undefined>} */
-	const timeoutId = useRef();
+	const timeoutId = useRef< NodeJS.Timeout >();
 	const ref = useCopyToClipboard( text, () => {
 		onCopy();
-		// @ts-expect-error: Should check if .current is defined, but not changing because this component is deprecated.
-		clearTimeout( timeoutId.current );
+		if ( timeoutId.current ) {
+			clearTimeout( timeoutId.current );
+		}
 
 		if ( onFinishCopy ) {
 			timeoutId.current = setTimeout( () => onFinishCopy(), TIMEOUT );
@@ -51,8 +45,9 @@ export default function ClipboardButton( {
 	} );
 
 	useEffect( () => {
-		// @ts-expect-error: Should check if .current is defined, but not changing because this component is deprecated.
-		clearTimeout( timeoutId.current );
+		if ( timeoutId.current ) {
+			clearTimeout( timeoutId.current );
+		}
 	}, [] );
 
 	const classes = classnames( 'components-clipboard-button', className );
@@ -62,8 +57,7 @@ export default function ClipboardButton( {
 	// This causes documentHasSelection() in the copy-handler component to
 	// mistakenly override the ClipboardButton, and copy a serialized string
 	// of the current block instead.
-	/** @type {import('react').ClipboardEventHandler<HTMLButtonElement>} */
-	const focusOnCopyEventTarget = ( event ) => {
+	const focusOnCopyEventTarget: React.ClipboardEventHandler = ( event ) => {
 		// @ts-expect-error: Should be currentTarget, but not changing because this component is deprecated.
 		event.target.focus();
 	};

package/src/clipboard-button/types.ts

@@ -0,0 +1,11 @@
+/**
+ * External dependencies
+ */
+import type { ReactNode } from 'react';
+
+export interface ClipboardButtonProps {
+	children: ReactNode;
+	onCopy: () => void;
+	onFinishCopy?: () => void;
+	text: string;
+}

package/src/dropdown/index.tsx

@@ -7,15 +7,16 @@ import type { ForwardedRef } from 'react';
 /**
  * WordPress dependencies
  */
-import { forwardRef, useEffect, useRef, useState } from '@wordpress/element';
+import { useEffect, useRef, useState } from '@wordpress/element';
 import { useMergeRefs } from '@wordpress/compose';
 import deprecated from '@wordpress/deprecated';
 
 /**
  * Internal dependencies
  */
+import { contextConnect, useContextSystem } from '../ui/context';
 import Popover from '../popover';
-import type { DropdownProps } from './types';
+import type { DropdownProps, DropdownInternalContext } from './types';
 
 function useObservableState(
 	initialState: boolean,
@@ -33,8 +34,11 @@ function useObservableState(
 	] as const;
 }
 
-function UnforwardedDropdown(
-	{
+const UnconnectedDropdown = (
+	props: DropdownProps,
+	forwardedRef: ForwardedRef< any >
+) => {
+	const {
 		renderContent,
 		renderToggle,
 		className,
@@ -49,9 +53,14 @@ function UnforwardedDropdown(
 
 		// Deprecated props
 		position,
-	}: DropdownProps,
-	forwardedRef: ForwardedRef< any >
-) {
+
+		// From context system
+		variant,
+	} = useContextSystem< DropdownProps & DropdownInternalContext >(
+		props,
+		'Dropdown'
+	);
+
 	if ( position !== undefined ) {
 		deprecated( '`position` prop in wp.components.Dropdown', {
 			since: '6.2',
@@ -120,7 +129,7 @@ function UnforwardedDropdown(
 
 	return (
 		<div
-			className={ classnames( 'components-dropdown', className ) }
+			className={ className }
 			ref={ useMergeRefs( [
 				containerRef,
 				forwardedRef,
@@ -149,6 +158,7 @@ function UnforwardedDropdown(
 							? fallbackPopoverAnchor
 							: undefined
 					}
+					variant={ variant }
 					{ ...popoverProps }
 					className={ classnames(
 						'components-dropdown__content',
@@ -161,7 +171,7 @@ function UnforwardedDropdown(
 			) }
 		</div>
 	);
-}
+};
 
 /**
  * Renders a button that opens a floating content modal when clicked.
@@ -188,6 +198,6 @@ function UnforwardedDropdown(
  * );
  * ```
  */
-export const Dropdown = forwardRef( UnforwardedDropdown );
+export const Dropdown = contextConnect( UnconnectedDropdown, 'Dropdown' );
 
 export default Dropdown;

package/src/dropdown/types.ts

@@ -112,3 +112,11 @@ export type DropdownProps = {
 	 */
 	position?: PopoverProps[ 'position' ];
 };
+
+export type DropdownInternalContext = {
+	/**
+	 * This variant can be used to change the appearance of the component in
+	 * specific contexts, ie. when rendered inside the `Toolbar` component.
+	 */
+	variant?: 'toolbar';
+};

package/src/dropdown-menu/index.tsx

@@ -11,10 +11,15 @@ import { menu } from '@wordpress/icons';
 /**
  * Internal dependencies
  */
+import { contextConnectWithoutRef, useContextSystem } from '../ui/context';
 import Button from '../button';
 import Dropdown from '../dropdown';
 import { NavigableMenu } from '../navigable-container';
-import type { DropdownMenuProps, DropdownOption } from './types';
+import type {
+	DropdownMenuProps,
+	DropdownOption,
+	DropdownMenuInternalContext,
+} from './types';
 
 function mergeProps<
 	T extends { className?: string; [ key: string ]: unknown }
@@ -38,88 +43,7 @@ function isFunction( maybeFunc: unknown ): maybeFunc is () => void {
 	return typeof maybeFunc === 'function';
 }
 
-/**
- *
- * The DropdownMenu displays a list of actions (each contained in a MenuItem,
- * MenuItemsChoice, or MenuGroup) in a compact way. It appears in a Popover
- * after the user has interacted with an element (a button or icon) or when
- * they perform a specific action.
- *
- * Render a Dropdown Menu with a set of controls:
- *
- * ```jsx
- * import { DropdownMenu } from '@wordpress/components';
- * import {
- * 	more,
- * 	arrowLeft,
- * 	arrowRight,
- * 	arrowUp,
- * 	arrowDown,
- * } from '@wordpress/icons';
- *
- * const MyDropdownMenu = () => (
- * 	<DropdownMenu
- * 		icon={ more }
- * 		label="Select a direction"
- * 		controls={ [
- * 			{
- * 				title: 'Up',
- * 				icon: arrowUp,
- * 				onClick: () => console.log( 'up' ),
- * 			},
- * 			{
- * 				title: 'Right',
- * 				icon: arrowRight,
- * 				onClick: () => console.log( 'right' ),
- * 			},
- * 			{
- * 				title: 'Down',
- * 				icon: arrowDown,
- * 				onClick: () => console.log( 'down' ),
- * 			},
- * 			{
- * 				title: 'Left',
- * 				icon: arrowLeft,
- * 				onClick: () => console.log( 'left' ),
- * 			},
- * 		] }
- * 	/>
- * );
- * ```
- *
- * Alternatively, specify a `children` function which returns elements valid for
- * use in a DropdownMenu: `MenuItem`, `MenuItemsChoice`, or `MenuGroup`.
- *
- * ```jsx
- * import { DropdownMenu, MenuGroup, MenuItem } from '@wordpress/components';
- * import { more, arrowUp, arrowDown, trash } from '@wordpress/icons';
- *
- * const MyDropdownMenu = () => (
- * 	<DropdownMenu icon={ more } label="Select a direction">
- * 		{ ( { 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>
- * 			</>
- * 		) }
- * 	</DropdownMenu>
- * );
- * ```
- *
- */
-
-function DropdownMenu( dropdownMenuProps: DropdownMenuProps ) {
+function UnconnectedDropdownMenu( dropdownMenuProps: DropdownMenuProps ) {
 	const {
 		children,
 		className,
@@ -132,7 +56,13 @@ function DropdownMenu( dropdownMenuProps: DropdownMenuProps ) {
 		disableOpenOnArrowDown = false,
 		text,
 		noIcons,
-	} = dropdownMenuProps;
+
+		// Context
+		variant,
+	} = useContextSystem< DropdownMenuProps & DropdownMenuInternalContext >(
+		dropdownMenuProps,
+		'DropdownMenu'
+	);
 
 	if ( ! controls?.length && ! isFunction( children ) ) {
 		return null;
@@ -154,13 +84,14 @@ function DropdownMenu( dropdownMenuProps: DropdownMenuProps ) {
 	const mergedPopoverProps = mergeProps(
 		{
 			className: 'components-dropdown-menu__popover',
+			variant,
 		},
 		popoverProps
 	);
 
 	return (
 		<Dropdown
-			className={ classnames( 'components-dropdown-menu', className ) }
+			className={ className }
 			popoverProps={ mergedPopoverProps }
 			renderToggle={ ( { isOpen, onToggle } ) => {
 				const openOnArrowDown = ( event: React.KeyboardEvent ) => {
@@ -284,4 +215,89 @@ function DropdownMenu( dropdownMenuProps: DropdownMenuProps ) {
 	);
 }
 
+/**
+ *
+ * The DropdownMenu displays a list of actions (each contained in a MenuItem,
+ * MenuItemsChoice, or MenuGroup) in a compact way. It appears in a Popover
+ * after the user has interacted with an element (a button or icon) or when
+ * they perform a specific action.
+ *
+ * Render a Dropdown Menu with a set of controls:
+ *
+ * ```jsx
+ * import { DropdownMenu } from '@wordpress/components';
+ * import {
+ * 	more,
+ * 	arrowLeft,
+ * 	arrowRight,
+ * 	arrowUp,
+ * 	arrowDown,
+ * } from '@wordpress/icons';
+ *
+ * const MyDropdownMenu = () => (
+ * 	<DropdownMenu
+ * 		icon={ more }
+ * 		label="Select a direction"
+ * 		controls={ [
+ * 			{
+ * 				title: 'Up',
+ * 				icon: arrowUp,
+ * 				onClick: () => console.log( 'up' ),
+ * 			},
+ * 			{
+ * 				title: 'Right',
+ * 				icon: arrowRight,
+ * 				onClick: () => console.log( 'right' ),
+ * 			},
+ * 			{
+ * 				title: 'Down',
+ * 				icon: arrowDown,
+ * 				onClick: () => console.log( 'down' ),
+ * 			},
+ * 			{
+ * 				title: 'Left',
+ * 				icon: arrowLeft,
+ * 				onClick: () => console.log( 'left' ),
+ * 			},
+ * 		] }
+ * 	/>
+ * );
+ * ```
+ *
+ * Alternatively, specify a `children` function which returns elements valid for
+ * use in a DropdownMenu: `MenuItem`, `MenuItemsChoice`, or `MenuGroup`.
+ *
+ * ```jsx
+ * import { DropdownMenu, MenuGroup, MenuItem } from '@wordpress/components';
+ * import { more, arrowUp, arrowDown, trash } from '@wordpress/icons';
+ *
+ * const MyDropdownMenu = () => (
+ * 	<DropdownMenu icon={ more } label="Select a direction">
+ * 		{ ( { 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>
+ * 			</>
+ * 		) }
+ * 	</DropdownMenu>
+ * );
+ * ```
+ *
+ */
+export const DropdownMenu = contextConnectWithoutRef(
+	UnconnectedDropdownMenu,
+	'DropdownMenu'
+);
+
 export default DropdownMenu;

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

@@ -5,7 +5,7 @@ import type { ComponentMeta, ComponentStory } from '@storybook/react';
 /**
  * Internal dependencies
  */
-import DropdownMenu from '..';
+import { DropdownMenu } from '..';
 import MenuItem from '../../menu-item';
 import MenuGroup from '../../menu-group';