@wordpress/components 25.2.0 → 25.4.0

package/src/button/index.native.js

@@ -24,6 +24,7 @@ import {
  */
 import Tooltip from '../tooltip';
 import Icon from '../icon';
+import style from './style.scss';
 
 const isAndroid = Platform.OS === 'android';
 const marginBottom = isAndroid ? -0.5 : 0;
@@ -51,8 +52,6 @@ const styles = StyleSheet.create( {
 		justifyContent: 'center',
 		alignItems: 'center',
 		borderRadius: 6,
-		borderColor: '#2e4453',
-		backgroundColor: '#2e4453',
 	},
 	subscriptInactive: {
 		color: '#7b9ab1', // $toolbar-button.
@@ -95,6 +94,7 @@ export function Button( props ) {
 		tooltipPosition,
 		isActiveStyle,
 		customContainerStyles,
+		hitSlop,
 	} = props;
 	const preferredColorScheme = usePreferredColorScheme();
 
@@ -105,10 +105,16 @@ export function Button( props ) {
 		customContainerStyles && { ...customContainerStyles },
 	];
 
+	const buttonActiveColorStyles = usePreferredColorSchemeStyle(
+		style[ 'components-button-light--active' ],
+		style[ 'components-button-dark--active' ]
+	);
+
 	const buttonViewStyle = {
 		opacity: isDisabled ? 0.3 : 1,
 		...( fixedRatio && styles.fixedRatio ),
 		...( isPressed ? styles.buttonActive : styles.buttonInactive ),
+		...( isPressed ? buttonActiveColorStyles : {} ),
 		...( isPressed &&
 			isActiveStyle?.borderRadius && {
 				borderRadius: isActiveStyle.borderRadius,
@@ -158,7 +164,6 @@ export function Button( props ) {
 
 	const newIcon = icon
 		? cloneElement( <Icon icon={ icon } size={ iconSize } />, {
-				colorScheme: preferredColorScheme,
 				isPressed,
 		  } )
 		: null;
@@ -184,6 +189,7 @@ export function Button( props ) {
 			style={ containerStyle }
 			disabled={ isDisabled }
 			testID={ testID }
+			hitSlop={ hitSlop }
 		>
 			<LongPressGestureHandler
 				minDurationMs={ 500 }

package/src/button/index.tsx

@@ -33,11 +33,18 @@ function useDeprecatedProps( {
 	isSecondary,
 	isTertiary,
 	isLink,
+	isSmall,
+	size,
 	variant,
 	...otherProps
 }: ButtonProps & DeprecatedButtonProps ): ButtonProps {
+	let computedSize = size;
 	let computedVariant = variant;
 
+	if ( isSmall ) {
+		computedSize ??= 'small';
+	}
+
 	if ( isPrimary ) {
 		computedVariant ??= 'primary';
 	}
@@ -66,6 +73,7 @@ function useDeprecatedProps( {
 
 	return {
 		...otherProps,
+		size: computedSize,
 		variant: computedVariant,
 	};
 }
@@ -76,8 +84,6 @@ export function UnforwardedButton(
 ) {
 	const {
 		__next40pxDefaultSize,
-		__next32pxSmallSize,
-		isSmall,
 		isPressed,
 		isBusy,
 		isDestructive,
@@ -91,6 +97,7 @@ export function UnforwardedButton(
 		shortcut,
 		label,
 		children,
+		size = 'default',
 		text,
 		variant,
 		__experimentalIsFocusable: isFocusable,
@@ -118,10 +125,10 @@ export function UnforwardedButton(
 
 	const classes = classnames( 'components-button', className, {
 		'is-next-40px-default-size': __next40pxDefaultSize,
-		'is-next-32px-small-size': __next32pxSmallSize,
 		'is-secondary': variant === 'secondary',
 		'is-primary': variant === 'primary',
-		'is-small': isSmall,
+		'is-small': size === 'small',
+		'is-compact': size === 'compact',
 		'is-tertiary': variant === 'tertiary',
 		'is-pressed': isPressed,
 		'is-busy': isBusy,

package/src/button/style.native.scss

@@ -0,0 +1,9 @@
+.components-button-light--active {
+	border-color: $light-dim;
+	background-color: $light-dim;
+}
+
+.components-button-dark--active {
+	border-color: $dark-quaternary;
+	background-color: $dark-quaternary;
+}

package/src/button/style.scss

@@ -257,25 +257,26 @@
 		/* stylelint-enable */
 	}
 
+	&.is-compact {
+		height: $button-size-compact;
+
+		&.has-icon:not(.has-text) {
+			padding: 0;
+			width: $button-size-compact;
+			min-width: $button-size-compact;
+		}
+	}
+
 	&.is-small {
-		height: $button-size-small-next-default-32px;
+		height: $button-size-small;
 		line-height: 22px;
 		padding: 0 8px;
 		font-size: 11px;
 
 		&.has-icon:not(.has-text) {
 			padding: 0;
-			width: $button-size-small-next-default-32px;
-			min-width: $button-size-small-next-default-32px;
-		}
-
-		&:not(.is-next-32px-small-size) {
-			height: $button-size-small;
-
-			&.has-icon:not(.has-text) {
-				width: $button-size-small;
-				min-width: $button-size-small;
-			}
+			width: $button-size-small;
+			min-width: $button-size-small;
 		}
 	}
 

package/src/button/test/index.tsx

@@ -402,6 +402,19 @@ describe( 'Button', () => {
 			);
 			expect( console ).toHaveWarned();
 		} );
+
+		it( 'should not break when the legacy isSmall prop is passed', () => {
+			render( <Button isSmall /> );
+			expect( screen.getByRole( 'button' ) ).toHaveClass( 'is-small' );
+		} );
+
+		it( 'should prioritize the `size` prop over `isSmall`', () => {
+			render( <Button size="compact" isSmall /> );
+			expect( screen.getByRole( 'button' ) ).not.toHaveClass(
+				'is-small'
+			);
+			expect( screen.getByRole( 'button' ) ).toHaveClass( 'is-compact' );
+		} );
 	} );
 
 	describe( 'static typing', () => {

package/src/button/types.ts

@@ -25,15 +25,6 @@ type BaseButtonProps = {
 	 * @default false
 	 */
 	__next40pxDefaultSize?: boolean;
-	/**
-	 * Start opting into the larger `isSmall` button size that will become the
-	 * default small size in a future version.
-	 *
-	 * Only takes effect when the `isSmall` prop is `true`.
-	 *
-	 * @default false
-	 */
-	__next32pxSmallSize?: boolean;
 	/**
 	 * The button's children.
 	 */
@@ -74,8 +65,13 @@ type BaseButtonProps = {
 	 * Renders a pressed button style.
 	 */
 	isPressed?: boolean;
+	// TODO: Deprecate officially (add console warning and move to DeprecatedButtonProps).
 	/**
 	 * Decreases the size of the button.
+	 *
+	 * Deprecated in favor of the `size` prop. If both props are defined, the `size` prop will take precedence.
+	 *
+	 * @deprecated Use the `'small'` value on the `size` prop instead.
 	 */
 	isSmall?: boolean;
 	/**
@@ -92,6 +88,18 @@ type BaseButtonProps = {
 	 * If provided, renders a Tooltip component for the button.
 	 */
 	showTooltip?: boolean;
+	/**
+	 * The size of the button.
+	 *
+	 * - `'default'`: For normal text-label buttons, unless it is a toggle button.
+	 * - `'compact'`: For toggle buttons, icon buttons, and buttons when used in context of either.
+	 * - `'small'`: For icon buttons associated with more advanced or auxiliary features.
+	 *
+	 * If the deprecated `isSmall` prop is also defined, this prop will take precedence.
+	 *
+	 * @default 'default'
+	 */
+	size?: 'default' | 'compact' | 'small';
 	/**
 	 * If provided, displays the given text inside the button. If the button contains children elements, the text is displayed before them.
 	 */

package/src/confirm-dialog/component.tsx

@@ -7,7 +7,7 @@ import type { ForwardedRef, KeyboardEvent } from 'react';
  * WordPress dependencies
  */
 import { __ } from '@wordpress/i18n';
-import { useCallback, useEffect, useState } from '@wordpress/element';
+import { useCallback, useEffect, useRef, useState } from '@wordpress/element';
 
 /**
  * Internal dependencies
@@ -42,6 +42,8 @@ function ConfirmDialog(
 
 	const cx = useCx();
 	const wrapperClassName = cx( styles.wrapper );
+	const cancelButtonRef = useRef();
+	const confirmButtonRef = useRef();
 
 	const [ isOpen, setIsOpen ] = useState< boolean >();
 	const [ shouldSelfClose, setShouldSelfClose ] = useState< boolean >();
@@ -69,7 +71,13 @@ function ConfirmDialog(
 
 	const handleEnter = useCallback(
 		( event: KeyboardEvent< HTMLDivElement > ) => {
-			if ( event.key === 'Enter' ) {
+			// Avoid triggering the 'confirm' action when a button is focused,
+			// as this can cause a double submission.
+			const isConfirmOrCancelButton =
+				event.target === cancelButtonRef.current ||
+				event.target === confirmButtonRef.current;
+
+			if ( ! isConfirmOrCancelButton && event.key === 'Enter' ) {
 				handleEvent( onConfirm )( event );
 			}
 		},
@@ -96,12 +104,14 @@ function ConfirmDialog(
 						<Text>{ children }</Text>
 						<Flex direction="row" justify="flex-end">
 							<Button
+								ref={ cancelButtonRef }
 								variant="tertiary"
 								onClick={ handleEvent( onCancel ) }
 							>
 								{ cancelLabel }
 							</Button>
 							<Button
+								ref={ confirmButtonRef }
 								variant="primary"
 								onClick={ handleEvent( onConfirm ) }
 							>

package/src/confirm-dialog/stories/index.js

@@ -7,7 +7,6 @@ import { useState } from '@wordpress/element';
  * Internal dependencies
  */
 import Button from '../../button';
-import { Heading } from '../../heading';
 import { ConfirmDialog } from '..';
 
 const meta = {
@@ -26,12 +25,8 @@ const meta = {
 		isOpen: {
 			control: { type: null },
 		},
-		onConfirm: {
-			control: { type: null },
-		},
-		onCancel: {
-			control: { type: null },
-		},
+		onConfirm: { action: 'onConfirm' },
+		onCancel: { action: 'onCancel' },
 	},
 	args: {
 		children: 'Would you like to privately publish the post now?',
@@ -43,19 +38,19 @@ const meta = {
 
 export default meta;
 
-const Template = ( args ) => {
+const Template = ( { onConfirm, onCancel, ...args } ) => {
 	const [ isOpen, setIsOpen ] = useState( false );
-	const [ confirmVal, setConfirmVal ] = useState( '' );
 
-	const handleConfirm = () => {
-		setConfirmVal( 'Confirmed!' );
+	const handleConfirm = ( ...confirmArgs ) => {
+		onConfirm( ...confirmArgs );
 		setIsOpen( false );
 	};
 
-	const handleCancel = () => {
-		setConfirmVal( 'Cancelled' );
+	const handleCancel = ( ...cancelArgs ) => {
+		onCancel( ...cancelArgs );
 		setIsOpen( false );
 	};
+
 	return (
 		<>
 			<Button variant="primary" onClick={ () => setIsOpen( true ) }>
@@ -70,8 +65,6 @@ const Template = ( args ) => {
 			>
 				{ args.children }
 			</ConfirmDialog>
-
-			<Heading level={ 1 }>{ confirmVal }</Heading>
 		</>
 	);
 };

package/src/confirm-dialog/test/index.js

@@ -194,6 +194,48 @@ describe( 'Confirm', () => {
 				expect( confirmDialog ).not.toBeInTheDocument();
 				expect( onConfirm ).toHaveBeenCalled();
 			} );
+
+			it( 'calls only the `onCancel` callback and not the `onConfirm` callback when the cancel button is submitted using the keyboard', async () => {
+				const user = userEvent.setup();
+
+				const onConfirm = jest.fn().mockName( 'onConfirm()' );
+				const onCancel = jest.fn().mockName( 'onCancel()' );
+
+				render(
+					<ConfirmDialog
+						onConfirm={ onConfirm }
+						onCancel={ onCancel }
+					>
+						Are you sure?
+					</ConfirmDialog>
+				);
+
+				await user.keyboard( '[Tab][Enter]' );
+
+				expect( onConfirm ).not.toHaveBeenCalled();
+				expect( onCancel ).toHaveBeenCalledTimes( 1 );
+			} );
+
+			it( 'calls only the `onConfirm` callback when the confirm button is submitted using the keyboard', async () => {
+				const user = userEvent.setup();
+
+				const onConfirm = jest.fn().mockName( 'onConfirm()' );
+				const onCancel = jest.fn().mockName( 'onCancel()' );
+
+				render(
+					<ConfirmDialog
+						onConfirm={ onConfirm }
+						onCancel={ onCancel }
+					>
+						Are you sure?
+					</ConfirmDialog>
+				);
+
+				await user.keyboard( '[Tab][Tab][Enter]' );
+
+				expect( onConfirm ).toHaveBeenCalledTimes( 1 );
+				expect( onCancel ).not.toHaveBeenCalled();
+			} );
 		} );
 	} );
 

package/src/dropdown-menu/style.scss

@@ -30,19 +30,15 @@
 			height: 1px;
 		}
 
-		&.is-active svg {
-			// Block UI appearance.
-			color: $white;
-			background: $gray-900;
-			box-shadow: 0 0 0 $border-width $gray-900;
-			border-radius: $border-width;
-		}
-
-		// Formatting buttons
-		> svg {
-			border-radius: $radius-block-ui;
-			width: $button-size-small;
-			height: $button-size-small;
+		&.is-active {
+			svg,
+			.dashicon {
+				// Block UI appearance.
+				color: $white;
+				background: $gray-900;
+				box-shadow: 0 0 0 $border-width $gray-900;
+				border-radius: $border-width;
+			}
 		}
 
 		// If menu items are icon-only, make them stretch only to the icon size.

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

@@ -14,6 +14,7 @@ import { useState, useMemo, forwardRef } from '@wordpress/element';
 /**
  * Internal dependencies
  */
+import { Button } from '../button';
 import RangeControl from '../range-control';
 import { Flex, FlexItem } from '../flex';
 import {
@@ -31,7 +32,6 @@ import {
 	HeaderLabel,
 	HeaderToggle,
 	Controls,
-	ResetButton,
 } from './styles';
 import { Spacer } from '../spacer';
 import FontSizePickerSelect from './font-size-picker-select';
@@ -268,17 +268,21 @@ const UnforwardedFontSizePicker = (
 						) }
 						{ withReset && (
 							<FlexItem>
-								<ResetButton
+								<Button
 									disabled={ value === undefined }
 									onClick={ () => {
 										onChange?.( undefined );
 									} }
-									isSmall
 									variant="secondary"
-									size={ size }
+									__next40pxDefaultSize
+									size={
+										size !== '__unstable-large'
+											? 'small'
+											: 'default'
+									}
 								>
 									{ __( 'Reset' ) }
-								</ResetButton>
+								</Button>
 							</FlexItem>
 						) }
 					</Flex>

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

@@ -11,7 +11,6 @@ import Button from '../button';
 import { HStack } from '../h-stack';
 import { space } from '../ui/utils/space';
 import { COLORS } from '../utils';
-import type { FontSizePickerProps } from './types';
 
 export const Container = styled.fieldset`
 	border: 0;
@@ -44,12 +43,3 @@ export const Controls = styled.div< {
 	${ ( props ) =>
 		! props.__nextHasNoMarginBottom && `margin-bottom: ${ space( 6 ) };` }
 `;
-
-export const ResetButton = styled( Button )< {
-	size: FontSizePickerProps[ 'size' ];
-} >`
-	&&& {
-		height: ${ ( props ) =>
-			props.size === '__unstable-large' ? '40px' : '30px' };
-	}
-`;

package/src/form-token-field/styles.ts

@@ -9,6 +9,7 @@ import { css } from '@emotion/react';
  */
 import { Flex } from '../flex';
 import { space } from '../ui/utils/space';
+import { boxSizingReset } from '../utils';
 
 type TokensAndInputWrapperProps = {
 	__next40pxDefaultSize: boolean;
@@ -27,6 +28,7 @@ const deprecatedPaddings = ( {
 
 export const TokensAndInputWrapperFlex = styled( Flex )`
 	padding: 7px;
+	${ boxSizingReset }
 
 	${ deprecatedPaddings }
 `;

package/src/guide/icons.tsx

@@ -3,13 +3,8 @@
  */
 import { SVG, Circle } from '@wordpress/primitives';
 
-export const PageControlIcon = ( { isSelected }: { isSelected: boolean } ) => (
+export const PageControlIcon = () => (
 	<SVG width="8" height="8" fill="none" xmlns="http://www.w3.org/2000/svg">
-		<Circle
-			cx="4"
-			cy="4"
-			r="4"
-			fill={ isSelected ? '#419ECD' : '#E1E3E6' }
-		/>
+		<Circle cx="4" cy="4" r="4" />
 	</SVG>
 );

package/src/guide/index.tsx

@@ -9,7 +9,6 @@ import classnames from 'classnames';
 import { useState, useEffect, Children, useRef } from '@wordpress/element';
 import deprecated from '@wordpress/deprecated';
 import { __ } from '@wordpress/i18n';
-import { focus } from '@wordpress/dom';
 
 /**
  * Internal dependencies
@@ -59,9 +58,17 @@ function Guide( {
 	onFinish,
 	pages = [],
 }: GuideProps ) {
-	const guideContainer = useRef< HTMLDivElement >( null );
+	const ref = useRef< HTMLDivElement >( null );
 	const [ currentPage, setCurrentPage ] = useState( 0 );
 
+	useEffect( () => {
+		// Place focus at the top of the guide on mount and when the page changes.
+		const frame = ref.current?.querySelector( '.components-guide' );
+		if ( frame instanceof HTMLElement ) {
+			frame.focus();
+		}
+	}, [ currentPage ] );
+
 	useEffect( () => {
 		if ( Children.count( children ) ) {
 			deprecated( 'Passing children to <Guide>', {
@@ -71,16 +78,6 @@ function Guide( {
 		}
 	}, [ children ] );
 
-	useEffect( () => {
-		// Each time we change the current page, start from the first element of the page.
-		// This also solves any focus loss that can happen.
-		if ( guideContainer.current ) {
-			(
-				focus.tabbable.find( guideContainer.current ) as HTMLElement[]
-			 )[ 0 ]?.focus();
-		}
-	}, [ currentPage ] );
-
 	if ( Children.count( children ) ) {
 		pages =
 			Children.map( children, ( child ) => ( {
@@ -111,6 +108,7 @@ function Guide( {
 		<Modal
 			className={ classnames( 'components-guide', className ) }
 			contentLabel={ contentLabel }
+			isDismissible={ pages.length > 1 }
 			onRequestClose={ onFinish }
 			onKeyDown={ ( event ) => {
 				if ( event.code === 'ArrowLeft' ) {
@@ -123,7 +121,7 @@ function Guide( {
 					event.preventDefault();
 				}
 			} }
-			ref={ guideContainer }
+			ref={ ref }
 		>
 			<div className="components-guide__container">
 				<div className="components-guide__page">
@@ -144,6 +142,7 @@ function Guide( {
 					{ canGoBack && (
 						<Button
 							className="components-guide__back-button"
+							variant="tertiary"
 							onClick={ goBack }
 						>
 							{ __( 'Previous' ) }
@@ -152,6 +151,7 @@ function Guide( {
 					{ canGoForward && (
 						<Button
 							className="components-guide__forward-button"
+							variant="primary"
 							onClick={ goForward }
 						>
 							{ __( 'Next' ) }
@@ -160,6 +160,7 @@ function Guide( {
 					{ ! canGoForward && (
 						<Button
 							className="components-guide__finish-button"
+							variant="primary"
 							onClick={ onFinish }
 						>
 							{ finishButtonText }

package/src/guide/page-control.tsx

@@ -28,11 +28,7 @@ export default function PageControl( {
 				>
 					<Button
 						key={ page }
-						icon={
-							<PageControlIcon
-								isSelected={ page === currentPage }
-							/>
-						}
+						icon={ <PageControlIcon /> }
 						aria-label={ sprintf(
 							/* translators: 1: current page number 2: total number of pages */
 							__( 'Page %1$d of %2$d' ),

package/src/guide/style.scss

@@ -29,7 +29,7 @@
 
 			&:hover {
 				svg {
-					fill: #fff;
+					fill: $white;
 				}
 			}
 		}
@@ -57,7 +57,7 @@
 	&__footer {
 		align-content: center;
 		display: flex;
-		height: 30px;
+		height: $button-size;
 		justify-content: center;
 		margin: 0 0 $grid-unit-30 0;
 		padding: 0 $grid-unit-40;
@@ -78,6 +78,11 @@
 			height: 30px;
 			min-width: 20px;
 			margin: -6px 0;
+			color: $gray-200;
+		}
+
+		li[aria-current="step"] .components-button {
+			color: var(--wp-components-color-accent, var(--wp-admin-theme-color));
 		}
 	}
 }
@@ -85,7 +90,6 @@
 .components-modal__frame.components-guide {
 	border: none;
 	min-width: 312px;
-	height: 80vh;
 	max-height: 575px;
 
 	@media ( max-width: $break-small ) {
@@ -98,34 +102,14 @@
 	&.components-guide__back-button,
 	&.components-guide__forward-button,
 	&.components-guide__finish-button {
-		height: 30px;
 		position: absolute;
 	}
 
-	&.components-guide__back-button,
-	&.components-guide__forward-button {
-		font-size: $default-font-size;
-		padding: 4px 2px;
-
-		&.has-text svg {
-			margin: 0;
-		}
-
-		&:hover {
-			text-decoration: underline;
-		}
-	}
-
 	&.components-guide__back-button {
 		left: $grid-unit-40;
 	}
 
-	&.components-guide__forward-button {
-		right: $grid-unit-40;
-		color: #1386bf;
-		font-weight: bold;
-	}
-
+	&.components-guide__forward-button,
 	&.components-guide__finish-button {
 		right: $grid-unit-40;
 	}

package/src/item-group/item/hook.ts

@@ -42,7 +42,8 @@ export function useItem( props: WordPressComponentProps< ItemProps, 'div' > ) {
 	const classes = useMemo(
 		() =>
 			cx(
-				as === 'button' && styles.unstyledButton,
+				( as === 'button' || as === 'a' ) &&
+					styles.unstyledButton( as ),
 				styles.itemSizes[ size ] || styles.itemSizes.medium,
 				styles.item,
 				spacedAround && styles.spacedAround,