@wordpress/components 27.5.0 → 27.6.0

package/src/form-token-field/token.tsx

@@ -1,7 +1,7 @@
 /**
  * External dependencies
  */
-import classnames from 'classnames';
+import clsx from 'clsx';
 
 /**
  * WordPress dependencies
@@ -34,7 +34,7 @@ export default function Token( {
 	termsCount,
 }: TokenProps ) {
 	const instanceId = useInstanceId( Token );
-	const tokenClasses = classnames( 'components-form-token-field__token', {
+	const tokenClasses = clsx( 'components-form-token-field__token', {
 		'is-error': 'error' === status,
 		'is-success': 'success' === status,
 		'is-validating': 'validating' === status,

package/src/guide/index.tsx

@@ -1,7 +1,7 @@
 /**
  * External dependencies
  */
-import classnames from 'classnames';
+import clsx from 'clsx';
 
 /**
  * WordPress dependencies
@@ -106,7 +106,7 @@ function Guide( {
 
 	return (
 		<Modal
-			className={ classnames( 'components-guide', className ) }
+			className={ clsx( 'components-guide', className ) }
 			contentLabel={ contentLabel }
 			isDismissible={ pages.length > 1 }
 			onRequestClose={ onFinish }

package/src/input-control/index.tsx

@@ -1,7 +1,7 @@
 /**
  * External dependencies
  */
-import classNames from 'classnames';
+import clsx from 'clsx';
 import type { ForwardedRef } from 'react';
 
 /**
@@ -58,7 +58,7 @@ export function UnforwardedInputControl(
 	} = useDeprecated36pxDefaultSizeProp< InputControlProps >( props );
 
 	const id = useUniqueId( idProp );
-	const classes = classNames( 'components-input-control', className );
+	const classes = clsx( 'components-input-control', className );
 
 	const draftHookProps = useDraft( {
 		value,
@@ -66,10 +66,7 @@ export function UnforwardedInputControl(
 		onChange,
 	} );
 
-	// ARIA descriptions can only contain plain text, so fall back to aria-details if not.
-	const helpPropName =
-		typeof help === 'string' ? 'aria-describedby' : 'aria-details';
-	const helpProp = !! help ? { [ helpPropName ]: `${ id }__help` } : {};
+	const helpProp = !! help ? { 'aria-describedby': `${ id }__help` } : {};
 
 	return (
 		<BaseControl

package/src/input-control/test/index.js

@@ -53,7 +53,7 @@ describe( 'InputControl', () => {
 			).toBeInTheDocument();
 		} );
 
-		it( 'should render help as aria-details when not plain text', () => {
+		it( 'should still render help as aria-describedby when not plain text', () => {
 			render( <InputControl help={ <a href="/foo">My help text</a> } /> );
 
 			const input = screen.getByRole( 'textbox' );
@@ -61,7 +61,7 @@ describe( 'InputControl', () => {
 
 			expect(
 				// eslint-disable-next-line testing-library/no-node-access
-				help.closest( `#${ input.getAttribute( 'aria-details' ) }` )
+				help.closest( `#${ input.getAttribute( 'aria-describedby' ) }` )
 			).toBeVisible();
 		} );
 	} );

package/src/menu-group/index.tsx

@@ -1,7 +1,7 @@
 /**
  * External dependencies
  */
-import classnames from 'classnames';
+import clsx from 'clsx';
 
 /**
  * WordPress dependencies
@@ -38,7 +38,7 @@ export function MenuGroup( props: MenuGroupProps ) {
 	}
 
 	const labelId = `components-menu-group-label-${ instanceId }`;
-	const classNames = classnames( className, 'components-menu-group', {
+	const classNames = clsx( className, 'components-menu-group', {
 		'has-hidden-separator': hideSeparator,
 	} );
 

package/src/menu-item/index.tsx

@@ -2,7 +2,7 @@
  * External dependencies
  */
 import type { ForwardedRef } from 'react';
