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

package/src/border-control/styles.ts

@@ -7,7 +7,7 @@ import { css } from '@emotion/react';
  * Internal dependencies
  */
 import { COLORS, CONFIG, boxSizingReset, rtl } from '../utils';
-import { space } from '../ui/utils/space';
+import { space } from '../utils/space';
 import { StyledLabel } from '../base-control/styles/base-control-styles';
 import {
 	ValueInput as UnitControlWrapper,
@@ -21,7 +21,7 @@ const labelStyles = css`
 `;
 
 const focusBoxShadow = css`
-	box-shadow: inset 0 0 0 ${ CONFIG.borderWidth } ${ COLORS.ui.borderFocus };
+	box-shadow: inset ${ CONFIG.controlBoxShadowFocus };
 `;
 
 export const borderControl = css`
@@ -59,18 +59,11 @@ export const wrapperHeight = ( size?: 'default' | '__unstable-large' ) => {
 	`;
 };
 
-export const borderControlDropdown = (
-	size?: 'default' | '__unstable-large'
-) => css`
+export const borderControlDropdown = css`
 	background: #fff;
 
 	&& > button {
-		/*
-		 * Override button component styles to fit within BorderControl
-		 * regardless of size.
-		 */
-		height: ${ size === '__unstable-large' ? '40px' : '30px' };
-		width: ${ size === '__unstable-large' ? '40px' : '30px' };
+		aspect-ratio: 1;
 		padding: 0;
 		display: flex;
 		align-items: center;
@@ -165,25 +158,10 @@ export const resetButton = css`
 
 	/* Override button component styling */
 	&& {
-		border-top: ${ CONFIG.borderWidth } solid ${ COLORS.gray[ 200 ] };
+		border-top: ${ CONFIG.borderWidth } solid ${ COLORS.gray[ 400 ] };
 		border-top-left-radius: 0;
 		border-top-right-radius: 0;
-		height: 46px;
-	}
-`;
-
-export const borderControlStylePicker = css`
-	${ StyledLabel } {
-		${ labelStyles }
-	}
-`;
-
-export const borderStyleButton = css`
-	&&&&& {
-		min-width: 30px;
-		width: 30px;
-		height: 30px;
-		padding: 3px;
+		height: 40px;
 	}
 `;
 

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

@@ -1,13 +1,8 @@
 /**
  * External dependencies
  */
-import {
-	act,
-	fireEvent,
-	render,
-	screen,
-	waitFor,
-} from '@testing-library/react';
+import { fireEvent, render, screen, waitFor } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
 
 /**
  * Internal dependencies
@@ -43,36 +38,28 @@ function createProps( customProps ) {
 
 const toggleLabelRegex = /Border color( and style)* picker/;
 
-function getWrappingPopoverElement( element ) {
-	return element.closest( '.components-popover' );
-}
-
-const openPopover = async () => {
+const openPopover = async ( user ) => {
 	const toggleButton = screen.getByLabelText( toggleLabelRegex );
-	fireEvent.click( toggleButton );
+	await user.click( toggleButton );
 
 	// Wait for color picker popover to fully appear
 	const pickerButton = screen.getByRole( 'button', {
 		name: /^Custom color picker/,
 	} );
 
-	await waitFor( () =>
-		expect(
-			getWrappingPopoverElement( pickerButton )
-		).toBePositionedPopover()
-	);
+	await waitFor( () => expect( pickerButton ).toBePositionedPopover() );
 };
 
 const getButton = ( name ) => {
 	return screen.getByRole( 'button', { name } );
 };
 
-const queryButton = ( name ) => {
-	return screen.queryByRole( 'button', { name } );
+const getColorOption = ( color ) => {
+	return screen.getByRole( 'option', { name: `Color: ${ color }` } );
 };
 
-const clickButton = ( name ) => {
-	fireEvent.click( getButton( name ) );
+const queryButton = ( name ) => {
+	return screen.queryByRole( 'button', { name } );
 };
 
 const getSliderInput = () => {
@@ -82,15 +69,6 @@ const getSliderInput = () => {
 const getWidthInput = () => {
 	return screen.getByRole( 'spinbutton', { name: 'Border width' } );
 };
-const setWidthInput = ( value ) => {
-	const widthInput = getWidthInput();
-	act( () => {
-		widthInput.focus();
-	} );
-	fireEvent.change( widthInput, { target: { value } } );
-};
-
-const clearWidthInput = () => setWidthInput( '' );
 
 describe( 'BorderControl', () => {
 	describe( 'basic rendering', () => {
@@ -146,19 +124,20 @@ describe( 'BorderControl', () => {
 		} );
 
 		it( 'should render color and style popover', async () => {
+			const user = userEvent.setup();
 			const props = createProps();
 			render( <BorderControl { ...props } /> );
-			await openPopover();
+			await openPopover( user );
 
 			const customColorPicker = getButton( /Custom color picker/ );
-			const colorSwatchButtons = screen.getAllByRole( 'button', {
+			const colorSwatchButtons = screen.getAllByRole( 'option', {
 				name: /^Color:/,
 			} );
 			const styleLabel = screen.getByText( 'Style' );
 			const solidButton = getButton( 'Solid' );
 			const dashedButton = getButton( 'Dashed' );
 			const dottedButton = getButton( 'Dotted' );
-			const resetButton = getButton( 'Reset to default' );
+			const resetButton = getButton( 'Reset' );
 
 			expect( customColorPicker ).toBeInTheDocument();
 			expect( colorSwatchButtons.length ).toEqual( colors.length );
@@ -170,9 +149,10 @@ describe( 'BorderControl', () => {
 		} );
 
 		it( 'should render color and style popover header', async () => {
+			const user = userEvent.setup();
 			const props = createProps( { showDropdownHeader: true } );
 			render( <BorderControl { ...props } /> );
-			await openPopover();
+			await openPopover( user );
 
 			const headerLabel = screen.getByText( 'Border color' );
 			const closeButton = getButton( 'Close border color' );
@@ -182,9 +162,10 @@ describe( 'BorderControl', () => {
 		} );
 
 		it( 'should not render style options when opted out of', async () => {
+			const user = userEvent.setup();
 			const props = createProps( { enableStyle: false } );
 			render( <BorderControl { ...props } /> );
-			await openPopover();
+			await openPopover( user );
 
 			const styleLabel = screen.queryByText( 'Style' );
 			const solidButton = queryButton( 'Solid' );
@@ -307,6 +288,10 @@ describe( 'BorderControl', () => {
 			const { rerender } = render( <BorderControl { ...props } /> );
 
 			const slider = getSliderInput();
+			// As per [1], it is not currently possible to reasonably
+			// replicate this interaction using `userEvent`, so leaving
+			// `fireEvent` in place to cover it.
+			// [1]: https://github.com/testing-library/user-event/issues/871
 			fireEvent.change( slider, { target: { value: '5' } } );
 
 			expect( props.onChange ).toHaveBeenNthCalledWith( 1, {
@@ -321,10 +306,11 @@ describe( 'BorderControl', () => {
 		} );
 
 		it( 'should update color selection', async () => {
+			const user = userEvent.setup();
 			const props = createProps();
 			render( <BorderControl { ...props } /> );
-			await openPopover();
-			clickButton( 'Color: Green' );
+			await openPopover( user );
+			await user.click( getColorOption( 'Green' ) );
 
 			expect( props.onChange ).toHaveBeenNthCalledWith( 1, {
 				...defaultBorder,
@@ -333,10 +319,11 @@ describe( 'BorderControl', () => {
 		} );
 
 		it( 'should clear color selection when toggling swatch off', async () => {
+			const user = userEvent.setup();
 			const props = createProps();
 			render( <BorderControl { ...props } /> );
-			await openPopover();
-			clickButton( 'Color: Blue' );
+			await openPopover( user );
+			await user.click( getColorOption( 'Blue' ) );
 
 			expect( props.onChange ).toHaveBeenNthCalledWith( 1, {
 				...defaultBorder,
@@ -345,10 +332,11 @@ describe( 'BorderControl', () => {
 		} );
 
 		it( 'should update style selection', async () => {
+			const user = userEvent.setup();
 			const props = createProps();
 			render( <BorderControl { ...props } /> );
-			await openPopover();
-			clickButton( 'Dashed' );
+			await openPopover( user );
+			await user.click( getButton( 'Dashed' ) );
 
 			expect( props.onChange ).toHaveBeenNthCalledWith( 1, {
 				...defaultBorder,
@@ -357,19 +345,21 @@ describe( 'BorderControl', () => {
 		} );
 
 		it( 'should take no action when color and style popover is closed', async () => {
+			const user = userEvent.setup();
 			const props = createProps( { showDropdownHeader: true } );
 			render( <BorderControl { ...props } /> );
-			await openPopover();
-			clickButton( 'Close border color' );
+			await openPopover( user );
+			await user.click( getButton( 'Close border color' ) );
 
 			expect( props.onChange ).not.toHaveBeenCalled();
 		} );
 
 		it( 'should reset color and style only when popover reset button clicked', async () => {
+			const user = userEvent.setup();
 			const props = createProps();
 			render( <BorderControl { ...props } /> );
-			await openPopover();
-			clickButton( 'Reset to default' );
+			await openPopover( user );
+			await user.click( getButton( 'Reset' ) );
 
 			expect( props.onChange ).toHaveBeenNthCalledWith( 1, {
 				color: undefined,
@@ -379,25 +369,27 @@ describe( 'BorderControl', () => {
 		} );
 
 		it( 'should sanitize border when width and color are undefined', async () => {
+			const user = userEvent.setup();
 			const props = createProps();
 			const { rerender } = render( <BorderControl { ...props } /> );
-			clearWidthInput();
+			await user.clear( getWidthInput() );
 			rerender( <BorderControl { ...props } /> );
-			await openPopover();
-			clickButton( 'Color: Blue' );
+			await openPopover( user );
+			await user.click( getColorOption( 'Blue' ) );
 
 			expect( props.onChange ).toHaveBeenCalledWith( undefined );
 		} );
 
 		it( 'should not sanitize border when requested', async () => {
+			const user = userEvent.setup();
 			const props = createProps( {
 				shouldSanitizeBorder: false,
 			} );
 			const { rerender } = render( <BorderControl { ...props } /> );
-			clearWidthInput();
+			await user.clear( getWidthInput() );
 			rerender( <BorderControl { ...props } /> );
-			await openPopover();
-			clickButton( 'Color: Blue' );
+			await openPopover( user );
+			await user.click( getColorOption( 'Blue' ) );
 
 			expect( props.onChange ).toHaveBeenNthCalledWith( 2, {
 				color: undefined,
@@ -407,12 +399,16 @@ describe( 'BorderControl', () => {
 		} );
 
 		it( 'should clear color and set style to `none` when setting zero width', async () => {
+			const user = userEvent.setup();
 			const props = createProps();
 			render( <BorderControl { ...props } /> );
-			await openPopover();
-			clickButton( 'Color: Green' );
-			clickButton( 'Dotted' );
-			setWidthInput( '0' );
+			await openPopover( user );
+			await user.click( getColorOption( 'Green' ) );
+			await user.click( getButton( 'Dotted' ) );
+			await user.type( getWidthInput(), '0', {
+				initialSelectionStart: 0,
+				initialSelectionEnd: 1,
+			} );
 
 			expect( props.onChange ).toHaveBeenNthCalledWith( 3, {
 				color: undefined,
@@ -422,15 +418,23 @@ describe( 'BorderControl', () => {
 		} );
 
 		it( 'should reselect color and style selections when changing to non-zero width', async () => {
+			const user = userEvent.setup();
 			const props = createProps();
 			const { rerender } = render( <BorderControl { ...props } /> );
-			await openPopover();
-			clickButton( 'Color: Green' );
+			await openPopover( user );
+			await user.click( getColorOption( 'Green' ) );
 			rerender( <BorderControl { ...props } /> );
-			clickButton( 'Dotted' );
+			await user.click( getButton( 'Dotted' ) );
 			rerender( <BorderControl { ...props } /> );
-			setWidthInput( '0' );
-			setWidthInput( '5' );
+			const widthInput = getWidthInput();
+			await user.type( widthInput, '0', {
+				initialSelectionStart: 0,
+				initialSelectionEnd: 1,
+			} );
+			await user.type( widthInput, '5', {
+				initialSelectionStart: 0,
+				initialSelectionEnd: 1,
+			} );
 
 			expect( props.onChange ).toHaveBeenNthCalledWith( 4, {
 				color: '#00a32a',
@@ -440,10 +444,11 @@ describe( 'BorderControl', () => {
 		} );
 
 		it( 'should set a non-zero width when applying color to zero width border', async () => {
+			const user = userEvent.setup();
 			const props = createProps( { value: undefined } );
 			const { rerender } = render( <BorderControl { ...props } /> );
-			await openPopover();
-			clickButton( 'Color: Yellow' );
+			await openPopover( user );
+			await user.click( getColorOption( 'Yellow' ) );
 
 			expect( props.onChange ).toHaveBeenCalledWith( {
 				color: '#bd8600',
@@ -451,9 +456,11 @@ describe( 'BorderControl', () => {
 				width: undefined,
 			} );
 
-			setWidthInput( '0' );
+			await user.type( getWidthInput(), '0' );
+
 			rerender( <BorderControl { ...props } /> );
-			clickButton( 'Color: Green' );
+			await openPopover( user );
+			await user.click( getColorOption( 'Green' ) );
 
 			expect( props.onChange ).toHaveBeenCalledWith( {
 				color: '#00a32a',
@@ -463,13 +470,14 @@ describe( 'BorderControl', () => {
 		} );
 
 		it( 'should set a non-zero width when applying style to zero width border', async () => {
+			const user = userEvent.setup();
 			const props = createProps( {
 				value: undefined,
 				shouldSanitizeBorder: false,
 			} );
 			const { rerender } = render( <BorderControl { ...props } /> );
-			await openPopover();
-			clickButton( 'Dashed' );
+			await openPopover( user );
+			await user.click( getButton( 'Dashed' ) );
 
 			expect( props.onChange ).toHaveBeenCalledWith( {
 				color: undefined,
@@ -477,9 +485,11 @@ describe( 'BorderControl', () => {
 				width: undefined,
 			} );
 
-			setWidthInput( '0' );
+			await user.type( getWidthInput(), '0' );
+
 			rerender( <BorderControl { ...props } /> );
-			clickButton( 'Dotted' );
+			await openPopover( user );
+			await user.click( getButton( 'Dotted' ) );
 
 			expect( props.onChange ).toHaveBeenCalledWith( {
 				color: undefined,

package/src/border-control/types.ts

@@ -8,6 +8,7 @@ import type { CSSProperties } from 'react';
  */
 import type { ColorPaletteProps } from '../color-palette/types';
 import type { PopoverProps } from '../popover/types';
+import type { ToggleGroupControlProps } from '../toggle-group-control/types';
 
 export type Border = {
 	color?: CSSProperties[ 'borderColor' ];
@@ -99,6 +100,12 @@ export type BorderControlProps = ColorProps &
 		 * `RangeControl` for additional control over a border's width.
 		 */
 		withSlider?: boolean;
+		/**
+		 * Start opting into the larger default height that will become the default size in a future version.
+		 *
+		 * @default false
+		 */
+		__next40pxDefaultSize?: boolean;
 	};
 
 export type DropdownProps = ColorProps &
@@ -109,6 +116,10 @@ export type DropdownProps = ColorProps &
 		 * values for its popover controls.
 		 */
 		border?: Border;
+		/**
+		 * Whether a border style can be set, based on the border sanitization settings.
+		 */
+		isStyleSettable: boolean;
 		/**
 		 * An internal prop used to control the visibility of the dropdown.
 		 */
@@ -131,7 +142,10 @@ export type DropdownProps = ColorProps &
 		showDropdownHeader?: boolean;
 	};
 
