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

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/panel/README.md

@@ -4,12 +4,6 @@ Panels expand and collapse multiple sections of content.
 
 ![](https://make.wordpress.org/design/files/2019/03/panel.png)
 
-## Table of contents
-
-1. [Design guidelines](#design-guidelines)
-2. [Development guidelines](#development-guidelines)
-3. [Related components](#related-components)
-
 ## Design guidelines
 
 ### Anatomy

package/src/panel/body.tsx

@@ -14,7 +14,7 @@ import { chevronUp, chevronDown } from '@wordpress/icons';
  * Internal dependencies
  */
 import type { PanelBodyProps, PanelBodyTitleProps } from './types';
-import type { WordPressComponentProps } from '../ui/context';
+import type { WordPressComponentProps } from '../context';
 import Button from '../button';
 import Icon from '../icon';
 import { useControlledState, useUpdateEffect } from '../utils';

package/src/panel/types.ts

@@ -2,7 +2,7 @@
  * Internal dependencies
  */
 import type { ButtonAsButtonProps } from '../button/types';
-import type { WordPressComponentProps } from '../ui/context';
+import type { WordPressComponentProps } from '../context';
 
 export type PanelProps = {
 	/**

package/src/placeholder/README.md

@@ -17,7 +17,7 @@ Class to set on the container div.
 
 -   Required: No
 
-### `icon`: `string|Function|WPComponent|null`
+### `icon`: `string|Function|Component|null`
 
 If provided, renders an icon next to the label.
 

package/src/placeholder/index.tsx

@@ -8,13 +8,15 @@ import classnames from 'classnames';
  */
 import { useResizeObserver } from '@wordpress/compose';
 import { SVG, Path } from '@wordpress/primitives';
+import { useEffect } from '@wordpress/element';
+import { speak } from '@wordpress/a11y';
 
 /**
  * Internal dependencies
  */
 import Icon from '../icon';
 import type { PlaceholderProps } from './types';
-import type { WordPressComponentProps } from '../ui/context';
+import type { WordPressComponentProps } from '../context';
 
 const PlaceholderIllustration = (
 	<SVG
@@ -72,9 +74,17 @@ export function Placeholder(
 		modifierClassNames,
 		withIllustration ? 'has-illustration' : null
 	);
+
 	const fieldsetClasses = classnames( 'components-placeholder__fieldset', {
 		'is-column-layout': isColumnLayout,
 	} );
+
+	useEffect( () => {
+		if ( instructions ) {
+			speak( instructions );
+		}
+	}, [ instructions ] );
+
 	return (
 		<div { ...additionalProps } className={ classes }>
 			{ withIllustration ? PlaceholderIllustration : null }
@@ -89,14 +99,12 @@ export function Placeholder(
 				<Icon icon={ icon } />
 				{ label }
 			</div>
-			<fieldset className={ fieldsetClasses }>
-				{ !! instructions && (
-					<legend className="components-placeholder__instructions">
-						{ instructions }
-					</legend>
-				) }
-				{ children }
-			</fieldset>
+			{ !! instructions && (
+				<div className="components-placeholder__instructions">
+					{ instructions }
+				</div>
+			) }
+			<div className={ fieldsetClasses }>{ children }</div>
 		</div>
 	);
 }

package/src/placeholder/style.scss

@@ -1,9 +1,9 @@
 // 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;
-	min-height: 200px;
 	width: 100%;
 	text-align: left;
 	margin: 0;
@@ -17,7 +17,7 @@
 	@supports (position: sticky) {
 		display: flex;
 		flex-direction: column;
-		justify-content: center;
+		justify-content: top;
 		align-items: flex-start;
 	}
 
@@ -34,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 {
@@ -73,18 +78,6 @@
 	}
 }
 
-// Overrides for browser and editor fieldset styles.
-.components-placeholder__fieldset.components-placeholder__fieldset {
-	border: none;
-	padding: 0;
-
-	.components-placeholder__instructions {
-		padding: 0;
-		font-weight: normal;
-		font-size: 1em;
-	}
-}
-
 .components-placeholder__fieldset.is-column-layout,
 .components-placeholder__fieldset.is-column-layout form {
 	flex-direction: column;
@@ -161,11 +154,6 @@
 			padding: 0 $grid-unit-10 2px;
 		}
 	}
-	.components-placeholder__learn-more {
-		.components-external-link {
-			color: var(--wp-admin-theme-color);
-		}
-	}
 }
 
 
@@ -180,7 +168,6 @@
 	color: inherit;
 	display: flex;
 	box-shadow: none;
-	min-width: 100px;
 
 	// Blur the background so layered dashed placeholders are still visually separate.
 	// Make the background transparent to not interfere with the background overlay in placeholder-style() pseudo element
@@ -225,7 +212,7 @@
 
 	// By painting the borders here, we enable them to be replaced by the Border control.
 	@include placeholder-style();
-	overflow: hidden;
+	overflow: auto;
 }
 
 // Position the spinner.

package/src/placeholder/test/index.tsx

@@ -8,12 +8,13 @@ import { render, screen, within } from '@testing-library/react';
  */
 import { useResizeObserver } from '@wordpress/compose';
 import { SVG, Path } from '@wordpress/primitives';
+import { speak } from '@wordpress/a11y';
 
 /**
  * Internal dependencies
  */
 import BasePlaceholder from '../';
-import type { WordPressComponentProps } from '../../ui/context';
+import type { WordPressComponentProps } from '../../context';
 import type { PlaceholderProps } from '../types';
 
 jest.mock( '@wordpress/compose', () => {
@@ -41,6 +42,9 @@ const Placeholder = (
 
 const getPlaceholder = () => screen.getByTestId( 'placeholder' );
 
+jest.mock( '@wordpress/a11y', () => ( { speak: jest.fn() } ) );
+const mockedSpeak = jest.mocked( speak );
+
 describe( 'Placeholder', () => {
 	beforeEach( () => {
 		// @ts-ignore
@@ -48,10 +52,11 @@ describe( 'Placeholder', () => {
 			<div key="1" />,
 			{ width: 320 },
 		] );
+		mockedSpeak.mockReset();
 	} );
 
 	describe( 'basic rendering', () => {
-		it( 'should by default render label section and fieldset.', () => {
+		it( 'should by default render label section and content section.', () => {
 			render( <Placeholder /> );
 			const placeholder = getPlaceholder();
 
@@ -74,9 +79,12 @@ describe( 'Placeholder', () => {
 			);
 			expect( placeholderInstructions ).not.toBeInTheDocument();
 
-			// Test for empty fieldset.
-			const placeholderFieldset =
-				within( placeholder ).getByRole( 'group' );
+			// Test for empty content. When the content is empty,
+			// the only way to query the div is with `querySelector`
+			// eslint-disable-next-line testing-library/no-node-access
+			const placeholderFieldset = placeholder.querySelector(
+				'.components-placeholder__fieldset'
+			);
 			expect( placeholderFieldset ).toBeInTheDocument();
 			expect( placeholderFieldset ).toBeEmptyDOMElement();
 		} );
@@ -104,27 +112,38 @@ describe( 'Placeholder', () => {
 			expect( placeholderLabel ).toBeInTheDocument();
 		} );
 
-		it( 'should display a fieldset from the children property', () => {
-			const content = 'Fieldset';
+		it( 'should display content from the children property', () => {
+			const content = 'Placeholder content';
 			render( <Placeholder>{ content }</Placeholder> );
-			const placeholderFieldset = screen.getByRole( 'group' );
+			const placeholder = screen.getByText( content );
 
-			expect( placeholderFieldset ).toBeInTheDocument();
-			expect( placeholderFieldset ).toHaveTextContent( content );
+			expect( placeholder ).toBeInTheDocument();
+			expect( placeholder ).toHaveTextContent( content );
 		} );
 
-		it( 'should display a legend if instructions are passed', () => {
+		it( 'should display instructions when provided', () => {
 			const instructions = 'Choose an option.';
 			render(
 				<Placeholder instructions={ instructions }>
-					<div>Fieldset</div>
+					<div>Placeholder content</div>
+				</Placeholder>
+			);
+			const placeholder = getPlaceholder();
+			const instructionsContainer =
+				within( placeholder ).getByText( instructions );
+
+			expect( instructionsContainer ).toBeInTheDocument();
+		} );
+
+		it( 'should announce instructions to screen readers', () => {
+			const instructions = 'Awesome block placeholder instructions.';
+			render(
+				<Placeholder instructions={ instructions }>
+					<div>Placeholder content</div>
 				</Placeholder>
 			);
-			const captionedFieldset = screen.getByRole( 'group', {
-				name: instructions,
-			} );
 
-			expect( captionedFieldset ).toBeInTheDocument();
+			expect( speak ).toHaveBeenCalledWith( instructions );
 		} );
 
 		it( 'should add an additional className to the top container', () => {

package/src/popover/README.md

@@ -11,8 +11,8 @@ Render a Popover adjacent to its container.
 If a Popover is returned by your component, it will be shown. To hide the popover, simply omit it from your component's render value.
 
 ```jsx
+import { useState } from 'react';
 import { Button, Popover } from '@wordpress/components';
-import { useState } from '@wordpress/element';
 
 const MyPopover = () => {
 	const [ isVisible, setIsVisible ] = useState( false );
@@ -32,8 +32,8 @@ const MyPopover = () => {
 In order to pass an explicit anchor, you can use the `anchor` prop. When doing so, **the anchor element should be stored in local state** rather than a plain React ref to ensure reactive updating when it changes.
 
 ```jsx
+import { useState } from 'react';
 import { Button, Popover } from '@wordpress/components';
-import { useState } from '@wordpress/element';
 
 const MyPopover = () => {
 	// Use internal state instead of a ref to make sure that the component
@@ -63,18 +63,17 @@ const MyPopover = () => {
 By default Popovers render at the end of the body of your document. If you want Popover elements to render to a specific location on the page, you must render a `Popover.Slot` further up the element tree:
 
 ```jsx
-import { render } from '@wordpress/element';
+import { createRoot } from 'react-dom/client';
 import { Popover } from '@wordpress/components';
 import Content from './Content';
 
 const app = document.getElementById( 'app' );
-
-render(
+const root = createRoot( app );
+root.render(
 	<div>
 		<Content />
 		<Popover.Slot />
-	</div>,
-	app
+	</div>
 );
 ```