@wordpress/components 26.0.1-next.5a1d1283.0 → 26.0.1

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

@@ -21,13 +21,7 @@ describe( 'FontSizePicker', () => {
 		async ( { value, expectedValue } ) => {
 			const user = userEvent.setup();
 			const onChange = jest.fn();
-			render(
-				<FontSizePicker
-					__nextHasNoMarginBottom
-					value={ value }
-					onChange={ onChange }
-				/>
-			);
+			render( <FontSizePicker value={ value } onChange={ onChange } /> );
 			const input = screen.getByLabelText( 'Custom' );
 			await user.clear( input );
 			await user.type( input, '80' );
@@ -48,7 +42,6 @@ describe( 'FontSizePicker', () => {
 			const onChange = jest.fn();
 			render(
 				<FontSizePicker
-					__nextHasNoMarginBottom
 					fontSizes={ [ { slug: 'slug', size: firstFontSize } ] }
 					onChange={ onChange }
 				/>
@@ -99,12 +92,7 @@ describe( 'FontSizePicker', () => {
 
 		it( 'displays a select control', async () => {
 			const user = userEvent.setup();
-			render(
-				<FontSizePicker
-					__nextHasNoMarginBottom
-					fontSizes={ fontSizes }
-				/>
-			);
+			render( <FontSizePicker fontSizes={ fontSizes } /> );
 			await user.click(
 				screen.getByRole( 'button', { name: 'Font size' } )
 			);
@@ -128,11 +116,7 @@ describe( 'FontSizePicker', () => {
 			'displays $expectedLabel as label when value is $value',
 			( { value, expectedLabel } ) => {
 				render(
-					<FontSizePicker
-						__nextHasNoMarginBottom
-						fontSizes={ fontSizes }
-						value={ value }
-					/>
+					<FontSizePicker fontSizes={ fontSizes } value={ value } />
 				);
 				expect(
 					screen.getByLabelText( expectedLabel )
@@ -158,7 +142,6 @@ describe( 'FontSizePicker', () => {
 				const onChange = jest.fn();
 				render(
 					<FontSizePicker
-						__nextHasNoMarginBottom
 						fontSizes={ fontSizes }
 						value={ value }
 						onChange={ onChange }
@@ -215,12 +198,7 @@ describe( 'FontSizePicker', () => {
 
 		it( 'displays a select control', async () => {
 			const user = userEvent.setup();
-			render(
-				<FontSizePicker
-					__nextHasNoMarginBottom
-					fontSizes={ fontSizes }
-				/>
-			);
+			render( <FontSizePicker fontSizes={ fontSizes } /> );
 			await user.click(
 				screen.getByRole( 'button', { name: 'Font size' } )
 			);
@@ -244,11 +222,7 @@ describe( 'FontSizePicker', () => {
 			'defaults to $option when value is $value',
 			( { value, option } ) => {
 				render(
-					<FontSizePicker
-						__nextHasNoMarginBottom
-						fontSizes={ fontSizes }
-						value={ value }
-					/>
+					<FontSizePicker fontSizes={ fontSizes } value={ value } />
 				);
 				expect(
 					screen.getByRole( 'button', { name: 'Font size' } )
@@ -267,11 +241,7 @@ describe( 'FontSizePicker', () => {
 			'displays $expectedLabel as label when value is $value',
 			( { value, expectedLabel } ) => {
 				render(
-					<FontSizePicker
-						__nextHasNoMarginBottom
-						fontSizes={ fontSizes }
-						value={ value }
-					/>
+					<FontSizePicker fontSizes={ fontSizes } value={ value } />
 				);
 				expect(
 					screen.getByLabelText( expectedLabel )
@@ -315,7 +285,6 @@ describe( 'FontSizePicker', () => {
 				const onChange = jest.fn();
 				render(
 					<FontSizePicker
-						__nextHasNoMarginBottom
 						fontSizes={ fontSizes }
 						value={ value }
 						onChange={ onChange }
@@ -366,12 +335,7 @@ describe( 'FontSizePicker', () => {
 		];
 
 		it( 'displays a toggle group control with t-shirt sizes', () => {
-			render(
-				<FontSizePicker
-					__nextHasNoMarginBottom
-					fontSizes={ fontSizes }
-				/>
-			);
+			render( <FontSizePicker fontSizes={ fontSizes } /> );
 			const options = screen.getAllByRole( 'radio' );
 			expect( options ).toHaveLength( 5 );
 			expect( options[ 0 ] ).toHaveTextContent( 'S' );
@@ -394,11 +358,7 @@ describe( 'FontSizePicker', () => {
 			'displays $expectedLabel as label when value is $value',
 			( { value, expectedLabel } ) => {
 				render(
-					<FontSizePicker
-						__nextHasNoMarginBottom
-						fontSizes={ fontSizes }
-						value={ value }
-					/>
+					<FontSizePicker fontSizes={ fontSizes } value={ value } />
 				);
 				expect(
 					screen.getByLabelText( expectedLabel )
@@ -410,11 +370,7 @@ describe( 'FontSizePicker', () => {
 			const user = userEvent.setup();
 			const onChange = jest.fn();
 			render(
-				<FontSizePicker
-					__nextHasNoMarginBottom
-					fontSizes={ fontSizes }
-					onChange={ onChange }
-				/>
+				<FontSizePicker fontSizes={ fontSizes } onChange={ onChange } />
 			);
 			await user.click( screen.getByRole( 'radio', { name: 'Medium' } ) );
 			expect( onChange ).toHaveBeenCalledTimes( 1 );
@@ -450,12 +406,7 @@ describe( 'FontSizePicker', () => {
 		];
 
 		it( 'displays a toggle group control with t-shirt sizes', () => {
-			render(
-				<FontSizePicker
-					__nextHasNoMarginBottom
-					fontSizes={ fontSizes }
-				/>
-			);
+			render( <FontSizePicker fontSizes={ fontSizes } /> );
 			const options = screen.getAllByRole( 'radio' );
 			expect( options ).toHaveLength( 4 );
 			expect( options[ 0 ] ).toHaveTextContent( 'S' );
@@ -481,11 +432,7 @@ describe( 'FontSizePicker', () => {
 			'displays $expectedLabel as label when value is $value',
 			( { value, expectedLabel } ) => {
 				render(
-					<FontSizePicker
-						__nextHasNoMarginBottom
-						fontSizes={ fontSizes }
-						value={ value }
-					/>
+					<FontSizePicker fontSizes={ fontSizes } value={ value } />
 				);
 				expect(
 					screen.getByLabelText( expectedLabel )
@@ -511,7 +458,6 @@ describe( 'FontSizePicker', () => {
 				const onChange = jest.fn();
 				render(
 					<FontSizePicker
-						__nextHasNoMarginBottom
 						fontSizes={ fontSizes }
 						onChange={ onChange }
 					/>
@@ -532,7 +478,6 @@ describe( 'FontSizePicker', () => {
 		it( 'defaults to M when value is 16px', () => {
 			render(
 				<FontSizePicker
-					__nextHasNoMarginBottom
 					fontSizes={ fontSizes }
 					value={ fontSizes[ 0 ].size }
 				/>
@@ -546,11 +491,7 @@ describe( 'FontSizePicker', () => {
 			'has no selection when value is %p',
 			( value ) => {
 				render(
-					<FontSizePicker
-						__nextHasNoMarginBottom
-						fontSizes={ fontSizes }
-						value={ value }
-					/>
+					<FontSizePicker fontSizes={ fontSizes } value={ value } />
 				);
 				expect( screen.getByRole( 'radiogroup' ) ).toBeInTheDocument();
 				expect(
@@ -565,11 +506,7 @@ describe( 'FontSizePicker', () => {
 			const user = userEvent.setup();
 			const onChange = jest.fn();
 			render(
-				<FontSizePicker
-					__nextHasNoMarginBottom
-					fontSizes={ fontSizes }
-					onChange={ onChange }
-				/>
+				<FontSizePicker fontSizes={ fontSizes } onChange={ onChange } />
 			);
 			await user.click(
 				screen.getByRole( 'button', { name: 'Font size' } )
@@ -584,13 +521,7 @@ describe( 'FontSizePicker', () => {
 
 	function commonTests( fontSizes: FontSize[] ) {
 		it( 'shows custom input when value is unknown', () => {
-			render(
-				<FontSizePicker
-					__nextHasNoMarginBottom
-					fontSizes={ fontSizes }
-					value="3px"
-				/>
-			);
+			render( <FontSizePicker fontSizes={ fontSizes } value="3px" /> );
 			expect( screen.getByLabelText( 'Custom' ) ).toBeInTheDocument();
 		} );
 
@@ -598,11 +529,7 @@ describe( 'FontSizePicker', () => {
 			const user = userEvent.setup();
 			const onChange = jest.fn();
 			render(
-				<FontSizePicker
-					__nextHasNoMarginBottom
-					fontSizes={ fontSizes }
-					onChange={ onChange }
-				/>
+				<FontSizePicker fontSizes={ fontSizes } onChange={ onChange } />
 			);
 			await user.click(
 				screen.getByRole( 'button', { name: 'Set custom size' } )
@@ -615,7 +542,6 @@ describe( 'FontSizePicker', () => {
 		it( 'does not allow custom values when disableCustomFontSizes is set', () => {
 			render(
 				<FontSizePicker
-					__nextHasNoMarginBottom
 					fontSizes={ fontSizes }
 					disableCustomFontSizes
 				/>
@@ -627,12 +553,7 @@ describe( 'FontSizePicker', () => {
 
 		it( 'does not display a slider by default', async () => {
 			const user = userEvent.setup();
-			render(
-				<FontSizePicker
-					__nextHasNoMarginBottom
-					fontSizes={ fontSizes }
-				/>
-			);
+			render( <FontSizePicker fontSizes={ fontSizes } /> );
 			await user.click(
 				screen.getByRole( 'button', { name: 'Set custom size' } )
 			);
@@ -646,7 +567,6 @@ describe( 'FontSizePicker', () => {
 			const onChange = jest.fn();
 			render(
 				<FontSizePicker
-					__nextHasNoMarginBottom
 					fontSizes={ fontSizes }
 					withSlider
 					onChange={ onChange }
@@ -668,7 +588,6 @@ describe( 'FontSizePicker', () => {
 			const onChange = jest.fn();
 			render(
 				<FontSizePicker
-					__nextHasNoMarginBottom
 					fontSizes={ fontSizes }
 					value={ fontSizes[ 0 ].size }
 					onChange={ onChange }
@@ -686,7 +605,6 @@ describe( 'FontSizePicker', () => {
 			const user = userEvent.setup();
 			render(
 				<FontSizePicker
-					__nextHasNoMarginBottom
 					fontSizes={ fontSizes }
 					value={ fontSizes[ 0 ].size }
 					withReset={ false }
@@ -705,7 +623,6 @@ describe( 'FontSizePicker', () => {
 
 			render(
 				<FontSizePicker
-					__nextHasNoMarginBottom
 					fontSizes={ fontSizes }
 					value={ fontSizes[ 0 ].size }
 					units={ [ 'px', 'ch', 'ex' ] }

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

@@ -55,8 +55,16 @@ export type FontSizePickerProps = {
 	 * can be safely removed once this happens.)
 	 *
 	 * @default false
+	 * @deprecated Default behavior since WP 6.5. Prop can be safely removed.
+	 * @ignore
 	 */
 	__nextHasNoMarginBottom?: boolean;
+	/**
+	 * Start opting into the larger default height that will become the default size in a future version.
+	 *
+	 * @default false
+	 */
+	__next40pxDefaultSize?: boolean;
 	/**
 	 * Size of the control.
 	 *
@@ -93,6 +101,7 @@ export type FontSizePickerSelectProps = Pick<
 	>;
 	onChange: NonNullable< FontSizePickerProps[ 'onChange' ] >;
 	onSelectCustom: () => void;
+	__next40pxDefaultSize: boolean;
 };
 
 export type FontSizePickerSelectOption = {
@@ -104,7 +113,7 @@ export type FontSizePickerSelectOption = {
 
 export type FontSizePickerToggleGroupProps = Pick<
 	FontSizePickerProps,
-	'value' | 'size' | '__nextHasNoMarginBottom'
+	'value' | 'size' | '__next40pxDefaultSize'
 > & {
 	fontSizes: NonNullable< FontSizePickerProps[ 'fontSizes' ] >;
 	onChange: NonNullable< FontSizePickerProps[ 'onChange' ] >;

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

@@ -19,7 +19,8 @@ import { parseQuantityAndUnitFromRawValue } from '../unit-control';
 export function isSimpleCssValue(
 	value: NonNullable< FontSizePickerProps[ 'value' ] >
 ) {
-	const sizeRegex = /^[\d\.]+(px|em|rem|vw|vh|%)?$/i;
+	const sizeRegex =
+		/^[\d\.]+(px|em|rem|vw|vh|%|svw|lvw|dvw|svh|lvh|dvh|vi|svi|lvi|dvi|vb|svb|lvb|dvb|vmin|svmin|lvmin|dvmin|vmax|svmax|lvmax|dvmax)?$/i;
 	return sizeRegex.test( String( value ) );
 }
 

package/src/form-file-upload/README.md

@@ -38,9 +38,9 @@ Children are passed as children of `Button`.
 
 ### icon
 
-The icon to render. Supported values are: Dashicons (specified as strings), functions, WPComponent instances and `null`.
+The icon to render. Supported values are: Dashicons (specified as strings), functions, Component instances and `null`.
 
--   Type: `String|Function|WPComponent|null`
+-   Type: `String|Function|Component|null`
 -   Required: No
 -   Default: `null`
 

package/src/form-file-upload/index.tsx

@@ -7,7 +7,7 @@ import { useRef } from '@wordpress/element';
  * Internal dependencies
  */
 import Button from '../button';
-import type { WordPressComponentProps } from '../ui/context';
+import type { WordPressComponentProps } from '../context';
 import type { FormFileUploadProps } from './types';
 
 /**

package/src/form-toggle/README.md

@@ -4,12 +4,6 @@ FormToggle switches a single setting on or off.
 
 ![On and off FormToggles. The top toggle is on, while the bottom toggle is off.](https://wordpress.org/gutenberg/files/2019/01/Toggle.jpg)
 
-## Table of contents
-
-1. [Design guidelines](#design-guidelines)
-2. [Development guidelines](#development-guidelines)
-3. [Related components](#related-components)
-
 ## Design guidelines
 
 ### Usage
@@ -54,8 +48,8 @@ When a user switches a toggle, its corresponding action takes effect immediately
 ### Usage
 
 ```jsx
+import { useState } from 'react';
 import { FormToggle } from '@wordpress/components';
-import { useState } from '@wordpress/element';
 
 const MyFormToggle = () => {
 	const [ isChecked, setChecked ] = useState( true );

package/src/form-toggle/index.tsx

@@ -7,7 +7,7 @@ import classnames from 'classnames';
  * Internal dependencies
  */
 import type { FormToggleProps } from './types';
-import type { WordPressComponentProps } from '../ui/context';
+import type { WordPressComponentProps } from '../context';
 
 export const noop = () => {};
 

package/src/form-toggle/style.scss

@@ -1,6 +1,11 @@
+@use "sass:math";
+
 $toggle-width: 36px;
 $toggle-height: 18px;
 $toggle-border-width: 1px;
+$thumb-size:  $toggle-height - ($toggle-border-width * 6);
+
+$transition-duration: 0.2s;
 
 .components-form-toggle {
 	position: relative;
@@ -8,6 +13,7 @@ $toggle-border-width: 1px;
 
 	// Unchecked state.
 	.components-form-toggle__track {
+		position: relative;
 		content: "";
 		display: inline-block;
 		box-sizing: border-box;
@@ -16,9 +22,27 @@ $toggle-border-width: 1px;
 		border: $toggle-border-width solid $gray-900;
 		width: $toggle-width;
 		height: $toggle-height;
-		border-radius: $toggle-height * 0.5;
-		transition: 0.2s background ease;
+		border-radius: math.div($toggle-height, 2);
+		transition:
+			$transition-duration background-color ease,
+			$transition-duration border-color ease;
 		@include reduce-motion("transition");
+		overflow: hidden;
+
+		// Windows High Contrast Mode
+		&::after {
+			content: "";
+			position: absolute;
+			inset: 0;
+			box-sizing: border-box;
+			// Expand the border to fake a solid in Windows High Contrast Mode.
+			border-top: #{ $toggle-height } solid transparent;
+
+			transition: $transition-duration opacity ease;
+			@include reduce-motion("transition");
+
+			opacity: 0;
+		}
 	}
 
 	.components-form-toggle__thumb {
@@ -27,20 +51,28 @@ $toggle-border-width: 1px;
 		box-sizing: border-box;
 		top: $toggle-border-width * 3;
 		left: $toggle-border-width * 3;
-		width: $toggle-height - ($toggle-border-width * 6);
-		height: $toggle-height - ($toggle-border-width * 6);
+		width: $thumb-size;
+		height: $thumb-size;
 		border-radius: 50%;
-		transition: 0.1s transform ease;
+		transition:
+			$transition-duration transform ease,
+			$transition-duration background-color ease-out;
 		@include reduce-motion("transition");
 		background-color: $gray-900;
-		border: 5px solid $gray-900; // Has explicit border to act as a fill in Windows High Contrast Mode.
+
+		// Transparent border acts as a fill in Windows High Contrast Mode.
+		border: math.div($thumb-size, 2) solid transparent;
 	}
 
 	// Checked state.
 	&.is-checked .components-form-toggle__track {
 		background-color: $components-color-accent;
-		border: $toggle-border-width solid $components-color-accent;
-		border: #{ $toggle-height * 0.5 } solid transparent; // Expand the border to fake a solid in Windows High Contrast Mode.
+		border-color: $components-color-accent;
+
+		// Windows High Contrast Mode
+		&::after {
+			opacity: 1;
+		}
 	}
 
 	.components-form-toggle__input:focus + .components-form-toggle__track {

package/src/form-token-field/README.md

@@ -62,12 +62,13 @@ The `value` property is handled in a manner similar to controlled form component
 -   `__experimentalValidateInput` - If passed, all introduced values will be validated before being added as tokens.
 -   `__experimentalAutoSelectFirstMatch` - If true, the select the first matching suggestion when the user presses the Enter key (or space when tokenizeOnSpace is true).
 -   `__nextHasNoMarginBottom` - Start opting into the new margin-free styles that will become the default in a future version, currently scheduled to be WordPress 6.5. (The prop can be safely removed once this happens.)
+-   `tokenizeOnBlur` - If true, add any incompleteTokenValue as a new token when the field loses focus.
 
 ## Usage
 
 ```jsx
+import { useState } from 'react';
 import { FormTokenField } from '@wordpress/components';
-import { useState } from '@wordpress/element';
 
 const continents = [
 	'Africa',

package/src/form-token-field/index.tsx

@@ -2,7 +2,7 @@
  * External dependencies
  */
 import classnames from 'classnames';
-import type { KeyboardEvent, MouseEvent, TouchEvent } from 'react';
+import type { KeyboardEvent, MouseEvent, TouchEvent, FocusEvent } from 'react';
 
 /**
  * WordPress dependencies
@@ -73,10 +73,8 @@ export function FormTokenField( props: FormTokenFieldProps ) {
 		__next40pxDefaultSize = false,
 		__experimentalAutoSelectFirstMatch = false,
 		__nextHasNoMarginBottom = false,
-	} = useDeprecated36pxDefaultSizeProp< FormTokenFieldProps >(
-		props,
-		'wp.components.FormTokenField'
-	);
+		tokenizeOnBlur = false,
+	} = useDeprecated36pxDefaultSizeProp< FormTokenFieldProps >( props );
 
 	const instanceId = useInstanceId( FormTokenField );
 
@@ -161,18 +159,33 @@ export function FormTokenField( props: FormTokenFieldProps ) {
 		}
 	}
 
-	function onBlur() {
+	function onBlur( event: FocusEvent ) {
 		if (
 			inputHasValidValue() &&
 			__experimentalValidateInput( incompleteTokenValue )
 		) {
 			setIsActive( false );
+			if ( tokenizeOnBlur && inputHasValidValue() ) {
+				addNewToken( incompleteTokenValue );
+			}
 		} else {
 			// Reset to initial state
 			setIncompleteTokenValue( '' );
 			setInputOffsetFromEnd( 0 );
 			setIsActive( false );
-			setIsExpanded( false );
+
+			if ( __experimentalExpandOnFocus ) {
+				// If `__experimentalExpandOnFocus` is true, don't close the suggestions list when
+				// the user clicks on it (`tokensAndInput` will be the element that caused the blur).
+				const hasFocusWithin =
+					event.relatedTarget === tokensAndInput.current;
+				setIsExpanded( hasFocusWithin );
+			} else {
+				// Else collapse the suggestion list. This will result in the suggestion list closing
+				// after a suggestion has been submitted since that causes a blur.
+				setIsExpanded( false );
+			}
+
 			setSelectedSuggestionIndex( -1 );
 			setSelectedSuggestionScroll( false );
 		}
@@ -451,7 +464,7 @@ export function FormTokenField( props: FormTokenFieldProps ) {
 		setSelectedSuggestionScroll( false );
 		setIsExpanded( ! __experimentalExpandOnFocus );
 
-		if ( isActive ) {
+		if ( isActive && ! tokenizeOnBlur ) {
 			focus();
 		}
 	}

package/src/form-token-field/style.scss

@@ -157,30 +157,28 @@
 .components-form-token-field__suggestions-list {
 	flex: 1 0 100%;
 	min-width: 100%;
-	max-height: 9em;
+	max-height: $grid-unit-80 * 2;
 	overflow-y: auto;
 	transition: all 0.15s ease-in-out;
 	@include reduce-motion("transition");
 	list-style: none;
-	border-top: $border-width solid $components-color-border;
+	box-shadow: inset 0 $border-width 0 0 $gray-600; // Matches the border color of the input.
 	margin: 0;
 	padding: 0;
 }
 
 .components-form-token-field__suggestion {
-	color: $gray-700;
+	color: $gray-900;
 	display: block;
 	font-size: $default-font-size;
-	padding: 4px 8px;
+	padding: $grid-unit-10 $grid-unit-15;
+	min-height: $button-size-compact;
 	margin: 0;
 	cursor: pointer;
+	box-sizing: border-box;
 
 	&.is-selected {
 		background: $components-color-accent;
 		color: $white;
 	}
 }
-
-.components-form-token-field__suggestion-match {
-	text-decoration: underline;
-}

package/src/form-token-field/styles.ts

@@ -8,7 +8,7 @@ import { css } from '@emotion/react';
  * Internal dependencies
  */
 import { Flex } from '../flex';
-import { space } from '../ui/utils/space';
+import { space } from '../utils/space';
 import { boxSizingReset } from '../utils';
 
 type TokensAndInputWrapperProps = {