@wordpress/components 25.2.0 → 25.4.0

package/src/item-group/stories/index.tsx

@@ -39,20 +39,25 @@ Default.args = {
 	children: (
 		[
 			{
-				children: 'First item',
+				children: 'First button item',
 				// eslint-disable-next-line no-alert
 				onClick: () => alert( 'First item clicked' ),
 			},
 			{
-				children: 'Second item',
+				children: 'Second button item',
 				// eslint-disable-next-line no-alert
 				onClick: () => alert( 'Second item clicked' ),
 			},
 			{
-				children: 'Third item',
+				children: 'Third button item',
 				// eslint-disable-next-line no-alert
 				onClick: () => alert( 'Third item clicked' ),
 			},
+			{
+				children: 'Anchor item',
+				as: 'a',
+				href: 'https://wordpress.org',
+			},
 		] as ItemProps[]
 	 ).map( mapPropsToItem ),
 };

package/src/item-group/styles.ts

@@ -6,34 +6,45 @@ import { css } from '@emotion/react';
 /**
  * Internal dependencies
  */
-import { CONFIG, COLORS } from '../utils';
-
-export const unstyledButton = css`
-	appearance: none;
-	border: 1px solid transparent;
-	cursor: pointer;
-	background: none;
-	text-align: start;
-
-	svg,
-	path {
-		fill: currentColor;
-	}
-
-	&:hover {
-		color: ${ COLORS.ui.theme };
-	}
-
-	&:focus {
-		box-shadow: 0 0 0 var( --wp-admin-border-width-focus )
-			var(
-				--wp-components-color-accent,
-				var( --wp-admin-theme-color, ${ COLORS.ui.theme } )
-			);
-		// Windows high contrast mode.
-		outline: 2px solid transparent;
-	}
-`;
+import { CONFIG, COLORS, font } from '../utils';
+
+export const unstyledButton = ( as: 'a' | 'button' ) => {
+	return css`
+		font-size: ${ font( 'default.fontSize' ) };
+		font-family: inherit;
+		appearance: none;
+		border: 1px solid transparent;
+		cursor: pointer;
+		background: none;
+		text-align: start;
+		text-decoration: ${ as === 'a' ? 'none' : undefined };
+
+		svg,
+		path {
+			fill: currentColor;
+		}
+
+		&:hover {
+			color: ${ COLORS.ui.theme };
+		}
+
+		&:focus {
+			box-shadow: none;
+			outline: none;
+		}
+
+		&:focus-visible {
+			box-shadow: 0 0 0 var( --wp-admin-border-width-focus )
+				var(
+					--wp-components-color-accent,
+					var( --wp-admin-theme-color, ${ COLORS.ui.theme } )
+				);
+			// Windows high contrast mode.
+			outline: 2px solid transparent;
+			outline-offset: 0;
+		}
+	`;
+};
 
 export const itemWrapper = css`
 	width: 100%;

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/mobile/image/index.native.js

@@ -185,6 +185,13 @@ const ImageComponent = ( {
 		imageHeight && { height: imageHeight },
 		shapeStyle,
 	];
+	const imageSelectedStyles = [
+		usePreferredColorSchemeStyle(
+			styles.imageBorder,
+			styles.imageBorderDark
+		),
+		{ height: containerSize?.height },
+	];
 
 	return (
 		<View
@@ -210,12 +217,7 @@ const ImageComponent = ( {
 				{ isSelected &&
 					highlightSelected &&
 					! ( isUploadInProgress || isUploadFailed ) && (
-						<View
-							style={ [
-								styles.imageBorder,
-								{ height: containerSize?.height },
-							] }
-						/>
+						<View style={ imageSelectedStyles } />
 					) }
 
 				{ ! imageData ? (

package/src/mobile/image/style.native.scss

@@ -7,7 +7,7 @@
 }
 
 .imageBorder {
-	border-color: $blue-medium;
+	border-color: $blue-40;
 	border-width: 2px;
 	border-style: solid;
 	position: absolute;
@@ -16,6 +16,10 @@
 	height: 100%;
 }
 
+.imageBorderDark {
+	border-color: $blue-50;
+}
+
 .retryIcon {
 	width: 80px;
 	height: 80px;

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/navigator/navigator-provider/component.tsx

@@ -148,6 +148,7 @@ function UnconnectedNavigatorProvider(
 				focusTargetSelector,
 				isBack = false,
 				skipFocus = false,
+				replace = false,
 				...restOptions
 			} = options;
 
@@ -172,34 +173,38 @@ function UnconnectedNavigatorProvider(
 					skipFocus,
 				};
 
-				if ( prevLocationHistory.length < 1 ) {
-					return [ newLocation ];
+				if ( prevLocationHistory.length === 0 ) {
+					return replace ? [] : [ newLocation ];
 				}
 
-				return [
-					...prevLocationHistory.slice(
-						prevLocationHistory.length > MAX_HISTORY_LENGTH - 1
-							? 1
-							: 0,
-						-1
-					),
-					// Assign `focusTargetSelector` to the previous location in history
-					// (the one we just navigated from).
-					{
-						...prevLocationHistory[
-							prevLocationHistory.length - 1
-						],
-						focusTargetSelector,
-					},
-					newLocation,
-				];
+				const newLocationHistory = prevLocationHistory.slice(
+					prevLocationHistory.length > MAX_HISTORY_LENGTH - 1 ? 1 : 0,
+					-1
+				);
+
+				if ( ! replace ) {
+					newLocationHistory.push(
+						// Assign `focusTargetSelector` to the previous location in history
+						// (the one we just navigated from).
+						{
+							...prevLocationHistory[
+								prevLocationHistory.length - 1
+							],
+							focusTargetSelector,
+						}
+					);
+				}
+
+				newLocationHistory.push( newLocation );
+
+				return newLocationHistory;
 			} );
 		},
 		[ goBack ]
 	);
 
-	const goToParent: NavigatorContextType[ 'goToParent' ] =
-		useCallback( () => {
+	const goToParent: NavigatorContextType[ 'goToParent' ] = useCallback(
+		( options = {} ) => {
 			const currentPath =
 				currentLocationHistory.current[
 					currentLocationHistory.current.length - 1
@@ -214,8 +219,10 @@ function UnconnectedNavigatorProvider(
 			if ( parentPath === undefined ) {
 				return;
 			}
-			goTo( parentPath, { isBack: true } );
-		}, [ goTo ] );
+			goTo( parentPath, { ...options, isBack: true } );
+		},
+		[ goTo ]
+	);
 
 	const navigatorContextValue: NavigatorContextType = useMemo(
 		() => ( {

package/src/navigator/types.ts

@@ -14,8 +14,11 @@ export type NavigateOptions = {
 	focusTargetSelector?: string;
 	isBack?: boolean;
 	skipFocus?: boolean;
+	replace?: boolean;
 };
 
+export type NavigateToParentOptions = Omit< NavigateOptions, 'isBack' >;
+
 export type NavigatorLocation = NavigateOptions & {
 	isInitial?: boolean;
 	path?: string;
@@ -28,7 +31,7 @@ export type Navigator = {
 	params: MatchParams;
 	goTo: ( path: string, options?: NavigateOptions ) => void;
 	goBack: () => void;
-	goToParent: () => void;
+	goToParent: ( options?: NavigateToParentOptions ) => void;
 };
 
 export type NavigatorContext = Navigator & {

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/placeholder/style.scss

@@ -161,6 +161,11 @@
 			padding: 0 $grid-unit-10 2px;
 		}
 	}
+	.components-placeholder__learn-more {
+		.components-external-link {
+			color: var(--wp-admin-theme-color);
+		}
+	}
 }
 
 

package/src/query-controls/index.native.js

@@ -84,6 +84,7 @@ const QueryControls = memo(
 				) }
 				{ onNumberOfItemsChange && (
 					<RangeControl
+						__next40pxDefaultSize
 						label={ __( 'Number of items' ) }
 						value={ numberOfItems }
 						onChange={ onNumberOfItemsChange }

package/src/query-controls/index.tsx

@@ -177,6 +177,7 @@ export function QueryControls( {
 				onNumberOfItemsChange && (
 					<RangeControl
 						__nextHasNoMarginBottom
+						__next40pxDefaultSize
 						key="query-controls-range-control"
 						label={ __( 'Number of items' ) }
 						value={ numberOfItems }

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/text-control/index.tsx

@@ -26,13 +26,13 @@ function UnforwardedTextControl(
 		hideLabelFromVision,
 		value,
 		help,
+		id: idProp,
 		className,
 		onChange,
 		type = 'text',
 		...additionalProps
 	} = props;
-	const instanceId = useInstanceId( TextControl );
-	const id = `inspector-text-control-${ instanceId }`;
+	const id = useInstanceId( TextControl, 'inspector-text-control', idProp );
 	const onChangeValue = ( event: ChangeEvent< HTMLInputElement > ) =>
 		onChange( event.target.value );
 

package/src/text-control/test/text-control.tsx

@@ -0,0 +1,61 @@
+/**
+ * External dependencies
+ */
+import { render, screen } from '@testing-library/react';
+
+/**
+ * Internal dependencies
+ */
+import TextControl from '..';
+
+const noop = () => {};
+
+describe( 'TextControl', () => {
+	describe( 'When no ID prop is provided', () => {
+		it( 'should generate an ID', () => {
+			render( <TextControl onChange={ noop } value="" /> );
+
+			expect( screen.getByRole( 'textbox' ) ).toHaveAttribute(
+				'id',
+				expect.stringMatching( /^inspector-text-control-/ )
+			);
+		} );
+
+		it( 'should be labelled correctly', () => {
+			const labelValue = 'Test Label';
+			render(
+				<TextControl label={ labelValue } onChange={ noop } value="" />
+			);
+
+			expect(
+				screen.getByRole( 'textbox', { name: labelValue } )
+			).toBeVisible();
+		} );
+	} );
+
+	describe( 'When an ID prop is provided', () => {
+		const id = 'test-id';
+
+		it( 'should use the passed ID prop if provided', () => {
+			render( <TextControl id={ id } onChange={ noop } value="" /> );
+
+			expect( screen.getByRole( 'textbox' ) ).toHaveAttribute( 'id', id );
+		} );
+
+		it( 'should be labelled correctly', () => {
+			const labelValue = 'Test Label';
+			render(
+				<TextControl
+					label={ labelValue }
+					id={ id }
+					onChange={ noop }
+					value=""
+				/>
+			);
+
+			expect(
+				screen.getByRole( 'textbox', { name: labelValue } )
+			).toBeVisible();
+		} );
+	} );
+} );

package/src/toolbar/toolbar-group/style.native.scss

@@ -1,11 +1,10 @@
 .container {
 	flex-direction: row;
-	border-left-width: 1px;
-	border-color: #e9eff3;
+	border-color: $light-quaternary;
 	padding-left: 5px;
 	padding-right: 5px;
 }
 
 .containerDark {
-	border-color: #525354;
+	border-color: $dark-quaternary;
 }