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

package/src/box-control/styles/box-control-styles.ts

@@ -1,80 +1,40 @@
 /**
  * External dependencies
  */
-import { css } from '@emotion/react';
 import styled from '@emotion/styled';
 /**
  * Internal dependencies
  */
-import { Flex } from '../../flex';
-import BaseUnitControl from '../../unit-control';
-import { rtl } from '../../utils';
-import type { BoxUnitControlProps } from '../types';
-
-export const Root = styled.div`
-	box-sizing: border-box;
-	max-width: 235px;
-	padding-bottom: 12px;
-	width: 100%;
+import BoxControlIcon from '../icon';
+import Button from '../../button';
+import { HStack } from '../../h-stack';
+import RangeControl from '../../range-control';
+import UnitControl from '../../unit-control';
+import { space } from '../../utils/space';
+
+export const StyledUnitControl = styled( UnitControl )`
+	max-width: 90px;
 `;
 
-export const Header = styled( Flex )`
-	margin-bottom: 8px;
+export const InputWrapper = styled( HStack )`
+	grid-column: 1 / span 3;
 `;
 
-export const HeaderControlWrapper = styled( Flex )`
-	min-height: 30px;
-	gap: 0;
+export const ResetButton = styled( Button )`
+	grid-area: 1 / 2;
+	justify-self: end;
 `;
 
-export const UnitControlWrapper = styled.div`
-	box-sizing: border-box;
-	max-width: 80px;
+export const LinkedButtonWrapper = styled.div`
+	grid-area: 1 / 3;
+	justify-self: end;
 `;
 
-export const LayoutContainer = styled( Flex )`
-	justify-content: center;
-	padding-top: 8px;
+export const FlexedBoxControlIcon = styled( BoxControlIcon )`
+	flex: 0 0 auto;
 `;
 
-export const Layout = styled( Flex )`
-	position: relative;
-	height: 100%;
+export const FlexedRangeControl = styled( RangeControl )`
 	width: 100%;
-	justify-content: flex-start;
-`;
-
-const unitControlBorderRadiusStyles = ( {
-	isFirst,
-	isLast,
-	isOnly,
-}: Pick< BoxUnitControlProps, 'isFirst' | 'isLast' | 'isOnly' > ) => {
-	if ( isFirst ) {
-		return rtl( { borderTopRightRadius: 0, borderBottomRightRadius: 0 } )();
-	}
-	if ( isLast ) {
-		return rtl( { borderTopLeftRadius: 0, borderBottomLeftRadius: 0 } )();
-	}
-	if ( isOnly ) {
-		return css( { borderRadius: 2 } );
-	}
-
-	return css( {
-		borderRadius: 0,
-	} );
-};
-
-const unitControlMarginStyles = ( {
-	isFirst,
-	isOnly,
-}: Pick< BoxUnitControlProps, 'isFirst' | 'isOnly' > ) => {
-	const marginLeft = isFirst || isOnly ? 0 : -1;
-
-	return rtl( { marginLeft } )();
-};
-
-export const UnitControl = styled( BaseUnitControl )`
-	max-width: 60px;
-	${ unitControlBorderRadiusStyles };
-	${ unitControlMarginStyles };
+	margin-inline-end: ${ space( 2 ) };
 `;

package/src/box-control/test/index.tsx

@@ -1,7 +1,7 @@
 /**
  * External dependencies
  */
