@wordpress/components 23.8.0 → 24.0.0

package/src/card/stories/index.tsx

@@ -41,31 +41,52 @@ const meta: ComponentMeta< typeof Card > = {
 export default meta;
 
 const Template: ComponentStory< typeof Card > = ( args ) => (
-	<Card { ...args }>
-		<CardHeader>
-			<Heading>CardHeader</Heading>
-		</CardHeader>
-		<CardBody>
-			<Text>CardBody</Text>
-		</CardBody>
-		<CardBody>
-			<Text>CardBody (before CardDivider)</Text>
-		</CardBody>
-		<CardDivider />
-		<CardBody>
-			<Text>CardBody (after CardDivider)</Text>
-		</CardBody>
-		<CardMedia>
-			<img
-				alt="Card Media"
-				src="https://images.unsplash.com/photo-1566125882500-87e10f726cdc?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1867&q=80"
-			/>
-		</CardMedia>
-		<CardFooter>
-			<Text>CardFooter</Text>
-			<Button variant="secondary">Action Button</Button>
-		</CardFooter>
-	</Card>
+	<Card { ...args } />
 );
 
-export const Default: ComponentStory< typeof Card > = Template.bind( {} );
+export const Default = Template.bind( {} );
+Default.args = {
+	children: (
+		<>
+			<CardHeader>
+				<Heading>CardHeader</Heading>
+			</CardHeader>
+			<CardBody>
+				<Text>CardBody</Text>
+			</CardBody>
+			<CardBody>
+				<Text>CardBody (before CardDivider)</Text>
+			</CardBody>
+			<CardDivider />
+			<CardBody>
+				<Text>CardBody (after CardDivider)</Text>
+			</CardBody>
+			<CardMedia>
+				<img
+					alt="Card Media"
+					src="https://images.unsplash.com/photo-1566125882500-87e10f726cdc?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1867&q=80"
+				/>
+			</CardMedia>
+			<CardFooter>
+				<Text>CardFooter</Text>
+				<Button variant="secondary">Action Button</Button>
+			</CardFooter>
+		</>
+	),
+};
+
+/**
+ * `CardMedia` provides a container for full-bleed content within a `Card`,
+ * such as images, video, or even just a background color. The corners will be rounded if necessary.
+ */
+export const FullBleedContent = Template.bind( {} );
+FullBleedContent.args = {
+	...Default.args,
+	children: (
+		<CardMedia>
+			<div style={ { padding: 16, background: 'beige' } }>
+				Some full bleed content
+			</div>
+		</CardMedia>
+	),
+};

package/src/checkbox-control/index.tsx

@@ -50,6 +50,7 @@ export function CheckboxControl(
 		checked,
 		indeterminate,
 		help,
+		id: idProp,
 		onChange,
 		...additionalProps
 	} = props;
@@ -81,8 +82,11 @@ export function CheckboxControl(
 		},
 		[ checked, indeterminate ]
 	);
-	const instanceId = useInstanceId( CheckboxControl );
-	const id = `inspector-checkbox-control-${ instanceId }`;
+	const id = useInstanceId(
+		CheckboxControl,
+		'inspector-checkbox-control',
+		idProp
+	);
 	const onChangeValue = ( event: ChangeEvent< HTMLInputElement > ) =>
 		onChange( event.target.checked );
 

package/src/checkbox-control/style.scss

@@ -27,10 +27,7 @@ $checkbox-input-size-sm: 24px; // Width & height for small viewports.
 	@include reduce-motion("transition");
 
 	&:focus {
-		box-shadow: 0 0 0 ($border-width * 2) $white, 0 0 0 ($border-width * 2 + $border-width-focus) $components-color-accent;
-
-		// Only visible in Windows High Contrast mode.
-		outline: 2px solid transparent;
+		@include button-style-outset__focus(var(--wp-admin-theme-color));
 	}
 
 	&:checked,

package/src/color-palette/index.native.js

