@wordpress/components 19.17.0 → 20.0.2-next.957ca95e4c.0

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

@@ -39,7 +39,7 @@ Changes placeholder children layout from flex-row to flex-column.
 
 Title of the placeholder.
 
--   Required: Yes
+-   Required: No
 
 ### `notices`: `ReactNode`
 

package/src/placeholder/style.scss

@@ -26,13 +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.
-
-	&.has-illustration {
-		background: none;
-		border: none;
-		box-shadow: none;
-		min-width: 100px;
-	}
 }
 
 .components-placeholder__error,
@@ -112,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.
@@ -175,18 +163,72 @@
 	}
 }
 
-// Style the 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;
+
+	// 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.
+	@include placeholder-style();
+	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 {
-	border: $border-width dashed currentColor;
-	box-sizing: border-box;
+	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;
 }

package/src/placeholder/test/index.tsx

@@ -0,0 +1,174 @@
+/**
+ * External dependencies
+ */
+import { render, screen, within } from '@testing-library/react';
+
+/**
+ * WordPress dependencies
+ */
+import { useResizeObserver } from '@wordpress/compose';
+import { SVG, Path } from '@wordpress/primitives';
+
+/**
+ * Internal dependencies
+ */
+import BasePlaceholder from '../';
+import type { WordPressComponentProps } from '../../ui/context';
+import type { PlaceholderProps } from '../types';
+
+jest.mock( '@wordpress/compose', () => {
+	return {
+		...jest.requireActual( '@wordpress/compose' ),
+		useResizeObserver: jest.fn( () => [] ),
+	};
+} );
+
+/**
+ * Test icon that can be queried by `getByTestId`
+ */
+const testIcon = (
+	<SVG data-testid="icon">
+		<Path />
+	</SVG>
+);
+
+const Placeholder = (
+	props: Omit<
+		WordPressComponentProps< PlaceholderProps< unknown >, 'div', false >,
+		'ref'
+	>
+) => <BasePlaceholder data-testid="placeholder" { ...props } />;
+
+const getPlaceholder = () => screen.getByTestId( 'placeholder' );
+
+describe( 'Placeholder', () => {
+	beforeEach( () => {
+		// @ts-ignore
+		useResizeObserver.mockReturnValue( [
+			<div key="1" />,
+			{ width: 320 },
+		] );
+	} );
+
+	describe( 'basic rendering', () => {
+		it( 'should by default render label section and fieldset.', () => {
+			render( <Placeholder /> );
+			const placeholder = getPlaceholder();
+
+			expect( placeholder ).toHaveClass( 'components-placeholder' );
+
+			// Test for empty label. When the label is empty, the only way to
+			// query the div is with `querySelector`.
+			const label = placeholder.querySelector(
+				'.components-placeholder__label'
+			);
+			expect( label ).toBeInTheDocument();
+			expect( label ).toBeEmptyDOMElement();
+
+			// Test for non existent instructions. When the instructions is
+			// empty, the only way to query the div is with `querySelector`.
+			const placeholderInstructions = placeholder.querySelector(
+				'.components-placeholder__instructions'
+			);
+			expect( placeholderInstructions ).not.toBeInTheDocument();
+
+			// Test for empty fieldset.
+			const placeholderFieldset =
+				within( placeholder ).getByRole( 'group' );
+			expect( placeholderFieldset ).toBeInTheDocument();
+			expect( placeholderFieldset ).toBeEmptyDOMElement();
+		} );
+
+		it( 'should render an Icon in the label section', () => {
+			render( <Placeholder icon={ testIcon } /> );
+
+			const placeholder = getPlaceholder();
+			const icon = within( placeholder ).getByTestId( 'icon' );
+			expect( icon.parentNode ).toHaveClass(
+				'components-placeholder__label'
+			);
+			expect( icon ).toBeInTheDocument();
+		} );
+
+		it( 'should render a label section', () => {
+			const label = 'WordPress';
+			render( <Placeholder label={ label } /> );
+			const placeholderLabel = screen.getByText( label );
+
+			expect( placeholderLabel ).toHaveClass(
+				'components-placeholder__label'
+			);
+			expect( placeholderLabel ).toBeInTheDocument();
+		} );
+
+		it( 'should display a fieldset from the children property', () => {
+			const content = 'Fieldset';
+			render( <Placeholder>{ content }</Placeholder> );
+			const placeholderFieldset = screen.getByRole( 'group' );
+
+			expect( placeholderFieldset ).toBeInTheDocument();
+			expect( placeholderFieldset ).toHaveTextContent( content );
+		} );
+
+		it( 'should display a legend if instructions are passed', () => {
+			const instructions = 'Choose an option.';
+			render(
+				<Placeholder instructions={ instructions }>
+					<div>Fieldset</div>
+				</Placeholder>
+			);
+			const captionedFieldset = screen.getByRole( 'group', {
+				name: instructions,
+			} );
+
+			expect( captionedFieldset ).toBeInTheDocument();
+		} );
+
+		it( 'should add an additional className to the top container', () => {
+			render( <Placeholder className="wp-placeholder" /> );
+			const placeholder = getPlaceholder();
+
+			expect( placeholder ).toHaveClass( 'components-placeholder' );
+			expect( placeholder ).toHaveClass( 'wp-placeholder' );
+		} );
+
+		it( 'should add additional props to the top level container', () => {
+			render( <Placeholder data-test="test" /> );
+			const placeholder = getPlaceholder();
+
+			expect( placeholder ).toHaveAttribute( 'data-test', 'test' );
+		} );
+	} );
+
+	describe( 'resize aware', () => {
+		it( 'should not assign modifier class in first-pass `null` width from `useResizeObserver`', () => {
+			// @ts-ignore
+			useResizeObserver.mockReturnValue( [
+				<div key="1" />,
+				{ width: 480 },
+			] );
+
+			render( <Placeholder /> );
+			const placeholder = getPlaceholder();
+
+			expect( placeholder ).toHaveClass( 'is-large' );
+			expect( placeholder ).not.toHaveClass( 'is-medium' );
+			expect( placeholder ).not.toHaveClass( 'is-small' );
+		} );
+
+		it( 'should assign modifier class', () => {
+			// @ts-ignore
+			useResizeObserver.mockReturnValue( [
+				<div key="1" />,
+				{ width: null },
+			] );
+
+			render( <Placeholder /> );
+			const placeholder = getPlaceholder();
+
+			expect( placeholder ).not.toHaveClass( 'is-large' );
+			expect( placeholder ).not.toHaveClass( 'is-medium' );
+			expect( placeholder ).not.toHaveClass( 'is-small' );
+		} );
+	} );
+} );