-import classnames from 'classnames';
+import clsx from 'clsx';
 
 /**
  * WordPress dependencies
@@ -35,7 +35,7 @@ function UnforwardedMenuItem(
 		...buttonProps
 	} = props;
 
-	className = classnames( 'components-menu-item__button', className );
+	className = clsx( 'components-menu-item__button', className );
 
 	if ( info ) {
 		children = (
@@ -48,7 +48,7 @@ function UnforwardedMenuItem(
 
 	if ( icon && typeof icon !== 'string' ) {
 		icon = cloneElement( icon, {
-			className: classnames( 'components-menu-items__item-icon', {
+			className: clsx( 'components-menu-items__item-icon', {
 				'has-icon-right': iconPosition === 'right',
 			} ),
 		} );

package/src/mobile/color-settings/utils.native.js

@@ -28,7 +28,7 @@ export const colorsUtils = {
 		picker: 'Picker',
 		palette: 'Palette',
 	},
-	segments: [ __( 'Solid' ), __( 'Gradient' ) ],
+	segments: [ __( 'Color' ), __( 'Gradient' ) ],
 	gradients,
 	gradientOptions,
 	getGradientType,

package/src/modal/index.tsx

@@ -1,7 +1,7 @@
 /**
  * External dependencies
  */
-import classnames from 'classnames';
+import clsx from 'clsx';
 import type {
 	ForwardedRef,
 	KeyboardEvent,
@@ -255,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
 			) }
@@ -264,7 +264,7 @@ function UnforwardedModal(
 		>
 			<StyleProvider document={ document }>
 				<div
-					className={ classnames(
+					className={ clsx(
 						'components-modal__frame',
 						sizeClass,
 						className
@@ -285,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/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/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,
 	} );
 

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/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

@@ -67,7 +67,7 @@
 	flex-direction: row;
 	width: 100%;
 	flex-wrap: wrap;
-	gap: $grid-unit-15;
+	gap: $grid-unit-20;
 	justify-content: flex-start;
 
 	p {
@@ -83,7 +83,6 @@
 
 .components-placeholder__input[type="url"] {
 	@include input-control;
-	margin: 0 8px 0 0;
 	flex: 1 1 auto;
 }
 

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,
@@ -390,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.

package/src/radio-control/index.tsx

@@ -1,7 +1,7 @@
 /**
  * External dependencies
  */
-import classnames from 'classnames';
+import clsx from 'clsx';
 import type { ChangeEvent } from 'react';
 
 /**
@@ -71,7 +71,7 @@ export function RadioControl(
 			id={ id }
 			hideLabelFromVision={ hideLabelFromVision }
 			help={ help }
-			className={ classnames( className, 'components-radio-control' ) }
+			className={ clsx( className, 'components-radio-control' ) }
 		>
 			<VStack spacing={ 1 }>
 				{ options.map( ( option, index ) => (

package/src/range-control/index.tsx

@@ -1,7 +1,7 @@
 /**
  * External dependencies
  */
-import classnames from 'classnames';
+import clsx from 'clsx';
 import type { ChangeEvent, FocusEvent, ForwardedRef } from 'react';
 
 /**
@@ -116,9 +116,9 @@ function UnforwardedRangeControl(
 		: ( ( value - min ) / ( max - min ) ) * 100;
 	const fillValueOffset = `${ clamp( fillValue, 0, 100 ) }%`;
 
-	const classes = classnames( 'components-range-control', className );
+	const classes = clsx( 'components-range-control', className );
 
-	const wrapperClasses = classnames(
+	const wrapperClasses = clsx(
 		'components-range-control__wrapper',
 		!! marks && 'is-marked'
 	);

package/src/range-control/mark.tsx

@@ -1,7 +1,7 @@
 /**
  * External dependencies
  */
-import classnames from 'classnames';
+import clsx from 'clsx';
 
 /**
  * Internal dependencies
@@ -22,12 +22,12 @@ export default function RangeMark(
 		...otherProps
 	} = props;
 
-	const classes = classnames(
+	const classes = clsx(
 		'components-range-control__mark',
 		isFilled && 'is-filled',
 		className
 	);
-	const labelClasses = classnames(
+	const labelClasses = clsx(
 		'components-range-control__mark-label',
 		isFilled && 'is-filled'
 	);

package/src/range-control/tooltip.tsx

@@ -1,7 +1,7 @@
 /**
  * External dependencies
  */
-import classnames from 'classnames';
+import clsx from 'clsx';
 
 /**
  * WordPress dependencies
@@ -31,7 +31,7 @@ export default function SimpleTooltip(
 		...restProps
 	} = props;
 	const position = useTooltipPosition( { inputRef, tooltipPosition } );
-	const classes = classnames( 'components-simple-tooltip', className );
+	const classes = clsx( 'components-simple-tooltip', className );
 	const styles = {
 		...style,
 		zIndex,