-import { render, screen } from '@testing-library/react';
+import { fireEvent, render, screen } from '@testing-library/react';
 import userEvent from '@testing-library/user-event';
 
 /**
@@ -33,7 +33,10 @@ describe( 'BoxControl', () => {
 			render( <BoxControl onChange={ () => {} } /> );
 
 			expect(
-				screen.getByRole( 'textbox', { name: 'Box Control' } )
+				screen.getByRole( 'group', { name: 'Box Control' } )
+			).toBeVisible();
+			expect(
+				screen.getByRole( 'textbox', { name: 'All sides' } )
 			).toBeVisible();
 		} );
 
@@ -42,15 +45,41 @@ describe( 'BoxControl', () => {
 
 			render( <BoxControl onChange={ () => {} } /> );
 
-			const input = screen.getByRole( 'textbox', {
-				name: 'Box Control',
-			} );
+			const input = screen.getByRole( 'textbox', { name: 'All sides' } );
 
 			await user.type( input, '100' );
 			await user.keyboard( '{Enter}' );
 
 			expect( input ).toHaveValue( '100' );
 		} );
+
+		it( 'should update input values when interacting with slider', () => {
+			render( <BoxControl onChange={ () => {} } /> );
+
+			const slider = screen.getByRole( 'slider' );
+
+			fireEvent.change( slider, { target: { value: 50 } } );
+
+			expect( slider ).toHaveValue( '50' );
+			expect(
+				screen.getByRole( 'textbox', { name: 'All sides' } )
+			).toHaveValue( '50' );
+		} );
+
+		it( 'should update slider values when interacting with input', async () => {
+			const user = userEvent.setup();
+			render( <BoxControl onChange={ () => {} } /> );
+
+			const input = screen.getByRole( 'textbox', {
+				name: 'All sides',
+			} );
+
+			await user.type( input, '50' );
+			await user.keyboard( '{Enter}' );
+
+			expect( input ).toHaveValue( '50' );
+			expect( screen.getByRole( 'slider' ) ).toHaveValue( '50' );
+		} );
 	} );
 
 	describe( 'Reset', () => {
@@ -60,7 +89,7 @@ describe( 'BoxControl', () => {
 			render( <BoxControl onChange={ () => {} } /> );
 
 			const input = screen.getByRole( 'textbox', {
-				name: 'Box Control',
+				name: 'All sides',
 			} );
 
 			await user.type( input, '100' );
@@ -79,7 +108,7 @@ describe( 'BoxControl', () => {
 			render( <Example /> );
 
 			const input = screen.getByRole( 'textbox', {
-				name: 'Box Control',
+				name: 'All sides',
 			} );
 
 			await user.type( input, '100' );
@@ -98,7 +127,7 @@ describe( 'BoxControl', () => {
 			render( <Example /> );
 
 			const input = screen.getByRole( 'textbox', {
-				name: 'Box Control',
+				name: 'All sides',
 			} );
 
 			await user.type( input, '100' );
@@ -118,7 +147,7 @@ describe( 'BoxControl', () => {
 			render( <BoxControl onChange={ ( v ) => spyChange( v ) } /> );
 
 			const input = screen.getByRole( 'textbox', {
-				name: 'Box Control',
+				name: 'All sides',
 			} );
 
 			await user.type( input, '100' );
@@ -152,21 +181,49 @@ describe( 'BoxControl', () => {
 			);
 
 			await user.type(
-				screen.getByRole( 'textbox', { name: 'Top' } ),
+				screen.getByRole( 'textbox', { name: 'Top side' } ),
 				'100'
 			);
 
 			expect(
-				screen.getByRole( 'textbox', { name: 'Top' } )
+				screen.getByRole( 'textbox', { name: 'Top side' } )
 			).toHaveValue( '100' );
 			expect(
-				screen.getByRole( 'textbox', { name: 'Right' } )
+				screen.getByRole( 'textbox', { name: 'Right side' } )
 			).not.toHaveValue();
 			expect(
-				screen.getByRole( 'textbox', { name: 'Bottom' } )
+				screen.getByRole( 'textbox', { name: 'Bottom side' } )
 			).not.toHaveValue();
 			expect(
-				screen.getByRole( 'textbox', { name: 'Left' } )
+				screen.getByRole( 'textbox', { name: 'Left side' } )
+			).not.toHaveValue();
+		} );
+
+		it( 'should update a single side value when using slider unlinked', async () => {
+			const user = userEvent.setup();
+
+			render( <Example /> );
+
+			await user.click(
+				screen.getByRole( 'button', { name: 'Unlink sides' } )
+			);
+
+			const slider = screen.getByRole( 'slider', { name: 'Right side' } );
+
+			fireEvent.change( slider, { target: { value: 50 } } );
+
+			expect( slider ).toHaveValue( '50' );
+			expect(
+				screen.getByRole( 'textbox', { name: 'Top side' } )
+			).not.toHaveValue();
+			expect(
+				screen.getByRole( 'textbox', { name: 'Right side' } )
+			).toHaveValue( '50' );
+			expect(
+				screen.getByRole( 'textbox', { name: 'Bottom side' } )
+			).not.toHaveValue();
+			expect(
+				screen.getByRole( 'textbox', { name: 'Left side' } )
 			).not.toHaveValue();
 		} );
 
@@ -181,17 +238,68 @@ describe( 'BoxControl', () => {
 
 			await user.type(
 				screen.getByRole( 'textbox', {
-					name: 'Vertical',
+					name: 'Top and bottom sides',
 				} ),
 				'100'
 			);
 
 			expect(
-				screen.getByRole( 'textbox', { name: 'Vertical' } )
+				screen.getByRole( 'textbox', { name: 'Top and bottom sides' } )
 			).toHaveValue( '100' );
 			expect(
-				screen.getByRole( 'textbox', { name: 'Horizontal' } )
+				screen.getByRole( 'textbox', { name: 'Left and right sides' } )
+			).not.toHaveValue();
+		} );
+
+		it( 'should update a whole axis using a slider when value is changed when unlinked', async () => {
+			const user = userEvent.setup();
+
+			render( <Example splitOnAxis /> );
+
+			await user.click(
+				screen.getByRole( 'button', { name: 'Unlink sides' } )
+			);
+
+			const slider = screen.getByRole( 'slider', {
+				name: 'Left and right sides',
+			} );
+
+			fireEvent.change( slider, { target: { value: 50 } } );
+
+			expect( slider ).toHaveValue( '50' );
+			expect(
+				screen.getByRole( 'textbox', { name: 'Top and bottom sides' } )
 			).not.toHaveValue();
+			expect(
+				screen.getByRole( 'textbox', { name: 'Left and right sides' } )
+			).toHaveValue( '50' );
+		} );
+
+		it( 'should show "Mixed" label when sides have different values but are linked', async () => {
+			const user = userEvent.setup();
+
+			render( <Example /> );
+
+			const unlinkButton = screen.getByRole( 'button', {
+				name: 'Unlink sides',
+			} );
+
+			await user.click( unlinkButton );
+
+			await user.type(
+				screen.getByRole( 'textbox', {
+					name: 'Right side',
+				} ),
+				'13'
+			);
+
+			expect(
+				screen.getByRole( 'textbox', { name: 'Right side' } )
+			).toHaveValue( '13' );
+
+			await user.click( unlinkButton );
+
+			expect( screen.getByPlaceholderText( 'Mixed' ) ).toHaveValue( '' );
 		} );
 	} );
 
@@ -287,7 +395,7 @@ describe( 'BoxControl', () => {
 			render( <BoxControl onChange={ onChangeSpy } /> );
 
 			const valueInput = screen.getByRole( 'textbox', {
-				name: 'Box Control',
+				name: 'All sides',
 			} );
 			const unitSelect = screen.getByRole( 'combobox', {
 				name: 'Select unit',

package/src/box-control/types.ts

@@ -1,8 +1,3 @@
-/**
- * External dependencies
- */
-import type { useHover } from '@use-gesture/react';
-
 /**
  * Internal dependencies
  */
