@wordpress/components 19.15.0 → 20.0.1-next.d6164808d3.0

package/src/modal/index.js

@@ -24,7 +24,6 @@ import {
 	useConstrainedTabbing,
 	useMergeRefs,
 } from '@wordpress/compose';
-import { ESCAPE } from '@wordpress/keycodes';
 import { __ } from '@wordpress/i18n';
 import { close } from '@wordpress/icons';
 
@@ -98,7 +97,7 @@ function Modal( props, forwardedRef ) {
 	function handleEscapeKeyDown( event ) {
 		if (
 			shouldCloseOnEsc &&
-			event.keyCode === ESCAPE &&
+			event.code === 'Escape' &&
 			! event.defaultPrevented
 		) {
 			event.preventDefault();

package/src/modal/style.scss

@@ -95,6 +95,10 @@
 	.components-modal__content.has-scrolled-content:not(.hide-header) & {
 		border-bottom-color: $gray-300;
 	}
+
+	& + p {
+		margin-top: 0;
+	}
 }
 
 .components-modal__header-heading-container {
@@ -119,7 +123,7 @@
 .components-modal__content {
 	flex: 1;
 	margin-top: $header-height + $grid-unit-20;
-	padding: 0 $grid-unit-40 $grid-unit-30;
+	padding: 0 $grid-unit-40 $grid-unit-40;
 	overflow: auto;
 
 	&.hide-header {

package/src/modal/test/index.js

@@ -26,25 +26,27 @@ describe( 'Modal', () => {
 		render(
 			<Modal aria={ { labelledby: 'title-id' } }>
 				{ /* eslint-disable-next-line no-restricted-syntax */ }
-				<h1 id="title-id">Test Title</h1>
+				<h1 id="title-id">Modal Title Text</h1>
 			</Modal>
 		);
-		expect( screen.getByRole( 'dialog' ) ).toHaveAttribute(
-			'aria-labelledby',
-			'title-id'
+		expect( screen.getByRole( 'dialog' ) ).toHaveAccessibleName(
+			'Modal Title Text'
 		);
 	} );
 
 	it( 'prefers the aria label of the title prop over the aria.labelledby prop', () => {
 		render(
-			<Modal title="Test Title" aria={ { labelledby: 'title-id' } }>
+			<Modal
+				title="Modal Title Attribute"
+				aria={ { labelledby: 'title-id' } }
+			>
 				{ /* eslint-disable-next-line no-restricted-syntax */ }
-				<h1 id="title-id">Wrong Title</h1>
+				<h1 id="title-id">Modal Title Text</h1>
 			</Modal>
 		);
-		const dialog = screen.getByRole( 'dialog' );
-		const titleId = within( dialog ).getByText( 'Test Title' ).id;
-		expect( dialog ).toHaveAttribute( 'aria-labelledby', titleId );
+		expect( screen.getByRole( 'dialog' ) ).toHaveAccessibleName(
+			'Modal Title Attribute'
+		);
 	} );
 
 	it( 'hides the header when the `__experimentalHideHeader` prop is used', () => {

package/src/navigable-container/container.js

@@ -1,9 +1,4 @@
 // @ts-nocheck
-/**
- * External dependencies
- */
-import { omit } from 'lodash';
-
 /**
  * WordPress dependencies
  */
@@ -131,20 +126,19 @@ class NavigableContainer extends Component {
 	}
 
 	render() {
-		const { children, ...props } = this.props;
+		const {
+			children,
+			stopNavigationEvents,
+			eventToOffset,
+			onNavigate,
+			onKeyDown,
+			cycle,
+			onlyBrowserTabstops,
+			forwardedRef,
+			...restProps
+		} = this.props;
 		return (
-			<div
-				ref={ this.bindContainer }
-				{ ...omit( props, [
-					'stopNavigationEvents',
-					'eventToOffset',
-					'onNavigate',
-					'onKeyDown',
-					'cycle',
-					'onlyBrowserTabstops',
-					'forwardedRef',
-				] ) }
-			>
+			<div ref={ this.bindContainer } { ...restProps }>
 				{ children }
 			</div>
 		);

package/src/navigable-container/test/menu.js

@@ -1,7 +1,7 @@
 /**
  * External dependencies
  */
-import { fireEvent, render } from '@testing-library/react';
+import { fireEvent, render, screen } from '@testing-library/react';
 
 /**
  * WordPress dependencies
@@ -42,7 +42,7 @@ function fireKeyDown( node, keyCode, shiftKey ) {
 describe( 'NavigableMenu', () => {
 	it( 'vertical: should navigate by up and down', () => {
 		let currentIndex = 0;
-		const { container, getByRole } = render(
+		const { container } = render(
 			/*
 				Disabled because of our rule restricting literal IDs, preferring
 				`withInstanceId`. In this case, it's fine to use literal IDs.
@@ -77,7 +77,7 @@ describe( 'NavigableMenu', () => {
 		// Navigate options.
 		function assertKeyDown( keyCode, expectedActiveIndex, expectedStop ) {
 			const interaction = fireKeyDown(
-				getByRole( 'menu' ),
+				screen.getByRole( 'menu' ),
 				keyCode,
 				false
 			);
@@ -100,7 +100,7 @@ describe( 'NavigableMenu', () => {
 
 	it( 'vertical: should navigate by up and down, and stop at edges', () => {
 		let currentIndex = 0;
-		const { container, getByRole } = render(
+		const { container } = render(
 			/*
 				Disabled because of our rule restricting literal IDs, preferring
 				`withInstanceId`. In this case, it's fine to use literal IDs.
@@ -131,7 +131,7 @@ describe( 'NavigableMenu', () => {
 		// Navigate options.
 		function assertKeyDown( keyCode, expectedActiveIndex, expectedStop ) {
 			const interaction = fireKeyDown(
-				getByRole( 'menu' ),
+				screen.getByRole( 'menu' ),
 				keyCode,
 				false
 			);
@@ -152,7 +152,7 @@ describe( 'NavigableMenu', () => {
 
 	it( 'horizontal: should navigate by left and right', () => {
 		let currentIndex = 0;
-		const { container, getByRole } = render(
+		const { container } = render(
 			/*
 				Disabled because of our rule restricting literal IDs, preferring
 				`withInstanceId`. In this case, it's fine to use literal IDs.
@@ -187,7 +187,7 @@ describe( 'NavigableMenu', () => {
 		// Navigate options.
 		function assertKeyDown( keyCode, expectedActiveIndex, expectedStop ) {
 			const interaction = fireKeyDown(
-				getByRole( 'menu' ),
+				screen.getByRole( 'menu' ),
 				keyCode,
 				false
 			);
@@ -210,7 +210,7 @@ describe( 'NavigableMenu', () => {
 
 	it( 'horizontal: should navigate by left and right, and stop at edges', () => {
 		let currentIndex = 0;
-		const { container, getByRole } = render(
+		const { container } = render(
 			/*
 				Disabled because of our rule restricting literal IDs, preferring
 				`withInstanceId`. In this case, it's fine to use literal IDs.
@@ -241,7 +241,7 @@ describe( 'NavigableMenu', () => {
 		// Navigate options.
 		function assertKeyDown( keyCode, expectedActiveIndex, expectedStop ) {
 			const interaction = fireKeyDown(
-				getByRole( 'menu' ),
+				screen.getByRole( 'menu' ),
 				keyCode,
 				false
 			);
@@ -262,7 +262,7 @@ describe( 'NavigableMenu', () => {
 
 	it( 'both: should navigate by up/down and left/right', () => {
 		let currentIndex = 0;
-		const { container, getByRole } = render(
+		const { container } = render(
 			/*
 				Disabled because of our rule restricting literal IDs, preferring
 				`withInstanceId`. In this case, it's fine to use literal IDs.
@@ -285,7 +285,10 @@ describe( 'NavigableMenu', () => {
 
 		// Navigate options.
 		function assertKeyDown( keyCode, expectedActiveIndex, expectedStop ) {
-			const interaction = fireKeyDown( getByRole( 'menu' ), keyCode );
+			const interaction = fireKeyDown(
+				screen.getByRole( 'menu' ),
+				keyCode
+			);
 			expect( currentIndex ).toBe( expectedActiveIndex );
 			expect( interaction.stopped ).toBe( expectedStop );
 		}

package/src/navigator/navigator-back-button/hook.ts

@@ -3,9 +3,6 @@
  */
 import { useCallback } from '@wordpress/element';
 
-/**
- * Internal dependencies
- */
 /**
  * Internal dependencies
  */

package/src/navigator/navigator-button/hook.ts

@@ -4,9 +4,6 @@
 import { useCallback } from '@wordpress/element';
 import { escapeAttribute } from '@wordpress/escape-html';
 
-/**
- * Internal dependencies
- */
 /**
  * Internal dependencies
  */

package/src/notice/list.js

@@ -2,7 +2,6 @@
  * External dependencies
  */
 import classnames from 'classnames';
-import { omit } from 'lodash';
 
 /**
  * Internal dependencies
@@ -30,15 +29,18 @@ function NoticeList( { notices, onRemove = noop, className, children } ) {
 	return (
 		<div className={ className }>
 			{ children }
-			{ [ ...notices ].reverse().map( ( notice ) => (
-				<Notice
-					{ ...omit( notice, [ 'content' ] ) }
-					key={ notice.id }
-					onRemove={ removeNotice( notice.id ) }
-				>
-					{ notice.content }
-				</Notice>
-			) ) }
+			{ [ ...notices ].reverse().map( ( notice ) => {
+				const { content, ...restNotice } = notice;
+				return (
+					<Notice
+						{ ...restNotice }
+						key={ notice.id }
+						onRemove={ removeNotice( notice.id ) }
+					>
+						{ notice.content }
+					</Notice>
+				);
+			} ) }
 		</div>
 	);
 }

package/src/palette-edit/index.js

@@ -163,6 +163,7 @@ function Option( {
 					{ ! isGradient && (
 						<ColorPicker
 							color={ value }
+							enableAlpha
 							onChange={ ( newColor ) =>
 								onChange( {
 									...element,

package/src/palette-edit/styles.js

@@ -29,7 +29,7 @@ export const IndicatorStyled = styled( CircularOptionPicker.Option )`
 export const NameInputControl = styled( InputControl )`
 	${ InputControlContainer } {
 		background: ${ COLORS.gray[ 100 ] };
-		border-radius: ${ CONFIG.controlBorderRadius }};
+		border-radius: ${ CONFIG.controlBorderRadius };
 		${ Input }${ Input }${ Input }${ Input } {
 			height: ${ space( 8 ) };
 		}
@@ -58,7 +58,7 @@ export const PaletteItem = styled( View )`
 		border-top-color: transparent;
 	}
 	&.is-selected {
-		border-color: ${ COLORS.blue.wordpress[ 700 ] };
+		border-color: ${ COLORS.ui.theme };
 	}
 `;
 
@@ -69,7 +69,7 @@ export const NameContainer = styled.div`
 	white-space: nowrap;
 	overflow: hidden;
 	${ PaletteItem }:hover & {
-		color: var( --wp-admin-theme-color, ${ COLORS.blue.wordpress[ 700 ] } );
+		color: ${ COLORS.ui.theme };
 	}
 `;
 
@@ -95,8 +95,9 @@ export const PaletteHStackHeader = styled( HStack )`
 export const PaletteEditStyles = styled( View )`
 	&&& {
 		.components-button.has-icon {
-		min-width: 0;
-		padding: 0;
+			min-width: 0;
+			padding: 0;
+		}
 	}
 `;
 

package/src/panel/style.scss

@@ -35,9 +35,12 @@
 	justify-content: space-between;
 	align-items: center;
 	padding: 0 $grid-unit-20;
-	height: $grid-unit-60;
 	border-bottom: $border-width solid $gray-300;
 
+	// This helps ensure the correct panel height, including the border, avoiding subpixel rounding issues.
+	box-sizing: content-box;
+	height: $grid-unit-60 - $border-width;
+
 	h2 {
 		margin: 0;
 		font-size: inherit;

package/src/placeholder/README.md

@@ -9,12 +9,52 @@ import { more } from '@wordpress/icons';
 const MyPlaceholder = () => <Placeholder icon={ more } label="Placeholder" />;
 ```
 
-### Props
-
-| Name              | Type                | Default     | Description                                                       |
-| ----------------  | ------------------- | ----------- | ----------------------------------------------------------------- |
-| `icon`            | `string, WPElement` | `undefined` | If provided, renders an icon next to the label.                   |
-| `label`           | `string`            | `undefined` | Renders a label for the placeholder.                              |
-| `instructions`    | `string`            | `undefined` | Renders instruction text below label.                             |
-| `isColumnLayout`  | `bool`              | `false`     | Changes placeholder children layout from flex-row to flex-column. |
-| `withIllustration`| `bool`              | `false`     | Outputs a placeholder illustration.                             |
+## Props
+
+### `className`: `string`
+
+Class to set on the container div.
+
+-   Required: No
+
+### `icon`: `string|Function|WPComponent|null`
+
+If provided, renders an icon next to the label.
+
+-   Required: No
+
+### `instructions`: `string`
+
+Instructions of the placeholder.
+
+-   Required: No
+
+### `isColumnLayout`: `boolean`
+
+Changes placeholder children layout from flex-row to flex-column.
+
+-   Required: No
+
+### `label`: `string`
+
+Title of the placeholder.
+
+-   Required: No
+
+### `notices`: `ReactNode`
+
+A rendered notices list
+
+-   Required: No
+
+### `preview`: `ReactNode`
+
+Preview to be rendered in the placeholder.
+
+-   Required: No
+
+### `withIllustration`: `boolean`
+
+Outputs a placeholder illustration.
+
+-   Required: No

package/src/placeholder/{index.js → index.tsx}

@@ -13,6 +13,8 @@ import { SVG, Path } from '@wordpress/primitives';
  * Internal dependencies
  */
 import Icon from '../icon';
+import type { PlaceholderProps } from './types';
+import type { WordPressComponentProps } from '../ui/context';
 
 const PlaceholderIllustration = (
 	<SVG
@@ -29,31 +31,33 @@ const PlaceholderIllustration = (
 /**
  * Renders a placeholder. Normally used by blocks to render their empty state.
  *
- * @param {Object}    props                  The component props.
- * @param {WPIcon}    props.icon             An icon rendered before the label.
- * @param {WPElement} props.children         Children to be rendered.
- * @param {string}    props.label            Title of the placeholder.
- * @param {string}    props.instructions     Instructions of the placeholder.
- * @param {string}    props.className        Class to set on the container div.
- * @param {Object}    props.notices          A rendered notices list.
- * @param {Object}    props.preview          Preview to be rendered in the placeholder.
- * @param {boolean}   props.isColumnLayout   Whether a column layout should be used.
- * @param {boolean}   props.withIllustration Whether to add an illustration to the placeholder.
+ * ```jsx
+ * import { Placeholder } from '@wordpress/components';
+ * import { more } from '@wordpress/icons';
  *
- * @return {Object} The rendered placeholder.
+ * const MyPlaceholder = () => <Placeholder icon={ more } label="Placeholder" />;
+ * ```
  */
-function Placeholder( {
-	icon,
-	children,
-	label,
-	instructions,
-	className,
-	notices,
-	preview,
-	isColumnLayout,
-	withIllustration,
-	...additionalProps
-} ) {
+export function Placeholder< IconProps = unknown >(
+	// ref is omitted until we have `WordPressComponentPropsWithoutRef` or add
+	// ref forwarding to Placeholder.
+	props: Omit<
+		WordPressComponentProps< PlaceholderProps< IconProps >, 'div', false >,
+		'ref'
+	>
+) {
+	const {
+		icon,
+		children,
+		label,
+		instructions,
+		className,
+		notices,
+		preview,
+		isColumnLayout,
+		withIllustration,
+		...additionalProps
+	} = props;
 	const [ resizeListener, { width } ] = useResizeObserver();
 
 	// Since `useResizeObserver` will report a width of `null` until after the

package/src/placeholder/stories/index.tsx

@@ -0,0 +1,64 @@
+/**
+ * External dependencies
+ */
+import type { ComponentMeta, ComponentStory } from '@storybook/react';
+
+/**
+ * WordPress dependencies
+ */
+import { starEmpty, starFilled, styles, wordpress } from '@wordpress/icons';
+import { useState } from '@wordpress/element';
+
+/**
+ * Internal dependencies
+ */
+import Placeholder from '../';
+import TextControl from '../../text-control';
+
+const ICONS = { starEmpty, starFilled, styles, wordpress };
+
+const meta: ComponentMeta< typeof Placeholder > = {
+	component: Placeholder,
+	title: 'Components/Placeholder',
+	argTypes: {
+		children: { control: { type: null } },
+		notices: { control: { type: null } },
+		preview: { control: { type: null } },
+		icon: {
+			control: { type: 'select' },
+			options: Object.keys( ICONS ),
+			mapping: ICONS,
+		},
+	},
+	parameters: {
+		controls: { expanded: true },
+		docs: { source: { state: 'open' } },
+	},
+};
+export default meta;
+
+const Template: ComponentStory< typeof Placeholder > = ( args ) => {
+	const [ value, setValue ] = useState( '' );
+
+	return (
+		<Placeholder { ...args }>
+			<div>
+				<TextControl
+					label="Sample Field"
+					placeholder="Enter something here"
+					value={ value }
+					onChange={ setValue }
+				/>
+			</div>
+		</Placeholder>
+	);
+};
+
+export const Default: ComponentStory< typeof Placeholder > = Template.bind(
+	{}
+);
+Default.args = {
+	icon: 'wordpress',
+	label: 'My Placeholder Label',
+	instructions: 'Here are instructions you should follow',
+};

package/src/placeholder/style.scss

@@ -26,17 +26,6 @@
 	background-color: $white;
 	box-shadow: inset 0 0 0 $border-width $gray-900;
 	outline: 1px solid transparent; // Shown for Windows 10 High Contrast mode.
-
-	.components-base-control__label {
-		font-size: $default-font-size;
-	}
-
-	&.has-illustration {
-		background: none;
-		border: none;
-		box-shadow: none;
-		min-width: 100px;
-	}
 }
 
 .components-placeholder__error,
@@ -116,11 +105,6 @@
 	width: 100%;
 }
 
-.components-placeholder__preview img {
-	margin: 3%;
-	width: 50%;
-}
-
 .components-placeholder__fieldset .components-button {
 	margin-right: $grid-unit-15;
 	margin-bottom: $grid-unit-15; // If buttons wrap we need vertical space between.
@@ -179,18 +163,75 @@
 	}
 }
 
-// Style the placeholder illustration.
-.components-placeholder__illustration {
+
+/**
+ * Dashed style placeholders
+ */
+
+// @todo
+// These styles are only applied after the has-illustration gets added.
+// This is mainly an issue in terms of Site Logo which has a brief flash of the square placeholder.
+.components-placeholder.has-illustration {
+	color: inherit;
+	display: flex;
+	box-shadow: none;
+	min-width: 100px;
+
+	// Radius fallback value.
+	border-radius: $radius-block-ui;
+
+	// Blur the background so layered dashed placeholders are still visually separate.
+	// We also provide a semitransparent background so as to allow duotones to sheen through.
+	backdrop-filter: blur(100px);
+	background-color: rgba($white, 0.1);
+
+	// Invert the colors in themes deemed dark.
+	.is-dark-theme & {
+		background-color: rgba($black, 0.1);
+	}
+
+	.components-placeholder__fieldset {
+		width: auto;
+	}
+
+	// Show placeholder buttons on block selection.
+	// Note that these can't be display: none; or visibility: hidden;, as that breaks the writing flow.
+	.components-placeholder__label,
+	.components-placeholder__instructions,
+	.components-button {
+		opacity: 0;
+		transition: opacity 0.1s linear;
+		@include reduce-motion("transition");
+	}
+
+	.is-selected > & {
+		.components-placeholder__label,
+		.components-placeholder__instructions,
+		.components-button {
+			opacity: 1;
+		}
+	}
+
+	// By painting the borders here, we enable them to be replaced by the Border control.
 	border: $border-width dashed currentColor;
-	box-sizing: border-box;
+	overflow: hidden;
+}
+
+// Position the spinner.
+// @todo these rules should ideally live with the spinner component itself.
+.components-placeholder__preview {
+	display: flex;
+	justify-content: center;
+}
+
+.components-placeholder__illustration {
+	box-sizing: content-box;
 	position: absolute;
-	top: 0;
-	right: 0;
-	bottom: 0;
-	left: 0;
+	top: 50%;
+	left: 50%;
+	transform: translate(-50%, -50%);
 	width: 100%;
 	height: 100%;
 	stroke: currentColor;
 	stroke-dasharray: 3;
-	opacity: 0.4;
 }