@wordpress/components 21.2.0 → 21.3.0

package/src/border-box-control/test/index.js

@@ -120,17 +120,20 @@ describe( 'BorderBoxControl', () => {
 			expect( widthInput.value ).toBe( '1' );
 		} );
 
-		it( 'should render placeholder when border values are mixed', () => {
+		it( 'should render placeholder and omit unit select when border values are mixed', () => {
 			renderBorderBoxControl( { value: mixedBorders } );
 
 			// First render of control with mixed values should show split view.
 			clickButton( 'Link sides' );
 
 			const widthInput = screen.getByRole( 'spinbutton' );
+			const unitSelect = screen.queryByRole( 'combobox' );
+
 			expect( widthInput ).toHaveAttribute( 'placeholder', 'Mixed' );
+			expect( unitSelect ).not.toBeInTheDocument();
 		} );
 
-		it( 'should render shared border width when switching to linked view', async () => {
+		it( 'should render shared border width and unit select when switching to linked view', async () => {
 			// Render control with mixed border values but consistent widths.
 			renderBorderBoxControl( {
 				value: {
@@ -144,8 +147,10 @@ describe( 'BorderBoxControl', () => {
 			// First render of control with mixed values should show split view.
 			clickButton( 'Link sides' );
 			const linkedInput = screen.getByRole( 'spinbutton' );
+			const unitSelect = screen.getByRole( 'combobox' );
 
 			expect( linkedInput.value ).toBe( '5' );
+			expect( unitSelect ).toBeInTheDocument();
 		} );
 
 		it( 'should omit style options when requested', () => {

package/src/border-control/border-control/README.md

@@ -66,6 +66,12 @@ This toggles the ability to choose custom colors.
 
 - Required: No
 
+### `disableUnits`: `boolean`
+
+This controls whether unit selection should be disabled.
+
+- Required: No
+
 ### `enableAlpha`: `boolean`
 
 This controls whether the alpha channel will be offered when selecting

package/src/border-control/border-control/component.tsx

@@ -39,6 +39,7 @@ const UnconnectedBorderControl = (
 	const {
 		colors,
 		disableCustomColors,
+		disableUnits,
 		enableAlpha,
 		enableStyle = true,
 		hideLabelFromVision,
@@ -97,6 +98,7 @@ const UnconnectedBorderControl = (
 					onChange={ onWidthChange }
 					value={ border?.width || '' }
 					placeholder={ placeholder }
+					disableUnits={ disableUnits }
 					__unstableInputWidth={ inputWidth }
 				/>
 				{ withSlider && (

package/src/border-control/types.ts

@@ -67,6 +67,10 @@ export type LabelProps = {
 
 export type BorderControlProps = ColorProps &
 	LabelProps & {
+		/**
+		 * This controls whether unit selection should be disabled.
+		 */
+		disableUnits?: boolean;
 		/**
 		 * This controls whether to include border style options within the
 		 * `BorderDropdown` sub-component.

package/src/button/style.scss

@@ -20,7 +20,7 @@
 
 	&[aria-expanded="true"],
 	&:hover {
-		color: var(--wp-admin-theme-color);
+		color: $components-color-accent;
 	}
 
 	// Unset some hovers, instead of adding :not specificity.
@@ -31,7 +31,7 @@
 	// Focus.
 	// See https://github.com/WordPress/gutenberg/issues/13267 for more context on these selectors.
 	&:focus:not(:disabled) {
-		box-shadow: 0 0 0 var(--wp-admin-border-width-focus) var(--wp-admin-theme-color);
+		box-shadow: 0 0 0 var(--wp-admin-border-width-focus) $components-color-accent;
 
 		// Windows High Contrast mode will show this outline, but not the box-shadow.
 		outline: 3px solid transparent;
@@ -43,7 +43,7 @@
 
 	&.is-primary {
 		white-space: nowrap;
-		background: var(--wp-admin-theme-color);
+		background: $components-color-accent;
 		color: $white;
 		text-decoration: none;
 		text-shadow: none;
@@ -52,18 +52,18 @@
 		outline: 1px solid transparent;
 
 		&:hover:not(:disabled) {
-			background: var(--wp-admin-theme-color-darker-10);
+			background: $components-color-accent-darker-10;
 			color: $white;
 		}
 
 		&:active:not(:disabled) {
-			background: var(--wp-admin-theme-color-darker-20);
-			border-color: var(--wp-admin-theme-color-darker-20);
+			background: $components-color-accent-darker-20;
+			border-color: $components-color-accent-darker-20;
 			color: $white;
 		}
 
 		&:focus:not(:disabled) {
-			box-shadow: inset 0 0 0 1px $white, 0 0 0 var(--wp-admin-border-width-focus) var(--wp-admin-theme-color);
+			box-shadow: inset 0 0 0 1px $white, 0 0 0 var(--wp-admin-border-width-focus) $components-color-accent;
 		}
 
 		&:disabled,
@@ -72,15 +72,15 @@
 		&[aria-disabled="true"]:enabled, // This catches a situation where a Button is aria-disabled, but not disabled.
 		&[aria-disabled="true"]:active:enabled {
 			color: rgba($white, 0.4);
-			background: var(--wp-admin-theme-color);
-			border-color: var(--wp-admin-theme-color);
+			background: $components-color-accent;
+			border-color: $components-color-accent;
 			opacity: 1;
 			outline: none;
 
 			&:focus:enabled {
 				box-shadow:
 					0 0 0 $border-width $white,
-					0 0 0 3px var(--wp-admin-theme-color);
+					0 0 0 3px $components-color-accent;
 			}
 		}
 
@@ -93,13 +93,13 @@
 			/* stylelint-disable */
 			background-image: linear-gradient(
 				-45deg,
-				var(--wp-admin-theme-color) 33%,
-				var(--wp-admin-theme-color-darker-20) 33%,
-				var(--wp-admin-theme-color-darker-20) 70%,
-				var(--wp-admin-theme-color) 70%
+				$components-color-accent 33%,
+				$components-color-accent-darker-20 33%,
+				$components-color-accent-darker-20 70%,
+				$components-color-accent 70%
 			);
 			/* stylelint-enable */
-			border-color: var(--wp-admin-theme-color);
+			border-color: $components-color-accent;
 		}
 	}
 
@@ -114,13 +114,13 @@
 
 		&:active:not(:disabled) {
 			background: $gray-300;
-			color: var(--wp-admin-theme-color-darker-10);
+			color: $components-color-accent-darker-10;
 			box-shadow: none;
 		}
 
 		&:hover:not(:disabled) {
-			color: var(--wp-admin-theme-color-darker-10);
-			box-shadow: inset 0 0 0 $border-width var(--wp-admin-theme-color-darker-10);
+			color: $components-color-accent-darker-10;
+			box-shadow: inset 0 0 0 $border-width $components-color-accent-darker-10;
 		}
 
 		&:disabled,
@@ -140,10 +140,10 @@
 	 */
 
 	&.is-secondary {
-		box-shadow: inset 0 0 0 $border-width var(--wp-admin-theme-color);
+		box-shadow: inset 0 0 0 $border-width $components-color-accent;
 		outline: 1px solid transparent; // Shown in high contrast mode.
 		white-space: nowrap;
-		color: var(--wp-admin-theme-color);
+		color: $components-color-accent;
 		background: transparent;
 	}
 
@@ -153,7 +153,7 @@
 
 	&.is-tertiary {
 		white-space: nowrap;
-		color: var(--wp-admin-theme-color);
+		color: $components-color-accent;
 		background: transparent;
 		padding: $grid-unit-15 * 0.5; // This reduces the horizontal padding on tertiary/text buttons, so as to space them optically.
 
@@ -182,7 +182,7 @@
 		}
 
 		&:focus:not(:disabled) {
-			color: var(--wp-admin-theme-color);
+			color: $components-color-accent;
 		}
 
 		&:active:not(:disabled) {
@@ -230,7 +230,7 @@
 		background: none;
 		outline: none;
 		text-align: left;
-		color: var(--wp-admin-theme-color);
+		color: $components-color-accent;
 		text-decoration: underline;
 		transition-property: border, background, color;
 		transition-duration: 0.05s;
@@ -253,7 +253,7 @@
 			}
 
 			&:focus:not(:disabled) {
-				color: var(--wp-admin-theme-color);
+				color: $components-color-accent;
 			}
 		}
 	}
@@ -333,7 +333,7 @@
 		background: $gray-900;
 
 		&:focus:not(:disabled) {
-			box-shadow: inset 0 0 0 1px $white, 0 0 0 var(--wp-admin-border-width-focus) var(--wp-admin-theme-color);
+			box-shadow: inset 0 0 0 1px $white, 0 0 0 var(--wp-admin-border-width-focus) $components-color-accent;
 
 			// Windows High Contrast mode will show this outline, but not the box-shadow.
 			outline: 2px solid transparent;

package/src/button/test/index.js

@@ -27,7 +27,7 @@ describe( 'Button', () => {
 			expect( button ).not.toHaveClass( 'is-large' );
 			expect( button ).not.toHaveClass( 'is-primary' );
 			expect( button ).not.toHaveClass( 'is-pressed' );
-			expect( button ).not.toHaveAttribute( 'disabled' );
+			expect( button ).toBeEnabled();
 			expect( button ).not.toHaveAttribute( 'aria-disabled' );
 			expect( button ).toHaveAttribute( 'type', 'button' );
 		} );
@@ -114,16 +114,14 @@ describe( 'Button', () => {
 		it( 'should add a disabled prop to the button', () => {
 			render( <Button disabled /> );
 
-			expect( screen.getByRole( 'button' ) ).toHaveAttribute(
-				'disabled'
-			);
+			expect( screen.getByRole( 'button' ) ).toBeDisabled();
 		} );
 
 		it( 'should add only aria-disabled attribute when disabled and isFocusable are true', () => {
 			render( <Button disabled __experimentalIsFocusable /> );
 			const button = screen.getByRole( 'button' );
 
-			expect( button ).not.toHaveAttribute( 'disabled' );
+			expect( button ).toBeEnabled();
 			expect( button ).toHaveAttribute( 'aria-disabled' );
 		} );
 

package/src/combobox-control/test/index.js

@@ -271,7 +271,7 @@ describe.each( [
 
 		// No options are rendered if no match is found
 		await user.keyboard( unmatchedString );
-		expect( screen.queryByRole( 'option' ) ).toBeNull();
+		expect( screen.queryByRole( 'option' ) ).not.toBeInTheDocument();
 
 		// Clearing the input renders all options again
 		await user.clear( input );

package/src/confirm-dialog/types.ts

@@ -3,7 +3,13 @@
  */
 import type { MouseEvent, KeyboardEvent, ReactNode } from 'react';
 
+/**
+ * Internal dependencies
+ */
+import type { ModalProps } from '../modal/types';
+
 export type DialogInputEvent =
+	| Parameters< ModalProps[ 'onRequestClose' ] >[ 0 ]
 	| KeyboardEvent< HTMLDivElement >
 	| MouseEvent< HTMLButtonElement >;
 

package/src/date-time/time/test/index.tsx

@@ -303,12 +303,8 @@ describe( 'TimePicker', () => {
 		 * This is not ideal, but best of we can do for now until we refactor
 		 * AM/PM into accessible elements, like radio buttons.
 		 */
-		expect(
-			screen.getByText( 'AM' ).classList.contains( 'is-primary' )
-		).toBe( false );
-		expect(
-			screen.getByText( 'PM' ).classList.contains( 'is-primary' )
-		).toBe( true );
+		expect( screen.getByText( 'AM' ) ).not.toHaveClass( 'is-primary' );
+		expect( screen.getByText( 'PM' ) ).toHaveClass( 'is-primary' );
 	} );
 
 	it( 'should have different layouts/orders for 12/24 hour formats', () => {

package/src/disabled/index.tsx

@@ -1,13 +1,7 @@
-/**
- * External dependencies
- */
-import type { HTMLProps } from 'react';
-
 /**
  * WordPress dependencies
  */
-import { useDisabled } from '@wordpress/compose';
-import { createContext, forwardRef } from '@wordpress/element';
+import { createContext } from '@wordpress/element';
 
 /**
  * Internal dependencies
@@ -20,15 +14,6 @@ import { useCx } from '../utils';
 const Context = createContext< boolean >( false );
 const { Consumer, Provider } = Context;
 
-// Extracting this ContentWrapper component in order to make it more explicit
-// the same 'ContentWrapper' component is needed so that React can reconcile
-// the dom correctly when switching between disabled/non-disabled (instead
-// of thrashing the previous DOM and therefore losing the form fields values).
-const ContentWrapper = forwardRef<
-	HTMLDivElement,
-	HTMLProps< HTMLDivElement >
->( ( props, ref ) => <div { ...props } ref={ ref } /> );
-
 /**
  * `Disabled` is a component which disables descendant tabbable elements and prevents pointer interaction.
  *
@@ -65,29 +50,22 @@ function Disabled( {
 	isDisabled = true,
 	...props
 }: WordPressComponentProps< DisabledProps, 'div' > ) {
-	const ref = useDisabled();
 	const cx = useCx();
-	if ( ! isDisabled ) {
-		return (
-			<Provider value={ false }>
-				<ContentWrapper>{ children }</ContentWrapper>
-			</Provider>
-		);
-	}
 
 	return (
-		<Provider value={ true }>
-			<ContentWrapper
-				ref={ ref }
-				className={ cx(
-					disabledStyles,
-					className,
-					'components-disabled'
-				) }
+		<Provider value={ isDisabled }>
+			<div
+				// @ts-ignore Reason: inert is a recent HTML attribute
+				inert={ isDisabled ? 'true' : undefined }
+				className={
+					isDisabled
+						? cx( disabledStyles, className, 'components-disabled' )
+						: undefined
+				}
 				{ ...props }
 			>
 				{ children }
-			</ContentWrapper>
+			</div>
 		</Provider>
 	);
 }

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.tsx

@@ -139,7 +139,7 @@ const UnforwardedFontSizePicker = (
 		}
 
 		// Calculate the `hint` for toggle group control.
-		let hint = selectedOption.name;
+		let hint = selectedOption?.name || selectedOption.slug;
 		if (
 			! fontSizesContainComplexValues &&
 			typeof selectedOption.size === 'string'

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

@@ -19,12 +19,14 @@ export const Container = styled.fieldset`
 `;
 
 export const HeaderLabel = styled( BaseControl.VisualLabel )`
+	display: flex;
+	gap: ${ space( 1 ) };
+	justify-content: flex-start;
 	margin-bottom: 0;
 `;
 
 export const HeaderHint = styled.span`
 	color: ${ COLORS.gray[ 700 ] };
-	margin-left: ${ space( 1 ) };
 `;
 
 export const Controls = styled.div< {

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

@@ -215,7 +215,7 @@ describe( 'FontSizePicker', () => {
 				);
 				const element = screen.getByLabelText( 'Large' );
 				expect( element ).toBeInTheDocument();
-				expect( element.children[ 0 ].textContent ).toBe( 'L' );
+				expect( element.children[ 0 ] ).toHaveTextContent( 'L' );
 			} );
 			it( 'should use incremental sequence of t-shirt sizes as labels if we have complex css', () => {
 				const fontSizes = [
@@ -240,7 +240,7 @@ describe( 'FontSizePicker', () => {
 				const extraLargeElement =
 					screen.getByLabelText( 'Extra Large' );
 				expect( extraLargeElement ).toBeInTheDocument();
-				expect( extraLargeElement.children[ 0 ].textContent ).toBe(
+				expect( extraLargeElement.children[ 0 ] ).toHaveTextContent(
 					'XL'
 				);
 			} );

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

@@ -120,33 +120,33 @@ describe( 'getToggleGroupOptions', () => {
 		).toEqual( [
 			{
 				key: '1',
-				value: '1',
 				label: 'S',
 				name: '1',
+				value: '1',
 			},
 			{
 				key: '2',
-				value: '2',
 				label: 'M',
 				name: '2',
+				value: '2',
 			},
 			{
 				key: '3',
-				value: '3',
 				label: 'L',
 				name: '3',
+				value: '3',
 			},
 			{
 				key: '4',
-				value: '4',
 				label: 'XL',
 				name: '4',
+				value: '4',
 			},
 			{
 				key: '5',
-				value: '5',
 				label: 'XXL',
 				name: 'XXL',
+				value: '5',
 			},
 		] );
 	} );

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

@@ -112,7 +112,7 @@ function getSelectOptions(
 	];
 	return options.map( ( { slug, name, size } ) => ( {
 		key: slug,
-		name,
+		name: name || slug,
 		size,
 		__experimentalHint:
 			size && isSimpleCssValue( size ) && parseFloat( String( size ) ),

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

@@ -41,7 +41,7 @@ describe( 'FormFileUpload', () => {
 		const button = screen.getByText( 'My Upload Button' );
 		const input = screen.getByTestId( 'form-file-upload-input' );
 		expect( button ).toBeInTheDocument();
-		expect( input.style.display ).toBe( 'none' );
+		expect( input ).toHaveStyle( 'display: none' );
 	} );
 
 	it( 'should not fire a change event after selecting the same file', async () => {

package/src/form-token-field/suggestions-list.tsx

@@ -38,7 +38,7 @@ export function SuggestionsList< T extends string | { value: string } >( {
 		( listNode ) => {
 			// only have to worry about scrolling selected suggestion into view
 			// when already expanded.
-			let id: number;
+			let rafId: number | undefined;
 			if (
 				selectedIndex > -1 &&
 				scrollIntoView &&
@@ -52,14 +52,14 @@ export function SuggestionsList< T extends string | { value: string } >( {
 						onlyScrollIfNeeded: true,
 					}
 				);
-				id = window.setTimeout( () => {
+				rafId = requestAnimationFrame( () => {
 					setScrollingIntoView( false );
-				}, 100 );
+				} );
 			}
 
 			return () => {
-				if ( id !== undefined ) {
-					window.clearTimeout( id );
+				if ( rafId !== undefined ) {
+					cancelAnimationFrame( rafId );
 				}
 			};
 		},