@@ -16,6 +11,10 @@ export type BoxControlValue = {
 	left?: string;
 };
 
+export type CustomValueUnits = {
+	[ key: string ]: { max: number; step: number };
+};
+
 type UnitControlPassthroughProps = Omit<
 	UnitControlProps,
 	'label' | 'onChange' | 'onFocus' | 'onMouseOver' | 'onMouseOut' | 'units'
@@ -72,6 +71,12 @@ export type BoxControlProps = Pick<
 	 * The current values of the control, expressed as an object of `top`, `right`, `bottom`, and `left` values.
 	 */
 	values?: BoxControlValue;
+	/**
+	 * Start opting into the larger default height that will become the default size in a future version.
+	 *
+	 * @default false
+	 */
+	__next40pxDefaultSize?: boolean;
 };
 
 export type BoxControlInputControlProps = UnitControlPassthroughProps & {
@@ -92,22 +97,6 @@ export type BoxControlInputControlProps = UnitControlPassthroughProps & {
 	values: BoxControlValue;
 };
 
-export type BoxUnitControlProps = UnitControlPassthroughProps &
-	Pick< UnitControlProps, 'onChange' | 'onFocus' > & {
-		isFirst?: boolean;
-		isLast?: boolean;
-		isOnly?: boolean;
-		label?: string;
-		onHoverOff?: (
-			event: ReturnType< typeof useHover >[ 'event' ],
-			state: Omit< ReturnType< typeof useHover >, 'event' >
-		) => void;
-		onHoverOn?: (
-			event: ReturnType< typeof useHover >[ 'event' ],
-			state: Omit< ReturnType< typeof useHover >, 'event' >
-		) => void;
-	};
-
 export type BoxControlIconProps = {
 	/**
 	 * @default 24

package/src/box-control/utils.ts

@@ -7,17 +7,52 @@ import { __ } from '@wordpress/i18n';
  * Internal dependencies
  */
 import { parseQuantityAndUnitFromRawValue } from '../unit-control/utils';
-import type { BoxControlProps, BoxControlValue } from './types';
+import type {
+	BoxControlProps,
+	BoxControlValue,
+	CustomValueUnits,
+} from './types';
+
+export const CUSTOM_VALUE_SETTINGS: CustomValueUnits = {
+	px: { max: 300, step: 1 },
+	'%': { max: 100, step: 1 },
+	vw: { max: 100, step: 1 },
+	vh: { max: 100, step: 1 },
+	em: { max: 10, step: 0.1 },
+	rm: { max: 10, step: 0.1 },
+	svw: { max: 100, step: 1 },
+	lvw: { max: 100, step: 1 },
+	dvw: { max: 100, step: 1 },
+	svh: { max: 100, step: 1 },
+	lvh: { max: 100, step: 1 },
+	dvh: { max: 100, step: 1 },
+	vi: { max: 100, step: 1 },
+	svi: { max: 100, step: 1 },
+	lvi: { max: 100, step: 1 },
+	dvi: { max: 100, step: 1 },
+	vb: { max: 100, step: 1 },
+	svb: { max: 100, step: 1 },
+	lvb: { max: 100, step: 1 },
+	dvb: { max: 100, step: 1 },
+	vmin: { max: 100, step: 1 },
+	svmin: { max: 100, step: 1 },
+	lvmin: { max: 100, step: 1 },
+	dvmin: { max: 100, step: 1 },
+	vmax: { max: 100, step: 1 },
+	svmax: { max: 100, step: 1 },
+	lvmax: { max: 100, step: 1 },
+	dvmax: { max: 100, step: 1 },
+};
 
 export const LABELS = {
-	all: __( 'All' ),
-	top: __( 'Top' ),
-	bottom: __( 'Bottom' ),
-	left: __( 'Left' ),
-	right: __( 'Right' ),
+	all: __( 'All sides' ),
+	top: __( 'Top side' ),
+	bottom: __( 'Bottom side' ),
+	left: __( 'Left side' ),
+	right: __( 'Right side' ),
 	mixed: __( 'Mixed' ),
-	vertical: __( 'Vertical' ),
-	horizontal: __( 'Horizontal' ),
+	vertical: __( 'Top and bottom sides' ),
+	horizontal: __( 'Left and right sides' ),
 };
 
 export const DEFAULT_VALUES = {

package/src/button/README.md

@@ -4,12 +4,6 @@ Buttons let users take actions and make choices with a single click or tap.
 
 ![Button components](https://make.wordpress.org/design/files/2019/03/button.png)
 
-## Table of contents
-
-1. [Design guidelines](#design-guidelines)
-2. [Development guidelines](#development-guidelines)
-3. [Related components](#related-components)
-
 ## Design guidelines
 
 ### Usage
@@ -141,13 +135,7 @@ An accessible description for the button.
 
 #### `disabled`: `boolean`
 
-Whether the button is disabled. If `true`, this will force a `button` element to be rendered.
-
--   Required: No
-
-#### `focus`: `boolean`
-
-Whether the button is focused.
+Whether the button is disabled. If `true`, this will force a `button` element to be rendered, even when an `href` is given.
 
 -   Required: No
 
@@ -188,12 +176,38 @@ Renders a red text-based button style to indicate destructive behavior.
 
 -   Required: No
 
+#### `isLink`: `boolean`
+
+Deprecated: Renders a button with an anchor style.
+Use `variant` prop with `link` value instead.
+
+-   Required: No
+-   Default: `false`
+
 #### `isPressed`: `boolean`
 
 Renders a pressed button style.
 
+If the native `aria-pressed` attribute is also set, it will take precedence.
+
 -   Required: No
 
+#### `isPrimary`: `boolean`
+
+Deprecated: Renders a primary button style.
+Use `variant` prop with `primary` value instead.
+
+-   Required: No
+-   Default: `false`
+
+#### `isSecondary`: `boolean`
+
+Deprecated: Renders a default button style.
+Use `variant` prop with `secondary` value instead.
+
+-   Required: No
+-   Default: `false`
+
 #### `isSmall`: `boolean`
 
 Decreases the size of the button.
@@ -202,6 +216,14 @@ Deprecated in favor of the `size` prop. If both props are defined, the `size` pr
 
 -   Required: No
 
+#### `isTertiary`: `boolean`
+
+Deprecated: Renders a text-based button style.
+Use `variant` prop with `tertiary` value instead.
+
+-   Required: No
+-   Default: `false`
+
 #### `label`: `string`
 
 Sets the `aria-label` of the component, if none is provided. Sets the Tooltip content if `showTooltip` is provided.

package/src/button/index.tsx

@@ -24,6 +24,7 @@ import Tooltip from '../tooltip';
 import Icon from '../icon';
 import { VisuallyHidden } from '../visually-hidden';
 import type { ButtonProps, DeprecatedButtonProps } from './types';
+import { positionToPlacement } from '../popover/utils';
 
 const disabledEventsOnDisabledButton = [ 'onMouseDown', 'onClick' ] as const;
 
@@ -33,6 +34,7 @@ function useDeprecatedProps( {
 	isSecondary,
 	isTertiary,
 	isLink,
+	isPressed,
 	isSmall,
 	size,
 	variant,
@@ -41,6 +43,11 @@ function useDeprecatedProps( {
 	let computedSize = size;
 	let computedVariant = variant;
 
+	const newProps: { 'aria-pressed'?: boolean } = {
+		// @TODO Mark `isPressed` as deprecated
+		'aria-pressed': isPressed,
+	};
+
 	if ( isSmall ) {
 		computedSize ??= 'small';
 	}
@@ -72,6 +79,7 @@ function useDeprecatedProps( {
 	}
 
 	return {
+		...newProps,
 		...otherProps,
 		size: computedSize,
 		variant: computedVariant,
@@ -84,7 +92,6 @@ export function UnforwardedButton(
 ) {
 	const {
 		__next40pxDefaultSize,
-		isPressed,
 		isBusy,
 		isDestructive,
 		className,
@@ -105,10 +112,16 @@ export function UnforwardedButton(
 		...buttonOrAnchorProps
 	} = useDeprecatedProps( props );
 
-	const { href, target, ...additionalProps } =
-		'href' in buttonOrAnchorProps
-			? buttonOrAnchorProps
-			: { href: undefined, target: undefined, ...buttonOrAnchorProps };
+	const {
+		href,
+		target,
+		'aria-checked': ariaChecked,
+		'aria-pressed': ariaPressed,
+		'aria-selected': ariaSelected,
+		...additionalProps
+	} = 'href' in buttonOrAnchorProps
+		? buttonOrAnchorProps
+		: { href: undefined, target: undefined, ...buttonOrAnchorProps };
 
 	const instanceId = useInstanceId(
 		Button,
@@ -123,6 +136,12 @@ export function UnforwardedButton(
 			// Tooltip should not considered as a child
 			children?.[ 0 ]?.props?.className !== 'components-tooltip' );
 
+	const truthyAriaPressedValues: ( typeof ariaPressed )[] = [
+		true,
+		'true',
+		'mixed',
+	];
+
 	const classes = classnames( 'components-button', className, {
 		'is-next-40px-default-size': __next40pxDefaultSize,
 		'is-secondary': variant === 'secondary',
@@ -130,11 +149,14 @@ export function UnforwardedButton(
 		'is-small': size === 'small',
 		'is-compact': size === 'compact',
 		'is-tertiary': variant === 'tertiary',
-		'is-pressed': isPressed,
+
+		'is-pressed': truthyAriaPressedValues.includes( ariaPressed ),
+		'is-pressed-mixed': ariaPressed === 'mixed',
+
 		'is-busy': isBusy,
 		'is-link': variant === 'link',
 		'is-destructive': isDestructive,
-		'has-text': !! icon && hasChildren,
+		'has-text': !! icon && ( hasChildren || text ),
 		'has-icon': !! icon,
 	} );
 
@@ -145,7 +167,9 @@ export function UnforwardedButton(
 			? {
 					type: 'button',
 					disabled: trulyDisabled,
-					'aria-pressed': isPressed,
+					'aria-checked': ariaChecked,
+					'aria-pressed': ariaPressed,
+					'aria-selected': ariaSelected,
 			  }
 			: {};
 	const anchorProps: ComponentPropsWithoutRef< 'a' > =
@@ -171,9 +195,9 @@ export function UnforwardedButton(
 	const shouldShowTooltip =
 		! trulyDisabled &&
 		// An explicit tooltip is passed or...
-		( ( showTooltip && label ) ||
+		( ( showTooltip && !! label ) ||
 			// There's a shortcut or...
-			shortcut ||
+			!! shortcut ||
 			// There's a label and...
 			( !! label &&
 				// The children are empty and...
@@ -225,33 +249,28 @@ export function UnforwardedButton(
 			</button>
 		);
 
-	if ( ! shouldShowTooltip ) {
-		return (
-			<>
-				{ element }
-				{ describedBy && (
-					<VisuallyHidden>
-						<span id={ descriptionId }>{ describedBy }</span>
-					</VisuallyHidden>
-				) }
-			</>
-		);
-	}
-
-	return (
-		<>
-			<Tooltip
-				text={
+	// In order to avoid some React reconciliation issues, we are always rendering
+	// the `Tooltip` component even when `shouldShowTooltip` is `false`.
+	// In order to make sure that the tooltip doesn't show when it shouldn't,
+	// we don't pass the props to the `Tooltip` component.
+	const tooltipProps = shouldShowTooltip
+		? {
+				text:
 					( children as string | ReactElement[] )?.length &&
 					describedBy
 						? describedBy
-						: label
-				}
-				shortcut={ shortcut }
-				position={ tooltipPosition }
-			>
-				{ element }
-			</Tooltip>
+						: label,
+				shortcut,
+				placement:
+					tooltipPosition &&
+					// Convert legacy `position` values to be used with the new `placement` prop
+					positionToPlacement( tooltipPosition ),
+		  }
+		: {};
+
+	return (
+		<>
+			<Tooltip { ...tooltipProps }>{ element }</Tooltip>
 			{ describedBy && (
 				<VisuallyHidden>
 					<span id={ descriptionId }>{ describedBy }</span>