@@ -15,7 +15,7 @@ import {
 /**
  * WordPress dependencies
  */
-import { __ } from '@wordpress/i18n';
+import { __, sprintf } from '@wordpress/i18n';
 import { useRef, useEffect } from '@wordpress/element';
 import { usePreferredColorSchemeStyle } from '@wordpress/compose';
 
@@ -175,6 +175,22 @@ function ColorPalette( {
 		}
 	}
 
+	function getColorGradientName( value ) {
+		const fallbackName = sprintf(
+			/* translators: %s: the hex color value */
+			__( 'Unlabeled color. %s' ),
+			value
+		);
+		const foundColorName = isGradientSegment
+			? defaultSettings.gradients?.find(
+					( gradient ) => gradient.gradient === value
+			  )
+			: defaultSettings.allColors?.find(
+					( color ) => color.color === value
+			  );
+		return foundColorName ? foundColorName?.name : fallbackName;
+	}
+
 	function onColorPress( color ) {
 		deselectCustomGradient();
 		performAnimation( color );
@@ -251,6 +267,8 @@ function ColorPalette( {
 					const scaleValue = isSelected( color )
 						? scaleInterpolation
 						: 1;
+					const colorName = getColorGradientName( color );
+
 					return (
 						<View key={ `${ color }-${ isSelected( color ) }` }>
 							<TouchableWithoutFeedback
@@ -260,6 +278,7 @@ function ColorPalette( {
 									selected: isSelected( color ),
 								} }
 								accessibilityHint={ color }
+								accessibilityLabel={ colorName }
 								testID={ color }
 							>
 								<Animated.View

package/src/color-picker/test/index.tsx

@@ -1,49 +1,14 @@
 /**
  * External dependencies
  */
-import { render, fireEvent, waitFor } from '@testing-library/react';
+import { screen, render } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
 
 /**
  * Internal dependencies
  */
 import { ColorPicker } from '..';
 
-/**
- * Ordinarily we'd try to select the component by role but the slider role appears
- * on several elements and we'd end up encoding assumptions about order when
- * trying to select the appropriate element. We might as well just use the class name
- * on the container which will be more durable if, for example, the order changes.
- */
-function getSaturation( container: HTMLElement ) {
-	return container.querySelector(
-		'.react-colorful__saturation .react-colorful__interactive'
-	);
-}
-
-type PageXPageY = { pageX: number; pageY: number };
-
-// Fix to pass `pageX` and `pageY`
-// See https://github.com/testing-library/react-testing-library/issues/268
-class FakeMouseEvent extends MouseEvent {
-	constructor( type: MouseEvent[ 'type' ], values?: PageXPageY ) {
-		super( type, { buttons: 1, bubbles: true, ...values } );
-
-		Object.assign( this, {
-			pageX: values?.pageX ?? 0,
-			pageY: values?.pageY ?? 0,
-		} );
-	}
-}
-
-function moveReactColorfulSlider(
-	sliderElement: Element,
-	from: PageXPageY,
-	to: PageXPageY
-) {
-	fireEvent( sliderElement, new FakeMouseEvent( 'mousedown', from ) );
-	fireEvent( sliderElement, new FakeMouseEvent( 'mousemove', to ) );
-}
-
 const hslaMatcher = expect.objectContaining( {
 	h: expect.any( Number ),
 	s: expect.any( Number ),
@@ -73,99 +38,134 @@ const legacyColorMatcher = {
 describe( 'ColorPicker', () => {
 	describe( 'legacy props', () => {
 		it( 'should fire onChangeComplete with the legacy color format', async () => {
+			const user = userEvent.setup();
 			const onChangeComplete = jest.fn();
-			const color = '#fff';
+			const color = '#000';
 
-			const { container } = render(
+			render(
 				<ColorPicker
 					onChangeComplete={ onChangeComplete }
 					color={ color }
+					enableAlpha={ false }
 				/>
 			);
 
-			const saturation = getSaturation( container );
-
-			if ( saturation === null ) {
-				throw new Error( 'The saturation slider could not be found' );
-			}
+			const formatSelector = screen.getByRole( 'combobox' );
+			expect( formatSelector ).toBeVisible();
 
-			expect( saturation ).toBeInTheDocument();
+			await user.selectOptions( formatSelector, 'hex' );
 
-			moveReactColorfulSlider(
-				saturation,
-				{ pageX: 0, pageY: 0 },
-				{ pageX: 10, pageY: 10 }
-			);
+			const hexInput = screen.getByRole( 'textbox' );
+			expect( hexInput ).toBeVisible();
 
-			await waitFor( () =>
-				expect( onChangeComplete ).toHaveBeenCalled()
-			);
+			await user.clear( hexInput );
+			await user.type( hexInput, '1ab' );
 
-			expect( onChangeComplete ).toHaveBeenCalledWith(
+			expect( onChangeComplete ).toHaveBeenCalledTimes( 3 );
+			expect( onChangeComplete ).toHaveBeenLastCalledWith(
 				legacyColorMatcher
 			);
 		} );
 	} );
+	describe( 'Hex input', () => {
+		it( 'should fire onChange with the correct value from the hex input', async () => {
+			const user = userEvent.setup();
+			const onChange = jest.fn();
+			const color = '#000';
+
+			render(
+				<ColorPicker
+					onChange={ onChange }
+					color={ color }
+					enableAlpha={ false }
+				/>
+			);
+
+			const formatSelector = screen.getByRole( 'combobox' );
+			expect( formatSelector ).toBeVisible();
+
+			await user.selectOptions( formatSelector, 'hex' );
 
-	it( 'should fire onChange with the string value', async () => {
-		const onChange = jest.fn();
-		const color = 'rgba(1, 1, 1, 0.5)';
+			const hexInput = screen.getByRole( 'textbox' );
+			expect( hexInput ).toBeVisible();
 
-		const { container } = render(
-			<ColorPicker onChange={ onChange } color={ color } enableAlpha />
-		);
+			await user.clear( hexInput );
+			await user.type( hexInput, '1ab' );
 
-		const saturation = getSaturation( container );
+			expect( onChange ).toHaveBeenCalledTimes( 3 );
+			expect( onChange ).toHaveBeenLastCalledWith( '#11aabb' );
+		} );
+	} );
 
-		if ( saturation === null ) {
-			throw new Error( 'The saturation slider could not be found' );
-		}
+	describe.each( [
+		[ 'red', 'Red', '#7dffff' ],
+		[ 'green', 'Green', '#ff7dff' ],
+		[ 'blue', 'Blue', '#ffff7d' ],
+	] )( 'RGB inputs', ( colorInput, inputLabel, expected ) => {
+		it( `should fire onChange with the correct value when the ${ colorInput } value is updated`, async () => {
+			const user = userEvent.setup();
+			const onChange = jest.fn();
+			const color = '#fff';
 
-		expect( saturation ).toBeInTheDocument();
+			render(
+				<ColorPicker
+					onChange={ onChange }
+					color={ color }
+					enableAlpha={ false }
+				/>
+			);
 
-		moveReactColorfulSlider(
-			saturation,
-			{ pageX: 0, pageY: 0 },
-			{ pageX: 10, pageY: 10 }
-		);
+			const formatSelector = screen.getByRole( 'combobox' );
+			expect( formatSelector ).toBeVisible();
 
-		await waitFor( () => expect( onChange ).toHaveBeenCalled() );
+			await user.selectOptions( formatSelector, 'rgb' );
 
-		expect( onChange ).toHaveBeenCalledWith(
-			expect.stringMatching( /^#([a-fA-F0-9]{8})$/ )
-		);
-	} );
+			const inputElement = screen.getByRole( 'spinbutton', {
+				name: inputLabel,
+			} );
+			expect( inputElement ).toBeVisible();
 
-	it( 'should fire onChange with the HSL value', async () => {
-		const onChange = jest.fn();
-		const color = 'hsla(125, 20%, 50%, 0.5)';
+			await user.clear( inputElement );
+			await user.type( inputElement, '125' );
 
-		const { container } = render(
-			<ColorPicker
-				onChange={ onChange }
-				color={ color }
-				enableAlpha={ false }
-			/>
-		);
+			expect( onChange ).toHaveBeenCalledTimes( 4 );
+			expect( onChange ).toHaveBeenLastCalledWith( expected );
+		} );
+	} );
 
-		const saturation = getSaturation( container );
+	describe.each( [
+		[ 'hue', 'Hue', '#aad52a' ],
+		[ 'saturation', 'Saturation', '#20dfdf' ],
+		[ 'lightness', 'Lightness', '#95eaea' ],
+	] )( 'HSL inputs', ( colorInput, inputLabel, expected ) => {
+		it( `should fire onChange with the correct value when the ${ colorInput } value is updated`, async () => {
+			const user = userEvent.setup();
+			const onChange = jest.fn();
+			const color = '#2ad5d5';
+
+			render(
+				<ColorPicker
+					onChange={ onChange }
+					color={ color }
+					enableAlpha={ false }
+				/>
+			);
 
-		if ( saturation === null ) {
-			throw new Error( 'The saturation slider could not be found' );
-		}
+			const formatSelector = screen.getByRole( 'combobox' );
+			expect( formatSelector ).toBeVisible();
 
-		expect( saturation ).toBeInTheDocument();
+			await user.selectOptions( formatSelector, 'hsl' );
 
-		moveReactColorfulSlider(
-			saturation,
-			{ pageX: 0, pageY: 0 },
-			{ pageX: 10, pageY: 10 }
-		);
+			const inputElement = screen.getByRole( 'spinbutton', {
+				name: inputLabel,
+			} );
+			expect( inputElement ).toBeVisible();
 
-		await waitFor( () => expect( onChange ).toHaveBeenCalled() );
+			await user.clear( inputElement );
+			await user.type( inputElement, '75' );
 
-		expect( onChange ).toHaveBeenCalledWith(
-			expect.stringMatching( /^#([a-fA-F0-9]{6})$/ )
-		);
+			expect( onChange ).toHaveBeenCalledTimes( 3 );
+			expect( onChange ).toHaveBeenLastCalledWith( expected );
+		} );
 	} );
 } );

package/src/combobox-control/index.tsx

@@ -32,6 +32,7 @@ import { useControlledValue } from '../utils/hooks';
 import { normalizeTextString } from '../utils/strings';
 import type { ComboboxControlOption, ComboboxControlProps } from './types';
 import type { TokenInputProps } from '../form-token-field/types';
+import { useDeprecated36pxDefaultSizeProp } from '../utils/use-deprecated-props';
 
 const noop = () => {};
 
@@ -104,23 +105,28 @@ const getIndexOfMatchingSuggestion = (
  * }
  * ```
  */
-function ComboboxControl( {
-	__nextHasNoMarginBottom = false,
-	__next36pxDefaultSize = false,
-	value: valueProp,
-	label,
-	options,
-	onChange: onChangeProp,
-	onFilterValueChange = noop,
-	hideLabelFromVision,
-	help,
-	allowReset = true,
-	className,
-	messages = {
-		selected: __( 'Item selected.' ),
-	},
-	__experimentalRenderItem,
-}: ComboboxControlProps ) {
+function ComboboxControl( props: ComboboxControlProps ) {
+	const {
+		__nextHasNoMarginBottom = false,
+		__next40pxDefaultSize = false,
+		value: valueProp,
+		label,
+		options,
+		onChange: onChangeProp,
+		onFilterValueChange = noop,
+		hideLabelFromVision,
+		help,
+		allowReset = true,
+		className,
+		messages = {
+			selected: __( 'Item selected.' ),
+		},
+		__experimentalRenderItem,
+	} = useDeprecated36pxDefaultSizeProp< ComboboxControlProps >(
+		props,
+		'wp.components.ComboboxControl'
+	);
+
 	const [ value, setValue ] = useControlledValue( {
 		value: valueProp,
 		onChange: onChangeProp,
@@ -314,7 +320,7 @@ function ComboboxControl( {
 					onKeyDown={ onKeyDown }
 				>
 					<InputWrapperFlex
-						__next36pxDefaultSize={ __next36pxDefaultSize }
+						__next40pxDefaultSize={ __next40pxDefaultSize }
 					>
 						<FlexBlock>
 							<TokenInput

package/src/combobox-control/stories/index.tsx

@@ -65,7 +65,6 @@ const Template: ComponentStory< typeof ComboboxControl > = ( {
 };
 export const Default = Template.bind( {} );
 Default.args = {
-	__next36pxDefaultSize: false,
 	allowReset: false,
 	label: 'Select a country',
 	options: countryOptions,

package/src/combobox-control/styles.ts

@@ -12,9 +12,9 @@ import { space } from '../ui/utils/space';
 import type { ComboboxControlProps } from './types';
 
 const deprecatedDefaultSize = ( {
-	__next36pxDefaultSize,
-}: Pick< ComboboxControlProps, '__next36pxDefaultSize' > ) =>
-	! __next36pxDefaultSize &&
+	__next40pxDefaultSize,
+}: Pick< ComboboxControlProps, '__next40pxDefaultSize' > ) =>
+	! __next40pxDefaultSize &&
 	css`
 		height: 28px; // 30px - 2px vertical borders on parent container
 		padding-left: ${ space( 1 ) };
@@ -22,7 +22,7 @@ const deprecatedDefaultSize = ( {
 	`;
 
 export const InputWrapperFlex = styled( Flex )`
-	height: 34px; // 36px - 2px vertical borders on parent container
+	height: 38px; // 40px - 2px vertical borders on parent container
 	padding-left: ${ space( 2 ) };
 	padding-right: ${ space( 2 ) };
 

package/src/combobox-control/types.ts

@@ -26,11 +26,18 @@ export type ComboboxControlProps = Pick<
 		item: ComboboxControlOption;
 	} ) => React.ReactNode;
 	/**
-	 * Start opting into the larger default height that will become the default size in a future version.
+	 * Deprecated. Use `__next40pxDefaultSize` instead.
 	 *
 	 * @default false
+	 * @deprecated
 	 */
 	__next36pxDefaultSize?: boolean;
+	/**
+	 * Start opting into the larger default height that will become the default size in a future version.
+	 *
+	 * @default false
+	 */
+	__next40pxDefaultSize?: boolean;
 	/**
 	 * Show a reset button to clear the input.
 	 *

package/src/custom-gradient-picker/index.native.js

@@ -25,7 +25,7 @@ function CustomGradientPicker( { setColor, currentValue, isGradientColor } ) {
 	const [ currentColor, setCurrentColor ] = useState( currentValue );
 
 	const { getGradientType, gradients, gradientOptions } = colorsUtils;
-	const gradientAST = getGradientAstWithDefault( currentColor );
+	const { gradientAST } = getGradientAstWithDefault( currentColor );
 	const gradientType = getGradientType( currentColor );
 
 	function isLinearGradient( type ) {

package/src/custom-gradient-picker/style.scss

@@ -76,14 +76,14 @@ $components-custom-gradient-picker__padding: $grid-unit-20; // 48px container, 1
 		padding: 0;
 
 		// Shadow and stroke.
-		box-shadow: inset 0 0 0 var(--wp-admin-border-width-focus) $white, 0 0 $border-width-focus 0 rgba($black, 0.25);
+		box-shadow: inset 0 0 0 var(--wp-admin-border-width-focus) $white, 0 0 $border-width-focus-fallback 0 rgba($black, 0.25);
 
 		// Windows High Contrast mode will show this outline, but not the box-shadow.
 		outline: 2px solid transparent;
 
 		&:focus,
 		&.is-active {
-			box-shadow: inset 0 0 0 calc(var(--wp-admin-border-width-focus) * 2) $white, 0 0 $border-width-focus 0 rgba($black, 0.25);
+			box-shadow: inset 0 0 0 calc(var(--wp-admin-border-width-focus) * 2) $white, 0 0 $border-width-focus-fallback 0 rgba($black, 0.25);
 
 			// Windows High Contrast mode will show this outline, but not the box-shadow.
 			outline: $border-width-tab solid transparent;

package/src/dimension-control/README.md

@@ -9,8 +9,8 @@ This feature is still experimental. “Experimental” means this is an early im
 ## Usage
 
 ```jsx
-import { useState } from 'react';
 import { __experimentalDimensionControl as DimensionControl } from '@wordpress/components';
+import { useState } from '@wordpress/element';
 
 export default function MyCustomDimensionControl() {
 	const [ paddingSize, setPaddingSize ] = useState( '' );

package/src/dimension-control/index.tsx

@@ -23,8 +23,8 @@ import type { SelectControlSingleSelectionProps } from '../select-control/types'
  * This feature is still experimental. “Experimental” means this is an early implementation subject to drastic and breaking changes.
  *
  * ```jsx
- * import { useState } from 'react';
  * import { __experimentalDimensionControl as DimensionControl } from '@wordpress/components';
+ * import { useState } from '@wordpress/element';
  *
  * export default function MyCustomDimensionControl() {
  * 	const [ paddingSize, setPaddingSize ] = useState( '' );

package/src/draggable/README.md

@@ -8,9 +8,16 @@ Note that the drag handle needs to declare the `draggable="true"` property and b
 
 The component accepts the following props:
 
+### `appendToOwnerDocument`: `boolean`
+
+Whether to append the cloned element to the `ownerDocument` body. By default, elements sourced by id are appended to the element's wrapper.
+
+-   Required: No
+-   Default: `false`
+
 ### `elementId`: `string`
 
-The HTML id of the element to clone on drag
+The HTML id of the element to clone on drag.
 
 -   Required: Yes
 

package/src/draggable/index.tsx

@@ -63,6 +63,7 @@ export function Draggable( {
 	onDragStart,
 	onDragOver,
 	onDragEnd,
+	appendToOwnerDocument = false,
 	cloneClassname,
 	elementId,
 	transferData,
@@ -173,7 +174,11 @@ export function Draggable( {
 			cloneWrapper.appendChild( clone );
 
 			// Inject the cloneWrapper into the DOM.
-			elementWrapper?.appendChild( cloneWrapper );
+			if ( appendToOwnerDocument ) {
+				ownerDocument.body.appendChild( cloneWrapper );
+			} else {
+				elementWrapper?.appendChild( cloneWrapper );
+			}
 		}
 
 		// Mark the current cursor coordinates.
@@ -207,14 +212,8 @@ export function Draggable( {
 		// Update cursor to 'grabbing', document wide.
 		ownerDocument.body.classList.add( bodyClass );
 
-		// Allow the Synthetic Event to be accessed from asynchronous code.
-		// https://reactjs.org/docs/events.html#event-pooling
-		event.persist();
-
-		let timerId: number | undefined;
-
 		if ( onDragStart ) {
-			timerId = setTimeout( () => onDragStart( event ) );
+			onDragStart( event );
 		}
 
 		cleanup.current = () => {
@@ -231,8 +230,6 @@ export function Draggable( {
 			ownerDocument.body.classList.remove( bodyClass );
 
 			ownerDocument.removeEventListener( 'dragover', throttledDragOver );
-
-			clearTimeout( timerId );
 		};
 	}