@wordpress/components 22.0.0 → 23.0.0

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

@@ -1,12 +1,7 @@
 /**
  * Internal dependencies
  */
-import {
-	FocalPointWrapper,
-	PointerIconPathFill,
-	PointerIconPathOutline,
-	PointerIconSVG,
-} from './styles/focal-point-style';
+import { PointerCircle } from './styles/focal-point-style';
 
 /**
  * External dependencies
@@ -26,22 +21,5 @@ export default function FocalPoint( {
 
 	const style = { left, top };
 
-	return (
-		<FocalPointWrapper { ...props } className={ classes } style={ style }>
-			<PointerIconSVG
-				className="components-focal-point-picker__icon"
-				xmlns="http://www.w3.org/2000/svg"
-				viewBox="0 0 30 30"
-			>
-				<PointerIconPathOutline
-					className="components-focal-point-picker__icon-outline"
-					d="M15 1C7.3 1 1 7.3 1 15s6.3 14 14 14 14-6.3 14-14S22.7 1 15 1zm0 22c-4.4 0-8-3.6-8-8s3.6-8 8-8 8 3.6 8 8-3.6 8-8 8z"
-				/>
-				<PointerIconPathFill
-					className="components-focal-point-picker__icon-fill"
-					d="M15 3C8.4 3 3 8.4 3 15s5.4 12 12 12 12-5.4 12-12S21.6 3 15 3zm0 22C9.5 25 5 20.5 5 15S9.5 5 15 5s10 4.5 10 10-4.5 10-10 10z"
-				/>
-			</PointerIconSVG>
-		</FocalPointWrapper>
-	);
+	return <PointerCircle { ...props } className={ classes } style={ style } />;
 }

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

@@ -3,45 +3,21 @@
  */
 import styled from '@emotion/styled';
 
-/**
- * WordPress dependencies
- */
-import { Path, SVG } from '@wordpress/primitives';
-
-/**
- * Internal dependencies
- */
-import { COLORS } from '../../utils';
-
-export const FocalPointWrapper = styled.div`
+export const PointerCircle = styled.div`
 	background-color: transparent;
 	cursor: grab;
-	height: 30px;
-	margin: -15px 0 0 -15px;
-	opacity: 0.8;
+	height: 48px;
+	margin: -24px 0 0 -24px;
 	position: absolute;
 	user-select: none;
-	width: 30px;
+	width: 48px;
 	will-change: transform;
 	z-index: 10000;