-export type StylePickerProps = LabelProps & {
+export type StylePickerProps = Omit<
+	ToggleGroupControlProps,
+	'value' | 'onChange' | 'children'
+> & {
 	/**
 	 * A callback function invoked when a border style is selected or cleared.
 	 */

package/src/box-control/README.md

@@ -9,8 +9,8 @@ BoxControl components let users set values for Top, Right, Bottom, and Left. Thi
 ## Usage
 
 ```jsx
+import { useState } from 'react';
 import { __experimentalBoxControl as BoxControl } from '@wordpress/components';
-import { useState } from '@wordpress/element';
 
 const Example = () => {
 	const [ values, setValues ] = useState( {

package/src/box-control/all-input-control.tsx

@@ -1,42 +1,56 @@
+/**
+ * WordPress dependencies
+ */
+import { useInstanceId } from '@wordpress/compose';
 /**
  * Internal dependencies
  */
 import type { UnitControlProps } from '../unit-control/types';
+import {
+	FlexedRangeControl,
+	StyledUnitControl,
+} from './styles/box-control-styles';
+import { HStack } from '../h-stack';
 import type { BoxControlInputControlProps } from './types';
-import UnitControl from './unit-control';
+import { parseQuantityAndUnitFromRawValue } from '../unit-control';
 import {
 	LABELS,
 	applyValueToSides,
 	getAllValue,
 	isValuesMixed,
 	isValuesDefined,
+	CUSTOM_VALUE_SETTINGS,
 } from './utils';
 
 const noop = () => {};
 
 export default function AllInputControl( {
+	__next40pxDefaultSize,
 	onChange = noop,
 	onFocus = noop,
-	onHoverOn = noop,
-	onHoverOff = noop,
 	values,
 	sides,
 	selectedUnits,
 	setSelectedUnits,
 	...props
 }: BoxControlInputControlProps ) {
+	const inputId = useInstanceId( AllInputControl, 'box-control-input-all' );
+
 	const allValue = getAllValue( values, selectedUnits, sides );
 	const hasValues = isValuesDefined( values );
 	const isMixed = hasValues && isValuesMixed( values, selectedUnits, sides );
 	const allPlaceholder = isMixed ? LABELS.mixed : undefined;
 
+	const [ parsedQuantity, parsedUnit ] =
+		parseQuantityAndUnitFromRawValue( allValue );
+
 	const handleOnFocus: React.FocusEventHandler< HTMLInputElement > = (
 		event
 	) => {
 		onFocus( event, { side: 'all' } );
 	};
 
-	const handleOnChange: UnitControlProps[ 'onChange' ] = ( next ) => {
+	const onValueChange = ( next?: string ) => {
 		const isNumeric = next !== undefined && ! isNaN( parseFloat( next ) );
 		const nextValue = isNumeric ? next : undefined;
 		const nextValues = applyValueToSides( values, nextValue, sides );
@@ -44,6 +58,12 @@ export default function AllInputControl( {
 		onChange( nextValues );
 	};
 
+	const sliderOnChange = ( next?: number ) => {
+		onValueChange(
+			next !== undefined ? [ next, parsedUnit ].join( '' ) : undefined
+		);
+	};
+
 	// Set selected unit so it can be used as fallback by unlinked controls
 	// when individual sides do not have a value containing a unit.
 	const handleOnUnitChange: UnitControlProps[ 'onUnitChange' ] = ( unit ) => {
@@ -51,36 +71,39 @@ export default function AllInputControl( {
 		setSelectedUnits( newUnits );
 	};
 
-	const handleOnHoverOn = () => {
-		onHoverOn( {
-			top: true,
-			bottom: true,
-			left: true,
-			right: true,
-		} );
-	};
-
-	const handleOnHoverOff = () => {
-		onHoverOff( {
-			top: false,
-			bottom: false,
-			left: false,
-			right: false,
-		} );
-	};
-
 	return (
-		<UnitControl
-			{ ...props }
-			disableUnits={ isMixed }
-			isOnly
-			value={ allValue }
-			onChange={ handleOnChange }
-			onUnitChange={ handleOnUnitChange }
-			onFocus={ handleOnFocus }
-			onHoverOn={ handleOnHoverOn }
-			onHoverOff={ handleOnHoverOff }
-			placeholder={ allPlaceholder }
-		/>
+		<HStack>
+			<StyledUnitControl
+				{ ...props }
+				__next40pxDefaultSize={ __next40pxDefaultSize }
+				className="component-box-control__unit-control"
+				disableUnits={ isMixed }
+				id={ inputId }
+				isPressEnterToChange
+				value={ allValue }
+				onChange={ onValueChange }
+				onUnitChange={ handleOnUnitChange }
+				onFocus={ handleOnFocus }
+				placeholder={ allPlaceholder }
+				label={ LABELS.all }
+				hideLabelFromVision
+			/>
+
+			<FlexedRangeControl
+				__nextHasNoMarginBottom
+				__next40pxDefaultSize={ __next40pxDefaultSize }
+				aria-controls={ inputId }
+				label={ LABELS.all }
+				hideLabelFromVision
+				onChange={ sliderOnChange }
+				min={ 0 }
+				max={ CUSTOM_VALUE_SETTINGS[ parsedUnit ?? 'px' ]?.max ?? 10 }
+				step={
+					CUSTOM_VALUE_SETTINGS[ parsedUnit ?? 'px' ]?.step ?? 0.1
+				}
+				value={ parsedQuantity ?? 0 }
+				withInputField={ false }
+			/>
+		</HStack>
 	);
 }