@wordpress/components 39.0.0 → 40.1.0

package/src/border-control/style.module.scss

@@ -0,0 +1,93 @@
+@use "@wordpress/base-styles/variables" as *;
+@use "../utils/theme-variables" as *;
+
+.border-control {
+	border: 0;
+	padding: 0;
+	margin: 0;
+	box-sizing: border-box;
+
+	*,
+	*::before,
+	*::after {
+		box-sizing: inherit;
+	}
+}
+.inner-wrapper {
+	height: 40px;
+
+	:global(.components-unit-control) {
+		flex: 1 1 40%;
+	}
+
+	/* Raised specificity to beat UnitSelect's runtime-injected Emotion min-height. */
+	&#{&}
+	:global(.components-unit-control__select):global(.components-unit-control__select) {
+		min-height: 0;
+	}
+}
+
+/* Forces a set UnitControl width instead of the default 40/60 split with RangeControl. */
+.inner-wrapper-has-width {
+	:global(.components-unit-control) {
+		flex: 0 0 auto;
+	}
+}
+
+.dropdown {
+	background: #fff;
+
+	/* Raised specificity to stay ahead of the Emotion Button base styles. */
+	&#{&} > button {
+		aspect-ratio: 1;
+		padding: 0;
+		display: flex;
+		align-items: center;
+		justify-content: center;
+		border-start-start-radius: $radius-small;
+		border-end-start-radius: $radius-small;
+		border-start-end-radius: 0;
+		border-end-end-radius: 0;
+		border: $border-width solid $components-color-border;
+
+		&:focus,
+		&:hover:not(:disabled) {
+			box-shadow: inset 0 0 0 0.5px $components-color-accent;
+			border-color: $components-color-accent;
+			z-index: 1;
+			position: relative;
+		}
+	}
+}
+
+.color-indicator-wrapper {
+	border-radius: $radius-full;
+	border: 2px solid transparent;
+	/* border-style / border-color are applied inline by the dropdown hook. */
+	width: 24px;
+	height: 24px;
+	padding: 2px;
+
+	/* Transparent gradient keeps the indicator visible over the active toggle. */
+	& > span {
+		height: $grid-unit-20;
+		width: $grid-unit-20;
+		background: linear-gradient(-45deg, transparent 48%, rgb(0 0 0 / 20%) 48%, rgb(0 0 0 / 20%) 52%, transparent 52%);
+	}
+}
+
+.popover-controls {
+	/* $swatch-size * 6 + $swatch-gap * 5, matching $color-palette-circle-size. */
+	width: 228px;
+}
+
+.reset-button-wrapper {
+	display: flex;
+	justify-content: flex-end;
+	margin-block-start: $grid-unit-15;
+}
+
+.slider {
+	flex: 1 1 60%;
+	margin-inline-end: $grid-unit-15;
+}

package/src/border-control/test/{index.js → index.jsdom.test.tsx}