package/src/popover/index.js

@@ -13,6 +13,8 @@ import {
 	limitShift,
 	size,
 } from '@floating-ui/react-dom';
+// eslint-disable-next-line no-restricted-imports
+import { motion, useReducedMotion } from 'framer-motion';
 
 /**
  * WordPress dependencies
@@ -24,6 +26,7 @@ import {
 	createContext,
 	useContext,
 	useMemo,
+	useEffect,
 } from '@wordpress/element';
 import {
 	useViewportMatch,
@@ -40,7 +43,11 @@ import { Path, SVG } from '@wordpress/primitives';
 import Button from '../button';
 import ScrollLock from '../scroll-lock';
 import { Slot, Fill, useSlot } from '../slot-fill';
-import { getAnimateClassName } from '../animate';
+import {
+	getFrameOffset,
+	positionToPlacement,
+	placementToMotionAnimationProps,
+} from './utils';
 
 /**
  * Name of slot in which popover should fill.
@@ -73,50 +80,48 @@ const ArrowTriangle = ( props ) => (
 	</SVG>
 );
 
-const slotNameContext = createContext();
-
-const positionToPlacement = ( position ) => {
-	const [ x, y, z ] = position.split( ' ' );
-
-	if ( [ 'top', 'bottom' ].includes( x ) ) {
-		let suffix = '';
-		if ( ( !! z && z === 'left' ) || y === 'right' ) {
-			suffix = '-start';
-		} else if ( ( !! z && z === 'right' ) || y === 'left' ) {
-			suffix = '-end';
-		}
-		return x + suffix;
-	}
-
-	return y;
-};
+const MaybeAnimatedWrapper = forwardRef(
+	(
+		{
+			style: receivedInlineStyles,
+			placement,
+			shouldAnimate = false,
+			...props
+		},
+		forwardedRef
+	) => {
+		const shouldReduceMotion = useReducedMotion();
+
+		const { style: motionInlineStyles, ...otherMotionProps } = useMemo(
+			() => placementToMotionAnimationProps( placement ),
+			[ placement ]
+		);
 
-const placementToAnimationOrigin = ( placement ) => {
-	const [ a, b ] = placement.split( '-' );
-
-	let x, y;
-	if ( a === 'top' || a === 'bottom' ) {
-		x = a === 'top' ? 'bottom' : 'top';
-		y = 'middle';
-		if ( b === 'start' ) {
-			y = 'left';
-		} else if ( b === 'end' ) {
-			y = 'right';
+		if ( shouldAnimate && ! shouldReduceMotion ) {
+			return (
+				<motion.div
+					style={ {
+						...motionInlineStyles,
+						...receivedInlineStyles,
+					} }
+					{ ...otherMotionProps }
+					{ ...props }
+					ref={ forwardedRef }
+				/>
+			);
 		}
-	}
 
-	if ( a === 'left' || a === 'right' ) {
-		x = 'center';
-		y = a === 'left' ? 'right' : 'left';
-		if ( b === 'start' ) {
-			x = 'top';
-		} else if ( b === 'end' ) {
-			x = 'bottom';
-		}
+		return (
+			<div
+				style={ receivedInlineStyles }
+				{ ...props }
+				ref={ forwardedRef }
+			/>
+		);
 	}
+);
 
-	return x + ' ' + y;
-};
+const slotNameContext = createContext();
 
 const Popover = (
 	{
@@ -130,7 +135,7 @@ const Popover = (
 		isAlternate,
 		position,
 		placement: placementProp = 'bottom-start',
-		offset,
+		offset: offsetProp = 0,
 		focusOnMount = 'firstElement',
 		anchorRef,
 		anchorRect,
@@ -138,7 +143,6 @@ const Popover = (
 		expandOnMobile,
 		onFocusOutside,
 		__unstableSlotName = SLOT_NAME,
-		__unstableObserveElement,
 		__unstableForcePosition = false,
 		__unstableShift = false,
 		...contentProps
@@ -162,7 +166,7 @@ const Popover = (
 		? positionToPlacement( position )
 		: placementProp;
 
-	const ownerDocument = useMemo( () => {
+	const referenceOwnerDocument = useMemo( () => {
 		let documentToReturn;
 
 		if ( anchorRef?.top ) {
@@ -187,62 +191,57 @@ const Popover = (
 
 	/**
 	 * Offsets the position of the popover when the anchor is inside an iframe.
+	 *
+	 * Store the offset in a ref, due to constraints with floating-ui:
+	 * https://floating-ui.com/docs/react-dom#variables-inside-middleware-functions.
 	 */
