@wordpress/components 21.1.2-next.4d3b314fd5.0 → 21.3.0

package/src/disabled/test/index.tsx

@@ -1,7 +1,7 @@
 /**
  * External dependencies
  */
-import { render, screen, waitFor } from '@testing-library/react';
+import { render, screen } from '@testing-library/react';
 
 /**
  * Internal dependencies
@@ -9,35 +9,6 @@ import { render, screen, waitFor } from '@testing-library/react';
 import Disabled from '../';
 import userEvent from '@testing-library/user-event';
 
-jest.mock( '@wordpress/dom', () => {
-	const focus = jest.requireActual( '../../../../dom/src' ).focus;
-	return {
-		focus: {
-			...focus,
-			focusable: {
-				...focus.focusable,
-				find( context: Element, options = { sequential: false } ) {
-					// In JSDOM, all elements have zero'd widths and height.
-					// This is a metric for focusable's `isVisible`, so find
-					// and apply an arbitrary non-zero width.
-					Array.from( context.querySelectorAll( '*' ) ).forEach(
-						( element ) => {
-							Object.defineProperties( element, {
-								offsetWidth: {
-									get: () => 1,
-									configurable: true,
-								},
-							} );
-						}
-					);
-
-					return focus.focusable.find( context, options );
-				},
-			},
-		},
-	};
-} );
-
 describe( 'Disabled', () => {
 	const Form = () => (
 		<form title="form">
@@ -47,18 +18,14 @@ describe( 'Disabled', () => {
 	);
 
 	it( 'will disable all fields', () => {
-		render(
+		const { container } = render(
 			<Disabled>
 				<Form />
 			</Disabled>
 		);
 
-		const input = screen.getByRole( 'textbox' );
-		const contentEditable = screen.getByTitle( 'edit my content' );
-		expect( input ).toBeDisabled();
-		expect( contentEditable ).toHaveAttribute( 'contenteditable', 'false' );
-		expect( contentEditable ).not.toHaveAttribute( 'tabindex' );
-		expect( contentEditable ).not.toHaveAttribute( 'disabled' );
+		// @ts-ignore
+		expect( container.firstChild ).toHaveAttribute( 'inert' );
 	} );
 
 	it( 'should cleanly un-disable via reconciliation', () => {
@@ -71,19 +38,15 @@ describe( 'Disabled', () => {
 				<Form />
 			);
 
-		const { rerender } = render( <MaybeDisable /> );
+		const { container, rerender } = render( <MaybeDisable /> );
 
-		const input = screen.getByRole( 'textbox' );
-		const contentEditable = screen.getByTitle( 'edit my content' );
-
-		expect( input ).toBeDisabled();
-		expect( contentEditable ).toHaveAttribute( 'contenteditable', 'false' );
+		// @ts-ignore
+		expect( container.firstChild ).toHaveAttribute( 'inert' );
 
 		rerender( <MaybeDisable isDisabled={ false } /> );
 
-		expect( input ).not.toBeDisabled();
-		expect( contentEditable ).toHaveAttribute( 'contenteditable', 'true' );
-		expect( contentEditable ).toHaveAttribute( 'tabindex' );
+		// @ts-ignore
+		expect( container.firstChild ).not.toHaveAttribute( 'inert' );
 	} );
 
 	it( 'will disable or enable descendant fields based on the isDisabled prop value', () => {
@@ -93,46 +56,15 @@ describe( 'Disabled', () => {
 			</Disabled>
 		);
 
-		const { rerender } = render( <MaybeDisable /> );
-
-		const input = screen.getByRole( 'textbox' );
-		const contentEditable = screen.getByTitle( 'edit my content' );
+		const { rerender, container } = render( <MaybeDisable /> );
 
-		expect( input ).toBeDisabled();
-		expect( contentEditable ).toHaveAttribute( 'contenteditable', 'false' );
+		// @ts-ignore
+		expect( container.firstChild ).toHaveAttribute( 'inert' );
 
 		rerender( <MaybeDisable isDisabled={ false } /> );
 
-		expect( input ).not.toBeDisabled();
-		expect( contentEditable ).toHaveAttribute( 'contenteditable', 'true' );
-	} );
-
-	it( 'will disable all fields on sneaky DOM manipulation', async () => {
-		render(
-			<Disabled>
-				<Form />
-			</Disabled>
-		);
-
-		const form = screen.getByTitle( 'form' );
-		form.insertAdjacentHTML(
-			'beforeend',
-			'<input title="sneaky input" />'
-		);
-		form.insertAdjacentHTML(
-			'beforeend',
-			'<div title="sneaky editable content" contentEditable tabIndex={ 0 } />'
-		);
-		const sneakyInput = screen.getByTitle( 'sneaky input' );
-		const sneakyEditable = screen.getByTitle( 'sneaky editable content' );
-
-		await waitFor( () => expect( sneakyInput ).toBeDisabled() );
-		await waitFor( () =>
-			expect( sneakyEditable ).toHaveAttribute(
-				'contenteditable',
-				'false'
-			)
-		);
+		// @ts-ignore
+		expect( container.firstChild ).not.toHaveAttribute( 'inert' );
 	} );
 
 	it( 'should preserve input values when toggling the isDisabled prop', async () => {

package/src/dropdown/test/index.js

@@ -28,9 +28,10 @@ describe( 'Dropdown', () => {
 	it( 'should toggle the dropdown properly', () => {
 		const expectButtonExpanded = ( container, expanded ) => {
 			expect( container.querySelectorAll( 'button' ) ).toHaveLength( 1 );
-			expect(
-				getButtonElement( container ).getAttribute( 'aria-expanded' )
-			).toBe( expanded.toString() );
+			expect( getButtonElement( container ) ).toHaveAttribute(
+				'aria-expanded',
+				expanded.toString()
+			);
 		};
 
 		const {

package/src/font-size-picker/{index.js → index.tsx}

@@ -1,7 +1,7 @@
 /**
  * External dependencies
  */
