@wordpress/components 25.2.0 → 25.3.0

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/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/styles.ts

@@ -24,7 +24,7 @@ export const unstyledButton = css`
 		color: ${ COLORS.ui.theme };
 	}
 
-	&:focus {
+	&:focus-visible {
 		box-shadow: 0 0 0 var( --wp-admin-border-width-focus )
 			var(
 				--wp-components-color-accent,

package/src/mobile/bottom-sheet/cell.native.js

@@ -431,6 +431,7 @@ class BottomSheetCell extends Component {
 						<Icon
 							icon={ check }
 							fill={ platformStyles.isSelected.color }
+							testID="bottom-sheet-cell-selected-icon"
 						/>
 					) }
 					{ showValue && getValueComponent() }

package/src/modal/style.scss

@@ -72,7 +72,7 @@
 .components-modal__header {
 	box-sizing: border-box;
 	border-bottom: $border-width solid transparent;
-	padding: $grid-unit-30 $grid-unit-40 $grid-unit-15;
+	padding: $grid-unit-30 $grid-unit-40 $grid-unit-10;
 	display: flex;
 	flex-direction: row;
 	justify-content: space-between;
@@ -130,7 +130,8 @@
 .components-modal__content {
 	flex: 1;
 	margin-top: $header-height + $grid-unit-15;
-	padding: 0 $grid-unit-40 $grid-unit-40;
+	// Small top padding required to avoid cutting off the visible outline when the first child element is focusable.
+	padding: $grid-unit-05 $grid-unit-40 $grid-unit-40;
 	overflow: auto;
 
 	&.hide-header {

package/src/number-control/index.tsx

@@ -16,7 +16,7 @@ import deprecated from '@wordpress/deprecated';
 /**
  * Internal dependencies
  */
-import { Input, SpinButton } from './styles/number-control-styles';
+import { Input, SpinButton, styles } from './styles/number-control-styles';
 import * as inputControlActionTypes from '../input-control/reducer/actions';
 import { add, subtract, roundClamp } from '../utils/math';
 import { ensureNumber, isValueEmpty } from '../utils/values';
@@ -24,6 +24,7 @@ import type { WordPressComponentProps } from '../ui/context/wordpress-component'
 import type { NumberControlProps } from './types';
 import { HStack } from '../h-stack';
 import { Spacer } from '../spacer';
+import { useCx } from '../utils';
 
 const noop = () => {};
 
@@ -59,7 +60,6 @@ function UnforwardedNumberControl(
 		} );
 		spinControls = 'none';
 	}
-
 	const inputRef = useRef< HTMLInputElement >();
 	const mergedRef = useMergeRefs( [ inputRef, forwardedRef ] );
 
@@ -78,6 +78,8 @@ function UnforwardedNumberControl(
 
 	const autoComplete = typeProp === 'number' ? 'off' : undefined;
 	const classes = classNames( 'components-number-control', className );
+	const cx = useCx();
+	const spinButtonClasses = cx( size === 'small' && styles.smallSpinButtons );
 
 	const spinValue = (
 		value: string | number | undefined,
@@ -236,6 +238,7 @@ function UnforwardedNumberControl(
 						<Spacer marginBottom={ 0 } marginRight={ 2 }>
 							<HStack spacing={ 1 }>
 								<SpinButton
+									className={ spinButtonClasses }
 									icon={ plusIcon }
 									isSmall
 									aria-hidden="true"
@@ -244,9 +247,9 @@ function UnforwardedNumberControl(
 									onClick={ buildSpinButtonClickHandler(
 										'up'
 									) }
-									size={ size }
 								/>
 								<SpinButton
+									className={ spinButtonClasses }
 									icon={ resetIcon }
 									isSmall
 									aria-hidden="true"
@@ -255,7 +258,6 @@ function UnforwardedNumberControl(
 									onClick={ buildSpinButtonClickHandler(
 										'down'
 									) }
-									size={ size }
 								/>
 							</HStack>
 						</Spacer>

package/src/number-control/styles/number-control-styles.ts

@@ -11,7 +11,6 @@ import InputControl from '../../input-control';
 import { COLORS } from '../../utils';
 import Button from '../../button';
 import { space } from '../../ui/utils/space';
-import type { NumberControlProps } from '../types';
 
 const htmlArrowStyles = ( { hideHTMLArrows }: { hideHTMLArrows: boolean } ) => {
 	if ( ! hideHTMLArrows ) {
@@ -35,23 +34,16 @@ export const Input = styled( InputControl )`
 	${ htmlArrowStyles };
 `;
 
-const spinButtonSizeStyles = ( {
-	size,
-}: Pick< NumberControlProps, 'size' > ) => {
-	if ( size !== 'small' ) {
-		return ``;
-	}
-
-	return css`
-		width: ${ space( 5 ) };
-		min-width: ${ space( 5 ) };
-		height: ${ space( 5 ) };
-	`;
-};
-
 export const SpinButton = styled( Button )`
 	&&&&& {
 		color: ${ COLORS.ui.theme };
-		${ spinButtonSizeStyles }
 	}
 `;
+
+const smallSpinButtons = css`
+	width: ${ space( 5 ) };
+	min-width: ${ space( 5 ) };
+	height: ${ space( 5 ) };
+`;
+
+export const styles = { smallSpinButtons };

package/src/range-control/index.tsx

@@ -37,6 +37,7 @@ import {
 
 import type { RangeControlProps } from './types';
 import type { WordPressComponentProps } from '../ui/context';
+import { space } from '../ui/utils/space';
 
 const noop = () => {};
 
@@ -69,6 +70,7 @@ function UnforwardedRangeControl(
 		railColor,
 		renderTooltipContent = ( v ) => v,
 		resetFallbackValue,
+		__next40pxDefaultSize = false,
 		shiftStep = 10,
 		showTooltip: showTooltipProp,
 		step = 1,
@@ -208,7 +210,6 @@ function UnforwardedRangeControl(
 	const offsetStyle = {
 		[ isRTL() ? 'right' : 'left' ]: fillValueOffset,
 	};
-
 	return (
 		<BaseControl
 			__nextHasNoMarginBottom={ __nextHasNoMarginBottom }
@@ -218,7 +219,10 @@ function UnforwardedRangeControl(
 			id={ `${ id }` }
 			help={ help }
 		>
-			<Root className="components-range-control__root">
+			<Root
+				className="components-range-control__root"
+				__next40pxDefaultSize={ __next40pxDefaultSize }
+			>
 				{ beforeIcon && (
 					<BeforeIconWrapper>
 						<Icon icon={ beforeIcon } />
@@ -305,6 +309,14 @@ function UnforwardedRangeControl(
 						onBlur={ handleOnInputNumberBlur }
 						onChange={ handleOnChange }
 						shiftStep={ shiftStep }
+						size={
+							__next40pxDefaultSize
+								? '__unstable-large'
+								: 'default'
+						}
+						__unstableInputWidth={
+							__next40pxDefaultSize ? space( 20 ) : space( 16 )
+						}
 						step={ step }
 						// @ts-expect-error TODO: Investigate if the `null` value is necessary
 						value={ inputSliderValue }

package/src/range-control/input-range.tsx

@@ -16,7 +16,6 @@ function InputRange(
 	ref: React.ForwardedRef< HTMLInputElement >
 ) {
 	const { describedBy, label, value, ...otherProps } = props;
-
 	return (
 		<BaseInputRange
 			{ ...otherProps }

package/src/range-control/styles/range-control-styles.ts

@@ -18,6 +18,7 @@ import type {
 	TooltipProps,
 	TrackProps,
 	WrapperProps,
+	RangeControlProps,
 } from '../types';
 
 const rangeHeightValue = 30;
@@ -26,15 +27,24 @@ const rangeHeight = () =>
 	css( { height: rangeHeightValue, minHeight: rangeHeightValue } );
 const thumbSize = 12;
 
-export const Root = styled.div`
+const deprecatedHeight = ( {
+	__next40pxDefaultSize,
+}: Pick< RangeControlProps, '__next40pxDefaultSize' > ) =>
+	! __next40pxDefaultSize && css( { minHeight: rangeHeightValue } );
+
+type RootProps = Pick< RangeControlProps, '__next40pxDefaultSize' >;
+export const Root = styled.div< RootProps >`
 	-webkit-tap-highlight-color: transparent;
-	align-items: flex-start;
+	align-items: center;
 	display: flex;
 	justify-content: flex-start;
 	padding: 0;
 	position: relative;
 	touch-action: none;
 	width: 100%;
+	min-height: 40px;
+	/* TODO: remove after removing the __next40pxDefaultSize prop */
+	${ deprecatedHeight };
 `;
 
 const wrapperColor = ( { color = COLORS.ui.borderFocus }: WrapperProps ) =>
