@wordpress/components 25.15.1-next.79a6196f.0 → 26.0.0

package/src/palette-edit/test/index.tsx

@@ -1,7 +1,8 @@
 /**
  * External dependencies
  */
-import { render, fireEvent, screen } from '@testing-library/react';
+import { render, screen, waitFor } from '@testing-library/react';
+import { click, type, press } from '@ariakit/test';
 
 /**
  * Internal dependencies
@@ -9,6 +10,17 @@ import { render, fireEvent, screen } from '@testing-library/react';
 import PaletteEdit, { getNameForPosition } from '..';
 import type { PaletteElement } from '../types';
 
+const noop = () => {};
+
+async function clearInput( input: HTMLInputElement ) {
+	await click( input );
+
+	// Press backspace as many times as the input's current value
+	for ( const _ of Array( input.value.length ) ) {
+		await press.Backspace();
+	}
+}
+
 describe( 'getNameForPosition', () => {
 	test( 'should return 1 by default', () => {
 		const slugPrefix = 'test-';
@@ -82,18 +94,322 @@ describe( 'getNameForPosition', () => {
 
 describe( 'PaletteEdit', () => {
 	const defaultProps = {
-		colors: [ { color: '#ffffff', name: 'Base', slug: 'base' } ],
-		onChange: jest.fn(),
 		paletteLabel: 'Test label',
-		emptyMessage: 'Test empty message',
-		canOnlyChangeValues: true,
-		canReset: true,
 		slugPrefix: '',
+		onChange: noop,
 	};
 
-	it( 'opens color selector for color palettes', () => {
-		render( <PaletteEdit { ...defaultProps } /> );
-		fireEvent.click( screen.getByLabelText( 'Color: Base' ) );
-		expect( screen.getByLabelText( 'Hex color' ) ).toBeInTheDocument();
+	const colors = [
+		{ color: '#1a4548', name: 'Primary', slug: 'primary' },
+		{ color: '#0000ff', name: 'Secondary', slug: 'secondary' },
+	];
+	const gradients = [
+		{
+			gradient:
+				'linear-gradient(135deg,rgb(255,245,203) 0%,rgb(182,227,212) 50%,rgb(51,167,181) 100%)',
+			name: 'Pale ocean',
+			slug: 'pale-ocean',
+		},
+		{
+			gradient:
+				'linear-gradient(135deg,rgb(2,3,129) 0%,rgb(40,116,252) 100%)',
+			name: 'Midnight',
+			slug: 'midnight',
+		},
+	];
+
+	it( 'shows heading label', () => {
+		render( <PaletteEdit { ...defaultProps } colors={ colors } /> );
+
+		const paletteLabel = screen.getByRole( 'heading', {
+			level: 2,
+			name: 'Test label',
+		} );
+
+		expect( paletteLabel ).toBeVisible();
+	} );
+
+	it( 'shows heading label with custom heading level', () => {
+		render(
+			<PaletteEdit
+				{ ...defaultProps }
+				colors={ colors }
+				paletteLabelHeadingLevel={ 5 }
+			/>
+		);
+
+		expect(
+			screen.getByRole( 'heading', {
+				level: 5,
+				name: 'Test label',
+			} )
+		).toBeVisible();
+	} );
+
+	it( 'shows empty message', () => {
+		render(
+			<PaletteEdit
+				{ ...defaultProps }
+				emptyMessage={ 'Test empty message' }
+			/>
+		);
+
+		expect( screen.getByText( 'Test empty message' ) ).toBeVisible();
+	} );
+
+	it( 'shows an option to remove all colors', async () => {
+		render( <PaletteEdit { ...defaultProps } colors={ colors } /> );
+
+		await click(
+			screen.getByRole( 'button', {
+				name: 'Color options',
+			} )
+		);
+
+		expect(
+			screen.getByRole( 'button', {
+				name: 'Remove all colors',
+			} )
+		).toBeVisible();
+	} );
+
+	it( 'shows a reset option when the `canReset` prop is enabled', async () => {
+		render(
+			<PaletteEdit { ...defaultProps } colors={ colors } canReset />
+		);
+
+		await click(
+			screen.getByRole( 'button', {
+				name: 'Color options',
+			} )
+		);
+		expect(
+			screen.getByRole( 'button', {
+				name: 'Reset colors',
+			} )
+		).toBeVisible();
+	} );
+
+	it( 'does not show a reset colors option when `canReset` is disabled', async () => {
+		render( <PaletteEdit { ...defaultProps } colors={ colors } /> );
+
+		await click(
+			screen.getByRole( 'button', {
+				name: 'Color options',
+			} )
+		);
+		expect(
+			screen.queryByRole( 'button', {
+				name: 'Reset colors',
+			} )
+		).not.toBeInTheDocument();
+	} );
+
+	it( 'calls the `onChange` with the new color appended', async () => {
+		const onChange = jest.fn();
+
+		render(
+			<PaletteEdit
+				{ ...defaultProps }
+				colors={ colors }
+				onChange={ onChange }
+			/>
+		);
+
+		await click(
+			screen.getByRole( 'button', {
+				name: 'Add color',
+			} )
+		);
+
+		await waitFor( () => {
+			expect( onChange ).toHaveBeenCalledWith( [
+				...colors,
+				{
+					color: '#000',
+					name: 'Color 1',
+					slug: 'color-1',
+				},
+			] );
+		} );
+	} );
+
+	it( 'calls the `onChange` with the new gradient appended', async () => {
+		const onChange = jest.fn();
+
+		render(
+			<PaletteEdit
+				{ ...defaultProps }
+				gradients={ gradients }
+				onChange={ onChange }
+			/>
+		);
+
+		await click(
+			screen.getByRole( 'button', {
+				name: 'Add gradient',
+			} )
+		);
+
+		await waitFor( () => {
+			expect( onChange ).toHaveBeenCalledWith( [
+				...gradients,
+				{
+					gradient:
+						'linear-gradient(135deg, rgba(6, 147, 227, 1) 0%, rgb(155, 81, 224) 100%)',
+					name: 'Color 1',
+					slug: 'color-1',
+				},
+			] );
+		} );
+	} );
+
+	it( 'can not add new colors when `canOnlyChangeValues` is enabled', () => {
+		render( <PaletteEdit { ...defaultProps } canOnlyChangeValues /> );
+
+		expect(
+			screen.queryByRole( 'button', {
+				name: 'Add color',
+			} )
+		).not.toBeInTheDocument();
+	} );
+
+	it( 'can remove a color', async () => {
+		const onChange = jest.fn();
+
+		render(
+			<PaletteEdit
+				{ ...defaultProps }
+				colors={ colors }
+				onChange={ onChange }
+			/>
+		);
+
+		await click(
+			screen.getByRole( 'button', {
+				name: 'Color options',
+			} )
+		);
+		await click(
+			screen.getByRole( 'button', {
+				name: 'Show details',
+			} )
+		);
+		await click( screen.getByRole( 'button', { name: 'Edit: Primary' } ) );
+		await click(
+			screen.getByRole( 'button', {
+				name: 'Remove color',
+			} )
+		);
+
+		await waitFor( () => {
+			expect( onChange ).toHaveBeenCalledWith( [ colors[ 1 ] ] );
+		} );
+	} );
+
+	it( 'can update palette name', async () => {
+		const onChange = jest.fn();
+
+		render(
+			<PaletteEdit
+				{ ...defaultProps }
+				colors={ colors }
+				onChange={ onChange }
+			/>
+		);
+
+		await click(
+			screen.getByRole( 'button', {
+				name: 'Color options',
+			} )
+		);
+		await click(
+			screen.getByRole( 'button', {
+				name: 'Show details',
+			} )
+		);
+		await click( screen.getByRole( 'button', { name: 'Edit: Primary' } ) );
+		const nameInput = screen.getByRole( 'textbox', {
+			name: 'Color name',
+		} );
+
+		await clearInput( nameInput as HTMLInputElement );
+
+		await type( 'Primary Updated' );
+
+		await waitFor( () => {
+			expect( onChange ).toHaveBeenCalledWith( [
+				{
+					...colors[ 0 ],
+					name: 'Primary Updated',
+					slug: 'primary-updated',
+				},
+				colors[ 1 ],
+			] );
+		} );
+	} );
+
+	it( 'can update color palette value', async () => {
+		const onChange = jest.fn();
+
+		render(
+			<PaletteEdit
+				{ ...defaultProps }
+				colors={ colors }
+				onChange={ onChange }
+			/>
+		);
+
+		await click( screen.getByLabelText( 'Color: Primary' ) );
+		const hexInput = screen.getByRole( 'textbox', {
+			name: 'Hex color',
+		} );
+
+		await clearInput( hexInput as HTMLInputElement );
+
+		await type( '000000' );
+
+		await waitFor( () => {
+			expect( onChange ).toHaveBeenCalledWith( [
+				{
+					...colors[ 0 ],
+					color: '#000000',
+				},
+				colors[ 1 ],
+			] );
+		} );
+	} );
+
+	it( 'can update gradient palette value', async () => {
+		const onChange = jest.fn();
+
+		render(
+			<PaletteEdit
+				{ ...defaultProps }
+				gradients={ gradients }
+				onChange={ onChange }
+			/>
+		);
+
+		await click( screen.getByLabelText( 'Gradient: Pale ocean' ) );
+
+		// Select radial gradient option
+		await click(
+			screen.getByRole( 'combobox', {
+				name: 'Type',
+			} )
+		);
+		await click( screen.getByRole( 'option', { name: 'Radial' } ) );
+
+		await waitFor( () => {
+			expect( onChange ).toHaveBeenCalledWith( [
+				{
+					...gradients[ 0 ],
+					gradient:
+						'radial-gradient(rgb(255,245,203) 0%,rgb(182,227,212) 50%,rgb(51,167,181) 100%)',
+				},
+				gradients[ 1 ],
+			] );
+		} );
 	} );
 } );

package/src/placeholder/style.scss

@@ -1,5 +1,6 @@
 // This needs specificity to override individual block styles.
 .components-placeholder.components-placeholder {
+	font-size: $default-font-size;
 	box-sizing: border-box;
 	position: relative;
 	padding: 1em;
@@ -33,6 +34,11 @@
 .components-placeholder__fieldset {
 	font-family: $default-font;
 	font-size: $default-font-size;
+	// Global Styles can affect this so we are resetting.
+	letter-spacing: initial;
+	line-height: initial;
+	text-transform: none;
+	font-weight: normal;
 }
 
 .components-placeholder__label {
@@ -148,11 +154,6 @@
 			padding: 0 $grid-unit-10 2px;
 		}
 	}
-	.components-placeholder__learn-more {
-		.components-external-link {
-			color: var(--wp-admin-theme-color);
-		}
-	}
 }
 
 

package/src/popover/index.tsx

@@ -126,6 +126,7 @@ const UnconnectedPopover = (
 	const {
 		animate = true,
 		headerTitle,
+		constrainTabbing,
 		onClose,
 		children,
 		className,
@@ -264,6 +265,7 @@ const UnconnectedPopover = (
 	}
 
 	const [ dialogRef, dialogProps ] = useDialog( {
+		constrainTabbing,
 		focusOnMount,
 		__unstableOnClose: onDialogClose,
 		// @ts-expect-error The __unstableOnClose property needs to be deprecated first (see https://github.com/WordPress/gutenberg/pull/27675)

package/src/popover/style.scss

@@ -6,6 +6,7 @@ $shadow-popover-border-top-only: 0 #{-$border-width} 0 0 $gray-400;
 $shadow-popover-border-top-only-alternate: 0 #{-$border-width} 0 $gray-900;
 
 .components-popover {
+	@include reset;
 	z-index: z-index(".components-popover");
 	will-change: transform;
 

package/src/popover/test/index.tsx

@@ -2,6 +2,7 @@
  * External dependencies
  */
 import { render, screen, waitFor, getByText } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
 import type { CSSProperties } from 'react';
 
 /**
@@ -36,6 +37,28 @@ type PlacementToInitialTranslationTuple = [
 	CSSProperties[ 'translate' ],
 ];
 
+beforeAll( () => {
+	// This mock is necessary because deep in the weeds, `useConstrained` relies
+	// on `focusable` to return a list of DOM elements that can be focused. Part
+	// of this process involves checking that an element has an intrinsic size,
+	// which will always fail in JSDom.
+	//
+	// https://github.com/WordPress/gutenberg/blob/trunk/packages/dom/src/focusable.js#L55-L61
+	jest.spyOn(
+		HTMLElement.prototype,
+		'offsetHeight',
+		'get'
+	).mockImplementation( function getOffsetHeight( this: HTMLElement ) {
+		// The `1` returned here is somewhat arbitrary – it just needs to be a
+		// non-zero integer.
+		return 1;
+	} );
+} );
+
+afterAll( () => {
+	jest.restoreAllMocks();
+} );
+
 // There's no matching `placement` for 'middle center' positions,
 // fallback to 'bottom' (same as `floating-ui`'s default.)
 const FALLBACK_FOR_MIDDLE_CENTER_POSITIONS = 'bottom';
@@ -188,6 +211,233 @@ describe( 'Popover', () => {
 				expect( document.body ).toHaveFocus();
 			} );
 		} );
+
+		describe( 'tab constraint behavior', () => {
+			// `constrainTabbing` is implicitly controlled by `focusOnMount`.
+			// By default, when `focusOnMount` is false, `constrainTabbing` will
+			// also be false; otherwise, `constrainTabbing` will be true.
+
+			const setup = async (
+				props?: Partial< React.ComponentProps< typeof Popover > >
+			) => {
+				const user = await userEvent.setup();
+				const view = render(
+					<Popover data-testid="popover-element" { ...props }>
+						<button>Button 1</button>
+						<button>Button 2</button>
+						<button>Button 3</button>
+					</Popover>
+				);
+
+				const popover = screen.getByTestId( 'popover-element' );
+				await waitFor( () => expect( popover ).toBeVisible() );
+
+				const [ firstButton, secondButton, thirdButton ] =
+					screen.getAllByRole( 'button' );
+
+				return {
+					...view,
+					popover,
+					firstButton,
+					secondButton,
+					thirdButton,
+					user,
+				};
+			};
+
+			// Note: due to an issue in testing-library/user-event [1], the
+			// tests for constrained tabbing fail.
+			// [1]: https://github.com/testing-library/user-event/issues/1188
+			//
+			// eslint-disable-next-line jest/no-disabled-tests
+			describe.skip( 'constrains tabbing', () => {
+				test( 'by default', async () => {
+					// The default value for `focusOnMount` is 'firstElement',
+					// which means the default value for `constrainTabbing` is
+					// 'true'.
+
+					const { user, firstButton, secondButton, thirdButton } =
+						await setup();
+
+					await waitFor( () => expect( firstButton ).toHaveFocus() );
+					await user.tab();
+					expect( secondButton ).toHaveFocus();
+					await user.tab();
+					expect( thirdButton ).toHaveFocus();
+					await user.tab();
+					expect( firstButton ).toHaveFocus();
+					await user.tab( { shift: true } );
+					expect( thirdButton ).toHaveFocus();
+				} );
+
+				test( 'when `focusOnMount` is true', async () => {
+					const {
+						user,
+						popover,
+						firstButton,
+						secondButton,
+						thirdButton,
+					} = await setup( { focusOnMount: true } );
+
+					expect( popover ).toHaveFocus();
+					await user.tab();
+					expect( firstButton ).toHaveFocus();
+					await user.tab();
+					expect( secondButton ).toHaveFocus();
+					await user.tab();
+					expect( thirdButton ).toHaveFocus();
+					await user.tab();
+					expect( firstButton ).toHaveFocus();
+					await user.tab( { shift: true } );
+					expect( thirdButton ).toHaveFocus();
+				} );
+
+				test( 'when `focusOnMount` is "firstElement"', async () => {
+					const { user, firstButton, secondButton, thirdButton } =
+						await setup( { focusOnMount: 'firstElement' } );
+
+					await waitFor( () => expect( firstButton ).toHaveFocus() );
+					await user.tab();
+					expect( secondButton ).toHaveFocus();
+					await user.tab();
+					expect( thirdButton ).toHaveFocus();
+					await user.tab();
+					expect( firstButton ).toHaveFocus();
+					await user.tab( { shift: true } );
+					expect( thirdButton ).toHaveFocus();
+				} );
+
+				test( 'when `focusOnMount` is false if `constrainTabbing` is true', async () => {
+					const {
+						user,
+						baseElement,
+						firstButton,
+						secondButton,
+						thirdButton,
+					} = await setup( {
+						focusOnMount: false,
+						constrainTabbing: true,
+					} );
+
+					expect( baseElement ).toHaveFocus();
+					await user.tab();
+					expect( firstButton ).toHaveFocus();
+					await user.tab();
+					expect( secondButton ).toHaveFocus();
+					await user.tab();
+					expect( thirdButton ).toHaveFocus();
+					await user.tab();
+					expect( firstButton ).toHaveFocus();
+					await user.tab( { shift: true } );
+					expect( thirdButton ).toHaveFocus();
+				} );
+			} );
+
+			describe( 'does not constrain tabbing', () => {
+				test( 'when `constrainTabbing` is false', async () => {
+					// The default value for `focusOnMount` is 'firstElement',
+					// which means the default value for `constrainTabbing` is
+					// 'true', but the provided value should override this.
+
+					const {
+						user,
+						baseElement,
+						firstButton,
+						secondButton,
+						thirdButton,
+					} = await setup( { constrainTabbing: false } );
+
+					await waitFor( () => expect( firstButton ).toHaveFocus() );
+					await user.tab();
+					expect( secondButton ).toHaveFocus();
+					await user.tab();
+					expect( thirdButton ).toHaveFocus();
+					await user.tab();
+					expect( baseElement ).toHaveFocus();
+					await user.tab();
+					expect( firstButton ).toHaveFocus();
+					await user.tab( { shift: true } );
+					expect( baseElement ).toHaveFocus();
+				} );
+
+				test( 'when `focusOnMount` is false', async () => {
+					const {
+						user,
+						baseElement,
+						firstButton,
+						secondButton,
+						thirdButton,
+					} = await setup( { focusOnMount: false } );
+
+					expect( baseElement ).toHaveFocus();
+					await user.tab();
+					expect( firstButton ).toHaveFocus();
+					await user.tab();
+					expect( secondButton ).toHaveFocus();
+					await user.tab();
+					expect( thirdButton ).toHaveFocus();
+					await user.tab();
+					expect( baseElement ).toHaveFocus();
+					await user.tab();
+					expect( firstButton ).toHaveFocus();
+					await user.tab( { shift: true } );
+					expect( baseElement ).toHaveFocus();
+				} );
+
+				test( 'when `focusOnMount` is true if `constrainTabbing` is false', async () => {
+					const {
+						user,
+						baseElement,
+						popover,
+						firstButton,
+						secondButton,
+						thirdButton,
+					} = await setup( {
+						focusOnMount: true,
+						constrainTabbing: false,
+					} );
+
+					expect( popover ).toHaveFocus();
+					await user.tab();
+					expect( firstButton ).toHaveFocus();
+					await user.tab();
+					expect( secondButton ).toHaveFocus();
+					await user.tab();
+					expect( thirdButton ).toHaveFocus();
+					await user.tab();
+					expect( baseElement ).toHaveFocus();
+					await user.tab();
+					expect( firstButton ).toHaveFocus();
+					await user.tab( { shift: true } );
+					expect( baseElement ).toHaveFocus();
+				} );
+
+				test( 'when `focusOnMount` is "firstElement" if `constrainTabbing` is false', async () => {
+					const {
+						user,
+						baseElement,
+						firstButton,
+						secondButton,
+						thirdButton,
+					} = await setup( {
+						focusOnMount: 'firstElement',
+						constrainTabbing: false,
+					} );
+
+					await waitFor( () => expect( firstButton ).toHaveFocus() );
+					await user.tab();
+					expect( secondButton ).toHaveFocus();
+					await user.tab();
+					expect( thirdButton ).toHaveFocus();
+					await user.tab();
+					expect( baseElement ).toHaveFocus();
+					await user.tab();
+					expect( firstButton ).toHaveFocus();
+					await user.tab( { shift: true } );
+					expect( baseElement ).toHaveFocus();
+				} );
+			} );
+		} );
 	} );
 
 	describe( 'Slot outside iframe', () => {

package/src/popover/types.ts

@@ -65,6 +65,15 @@ export type PopoverProps = {
 	 * @default true
 	 */
 	flip?: boolean;
+	/**
+	 * Determines whether tabbing is constrained to within the popover,
+	 * preventing keyboard focus from leaving the popover content without
+	 * explicit focus elswhere, or whether the popover remains part of the wider
+	 * tab order. If no value is passed, it will be derived from `focusOnMount`.
+	 *
+	 * @default `focusOnMount` !== false
+	 */
+	constrainTabbing?: boolean;
 	/**
 	 * By default, the _first tabbable element_ in the popover will receive focus
 	 * when it mounts. This is the same as setting this prop to `"firstElement"`.

package/src/progress-bar/stories/index.story.tsx

@@ -15,6 +15,7 @@ const meta: Meta< typeof ProgressBar > = {
 		value: { control: { type: 'number', min: 0, max: 100, step: 1 } },
 	},
 	parameters: {
+		badges: [ 'private' ],
 		controls: {
 			expanded: true,
 		},