-import classNames from 'classnames';
+import type { ReactNode, ForwardedRef } from 'react';
 
 /**
  * WordPress dependencies
@@ -14,7 +14,6 @@ import { useState, useMemo, forwardRef } from '@wordpress/element';
 /**
  * Internal dependencies
  */
-import { BaseControl } from '../base-control';
 import Button from '../button';
 import RangeControl from '../range-control';
 import { Flex, FlexItem } from '../flex';
@@ -34,31 +33,50 @@ import {
 } from './utils';
 import { VStack } from '../v-stack';
 import { HStack } from '../h-stack';
+import type {
+	FontSizePickerProps,
+	FontSizeSelectOption,
+	FontSizeToggleGroupOption,
+} from './types';
+import {
+	Container,
+	HeaderHint,
+	HeaderLabel,
+	Controls,
+	ResetButton,
+} from './styles';
+import { Spacer } from '../spacer';
 
 // This conditional is needed to maintain the spacing before the slider in the `withSlider` case.
-const MaybeVStack = ( { __nextHasNoMarginBottom, children } ) =>
+const MaybeVStack = ( {
+	__nextHasNoMarginBottom,
+	children,
+}: {
+	__nextHasNoMarginBottom: boolean;
+	children: ReactNode;
+} ) =>
 	! __nextHasNoMarginBottom ? (
-		children
+		<>{ children }</>
 	) : (
 		<VStack spacing={ 6 } children={ children } />
 	);
 
