@wordpress/components 27.4.0 → 27.6.0

package/src/mobile/keyboard-aware-flat-list/styles.native.scss

@@ -0,0 +1,8 @@
+.list__container {
+	flex-grow: 1;
+	align-items: stretch;
+}
+
+.list__content {
+	margin-bottom: $mobile-block-toolbar-height;
+}

package/src/modal/aria-helper.ts

@@ -25,7 +25,9 @@ export function modalize( modalElement?: HTMLDivElement ) {
 	const hiddenElements: Element[] = [];
 	hiddenElementsByDepth.push( hiddenElements );
 	for ( const element of elements ) {
-		if ( element === modalElement ) continue;
+		if ( element === modalElement ) {
+			continue;
+		}
 
 		if ( elementShouldBeHidden( element ) ) {
 			element.setAttribute( 'aria-hidden', 'true' );
@@ -56,8 +58,11 @@ export function elementShouldBeHidden( element: Element ) {
  */
 export function unmodalize() {
 	const hiddenElements = hiddenElementsByDepth.pop();
-	if ( ! hiddenElements ) return;
+	if ( ! hiddenElements ) {
+		return;
+	}
 
-	for ( const element of hiddenElements )
+	for ( const element of hiddenElements ) {
 		element.removeAttribute( 'aria-hidden' );
+	}
 }

package/src/modal/index.tsx

@@ -1,7 +1,7 @@
 /**
  * External dependencies
  */
-import classnames from 'classnames';
+import clsx from 'clsx';
 import type {
 	ForwardedRef,
 	KeyboardEvent,
@@ -154,7 +154,9 @@ function UnforwardedModal(
 	useEffect( () => {
 		dismissers.push( refOnRequestClose );
 		const [ first, second ] = dismissers;
-		if ( second ) first?.current?.();
+		if ( second ) {
+			first?.current?.();
+		}
 
 		const nested = nestedDismissers.current;
 		return () => {
@@ -243,7 +245,9 @@ function UnforwardedModal(
 		onPointerUp: ( { target, button } ) => {
 			const isSameTarget = target === pressTarget;
 			pressTarget = null;
-			if ( button === 0 && isSameTarget ) onRequestClose();
+			if ( button === 0 && isSameTarget ) {
+				onRequestClose();
+			}
 		},
 	};
 
@@ -251,7 +255,7 @@ function UnforwardedModal(
 		// eslint-disable-next-line jsx-a11y/no-static-element-interactions
 		<div
 			ref={ useMergeRefs( [ ref, forwardedRef ] ) }
-			className={ classnames(
+			className={ clsx(
 				'components-modal__screen-overlay',
 				overlayClassName
 			) }
@@ -260,7 +264,7 @@ function UnforwardedModal(
 		>
 			<StyleProvider document={ document }>
 				<div
-					className={ classnames(
+					className={ clsx(
 						'components-modal__frame',
 						sizeClass,
 						className
@@ -281,7 +285,7 @@ function UnforwardedModal(
 					onKeyDown={ onKeyDown }
 				>
 					<div
-						className={ classnames( 'components-modal__content', {
+						className={ clsx( 'components-modal__content', {
 							'hide-header': __experimentalHideHeader,
 							'is-scrollable': hasScrollableContent,
 							'has-scrolled-content': hasScrolledContent,

package/src/modal/test/index.tsx

@@ -178,7 +178,9 @@ describe( 'Modal', () => {
 					{ isShown && (
 						<Modal
 							onKeyDown={ ( { key } ) => {
-								if ( key === 'o' ) setIsShown( false );
+								if ( key === 'o' ) {
+									setIsShown( false );
+								}
 							} }
 							onRequestClose={ noop }
 						>
@@ -402,12 +404,17 @@ describe( 'Modal', () => {
 					metaKey,
 				} ) => {
 					if ( key === 'a' ) {
-						if ( metaKey ) return setIsA1Shown( ( v ) => ! v );
+						if ( metaKey ) {
+							return setIsA1Shown( ( v ) => ! v );
+						}
 						return setIsAShown( ( v ) => ! v );
 					}
-					if ( key === 'b' ) return setIsBShown( ( v ) => ! v );
-					if ( key === 'c' )
+					if ( key === 'b' ) {
+						return setIsBShown( ( v ) => ! v );
+					}
+					if ( key === 'c' ) {
 						return setIsClassOverriden( ( v ) => ! v );
+					}
 				};
 				document.addEventListener( 'keydown', toggles );
 				return () =>

package/src/navigation/back-button/index.tsx

@@ -1,7 +1,7 @@
 /**
  * External dependencies
  */
-import classnames from 'classnames';
+import clsx from 'clsx';
 /**
  * WordPress dependencies
  */
@@ -29,10 +29,7 @@ function UnforwardedNavigationBackButton(
 ) {
 	const { setActiveMenu, navigationTree } = useNavigationContext();
 
-	const classes = classnames(
-		'components-navigation__back-button',
-		className
-	);
+	const classes = clsx( 'components-navigation__back-button', className );
 
 	const parentMenuTitle =
 		parentMenu !== undefined

package/src/navigation/group/index.tsx

@@ -1,7 +1,7 @@
 /**
  * External dependencies
  */
-import classnames from 'classnames';
+import clsx from 'clsx';
 
 /**
  * WordPress dependencies
@@ -48,7 +48,7 @@ export function NavigationGroup( {
 	}
 
 	const groupTitleId = `components-navigation__group-title-${ groupId }`;
-	const classes = classnames( 'components-navigation__group', className );
+	const classes = clsx( 'components-navigation__group', className );
 
 	return (
 		<NavigationGroupContext.Provider value={ context }>

package/src/navigation/index.tsx

@@ -1,7 +1,7 @@
 /**
  * External dependencies
  */
-import classnames from 'classnames';
+import clsx from 'clsx';
 
 /**
  * WordPress dependencies
@@ -116,7 +116,7 @@ export function Navigation( {
 		navigationTree,
 	};
 
-	const classes = classnames( 'components-navigation', className );
+	const classes = clsx( 'components-navigation', className );
 	const animateClassName = getAnimateClassName( {
 		type: 'slide-in',
 		origin: slideOrigin,
@@ -128,7 +128,7 @@ export function Navigation( {
 				key={ menu }
 				className={
 					animateClassName
-						? classnames( {
+						? clsx( {
 								[ animateClassName ]:
 									isMounted.current && slideOrigin,
 						  } )

package/src/navigation/item/base.tsx

@@ -1,7 +1,7 @@
 /**
  * External dependencies
  */
-import classnames from 'classnames';
+import clsx from 'clsx';
 
 /**
  * WordPress dependencies
@@ -32,7 +32,7 @@ export default function NavigationItemBase( props: NavigationItemBaseProps ) {
 		return null;
 	}
 
-	const classes = classnames( 'components-navigation__item', className );
+	const classes = clsx( 'components-navigation__item', className );
 
 	return (
 		<ItemBaseUI className={ classes } { ...restProps }>

package/src/navigation/item/index.tsx

@@ -1,7 +1,7 @@
 /**
  * External dependencies
  */
-import classnames from 'classnames';
+import clsx from 'clsx';
 
 /**
  * WordPress dependencies
@@ -60,7 +60,7 @@ export function NavigationItem( props: NavigationItemProps ) {
 
 	const isActive = item && activeItem === item;
 
-	const classes = classnames( className, {
+	const classes = clsx( className, {
 		'is-active': isActive,
 	} );
 

package/src/navigation/menu/index.tsx

@@ -1,7 +1,7 @@
 /**
  * External dependencies
  */
-import classnames from 'classnames';
+import clsx from 'clsx';
 
 /**
  * WordPress dependencies
@@ -66,7 +66,7 @@ export function NavigationMenu( props: NavigationMenuProps ) {
 		: setUncontrolledSearch;
 
 	const menuTitleId = `components-navigation__menu-title-${ menu }`;
-	const classes = classnames( 'components-navigation__menu', className );
+	const classes = clsx( 'components-navigation__menu', className );
 
 	return (
 		<NavigationMenuContext.Provider value={ context }>

package/src/navigation/styles/navigation-styles.tsx

@@ -15,7 +15,7 @@ import { COLORS } from '../../utils/colors-values';
 import Button from '../../button';
 import { Text } from '../../text';
 import { Heading } from '../../heading';
-import { reduceMotion, rtl } from '../../utils';
+import { rtl } from '../../utils';
 import { space } from '../../utils/space';
 
 export const NavigationUI = styled.div`
@@ -173,7 +173,6 @@ export const ItemBadgeUI = styled.span`
 	display: inline-flex;
 	padding: ${ space( 1 ) } ${ space( 3 ) };
 	border-radius: 2px;
-	animation: fade-in 250ms ease-out;
 
 	@keyframes fade-in {
 		from {
@@ -184,7 +183,9 @@ export const ItemBadgeUI = styled.span`
 		}
 	}
 
-	${ reduceMotion( 'animation' ) };
+	@media not ( prefers-reduced-motion ) {
+		animation: fade-in 250ms ease-out;
+	}
 `;
 
 export const ItemTitleUI = styled( Text )`

package/src/notice/index.tsx

@@ -1,7 +1,7 @@
 /**
  * External dependencies
  */
-import classnames from 'classnames';
+import clsx from 'clsx';
 
 /**
  * WordPress dependencies
@@ -93,14 +93,9 @@ function Notice( {
 }: NoticeProps ) {
 	useSpokenMessage( spokenMessage, politeness );
 
-	const classes = classnames(
-		className,
-		'components-notice',
-		'is-' + status,
-		{
-			'is-dismissible': isDismissible,
-		}
-	);
+	const classes = clsx( className, 'components-notice', 'is-' + status, {
+		'is-dismissible': isDismissible,
+	} );
 
 	if ( __unstableHTML && typeof children === 'string' ) {
 		children = <RawHTML>{ children }</RawHTML>;
@@ -151,7 +146,7 @@ function Notice( {
 									href={ url }
 									variant={ computedVariant }
 									onClick={ url ? undefined : onClick }
-									className={ classnames(
+									className={ clsx(
 										'components-notice__action',
 										buttonCustomClasses
 									) }

package/src/notice/list.tsx

@@ -1,7 +1,7 @@
 /**
  * External dependencies
  */
-import classnames from 'classnames';
+import clsx from 'clsx';
 
 /**
  * Internal dependencies
@@ -48,7 +48,7 @@ function NoticeList( {
 		( id: NoticeListProps[ 'notices' ][ number ][ 'id' ] ) => () =>
 			onRemove( id );
 
-	className = classnames( 'components-notice-list', className );
+	className = clsx( 'components-notice-list', className );
 
 	return (
 		<div className={ className }>

package/src/number-control/index.tsx

@@ -1,7 +1,7 @@
 /**
  * External dependencies
  */
-import classNames from 'classnames';
+import clsx from 'clsx';
 import type { ForwardedRef, KeyboardEvent, MouseEvent } from 'react';
 
 /**
@@ -82,7 +82,7 @@ function UnforwardedNumberControl(
 	};
 
 	const autoComplete = typeProp === 'number' ? 'off' : undefined;
-	const classes = classNames( 'components-number-control', className );
+	const classes = clsx( 'components-number-control', className );
 	const cx = useCx();
 	const spinButtonClasses = cx( size === 'small' && styles.smallSpinButtons );
 

package/src/palette-edit/index.tsx

@@ -1,7 +1,7 @@
 /**
  * External dependencies
  */
-import classnames from 'classnames';
+import clsx from 'clsx';
 
 /**
  * WordPress dependencies
@@ -37,13 +37,13 @@ import {
 	PaletteActionsContainer,
 	PaletteEditStyles,
 	PaletteHeading,
-	PaletteHStackHeader,
 	IndicatorStyled,
 	PaletteItem,
 	NameContainer,
 	NameInputControl,
 	DoneButton,
 	RemoveButton,
+	PaletteEditContents,
 } from './styles';
 import { NavigableMenu } from '../navigable-container';
 import { DEFAULT_GRADIENT } from '../custom-gradient-picker/constants';
@@ -130,7 +130,7 @@ function ColorPickerPopover< T extends Color | Gradient >( {
 				resize: false,
 				placement: 'left-start',
 				...receivedPopoverProps,
-				className: classnames(
+				className: clsx(
 					'components-palette-edit__popover',
 					receivedPopoverProps?.className
 				),
@@ -410,7 +410,7 @@ export function PaletteEdit( {
 
 	return (
 		<PaletteEditStyles>
-			<PaletteHStackHeader>
+			<HStack>
 				<PaletteHeading level={ paletteLabelHeadingLevel }>
 					{ paletteLabel }
 				</PaletteHeading>
@@ -542,9 +542,9 @@ export function PaletteEdit( {
 							</DropdownMenu>
 						) }
 				</PaletteActionsContainer>
-			</PaletteHStackHeader>
+			</HStack>
 			{ hasElements && (
-				<>
+				<PaletteEditContents>
 					{ isEditing && (
 						<PaletteEditListView< ( typeof elements )[ number ] >
 							canOnlyChangeValues={ canOnlyChangeValues }
@@ -602,9 +602,11 @@ export function PaletteEdit( {
 								disableCustomColors
 							/>
 						) ) }
-				</>
+				</PaletteEditContents>
+			) }
+			{ ! hasElements && emptyMessage && (
+				<PaletteEditContents>{ emptyMessage }</PaletteEditContents>
 			) }
-			{ ! hasElements && emptyMessage }
 		</PaletteEditStyles>
 	);
 }

package/src/palette-edit/styles.ts

@@ -9,7 +9,6 @@ import { css } from '@emotion/react';
  */
 import Button from '../button';
 import { Heading } from '../heading';
-import { HStack } from '../h-stack';
 import { space } from '../utils/space';
 import { COLORS, CONFIG, font } from '../utils';
 import { View } from '../view';
@@ -131,8 +130,8 @@ export const PaletteActionsContainer = styled( View )`
 	display: flex;
 `;
 
-export const PaletteHStackHeader = styled( HStack )`
-	margin-bottom: ${ space( 2 ) };
+export const PaletteEditContents = styled( View )`
+	margin-top: ${ space( 2 ) };
 `;
 
 export const PaletteEditStyles = styled( View )`

package/src/panel/body.tsx

@@ -1,7 +1,7 @@
 /**
  * External dependencies
  */
-import classnames from 'classnames';
+import clsx from 'clsx';
 
 /**
  * WordPress dependencies
@@ -79,7 +79,7 @@ export function UnforwardedPanelBody(
 		}
 	}, [ isOpened, scrollBehavior ] );
 
-	const classes = classnames( 'components-panel__body', className, {
+	const classes = clsx( 'components-panel__body', className, {
 		'is-opened': isOpened,
 	} );
 
@@ -109,7 +109,9 @@ const PanelBodyTitle = forwardRef(
 		}: WordPressComponentProps< PanelBodyTitleProps, 'button' >,
 		ref: React.ForwardedRef< any >
 	) => {
-		if ( ! title ) return null;
+		if ( ! title ) {
+			return null;
+		}
 
 		return (
 			<h2 className="components-panel__body-title">

package/src/panel/index.tsx

@@ -1,7 +1,7 @@
 /**
  * External dependencies
  */
-import classnames from 'classnames';
+import clsx from 'clsx';
 
 /**
  * WordPress dependencies
@@ -18,7 +18,7 @@ function UnforwardedPanel(
 	{ header, className, children }: PanelProps,
 	ref: React.ForwardedRef< HTMLDivElement >
 ) {
-	const classNames = classnames( className, 'components-panel' );
+	const classNames = clsx( className, 'components-panel' );
 	return (
 		<div className={ classNames } ref={ ref }>
 			{ header && <PanelHeader label={ header } /> }

package/src/panel/row.tsx

@@ -1,7 +1,7 @@
 /**
  * External dependencies
  */
-import classnames from 'classnames';
+import clsx from 'clsx';
 
 /**
  * WordPress dependencies
@@ -20,7 +20,7 @@ function UnforwardedPanelRow(
 ) {
 	return (
 		<div
-			className={ classnames( 'components-panel__row', className ) }
+			className={ clsx( 'components-panel__row', className ) }
 			ref={ ref }
 		>
 			{ children }

package/src/panel/style.scss

@@ -32,6 +32,7 @@
 
 .components-panel__header {
 	display: flex;
+	flex-shrink: 0;
 	justify-content: space-between;
 	align-items: center;
 	padding: 0 $grid-unit-20;

package/src/placeholder/index.tsx

@@ -1,7 +1,7 @@
 /**
  * External dependencies
  */
-import classnames from 'classnames';
+import clsx from 'clsx';
 
 /**
  * WordPress dependencies
@@ -68,14 +68,14 @@ export function Placeholder(
 		};
 	}
 
-	const classes = classnames(
+	const classes = clsx(
 		'components-placeholder',
 		className,
 		modifierClassNames,
 		withIllustration ? 'has-illustration' : null
 	);
 
-	const fieldsetClasses = classnames( 'components-placeholder__fieldset', {
+	const fieldsetClasses = clsx( 'components-placeholder__fieldset', {
 		'is-column-layout': isColumnLayout,
 	} );
 

package/src/placeholder/style.scss

@@ -3,7 +3,7 @@
 	font-size: $default-font-size;
 	box-sizing: border-box;
 	position: relative;
-	padding: 1em;
+	padding: $grid-unit-30;
 	width: 100%;
 	text-align: left;
 	margin: 0;
@@ -11,6 +11,7 @@
 	display: flex;
 	flex-direction: column;
 	align-items: flex-start;
+	gap: $grid-unit-20;
 
 	// Some editor styles unset this.
 	-moz-font-smoothing: subpixel-antialiased;
@@ -38,15 +39,14 @@
 }
 
 .components-placeholder__label {
-	display: flex;
 	font-weight: 600;
-	margin-bottom: $grid-unit-20;
 	align-items: center;
+	display: flex;
 
 	> svg,
 	.dashicon,
 	.block-editor-block-icon {
-		margin-right: $grid-unit-15;
+		margin-right: $grid-unit-05;
 		fill: currentColor;
 		// Optimizate for high contrast modes.
 		// See also https://blogs.windows.com/msedgedev/2020/09/17/styling-for-windows-high-contrast-with-new-standards-for-forced-colors/.
@@ -67,6 +67,8 @@
 	flex-direction: row;
 	width: 100%;
 	flex-wrap: wrap;
+	gap: $grid-unit-20;
+	justify-content: flex-start;
 
 	p {
 		font-family: $default-font;
@@ -81,28 +83,14 @@
 
 .components-placeholder__input[type="url"] {
 	@include input-control;
-	margin: 0 8px 0 0;
 	flex: 1 1 auto;
 }
 
-.components-placeholder__instructions {
-	margin-bottom: 1em;
-}
-
 .components-placeholder__error {
-	margin-top: 1em;
 	width: 100%;
+	gap: $grid-unit-10;
 }
 
-.components-placeholder__fieldset .components-button {
-	margin-right: $grid-unit-15;
-	margin-bottom: $grid-unit-15; // If buttons wrap we need vertical space between.
-
-	&:last-child {
-		margin-bottom: 0;
-		margin-right: 0;
-	}
-}
 
 // Any `<Button />` component with `variant="link"` prop will need extra spacing if placed
 // immediately after a button which is *not* an `variant="link"` style button. This is because
@@ -119,14 +107,6 @@
 
 // Element queries to show different layouts at various sizes.
 .components-placeholder {
-	// Medium and large sizes.
-	&.is-large {
-		.components-placeholder__label {
-			font-size: 18pt;
-			font-weight: normal;
-		}
-	}
-
 	// Medium and small sizes.
 	&.is-medium,
 	&.is-small {
@@ -139,16 +119,15 @@
 			flex-direction: column;
 		}
 
-		.components-placeholder__fieldset .components-button {
-			margin-right: auto;
+		.components-placeholder__fieldset > *,
+		.components-button {
+			width: 100%;
+			justify-content: center;
 		}
 	}
 
-	// Small sizes.
 	&.is-small {
-		.components-button {
-			padding: 0 $grid-unit-10 2px;
-		}
+		padding: $grid-unit-20;
 	}
 }
 
@@ -179,8 +158,6 @@
 	}
 
 	.components-placeholder__fieldset {
-		width: auto;
-
 		// Unset intrinsic margins.
 		margin-left: 0;
 		margin-right: 0;

package/src/popover/index.tsx

@@ -2,7 +2,7 @@
  * External dependencies
  */
 import type { ForwardedRef, SyntheticEvent, RefCallback } from 'react';
-import classnames from 'classnames';
+import clsx from 'clsx';
 import {
 	useFloating,
 	flip as flipMiddleware,
@@ -226,8 +226,9 @@ const UnforwardedPopover = (
 					const { firstElementChild } = refs.floating.current ?? {};
 
 					// Only HTMLElement instances have the `style` property.
-					if ( ! ( firstElementChild instanceof HTMLElement ) )
+					if ( ! ( firstElementChild instanceof HTMLElement ) ) {
 						return;
+					}
 
 					// Reduce the height of the popover to the available space.
 					Object.assign( firstElementChild.style, {
@@ -389,7 +390,7 @@ const UnforwardedPopover = (
 
 	let content = (
 		<motion.div
-			className={ classnames( className, {
+			className={ clsx( className, {
 				'is-expanded': isExpanded,
 				'is-positioned': isPositioned,
 				// Use the 'alternate' classname for 'toolbar' variant for back compat.