@@ -296,7 +306,6 @@ export const InputNumber = styled( NumberControl )`
 	display: inline-block;
 	font-size: 13px;
 	margin-top: 0;
-	width: ${ space( 16 ) } !important;
 
 	input[type='number']& {
 		${ rangeHeight };

package/src/range-control/types.ts

@@ -203,6 +203,12 @@ export type RangeControlProps = Pick<
 		 * @default 10
 		 */
 		shiftStep?: number;
+		/**
+		 * Start opting into the larger default height that will become the default size in a future version.
+		 *
+		 * @default false
+		 */
+		__next40pxDefaultSize?: boolean;
 		/**
 		 * Forcing the Tooltip UI to show or hide. This is overridden to `false`
 		 * when `step` is set to the special string value `any`.

package/src/select-control/index.tsx

@@ -135,6 +135,7 @@ function UnforwardedSelectControl(
 									key={ key }
 									value={ option.value }
 									disabled={ option.disabled }
+									hidden={ option.hidden }
 								>
 									{ option.label }
 								</option>

package/src/select-control/types.ts

@@ -40,6 +40,12 @@ type SelectControlBaseProps = Pick<
 			 * @default false
 			 */
 			disabled?: boolean;
+			/**
+			 * Whether or not the option should be hidden.
+			 *
+			 * @default false
+			 */
+			hidden?: boolean;
 		}[];
 		/**
 		 * As an alternative to the `options` prop, `optgroup`s and `options` can be

package/src/unit-control/index.tsx

@@ -24,6 +24,7 @@ import {
 	getValidParsedQuantityAndUnit,
 } from './utils';
 import { useControlledState } from '../utils/hooks';
+import { escapeRegExp } from '../utils/strings';
 import type { UnitControlProps, UnitControlOnChangeCallback } from './types';
 
 function UnforwardedUnitControl(
@@ -76,9 +77,9 @@ function UnforwardedUnitControl(
 		);
 		const [ { value: firstUnitValue = '' } = {}, ...rest ] = list;
 		const firstCharacters = rest.reduce( ( carry, { value } ) => {
-			const first = value?.substring( 0, 1 ) || '';
+			const first = escapeRegExp( value?.substring( 0, 1 ) || '' );
 			return carry.includes( first ) ? carry : `${ carry }|${ first }`;
-		}, firstUnitValue.substring( 0, 1 ) );
+		}, escapeRegExp( firstUnitValue.substring( 0, 1 ) ) );
 		return [ list, new RegExp( `^(?:${ firstCharacters })$`, 'i' ) ];
 	}, [ nonNullValueProp, unitProp, unitsProp ] );
 	const [ parsedQuantity, parsedUnit ] = getParsedQuantityAndUnit(

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

@@ -373,18 +373,21 @@ describe( 'UnitControl', () => {
 			const units = [
 				{ value: 'pt', label: 'pt', default: 0 },
 				{ value: 'vmax', label: 'vmax', default: 10 },
+				// Proves that units with regex control characters don't error.
+				{ value: '+', label: '+', default: 10 },
 			];
 
 			render( <UnitControl units={ units } /> );
 
 			const options = getSelectOptions();
 
-			expect( options.length ).toBe( 2 );
+			expect( options.length ).toBe( 3 );
 
-			const [ pt, vmax ] = options;
+			const [ pt, vmax, plus ] = options;
 
 			expect( pt.value ).toBe( 'pt' );
 			expect( vmax.value ).toBe( 'vmax' );
+			expect( plus.value ).toBe( '+' );
 		} );
 
 		it( 'should reset value on unit change, if unit has default value', async () => {

package/src/z-stack/component.tsx

@@ -35,13 +35,14 @@ function UnconnectedZStack(
 
 	const clonedChildren = validChildren.map( ( child, index ) => {
 		const zIndex = isReversed ? childrenLastIndex - index : index;
-		const offsetAmount = offset * index;
+		// Only when the component is layered, the offset needs to be multiplied by
+		// the item's index, so that items can correctly stack at the right distance
+		const offsetAmount = isLayered ? offset * index : offset;
 
 		const key = isValidElement( child ) ? child.key : index;
 
 		return (
 			<ZStackChildView
-				isLayered={ isLayered }
 				offsetAmount={ offsetAmount }
 				zIndex={ zIndex }
 				key={ key }
@@ -55,6 +56,7 @@ function UnconnectedZStack(
 		<ZStackView
 			{ ...otherProps }
 			className={ className }
+			isLayered={ isLayered }
 			ref={ forwardedRef }
 		>
 			{ clonedChildren }