-function FontSizePicker(
-	{
+const UnforwardedFontSizePicker = (
+	props: FontSizePickerProps,
+	ref: ForwardedRef< any >
+) => {
+	const {
 		/** Start opting into the new margin-free styles that will become the default in a future version. */
 		__nextHasNoMarginBottom = false,
 		fallbackFontSize,
 		fontSizes = [],
 		disableCustomFontSizes = false,
 		onChange,
-		/** @type {'default' | '__unstable-large'} */
 		size = 'default',
 		value,
 		withSlider = false,
 		withReset = true,
-	},
-	ref
-) {
+	} = props;
 	if ( ! __nextHasNoMarginBottom ) {
 		deprecated( 'Bottom margin styles for wp.components.FontSizePicker', {
 			since: '6.1',
@@ -70,7 +88,7 @@ function FontSizePicker(
 	const hasUnits = [ typeof value, typeof fontSizes?.[ 0 ]?.size ].includes(
 		'string'
 	);
-	const noUnitsValue = ! hasUnits ? value : parseInt( value );
+	const noUnitsValue = ! hasUnits ? value : parseInt( String( value ) );
 	const isPixelValue = typeof value === 'number' || value?.endsWith?.( 'px' );
 	const units = useCustomUnits( {
 		availableUnits: [ 'px', 'em', 'rem' ],
@@ -106,17 +124,22 @@ function FontSizePicker(
 		// 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 isSimpleCssValue( value ) && `(${ value })`;
+			return (
+				value !== undefined &&
+				isSimpleCssValue( value ) &&
+				`(${ value })`
+			);
 		}
 		if ( shouldUseSelectControl ) {
 			return (
+				selectedOption?.size !== undefined &&
 				isSimpleCssValue( selectedOption?.size ) &&
 				`(${ selectedOption?.size })`
 			);
 		}
 
 		// Calculate the `hint` for toggle group control.
-		let hint = selectedOption.name;
+		let hint = selectedOption?.name || selectedOption.slug;
 		if (
 			! fontSizesContainComplexValues &&
 			typeof selectedOption.size === 'string'
@@ -146,59 +169,65 @@ function FontSizePicker(
 		__( 'Currently selected font size: %s' ),
 		selectedOption.name
 	);
-	const baseClassName = 'components-font-size-picker';
 	return (
-		<fieldset className={ baseClassName } { ...( ref ? {} : { ref } ) }>
+		<Container ref={ ref } className="components-font-size-picker">
 			<VisuallyHidden as="legend">{ __( 'Font size' ) }</VisuallyHidden>
-			<HStack className={ `${ baseClassName }__header` }>
-				<BaseControl.VisualLabel>
-					{ __( 'Size' ) }
-					{ headerHint && (
-						<span className={ `${ baseClassName }__header__hint` }>
-							{ headerHint }
-						</span>
+			<Spacer>
+				<HStack className="components-font-size-picker__header">
+					<HeaderLabel>
+						{ __( 'Size' ) }
+						{ headerHint && (
+							<HeaderHint className="components-font-size-picker__header__hint">
+								{ headerHint }
+							</HeaderHint>
+						) }
+					</HeaderLabel>
+					{ ! disableCustomFontSizes && (
+						<Button
+							label={
+								showCustomValueControl
+									? __( 'Use size preset' )
+									: __( 'Set custom size' )
+							}
+							icon={ settings }
+							onClick={ () => {
+								setShowCustomValueControl(
+									! showCustomValueControl
+								);
+							} }
+							isPressed={ showCustomValueControl }
+							isSmall
+						/>
 					) }
-				</BaseControl.VisualLabel>
-				{ ! disableCustomFontSizes && (
-					<Button
-						label={
-							showCustomValueControl
-								? __( 'Use size preset' )
-								: __( 'Set custom size' )
-						}
-						icon={ settings }
-						onClick={ () => {
-							setShowCustomValueControl(
-								! showCustomValueControl
-							);
-						} }
-						isPressed={ showCustomValueControl }
-						isSmall
-					/>
-				) }
-			</HStack>
+				</HStack>
+			</Spacer>
 			<MaybeVStack __nextHasNoMarginBottom={ __nextHasNoMarginBottom }>
-				<div
-					className={ classNames( `${ baseClassName }__controls`, {
-						'is-next-has-no-margin-bottom': __nextHasNoMarginBottom,
-					} ) }
+				<Controls
+					className="components-font-size-picker__controls"
+					__nextHasNoMarginBottom={ __nextHasNoMarginBottom }
 				>
 					{ !! fontSizes.length &&
 						shouldUseSelectControl &&
 						! showCustomValueControl && (
 							<CustomSelectControl
 								__nextUnconstrainedWidth
-								className={ `${ baseClassName }__select` }
+								className="components-font-size-picker__select"
 								label={ __( 'Font size' ) }
 								hideLabelFromVision
 								describedBy={ currentFontSizeSR }
-								options={ options }
-								value={ options.find(
+								options={ options as FontSizeSelectOption[] }
+								value={ (
+									options as FontSizeSelectOption[]
+								 ).find(
 									( option ) =>
 										option.key === selectedOption.slug
 								) }
-								onChange={ ( { selectedItem } ) => {
-									onChange(
+								onChange={ ( {
+									selectedItem,
+								}: {
+									selectedItem: FontSizeSelectOption;
+								} ) => {
+									onChange?.(
 										hasUnits
 											? selectedItem.size
 											: Number( selectedItem.size )
@@ -219,31 +248,30 @@ function FontSizePicker(
 							hideLabelFromVision
 							value={ value }
 							onChange={ ( newValue ) => {
-								onChange(
+								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 }
-								/>
-							) ) }
+							{ ( options as FontSizeToggleGroupOption[] ).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` }
-							>
+							<Flex className="components-font-size-picker__custom-size-control">
 								<FlexItem isBlock>
 									<UnitControl
 										label={ __( 'Custom' ) }
@@ -252,12 +280,12 @@ function FontSizePicker(
 										value={ value }
 										onChange={ ( nextSize ) => {
 											if (
-												0 === parseFloat( nextSize ) ||
-												! nextSize
+												! nextSize ||
+												0 === parseFloat( nextSize )
 											) {
-												onChange( undefined );
+												onChange?.( undefined );
 											} else {
-												onChange(
+												onChange?.(
 													hasUnits
 														? nextSize
 														: parseInt(
@@ -272,40 +300,46 @@ function FontSizePicker(
 									/>
 								</FlexItem>
 								{ withReset && (
-									<FlexItem isBlock>
-										<Button
-											className="components-color-palette__clear"
+									<FlexItem>
+										<ResetButton
 											disabled={ value === undefined }
 											onClick={ () => {
-												onChange( undefined );
+												onChange?.( undefined );
 											} }
 											isSmall
 											variant="secondary"
+											size={ size }
 										>
 											{ __( 'Reset' ) }
-										</Button>
+										</ResetButton>
 									</FlexItem>
 								) }
 							</Flex>
 						) }
-				</div>
+				</Controls>
 				{ withSlider && (
 					<RangeControl
 						__nextHasNoMarginBottom={ __nextHasNoMarginBottom }
-						className={ `${ baseClassName }__custom-input` }
+						className="components-font-size-picker__custom-input"
 						label={ __( 'Custom Size' ) }
-						value={ ( isPixelValue && noUnitsValue ) || '' }
+						value={
+							isPixelValue && noUnitsValue
+								? Number( noUnitsValue )
+								: undefined
+						}
 						initialPosition={ fallbackFontSize }
 						onChange={ ( newValue ) => {
-							onChange( hasUnits ? newValue + 'px' : newValue );
+							onChange?.( hasUnits ? newValue + 'px' : newValue );
 						} }
 						min={ 12 }
 						max={ 100 }
 					/>
 				) }
 			</MaybeVStack>
-		</fieldset>
+		</Container>
 	);
-}
+};
+
+export const FontSizePicker = forwardRef( UnforwardedFontSizePicker );
 
-export default forwardRef( FontSizePicker );
+export default FontSizePicker;

package/src/font-size-picker/stories/e2e/{index.js → index.tsx}

@@ -1,3 +1,8 @@
+/**
+ * External dependencies
+ */
+import type { ComponentStory } from '@storybook/react';
+
 /**
  * WordPress dependencies
  */
@@ -13,8 +18,11 @@ export default {
 	component: FontSizePicker,
 };
 
-const FontSizePickerWithState = ( { initialValue, ...props } ) => {
-	const [ fontSize, setFontSize ] = useState( initialValue );
+const FontSizePickerWithState: ComponentStory< typeof FontSizePicker > = ( {
+	value,
+	...props
+} ) => {
+	const [ fontSize, setFontSize ] = useState( value );
 	return (
 		<FontSizePicker
 			{ ...props }
@@ -24,7 +32,8 @@ const FontSizePickerWithState = ( { initialValue, ...props } ) => {
 	);
 };
 
-export const Default = FontSizePickerWithState.bind( {} );
+export const Default: ComponentStory< typeof FontSizePicker > =
+	FontSizePickerWithState.bind( {} );
 Default.args = {
 	fontSizes: [
 		{
@@ -43,5 +52,5 @@ Default.args = {
 			size: 26,
 		},
 	],
-	initialValue: 16,
+	value: 16,
 };