+	background: rgba( 255, 255, 255, 0.6 );
+	border-radius: 50%;
+	backdrop-filter: blur( 4px );
+	box-shadow: rgb( 0 0 0 / 20% ) 0px 0px 10px;
 
 	${ ( { isDragging }: { isDragging: boolean } ) =>
 		isDragging && 'cursor: grabbing;' }
 `;
-
-export const PointerIconSVG = styled( SVG )`
-	display: block;
-	height: 100%;
-	left: 0;
-	position: absolute;
-	top: 0;
-	width: 100%;
-`;
-
-export const PointerIconPathOutline = styled( Path )`
-	fill: white;
-`;
-
-export const PointerIconPathFill = styled( Path )`
-	fill: ${ COLORS.ui.theme };
-`;

package/src/focal-point-picker/test/media.js

@@ -1,58 +1,63 @@
 /**
  * External dependencies
  */
-import { render } from '@testing-library/react';
+import { render, screen } from '@testing-library/react';
 
 /**
  * Internal dependencies
  */
 import Media from '../media';
 
-const getMedia = ( container ) =>
-	container.querySelector( '.components-focal-point-picker__media' );
-
 describe( 'FocalPointPicker/Media', () => {
 	describe( 'Basic rendering', () => {
 		it( 'should render', () => {
-			const { container } = render( <Media /> );
-			const el = getMedia( container );
+			render( <Media data-testid="media" /> );
 
-			expect( el ).toBeTruthy();
+			expect( screen.getByTestId( 'media' ) ).toBeVisible();
 		} );
 	} );
 
 	describe( 'Media types', () => {
 		it( 'should render a placeholder by default', () => {
-			const { container } = render( <Media /> );
-			const el = getMedia( container );
+			render( <Media data-testid="media" /> );
 
-			expect( el.outerHTML ).toContain( 'placeholder' );
+			expect( screen.getByTestId( 'media' ) ).toHaveClass(
+				'components-focal-point-picker__media--placeholder'
+			);
 		} );
 
 		it( 'should render an video if src is a video file', () => {
-			const { container, rerender } = render(
-				<Media src="file.mp4" muted={ false } />
+			const { rerender } = render(
+				<Media src="file.mp4" muted={ false } data-testid="media" />
 			);
 
-			expect( getMedia( container ).tagName ).toBe( 'VIDEO' );
+			expect( screen.getByTestId( 'media' ).tagName ).toBe( 'VIDEO' );
 
-			rerender( <Media src="file.ogg" muted={ false } /> );
+			rerender(
+				<Media src="file.ogg" muted={ false } data-testid="media" />
+			);
 
-			expect( getMedia( container ).tagName ).toBe( 'VIDEO' );
+			expect( screen.getByTestId( 'media' ).tagName ).toBe( 'VIDEO' );
 
-			rerender( <Media src="file.webm" muted={ false } /> );
+			rerender(
+				<Media src="file.webm" muted={ false } data-testid="media" />
+			);
 
-			expect( getMedia( container ).tagName ).toBe( 'VIDEO' );
+			expect( screen.getByTestId( 'media' ).tagName ).toBe( 'VIDEO' );
 		} );
 
 		it( 'should render an image file, if not video', () => {
-			const { container, rerender } = render( <Media src="file.gif" /> );
+			const { rerender } = render(
+				<Media src="file.gif" data-testid="media" />
+			);
 
-			expect( getMedia( container ).tagName ).toBe( 'IMG' );
+			expect( screen.getByTestId( 'media' ).tagName ).toBe( 'IMG' );
 
-			rerender( <Media src="file.png" muted={ false } /> );
+			rerender(
+				<Media src="file.png" muted={ false } data-testid="media" />
+			);
 
-			expect( getMedia( container ).tagName ).toBe( 'IMG' );
+			expect( screen.getByTestId( 'media' ).tagName ).toBe( 'IMG' );
 		} );
 	} );
 } );

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

@@ -0,0 +1,37 @@
+/**
+ * WordPress dependencies
+ */
+import { __ } from '@wordpress/i18n';
+
+/**
+ * List of T-shirt abbreviations.
+ *
+ * When there are 5 font sizes or fewer, we assume that the font sizes are
+ * ordered by size and show T-shirt labels.
+ */
+export const T_SHIRT_ABBREVIATIONS = [
+	/* translators: S stands for 'small' and is a size label. */
+	__( 'S' ),
+	/* translators: M stands for 'medium' and is a size label. */
+	__( 'M' ),
+	/* translators: L stands for 'large' and is a size label. */
+	__( 'L' ),
+	/* translators: XL stands for 'extra large' and is a size label. */
+	__( 'XL' ),
+	/* translators: XXL stands for 'extra extra large' and is a size label. */
+	__( 'XXL' ),
+];
+
+/**
+ * List of T-shirt names.
+ *
+ * When there are 5 font sizes or fewer, we assume that the font sizes are
+ * ordered by size and show T-shirt labels.
+ */
+export const T_SHIRT_NAMES = [
+	__( 'Small' ),
+	__( 'Medium' ),
+	__( 'Large' ),
+	__( 'Extra Large' ),
+	__( 'Extra Extra Large' ),
+];

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

@@ -0,0 +1,98 @@
+/**
+ * WordPress dependencies
+ */
+import { __, sprintf } from '@wordpress/i18n';
+
+/**
+ * Internal dependencies
+ */
+import CustomSelectControl from '../custom-select-control';
+import { parseQuantityAndUnitFromRawValue } from '../unit-control';
+import type {
+	FontSizePickerSelectProps,
+	FontSizePickerSelectOption,
+} from './types';
+import { getCommonSizeUnit, isSimpleCssValue } from './utils';
+
+const DEFAULT_OPTION: FontSizePickerSelectOption = {
+	key: 'default',
+	name: __( 'Default' ),
+	value: undefined,
+};
+
+const CUSTOM_OPTION: FontSizePickerSelectOption = {
+	key: 'custom',
+	name: __( 'Custom' ),
+};
+
+const FontSizePickerSelect = ( props: FontSizePickerSelectProps ) => {
+	const {
+		fontSizes,
+		value,
+		disableCustomFontSizes,
+		size,
+		onChange,
+		onSelectCustom,
+	} = props;
+
+	const areAllSizesSameUnit = !! getCommonSizeUnit( fontSizes );
+
+	const options: FontSizePickerSelectOption[] = [
+		DEFAULT_OPTION,
+		...fontSizes.map( ( fontSize ) => {
+			let hint;
+			if ( areAllSizesSameUnit ) {
+				const [ quantity ] = parseQuantityAndUnitFromRawValue(
+					fontSize.size
+				);
+				if ( quantity !== undefined ) {
+					hint = String( quantity );
+				}
+			} else if ( isSimpleCssValue( fontSize.size ) ) {
+				hint = String( fontSize.size );
+			}
+			return {
+				key: fontSize.slug,
+				name: fontSize.name || fontSize.slug,
+				value: fontSize.size,
+				__experimentalHint: hint,
+			};
+		} ),
+		...( disableCustomFontSizes ? [] : [ CUSTOM_OPTION ] ),
+	];
+
+	const selectedOption = value
+		? options.find( ( option ) => option.value === value ) ?? CUSTOM_OPTION
+		: DEFAULT_OPTION;
+
+	return (
+		<CustomSelectControl
+			__nextUnconstrainedWidth
+			className="components-font-size-picker__select"
+			label={ __( 'Font size' ) }
+			hideLabelFromVision
+			describedBy={ sprintf(
+				// translators: %s: Currently selected font size.
+				__( 'Currently selected font size: %s' ),
+				selectedOption.name
+			) }
+			options={ options }
+			value={ selectedOption }
+			__experimentalShowSelectedHint
+			onChange={ ( {
+				selectedItem,
+			}: {
+				selectedItem: FontSizePickerSelectOption;
+			} ) => {
+				if ( selectedItem === CUSTOM_OPTION ) {
+					onSelectCustom();
+				} else {
+					onChange( selectedItem.value );
+				}
+			} }
+			size={ size }
+		/>
+	);
+};
+
+export default FontSizePickerSelect;

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

@@ -0,0 +1,41 @@
+/**
+ * WordPress dependencies
+ */
+import { __ } from '@wordpress/i18n';
+
+/**
+ * Internal dependencies
+ */
+import {
+	ToggleGroupControl,
+	ToggleGroupControlOption,
+} from '../toggle-group-control';
+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;
+	return (
+		<ToggleGroupControl
+			__nextHasNoMarginBottom={ __nextHasNoMarginBottom }
+			label={ __( 'Font size' ) }
+			hideLabelFromVision
+			value={ value }
+			onChange={ onChange }
+			isBlock
+			size={ size }
+		>
+			{ fontSizes.map( ( fontSize, index ) => (
+				<ToggleGroupControlOption
+					key={ fontSize.slug }
+					value={ fontSize.size }
+					label={ T_SHIRT_ABBREVIATIONS[ index ] }
+					aria-label={ fontSize.name || T_SHIRT_NAMES[ index ] }
+					showTooltip
+				/>
+			) ) }
+		</ToggleGroupControl>
+	);
+};
+
+export default FontSizePickerToggleGroup;

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

@@ -7,7 +7,7 @@ import type { ForwardedRef } from 'react';
  * WordPress dependencies
  */
 import deprecated from '@wordpress/deprecated';
-import { __, sprintf } from '@wordpress/i18n';
+import { __ } from '@wordpress/i18n';
 import { settings } from '@wordpress/icons';
 import { useState, useMemo, forwardRef } from '@wordpress/element';
 
@@ -22,24 +22,10 @@ import {
 	parseQuantityAndUnitFromRawValue,
 	useCustomUnits,
 } from '../unit-control';
-import CustomSelectControl from '../custom-select-control';
 import { VisuallyHidden } from '../visually-hidden';
-import {
-	ToggleGroupControl,
-	ToggleGroupControlOption,
-} from '../toggle-group-control';
-import {
-	getFontSizeOptions,
-	getSelectedOption,
-	isSimpleCssValue,
-	CUSTOM_FONT_SIZE,
-} from './utils';
+import { getCommonSizeUnit } from './utils';
 import { HStack } from '../h-stack';
-import type {
-	FontSizePickerProps,
-	FontSizeSelectOption,
-	FontSizeToggleGroupOption,
-} from './types';
+import type { FontSizePickerProps } from './types';
 import {
 	Container,
 	HeaderHint,
@@ -48,6 +34,9 @@ import {
 	ResetButton,
 } from './styles';
 import { Spacer } from '../spacer';
+import FontSizePickerSelect from './font-size-picker-select';
+import FontSizePickerToggleGroup from './font-size-picker-toggle-group';
+import { T_SHIRT_NAMES } from './constants';
 
 const UnforwardedFontSizePicker = (
 	props: FontSizePickerProps,
@@ -65,6 +54,7 @@ const UnforwardedFontSizePicker = (
 		withSlider = false,
 		withReset = true,
 	} = props;
+
 	if ( ! __nextHasNoMarginBottom ) {
 		deprecated( 'Bottom margin styles for wp.components.FontSizePicker', {
 			since: '6.1',
@@ -77,85 +67,48 @@ const UnforwardedFontSizePicker = (
 		availableUnits: [ 'px', 'em', 'rem' ],
 	} );
 
-	/**
-	 * The main font size UI displays a toggle group when the presets are less
-	 * than six and a select control when they are more.
-	 */
-	const fontSizesContainComplexValues = fontSizes.some(
-		( { size: sizeArg } ) => ! isSimpleCssValue( sizeArg )
-	);
 	const shouldUseSelectControl = fontSizes.length > 5;
-	const options = useMemo(
-		() =>
-			getFontSizeOptions(
-				shouldUseSelectControl,
-				fontSizes,
-				disableCustomFontSizes
-			),
-		[ shouldUseSelectControl, fontSizes, disableCustomFontSizes ]
+	const selectedFontSize = fontSizes.find(
+		( fontSize ) => fontSize.size === value
 	);
-	const selectedOption = getSelectedOption( fontSizes, value );
-	const isCustomValue = selectedOption.slug === CUSTOM_FONT_SIZE;
+	const isCustomValue = !! value && ! selectedFontSize;
+
 	const [ showCustomValueControl, setShowCustomValueControl ] = useState(
 		! disableCustomFontSizes && isCustomValue
 	);
+
 	const headerHint = useMemo( () => {
 		if ( showCustomValueControl ) {
-			return `(${ __( 'Custom' ) })`;
+			return __( 'Custom' );
 		}
 
-		// If we have a custom value that is not available in the font sizes,
-		// show it as a hint as long as it's a simple CSS value.
-		if ( isCustomValue ) {
-			return (
-				value !== undefined &&
-				isSimpleCssValue( value ) &&
-				`(${ value })`
-			);
-		}
-		if ( shouldUseSelectControl ) {
-			return (
-				selectedOption?.size !== undefined &&
-				isSimpleCssValue( selectedOption?.size ) &&
-				`(${ selectedOption?.size })`
-			);
+		if ( ! shouldUseSelectControl ) {
+			if ( selectedFontSize ) {
+				return (
+					selectedFontSize.name ||
+					T_SHIRT_NAMES[ fontSizes.indexOf( selectedFontSize ) ]
+				);
+			}
+			return '';
 		}
 
-		// Calculate the `hint` for toggle group control.
-		let hint = selectedOption?.name || selectedOption.slug;
-		if (
-			! fontSizesContainComplexValues &&
-			typeof selectedOption.size === 'string'
-		) {
-			const [ , unit ] = parseQuantityAndUnitFromRawValue(
-				selectedOption.size,
-				units
-			);
-			hint += `(${ unit })`;
+		const commonUnit = getCommonSizeUnit( fontSizes );
+		if ( commonUnit ) {
+			return `(${ commonUnit })`;
 		}
-		return hint;
+
+		return '';
 	}, [
 		showCustomValueControl,
-		selectedOption?.name,
-		selectedOption?.size,
-		value,
-		isCustomValue,
 		shouldUseSelectControl,
-		fontSizesContainComplexValues,
+		selectedFontSize,
+		fontSizes,
 	] );
 
-	if ( ! options ) {
+	if ( fontSizes.length === 0 && disableCustomFontSizes ) {
 		return null;
 	}
 
-	// This is used for select control only. We need to add support
-	// for ToggleGroupControl.
-	const currentFontSizeSR = sprintf(
-		// translators: %s: Currently selected font size.
-		__( 'Currently selected font size: %s' ),
-		selectedOption.name
-	);
-
 	// If neither the value or first font size is a string, then FontSizePicker
 	// operates in a legacy "unitless" mode where UnitControl can only be used
 	// to select px values and onChange() is always called with number values.
@@ -210,67 +163,51 @@ const UnforwardedFontSizePicker = (
 				{ !! fontSizes.length &&
 					shouldUseSelectControl &&
 					! showCustomValueControl && (
-						<CustomSelectControl
-							__nextUnconstrainedWidth
-							className="components-font-size-picker__select"
-							label={ __( 'Font size' ) }
-							hideLabelFromVision
-							describedBy={ currentFontSizeSR }
-							options={ options as FontSizeSelectOption[] }
-							value={ ( options as FontSizeSelectOption[] ).find(
-								( option ) => option.key === selectedOption.slug
-							) }
-							onChange={ ( {
-								selectedItem,
-							}: {
-								selectedItem: FontSizeSelectOption;
-							} ) => {
-								if ( selectedItem.size === undefined ) {
+						<FontSizePickerSelect
+							fontSizes={ fontSizes }
+							value={ value }
+							disableCustomFontSizes={ disableCustomFontSizes }
+							size={ size }
+							onChange={ ( newValue ) => {
+								if ( newValue === undefined ) {
 									onChange?.( undefined );
 								} else {
 									onChange?.(
 										hasUnits
-											? selectedItem.size
-											: Number( selectedItem.size )
+											? newValue
+											: Number( newValue ),
+										fontSizes.find(
+											( fontSize ) =>
+												fontSize.size === newValue
+										)
 									);
 								}
-								if ( selectedItem.key === CUSTOM_FONT_SIZE ) {
-									setShowCustomValueControl( true );
-								}
 							} }
-							size={ size }
+							onSelectCustom={ () =>
+								setShowCustomValueControl( true )
+							}
 						/>
 					) }
 				{ ! shouldUseSelectControl && ! showCustomValueControl && (
-					<ToggleGroupControl
-						__nextHasNoMarginBottom={ __nextHasNoMarginBottom }
-						label={ __( 'Font size' ) }
-						hideLabelFromVision
+					<FontSizePickerToggleGroup
+						fontSizes={ fontSizes }
 						value={ value }
+						__nextHasNoMarginBottom={ __nextHasNoMarginBottom }
+						size={ size }
 						onChange={ ( newValue ) => {
 							if ( newValue === undefined ) {
 								onChange?.( undefined );
 							} else {
 								onChange?.(
-									hasUnits ? newValue : Number( newValue )
+									hasUnits ? newValue : Number( newValue ),
+									fontSizes.find(
+										( fontSize ) =>
+											fontSize.size === newValue
+									)
 								);
 							}
 						} }
-						isBlock
-						size={ size }
-					>
-						{ ( options as FontSizeToggleGroupOption[] ).map(
-							( option ) => (
-								<ToggleGroupControlOption
-									key={ option.key }
-									value={ option.value }
-									label={ option.label }
-									aria-label={ option.name }
-									showTooltip={ true }
-								/>
-							)
-						) }
-					</ToggleGroupControl>
+					/>
 				) }
 				{ ! disableCustomFontSizes && showCustomValueControl && (
 					<Flex className="components-font-size-picker__custom-size-control">