@wordpress/components 19.17.0 → 20.0.2-next.957ca95e4c.0

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

@@ -1,7 +1,8 @@
 /**
  * External dependencies
  */
-import { act, fireEvent, render } from '@testing-library/react';
+import { fireEvent, render, screen } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
 
 /**
  * Internal dependencies
@@ -10,31 +11,49 @@ import Picker from '../index.js';
 
 describe( 'FocalPointPicker', () => {
 	describe( 'focus and blur', () => {
-		let firedDragEnd;
-		let firedDrag;
-		const { getByRole, unmount } = render(
-			<Picker
-				onChange={ () => {} }
-				onDragEnd={ () => ( firedDragEnd = true ) }
-				onDrag={ () => ( firedDrag = true ) }
-			/>
-		);
-		const dragArea = getByRole( 'button' );
-		fireEvent.mouseDown( dragArea );
-		const gainedFocus = dragArea.ownerDocument.activeElement === dragArea;
-
-		fireEvent.blur( dragArea );
-		fireEvent.mouseMove( dragArea );
-
-		// cleans up as it's not automated for renders outside of test blocks
-		unmount();
-
-		it( 'should focus the draggable area', () => {
-			expect( gainedFocus ).toBe( true );
+		it( 'clicking the draggable area should focus it', async () => {
+			const user = userEvent.setup( {
+				advanceTimers: jest.advanceTimersByTime,
+			} );
+
+			const mockOnChange = jest.fn();
+
+			render( <Picker onChange={ mockOnChange } /> );
+
+			const draggableArea = screen.getByRole( 'button' );
+
+			await user.click( draggableArea );
+
+			expect( draggableArea ).toHaveFocus();
 		} );
 
 		it( 'should stop a drag operation when focus is lost', () => {
-			expect( firedDragEnd && ! firedDrag ).toBe( true );
+			const mockOnDrag = jest.fn();
+			const mockOnDragEnd = jest.fn();
+			const mockOnChange = jest.fn();
+
+			render(
+				<Picker
+					onChange={ mockOnChange }
+					onDrag={ mockOnDrag }
+					onDragEnd={ mockOnDragEnd }
+				/>
+			);
+
+			const draggableArea = screen.getByRole( 'button' );
+
+			// `user-event` is not capable of testing drag interactions properly.
+			// we could consider using playwright instead.
+			fireEvent.mouseDown( draggableArea );
+
+			expect( mockOnDrag ).not.toHaveBeenCalled();
+			expect( mockOnDragEnd ).not.toHaveBeenCalled();
+
+			fireEvent.blur( draggableArea );
+			fireEvent.mouseMove( draggableArea );
+
+			expect( mockOnDrag ).not.toHaveBeenCalled();
+			expect( mockOnDragEnd ).toHaveBeenCalledTimes( 1 );
 		} );
 	} );
 
@@ -47,13 +66,17 @@ describe( 'FocalPointPicker', () => {
 			events.forEach( ( name ) => {
 				handlers[ name ] = ( ...all ) => eventLogger( name, all );
 			} );
-			const { getByRole } = render( <Picker { ...handlers } /> );
-			const dragArea = getByRole( 'button' );
-			act( () => {
-				fireEvent.mouseDown( dragArea );
-				fireEvent.mouseMove( dragArea );
-				fireEvent.mouseUp( dragArea );
-			} );
+
+			render( <Picker { ...handlers } /> );
+
+			const dragArea = screen.getByRole( 'button' );
+
+			// `user-event` is not capable of testing drag interactions properly.
+			// we could consider using playwright instead.
+			fireEvent.mouseDown( dragArea );
+			fireEvent.mouseMove( dragArea );
+			fireEvent.mouseUp( dragArea );
+
 			expect(
 				events.reduce( ( last, eventName, index ) => {
 					return last && logs[ index ].name === eventName;
@@ -64,9 +87,14 @@ describe( 'FocalPointPicker', () => {
 
 	describe( 'resolvePoint handling', () => {
 		it( 'should allow value altering', async () => {
+			const user = userEvent.setup( {
+				advanceTimers: jest.advanceTimersByTime,
+			} );
+
 			const spyChange = jest.fn();
 			const spy = jest.fn();
-			const { getByRole } = render(
+
+			render(
 				<Picker
 					value={ { x: 0.25, y: 0.25 } }
 					onChange={ spyChange }
@@ -76,12 +104,13 @@ describe( 'FocalPointPicker', () => {
 					} }
 				/>
 			);
+
 			// Click and press arrow up
-			const dragArea = getByRole( 'button' );
-			act( () => {
-				fireEvent.mouseDown( dragArea );
-				fireEvent.keyDown( dragArea, { charCode: 0, keyCode: 38 } );
-			} );
+			const dragArea = screen.getByRole( 'button' );
+
+			await user.click( dragArea );
+			await user.keyboard( '[ArrowUp]' );
+
 			expect( spy ).toHaveBeenCalled();
 			expect( spyChange ).toHaveBeenCalledWith( {
 				x: '0.91',
@@ -92,27 +121,31 @@ describe( 'FocalPointPicker', () => {
 
 	describe( 'controllability', () => {
 		it( 'should update value from props', () => {
-			const { rerender, getByRole } = render(
+			const { rerender } = render(
 				<Picker value={ { x: 0.25, y: 0.5 } } />
 			);
-			const xInput = getByRole( 'spinbutton', { name: 'Left' } );
+			const xInput = screen.getByRole( 'spinbutton', { name: 'Left' } );
 			rerender( <Picker value={ { x: 0.93, y: 0.5 } } /> );
 			expect( xInput.value ).toBe( '93' );
 		} );
 		it( 'call onChange with the expected values', async () => {
+			const user = userEvent.setup( {
+				advanceTimers: jest.advanceTimersByTime,
+			} );
+
 			const spyChange = jest.fn();
-			const { getByRole } = render(
+			render(
 				<Picker value={ { x: 0.14, y: 0.62 } } onChange={ spyChange } />
 			);
-			// Click and press arrow up
-			const dragArea = getByRole( 'button' );
-			act( () => {
-				fireEvent.mouseDown( dragArea );
-				fireEvent.keyDown( dragArea, { charCode: 0, keyCode: 38 } );
-			} );
+			// Focus and press arrow up
+			const dragArea = screen.getByRole( 'button' );
+
+			await user.click( dragArea );
+			await user.keyboard( '[ArrowDown]' );
+
 			expect( spyChange ).toHaveBeenCalledWith( {
 				x: '0.14',
-				y: '0.61',
+				y: '0.63',
 			} );
 		} );
 	} );

package/src/focal-point-picker/utils.js

@@ -1,10 +1,6 @@
 export const INITIAL_BOUNDS = {
-	top: 0,
-	left: 0,
-	bottom: 0,
-	right: 0,
-	width: 0,
-	height: 0,
+	width: 200,
+	height: 170,
 };
 
 const VIDEO_EXTENSIONS = [

package/src/focusable-iframe/index.js

@@ -4,7 +4,12 @@
 import { useMergeRefs, useFocusableIframe } from '@wordpress/compose';
 import deprecated from '@wordpress/deprecated';
 
+/**
+ * @param {Object}                                 props
+ * @param {import('react').Ref<HTMLIFrameElement>} props.iframeRef
+ */
 export default function FocusableIframe( { iframeRef, ...props } ) {
+	// @ts-expect-error: Return type for useFocusableIframe() is incorrect.
 	const ref = useMergeRefs( [ iframeRef, useFocusableIframe() ] );
 	deprecated( 'wp.components.FocusableIframe', {
 		since: '5.9',

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

@@ -1,3 +1,8 @@
+/**
+ * External dependencies
+ */
+import classNames from 'classnames';
+
 /**
  * WordPress dependencies
  */
@@ -26,9 +31,21 @@ import {
 	isSimpleCssValue,
 	CUSTOM_FONT_SIZE,
 } from './utils';
+import { VStack } from '../v-stack';
+import { HStack } from '../h-stack';
+
+// This conditional is needed to maintain the spacing before the slider in the `withSlider` case.
+const MaybeVStack = ( { __nextHasNoMarginBottom, children } ) =>
+	! __nextHasNoMarginBottom ? (
+		children
+	) : (
+		<VStack spacing={ 6 } children={ children } />
+	);
 
 function FontSizePicker(
 	{
+		/** Start opting into the new margin-free styles that will become the default in a future version. */
+		__nextHasNoMarginBottom = false,
 		fallbackFontSize,
 		fontSizes = [],
 		disableCustomFontSizes = false,
@@ -63,15 +80,9 @@ function FontSizePicker(
 			getFontSizeOptions(
 				shouldUseSelectControl,
 				fontSizes,
-				disableCustomFontSizes,
-				fontSizesContainComplexValues
+				disableCustomFontSizes
 			),
-		[
-			shouldUseSelectControl,
-			fontSizes,
-			disableCustomFontSizes,
-			fontSizesContainComplexValues,
-		]
+		[ shouldUseSelectControl, fontSizes, disableCustomFontSizes ]
 	);
 	const selectedOption = getSelectedOption( fontSizes, value );
 	const isCustomValue = selectedOption.slug === CUSTOM_FONT_SIZE;
@@ -94,6 +105,7 @@ function FontSizePicker(
 				`(${ selectedOption?.size })`
 			);
 		}
+
 		// Calculate the `hint` for toggle group control.
 		let hint = selectedOption.name;
 		if (
@@ -129,155 +141,160 @@ function FontSizePicker(
 	return (
 		<fieldset className={ baseClassName } { ...( ref ? {} : { ref } ) }>
 			<VisuallyHidden as="legend">{ __( 'Font size' ) }</VisuallyHidden>
-			<Flex
-				justify="space-between"
-				className={ `${ baseClassName }__header` }
-			>
-				<FlexItem>
-					<BaseControl.VisualLabel>
-						{ __( 'Size' ) }
-						{ headerHint && (
-							<span
-								className={ `${ baseClassName }__header__hint` }
-							>
-								{ headerHint }
-							</span>
-						) }
-					</BaseControl.VisualLabel>
-				</FlexItem>
+			<HStack className={ `${ baseClassName }__header` }>
+				<BaseControl.VisualLabel>
+					{ __( 'Size' ) }
+					{ headerHint && (
+						<span className={ `${ baseClassName }__header__hint` }>
+							{ headerHint }
+						</span>
+					) }
+				</BaseControl.VisualLabel>
 				{ ! disableCustomFontSizes && (
-					<FlexItem>
-						<Button
-							label={
-								showCustomValueControl
-									? __( 'Use size preset' )
-									: __( 'Set custom size' )
-							}
-							icon={ settings }
-							onClick={ () => {
-								setShowCustomValueControl(
-									! showCustomValueControl
-								);
-							} }
-							isPressed={ showCustomValueControl }
-							isSmall
-						/>
-					</FlexItem>
+					<Button
+						label={
+							showCustomValueControl
+								? __( 'Use size preset' )
+								: __( 'Set custom size' )
+						}
+						icon={ settings }
+						onClick={ () => {
+							setShowCustomValueControl(
+								! showCustomValueControl
+							);
+						} }
+						isPressed={ showCustomValueControl }
+						isSmall
+					/>
 				) }
-			</Flex>
-			<div className={ `${ baseClassName }__controls` }>
-				{ !! fontSizes.length &&
-					shouldUseSelectControl &&
-					! showCustomValueControl && (
-						<CustomSelectControl
-							__nextUnconstrainedWidth
-							className={ `${ baseClassName }__select` }
+			</HStack>
+			<MaybeVStack __nextHasNoMarginBottom={ __nextHasNoMarginBottom }>
+				<div
+					className={ classNames( `${ baseClassName }__controls`, {
+						'is-next-has-no-margin-bottom': __nextHasNoMarginBottom,
+					} ) }
+				>
+					{ !! fontSizes.length &&
+						shouldUseSelectControl &&
+						! showCustomValueControl && (
+							<CustomSelectControl
+								__nextUnconstrainedWidth
+								className={ `${ baseClassName }__select` }
+								label={ __( 'Font size' ) }
+								hideLabelFromVision
+								describedBy={ currentFontSizeSR }
+								options={ options }
+								value={ options.find(
+									( option ) =>
+										option.key === selectedOption.slug
+								) }
+								onChange={ ( { selectedItem } ) => {
+									onChange(
+										hasUnits
+											? selectedItem.size
+											: Number( selectedItem.size )
+									);
+									if (
+										selectedItem.key === CUSTOM_FONT_SIZE
+									) {
+										setShowCustomValueControl( true );
+									}
+								} }
+								size={ size }
+							/>
+						) }
+					{ ! shouldUseSelectControl && ! showCustomValueControl && (
+						<ToggleGroupControl
+							__nextHasNoMarginBottom={ __nextHasNoMarginBottom }
 							label={ __( 'Font size' ) }
 							hideLabelFromVision
-							describedBy={ currentFontSizeSR }
-							options={ options }
-							value={ options.find(
-								( option ) => option.key === selectedOption.slug
-							) }
-							onChange={ ( { selectedItem } ) => {
+							value={ value }
+							onChange={ ( newValue ) => {
 								onChange(
-									hasUnits
-										? selectedItem.size
-										: Number( selectedItem.size )
+									hasUnits ? newValue : Number( newValue )
 								);
-								if ( selectedItem.key === CUSTOM_FONT_SIZE ) {
-									setShowCustomValueControl( true );
-								}
 							} }
+							isBlock
 							size={ size }
-						/>
-					) }
-				{ ! shouldUseSelectControl && ! showCustomValueControl && (
-					<ToggleGroupControl
-						label={ __( 'Font size' ) }
-						hideLabelFromVision
-						value={ value }
-						onChange={ ( newValue ) => {
-							onChange(
-								hasUnits ? newValue : Number( newValue )
-							);
-						} }
-						isBlock
-						size={ size }
-					>
-						{ options.map( ( option ) => (
-							<ToggleGroupControlOption
-								key={ option.key }
-								value={ option.value }
-								label={ option.label }
-								aria-label={ option.name }
-								showTooltip={ true }
-							/>
-						) ) }
-					</ToggleGroupControl>
-				) }
-				{ ! withSlider &&
-					! disableCustomFontSizes &&
-					showCustomValueControl && (
-						<Flex
-							justify="space-between"
-							className={ `${ baseClassName }__custom-size-control` }
 						>
-							<FlexItem isBlock>
-								<UnitControl
-									label={ __( 'Custom' ) }
-									labelPosition="top"
-									hideLabelFromVision
-									value={ value }
-									onChange={ ( nextSize ) => {
-										if (
-											0 === parseFloat( nextSize ) ||
-											! nextSize
-										) {
-											onChange( undefined );
-										} else {
-											onChange(
-												hasUnits
-													? nextSize
-													: parseInt( nextSize, 10 )
-											);
-										}
-									} }
-									size={ size }
-									units={ hasUnits ? units : [] }
+							{ options.map( ( option ) => (
+								<ToggleGroupControlOption
+									key={ option.key }
+									value={ option.value }
+									label={ option.label }
+									aria-label={ option.name }
+									showTooltip={ true }
 								/>
-							</FlexItem>
-							{ withReset && (
+							) ) }
+						</ToggleGroupControl>
+					) }
+					{ ! withSlider &&
+						! disableCustomFontSizes &&
+						showCustomValueControl && (
+							<Flex
+								justify="space-between"
+								className={ `${ baseClassName }__custom-size-control` }
+							>
 								<FlexItem isBlock>
-									<Button
-										className="components-color-palette__clear"
-										disabled={ value === undefined }
-										onClick={ () => {
-											onChange( undefined );
+									<UnitControl
+										label={ __( 'Custom' ) }
+										labelPosition="top"
+										hideLabelFromVision
+										value={ value }
+										onChange={ ( nextSize ) => {
+											if (
+												0 === parseFloat( nextSize ) ||
+												! nextSize
+											) {
+												onChange( undefined );
+											} else {
+												onChange(
+													hasUnits
+														? nextSize
+														: parseInt(
+																nextSize,
+																10
+														  )
+												);
+											}
 										} }
-										isSmall
-										variant="secondary"
-									>
-										{ __( 'Reset' ) }
-									</Button>
+										size={ size }
+										units={ hasUnits ? units : [] }
+									/>
 								</FlexItem>
-							) }
-						</Flex>
-					) }
-			</div>
-			{ withSlider && (
-				<RangeControl
-					className={ `${ baseClassName }__custom-input` }
-					label={ __( 'Custom Size' ) }
-					value={ ( isPixelValue && noUnitsValue ) || '' }
-					initialPosition={ fallbackFontSize }
-					onChange={ ( newValue ) => {
-						onChange( hasUnits ? newValue + 'px' : newValue );
-					} }
-					min={ 12 }
-					max={ 100 }
-				/>
-			) }
+								{ withReset && (
+									<FlexItem isBlock>
+										<Button
+											className="components-color-palette__clear"
+											disabled={ value === undefined }
+											onClick={ () => {
+												onChange( undefined );
+											} }
+											isSmall
+											variant="secondary"
+										>
+											{ __( 'Reset' ) }
+										</Button>
+									</FlexItem>
+								) }
+							</Flex>
+						) }
+				</div>
+				{ withSlider && (
+					<RangeControl
+						__nextHasNoMarginBottom={ __nextHasNoMarginBottom }
+						className={ `${ baseClassName }__custom-input` }
+						label={ __( 'Custom Size' ) }
+						value={ ( isPixelValue && noUnitsValue ) || '' }
+						initialPosition={ fallbackFontSize }
+						onChange={ ( newValue ) => {
+							onChange( hasUnits ? newValue + 'px' : newValue );
+						} }
+						min={ 12 }
+						max={ 100 }
+					/>
+				) }
+			</MaybeVStack>
 		</fieldset>
 	);
 }

package/src/font-size-picker/stories/index.js

@@ -12,6 +12,7 @@ export default {
 	title: 'Components/FontSizePicker',
 	component: FontSizePicker,
 	argTypes: {
+		__nextHasNoMarginBottom: { control: { type: 'boolean' } },
 		initialValue: { table: { disable: true } }, // hide prop because it's not actually part of FontSizePicker
 		fallbackFontSize: {
 			description:

package/src/font-size-picker/style.scss

@@ -4,6 +4,10 @@
 		color: $gray-700;
 	}
 
+	.components-base-control__label {
+		margin-bottom: 0;
+	}
+
 	// This button is inheriting padding and min-width.
 	// @todo: we should refactor it to not need to unset this.
 	.components-button.is-small.has-icon:not(.has-text) {
@@ -16,7 +20,10 @@
 	max-width: $sidebar-width - ( 2 * $grid-unit-20 );
 	align-items: center;
 	margin-top: $grid-unit-10;
-	margin-bottom: $grid-unit-30;
+
+	&:not(.is-next-has-no-margin-bottom) {
+		margin-bottom: $grid-unit-30;
+	}
 
 	.components-unit-control-wrapper {
 		.components-input-control__label {
@@ -26,10 +33,6 @@
 		}
 	}
 
-	.components-custom-select-control__button {
-		width: 100%;
-	}
-
 	// Apply the same height as the isSmall Reset button.
 	.components-font-size-picker__number {
 		@include input-control;

package/src/font-size-picker/test/index.js

@@ -193,7 +193,7 @@ describe( 'FontSizePicker', () => {
 			expect( element ).toHaveLength( fontSizes.length + 2 );
 		} );
 		describe( 'segmented control', () => {
-			it( 'should use numeric labels for simple css values', () => {
+			it( 'should use t-shirt labels for simple css values', () => {
 				const fontSizes = [ ...options ];
 				render(
 					<FontSizePicker
@@ -203,9 +203,9 @@ describe( 'FontSizePicker', () => {
 				);
 				const element = screen.getByLabelText( 'Large' );
 				expect( element ).toBeInTheDocument();
-				expect( element.children[ 0 ].textContent ).toBe( '1.7' );
+				expect( element.children[ 0 ].textContent ).toBe( 'L' );
 			} );
-			it( 'should use incremental sequence of numbers as labels if we have complex css', () => {
+			it( 'should use incremental sequence of t-shirt sizes as labels if we have complex css', () => {
 				const fontSizes = [
 					...options,
 					{
@@ -220,9 +220,16 @@ describe( 'FontSizePicker', () => {
 						value={ fontSizes[ 0 ].size }
 					/>
 				);
-				const element = screen.getByLabelText( 'Large' );
-				expect( element ).toBeInTheDocument();
-				expect( element.children[ 0 ].textContent ).toBe( '3' );
+				const largeElement = screen.getByLabelText( 'Large' );
+				expect( largeElement ).toBeInTheDocument();
+				expect( largeElement ).toHaveTextContent( 'L' );
+
+				const extraLargeElement =
+					screen.getByLabelText( 'Extra Large' );
+				expect( extraLargeElement ).toBeInTheDocument();
+				expect( extraLargeElement.children[ 0 ].textContent ).toBe(
+					'XL'
+				);
 			} );
 		} );
 	} );