-	const frameOffset = useMemo( () => {
-		const { defaultView } = ownerDocument;
-		const { frameElement } = defaultView;
-
-		if ( ! frameElement || ownerDocument === document ) {
-			return undefined;
-		}
-
-		const iframeRect = frameElement.getBoundingClientRect();
-		return { x: iframeRect.left, y: iframeRect.top };
-	}, [ ownerDocument ] );
+	const frameOffsetRef = useRef( getFrameOffset( referenceOwnerDocument ) );
+	/**
+	 * Store the offset prop in a ref, due to constraints with floating-ui:
+	 * https://floating-ui.com/docs/react-dom#variables-inside-middleware-functions.
+	 */
+	const offsetRef = useRef( offsetProp );
 
 	const middleware = [
-		frameOffset || offset
-			? offsetMiddleware( ( { placement: currentPlacement } ) => {
-					if ( ! frameOffset ) {
-						return offset;
-					}
-
-					const isTopBottomPlacement =
-						currentPlacement.includes( 'top' ) ||
-						currentPlacement.includes( 'bottom' );
-
-					// The main axis should represent the gap between the
-					// floating element and the reference element. The cross
-					// axis is always perpendicular to the main axis.
-					const mainAxis = isTopBottomPlacement ? 'y' : 'x';
-					const crossAxis = mainAxis === 'x' ? 'y' : 'x';
-
-					// When the popover is before the reference, subtract the offset,
-					// of the main axis else add it.
-					const hasBeforePlacement =
-						currentPlacement.includes( 'top' ) ||
-						currentPlacement.includes( 'left' );
-					const mainAxisModifier = hasBeforePlacement ? -1 : 1;
-					const normalizedOffset = offset ? offset : 0;
-
-					return {
-						mainAxis:
-							normalizedOffset +
-							frameOffset[ mainAxis ] * mainAxisModifier,
-						crossAxis: frameOffset[ crossAxis ],
-					};
-			  } )
-			: undefined,
+		offsetMiddleware( ( { placement: currentPlacement } ) => {
+			if ( ! frameOffsetRef.current ) {
+				return offsetRef.current;
+			}
+
+			const isTopBottomPlacement =
+				currentPlacement.includes( 'top' ) ||
+				currentPlacement.includes( 'bottom' );
+
+			// The main axis should represent the gap between the
+			// floating element and the reference element. The cross
+			// axis is always perpendicular to the main axis.
+			const mainAxis = isTopBottomPlacement ? 'y' : 'x';
+			const crossAxis = mainAxis === 'x' ? 'y' : 'x';
+
+			// When the popover is before the reference, subtract the offset,
+			// of the main axis else add it.
+			const hasBeforePlacement =
+				currentPlacement.includes( 'top' ) ||
+				currentPlacement.includes( 'left' );
+			const mainAxisModifier = hasBeforePlacement ? -1 : 1;
+
+			return {
+				mainAxis:
+					offsetRef.current +
+					frameOffsetRef.current[ mainAxis ] * mainAxisModifier,
+				crossAxis: frameOffsetRef.current[ crossAxis ],
+			};
+		} ),
 		__unstableForcePosition ? undefined : flip(),
 		__unstableForcePosition
 			? undefined
 			: size( {
 					apply( sizeProps ) {
-						const { height } = sizeProps;
+						const { availableHeight } = sizeProps;
 						if ( ! refs.floating.current ) return;
 						// Reduce the height of the popover to the available space.
 						Object.assign( refs.floating.current.firstChild.style, {
-							maxHeight: `${ height }px`,
+							maxHeight: `${ availableHeight }px`,
 							overflow: 'auto',
 						} );
 					},
@@ -296,6 +295,11 @@ const Popover = (
 		middlewareData: { arrow: arrowData = {} },
 	} = useFloating( { placement: normalizedPlacementFromProps, middleware } );
 
+	useEffect( () => {
+		offsetRef.current = offsetProp;
+		update();
+	}, [ offsetProp, update ] );
+
 	// Update the `reference`'s ref.
 	//
 	// In floating-ui's terms:
@@ -369,42 +373,44 @@ const Popover = (
 		return autoUpdate(
 			resultingReferenceRef,
 			refs.floating.current,
-			update
+			update,
+			{
+				animationFrame: true,
+			}
 		);
-	}, [ anchorRef, anchorRect, getAnchorRect ] );
-
-	// This is only needed for a smooth transition when moving blocks.
-	useLayoutEffect( () => {
-		if ( ! __unstableObserveElement ) {
-			return;
-		}
-		const observer = new window.MutationObserver( update );
-		observer.observe( __unstableObserveElement, { attributes: true } );
-
-		return () => {
-			observer.disconnect();
-		};
-	}, [ __unstableObserveElement ] );
+		// 'reference' and 'refs.floating' are refs and don't need to be listed
+		// as dependencies (see https://github.com/WordPress/gutenberg/pull/41612)
+		// eslint-disable-next-line react-hooks/exhaustive-deps
+	}, [ anchorRef, anchorRect, getAnchorRect, update ] );
 
 	// If the reference element is in a different ownerDocument (e.g. iFrame),
 	// we need to manually update the floating's position as the reference's owner