@@ -1,3 +1,4 @@
+import { describe, expect, it, vi } from 'vitest';
 import {
 	fireEvent,
 	render,
@@ -7,8 +8,12 @@ import {
 } from '@testing-library/react';
 import userEvent from '@testing-library/user-event';
 import { BorderControl } from '../';
-import * as styles from '../styles';
-import { useCx } from '../../utils/hooks/use-cx';
+import type { Border, BorderControlProps } from '../types';
+import { COLORS } from '../../utils';
+
+globalThis.wpVitest.mockMatchMedia();
+
+globalThis.wpVitest.mockResizeObserver();
 
 const colors = [
 	{ name: 'Gray', color: '#f6f7f7' },
@@ -24,11 +29,13 @@ const defaultBorder = {
 	width: '1px',
 };
 
-function createProps( customProps ) {
-	const props = {
+function createProps(
+	customProps: Partial< BorderControlProps > = {}
+): BorderControlProps {
+	const props: BorderControlProps = {
 		colors,
 		label: 'Border',
-		onChange: jest.fn().mockImplementation( ( newValue ) => {
+		onChange: vi.fn().mockImplementation( ( newValue?: Border ) => {
 			props.value = newValue;
 		} ),
 		value: defaultBorder,
@@ -39,7 +46,7 @@ function createProps( customProps ) {
 
 const toggleLabelRegex = /Border color( and style)* picker/;
 
-const openPopover = async ( user ) => {
+const openPopover = async ( user: ReturnType< typeof userEvent.setup > ) => {
 	const toggleButton = screen.getByLabelText( toggleLabelRegex );
 	await user.click( toggleButton );
 
@@ -51,50 +58,41 @@ const openPopover = async ( user ) => {
 	await waitFor( () => expect( pickerButton ).toBePositionedPopover() );
 };
 
-const getButton = ( name ) => {
+const getButton = ( name: string | RegExp ) => {
 	return screen.getByRole( 'button', { name } );
 };
 
-const getColorOption = ( color ) => {
+const getColorOption = ( color: string ) => {
 	return screen.getByRole( 'option', { name: `${ color }` } );
 };
 
-const queryButton = ( name ) => {
+const queryButton = ( name: string | RegExp ) => {
 	return screen.queryByRole( 'button', { name } );
 };
 
 const getSliderInput = () => {
-	return screen.getByRole( 'slider', { name: 'Border width' } );
+	return screen.getByRole< HTMLInputElement >( 'slider', {
+		name: 'Border width',
+	} );
 };
 
 const getWidthInput = () => {
-	return screen.getByRole( 'spinbutton', { name: 'Border width' } );
+	return screen.getByRole< HTMLInputElement >( 'spinbutton', {
+		name: 'Border width',
+	} );
 };
 
-function TestBorderControl( restProps ) {
+function TestBorderControl( restProps: BorderControlProps ) {
 	return <BorderControl { ...restProps } />;
 }
 
-const getGeneratedEmotionClassNames = ( element ) =>
-	Array.from( element.classList ).filter( ( className ) =>
-		/^(css|emotion)-/.test( className )
-	);
-
-function EmotionStyleTest( { styleFragment } ) {
-	const cx = useCx();
-
-	return (
-		<div data-testid="emotion-style" className={ cx( styleFragment ) } />
-	);
-}
-
 describe( 'BorderControl', () => {
 	describe( 'basic rendering', () => {
 		it( 'should render standard border control', () => {
 			const props = createProps();
 			render( <TestBorderControl { ...props } /> );
 
-			const label = screen.getByText( props.label );
+			const label = screen.getByText( props.label! );
 			const colorButton = screen.getByLabelText( toggleLabelRegex );
 			const widthInput = getWidthInput();
 			const unitSelect = screen.getByRole( 'combobox', {
@@ -114,7 +112,7 @@ describe( 'BorderControl', () => {
 		it( 'should hide label', () => {
 			const props = createProps( { hideLabelFromVision: true } );
 			render( <TestBorderControl { ...props } /> );
-			const label = screen.getByText( props.label );
+			const label = screen.getByText( props.label! );
 
 			// As visually hidden labels are still included in the document
 			// and do not have `display: none` styling, we can't rely on
@@ -133,22 +131,6 @@ describe( 'BorderControl', () => {
 			expect( slider ).toBeInTheDocument();
 		} );
 
-		it( 'should compose inner wrapper width and height styles in a single generated class', () => {
-			render(
-				<EmotionStyleTest
-					styleFragment={ styles.getInnerWrapperStyles( {
-						hasWidth: true,
-					} ) }
-				/>
-			);
-
-			expect(
-				getGeneratedEmotionClassNames(
-					screen.getByTestId( 'emotion-style' )
-				)
-			).toHaveLength( 1 );
-		} );
-
 		it( 'should render placeholder in UnitControl', () => {
 			const props = createProps( { placeholder: 'Mixed' } );
 			render( <TestBorderControl { ...props } /> );
@@ -157,6 +139,76 @@ describe( 'BorderControl', () => {
 			expect( widthInput ).toHaveAttribute( 'placeholder', 'Mixed' );
 		} );
 
+		describe( 'color indicator inline styles', () => {
+			const getIndicatorWrapper = ( border: Border ) => {
+				render(
+					<TestBorderControl
+						{ ...createProps( { value: border } ) }
+					/>
+				);
+
+				const toggleButton = screen.getByLabelText( toggleLabelRegex );
+
+				// The wrapper is decorative, so it has no semantic query.
+				// eslint-disable-next-line testing-library/no-node-access
+				return toggleButton.firstElementChild;
+			};
+
+			/* eslint-disable jest-dom/prefer-to-have-style -- These jsdom tests check normalized inline style values without browser layout. */
+			it( 'should fall back to gray-300 when a style is set without a color', () => {
+				const indicatorWrapper = getIndicatorWrapper( {
+					style: 'solid',
+					color: '',
+				} );
+				const expectedStyle = document.createElement( 'div' ).style;
+				expectedStyle.borderColor = COLORS.gray[ 300 ];
+
+				expect(
+					( indicatorWrapper as HTMLElement ).style.borderStyle
+				).toBe( 'solid' );
+				expect(
+					( indicatorWrapper as HTMLElement ).style.borderColor
+				).toBe( expectedStyle.borderColor );
+			} );
+
+			it( 'should pass CSS-wide values through to border-style and border-color', () => {
+				const indicatorWrapper = getIndicatorWrapper( {
+					style: 'inherit',
+					color: 'inherit',
+				} );
+
+				expect(
+					( indicatorWrapper as HTMLElement ).style.borderStyle
+				).toBe( 'inherit' );
+				expect(
+					( indicatorWrapper as HTMLElement ).style.borderColor
+				).toBe( 'inherit' );
+			} );
+
+			it( 'should preview a `none` style as solid without applying a color', () => {
+				const indicatorWrapper = getIndicatorWrapper( {
+					style: 'none',
+				} );
+
+				expect(
+					( indicatorWrapper as HTMLElement ).style.borderStyle
+				).toBe( 'solid' );
+				expect( indicatorWrapper ).not.toHaveAttribute(
+					'style',
+					expect.stringContaining( 'border-color' )
+				);
+			} );
+			/* eslint-enable jest-dom/prefer-to-have-style */
+
+			it( 'should not apply inline styles when no style is set', () => {
+				const indicatorWrapper = getIndicatorWrapper( {
+					color: '#72aee6',
+				} );
+
+				expect( indicatorWrapper ).not.toHaveAttribute( 'style' );
+			} );
+		} );
+
 		it( 'should render color and style popover', async () => {
 			const user = userEvent.setup();
 			const props = createProps();

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

@@ -1,3 +1,4 @@
+import clsx from 'clsx';
 import { useInstanceId } from '@wordpress/compose';
 import { __ } from '@wordpress/i18n';
 import { useState } from '@wordpress/element';
@@ -15,14 +16,13 @@ import {
 	isValueMixed,
 	LABELS,
 } from './utils';
-import {
-	FlexedBoxControlIcon,
-	FlexedRangeControl,
-	InputWrapper,
-	StyledUnitControl,
-} from './styles/box-control-styles';
+import BoxControlIcon from './icon';
 import type { BoxControlInputControlProps, BoxControlValue } from './types';
 import Button from '../button';
+import { HStack } from '../h-stack';
+import RangeControl from '../range-control';
+import UnitControl from '../unit-control';
+import styles from './style.module.scss';
 
 const noop = () => {};
 
@@ -57,10 +57,10 @@ function getSidesToModify(
 				modifiedSides.push( 'top' );
 				break;
 			case 'left':
-				modifiedSides.push( 'left' );
+				modifiedSides.push( 'right' );
 				break;
 			case 'right':
-				modifiedSides.push( 'right' );
+				modifiedSides.push( 'left' );
 				break;
 		}
 	}
@@ -191,15 +191,26 @@ export default function BoxInputControl( {
 		: [];
 
 	return (
-		<InputWrapper key={ `box-control-${ side }` } expanded>
-			<FlexedBoxControlIcon side={ side } sides={ sides } />
+		<HStack
+			key={ `box-control-${ side }` }
+			className={ styles[ 'input-wrapper' ] }
+			expanded
+		>
+			<BoxControlIcon
+				className={ styles.icon }
+				side={ side }
+				sides={ sides }
+			/>
 			{ showCustomValueControl && (
 				<>
 					<Tooltip placement="top-end" text={ LABELS[ side ] }>
-						<StyledUnitControl
+						<UnitControl
 							{ ...props }
 							min={ min }
-							className="component-box-control__unit-control"
+							className={ clsx(
+								styles[ 'unit-control' ],
+								'component-box-control__unit-control'
+							) }
 							id={ inputId }
 							isPressEnterToChange
 							disableUnits={ isMixed || isMixedUnit }
@@ -213,7 +224,8 @@ export default function BoxInputControl( {
 						/>
 					</Tooltip>
 
-					<FlexedRangeControl
+					<RangeControl
+						className={ styles[ 'range-control' ] }
 						aria-controls={ inputId }
 						label={ LABELS[ side ] }
 						hideLabelFromVision
@@ -240,8 +252,11 @@ export default function BoxInputControl( {
 			) }
 
 			{ hasPresets && ! showCustomValueControl && (
-				<FlexedRangeControl
-					className="spacing-sizes-control__range-control"
+				<RangeControl
+					className={ clsx(
+						styles[ 'range-control' ],
+						'spacing-sizes-control__range-control'
+					) }
 					value={ presetIndex !== undefined ? presetIndex + 1 : 0 }
 					onChange={ ( newIndex ) => {
 						const newValue =
@@ -289,6 +304,6 @@ export default function BoxInputControl( {
 					iconSize={ 24 }
 				/>
 			) }
-		</InputWrapper>
+		</HStack>
 	);
 }

package/src/box-control/index.tsx

@@ -1,3 +1,4 @@
+import clsx from 'clsx';
 import { useInstanceId } from '@wordpress/compose';
 import { useState } from '@wordpress/element';
 import { __ } from '@wordpress/i18n';
@@ -5,12 +6,9 @@ import warning from '@wordpress/warning';
 import { BaseControl } from '../base-control';
 import BoxInputControl from './box-input-control';
 import LinkedButton from './linked-button';
+import Button from '../button';
 import { Grid } from '../grid';
-import {
-	InputWrapper,
-	ResetButton,
-	LinkedButtonWrapper,
-} from './styles/box-control-styles';
+import { HStack } from '../h-stack';
 import { parseQuantityAndUnitFromRawValue } from '../unit-control/utils';
 import {
 	DEFAULT_VALUES,
@@ -20,6 +18,7 @@ import {
 } from './utils';
 import { useControlledState } from '../utils/hooks';
 import type { BoxControlProps, BoxControlValue } from './types';
+import styles from './style.module.scss';
 
 const defaultInputProps = {
 	min: 0,
@@ -150,17 +149,17 @@ function BoxControl( {
 				{ label }
 			</BaseControl.VisualLabel>
 			{ isLinked && (
-				<InputWrapper>
+				<HStack className={ styles[ 'input-wrapper' ] }>
 					<BoxInputControl side="all" { ...inputControlProps } />
-				</InputWrapper>
+				</HStack>
 			) }
 			{ ! hasOneSide && (
-				<LinkedButtonWrapper>
+				<div className={ styles[ 'linked-button-wrapper' ] }>
 					<LinkedButton
 						onClick={ toggleLinked }
 						isLinked={ isLinked }
 					/>
-				</LinkedButtonWrapper>
+				</div>
 			) }
 
 			{ ! isLinked &&
@@ -182,15 +181,19 @@ function BoxControl( {
 					/>
 				) ) }
 			{ allowReset && (
-				<ResetButton
-					className="component-box-control__reset-button"
+				<Button
+					className={ clsx(
+						styles[ 'reset-button' ],
+						'component-box-control__reset-button'
+					) }
 					variant="secondary"
 					size="small"
 					onClick={ handleOnReset }
 					disabled={ ! isDirty }
+					accessibleWhenDisabled
 				>
 					{ __( 'Reset' ) }
-				</ResetButton>
+				</Button>
 			) }
 		</Grid>
 	);

package/src/box-control/style.module.scss

@@ -0,0 +1,28 @@
+@use "@wordpress/base-styles/variables" as *;
+
+.unit-control {
+	max-width: 90px;
+}
+
+.input-wrapper {
+	grid-column: 1 / span 3;
+}
+
+.reset-button {
+	grid-area: 1 / 2;
+	justify-self: end;
+}
+
+.linked-button-wrapper {
+	grid-area: 1 / 3;
+	justify-self: end;
+}
+
+.icon {
+	flex: 0 0 auto;
+}
+
+.range-control {
+	width: 100%;
+	margin-inline-end: $grid-unit-10;
+}