-	// document scrolls.
+	// document scrolls. Also update the frame offset if the view resizes.
 	useLayoutEffect( () => {
-		if ( ownerDocument === document ) {
+		const referenceAndFloatingHaveSameDocument =
+			referenceOwnerDocument === document;
+		const hasFrameElement =
+			!! referenceOwnerDocument?.defaultView?.frameElement;
+
+		if ( referenceAndFloatingHaveSameDocument || ! hasFrameElement ) {
+			frameOffsetRef.current = undefined;
 			return;
 		}
 
-		ownerDocument.addEventListener( 'scroll', update );
-		return () => ownerDocument.removeEventListener( 'scroll', update );
-	}, [ ownerDocument ] );
+		const { defaultView } = referenceOwnerDocument;
 
-	/** @type {false | string} */
-	const animateClassName =
-		!! animate &&
-		getAnimateClassName( {
-			type: 'appear',
-			origin: placementToAnimationOrigin( computedPlacement ),
-		} );
+		const updateFrameOffset = () => {
+			frameOffsetRef.current = getFrameOffset( referenceOwnerDocument );
+			update();
+		};
+		defaultView.addEventListener( 'resize', updateFrameOffset );
+
+		updateFrameOffset();
+
+		return () => {
+			defaultView.removeEventListener( 'resize', updateFrameOffset );
+		};
+	}, [ referenceOwnerDocument, update ] );
 
 	const mergedFloatingRef = useMergeRefs( [
 		floating,
@@ -418,16 +424,13 @@ const Popover = (
 	let content = (
 		// eslint-disable-next-line jsx-a11y/no-noninteractive-element-interactions
 		// eslint-disable-next-line jsx-a11y/no-static-element-interactions
-		<div
-			className={ classnames(
-				'components-popover',
-				className,
-				animateClassName,
-				{
-					'is-expanded': isExpanded,
-					'is-alternate': isAlternate,
-				}
-			) }
+		<MaybeAnimatedWrapper
+			shouldAnimate={ animate && ! isExpanded }
+			placement={ computedPlacement }
+			className={ classnames( 'components-popover', className, {
+				'is-expanded': isExpanded,
+				'is-alternate': isAlternate,
+			} ) }
 			{ ...contentProps }
 			ref={ mergedFloatingRef }
 			{ ...dialogProps }
@@ -476,7 +479,7 @@ const Popover = (
 					<ArrowTriangle />
 				</div>
 			) }
-		</div>
+		</MaybeAnimatedWrapper>
 	);
 
 	if ( slot.ref ) {