@wordpress/components 19.15.0 → 20.0.0

package/src/confirm-dialog/test/index.js

@@ -6,7 +6,9 @@ import {
 	screen,
 	fireEvent,
 	waitForElementToBeRemoved,
+	waitFor,
 } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
 
 /**
  * Internal dependencies
@@ -19,19 +21,19 @@ describe( 'Confirm', () => {
 	describe( 'Confirm component', () => {
 		describe( 'Structure', () => {
 			it( 'should render correctly', () => {
-				const wrapper = render(
+				render(
 					<ConfirmDialog onConfirm={ noop } onCancel={ noop }>
 						Are you sure?
 					</ConfirmDialog>
 				);
 
-				const dialog = wrapper.getByRole( 'dialog' );
+				const dialog = screen.getByRole( 'dialog' );
 				const elementsTexts = [ 'Are you sure?', 'OK', 'Cancel' ];
 
 				expect( dialog ).toBeInTheDocument();
 
 				elementsTexts.forEach( ( txt ) => {
-					const el = wrapper.getByText( txt );
+					const el = screen.getByText( txt );
 					expect( el ).toBeInTheDocument();
 				} );
 			} );
@@ -66,64 +68,76 @@ describe( 'Confirm', () => {
 
 		describe( 'When uncontrolled', () => {
 			it( 'should render', () => {
-				const wrapper = render(
+				render(
 					<ConfirmDialog onConfirm={ noop } onCancel={ noop }>
 						Are you sure?
 					</ConfirmDialog>
 				);
 
-				const confirmDialog = wrapper.getByRole( 'dialog' );
+				const confirmDialog = screen.getByRole( 'dialog' );
 
 				expect( confirmDialog ).toBeInTheDocument();
 			} );
 
 			it( 'should not render if closed by clicking `OK`, and the `onConfirm` callback should be called', async () => {
+				const user = userEvent.setup( {
+					advanceTimers: jest.advanceTimersByTime,
+				} );
+
 				const onConfirm = jest.fn().mockName( 'onConfirm()' );
 
-				const wrapper = render(
+				render(
 					<ConfirmDialog onConfirm={ onConfirm }>
 						Are you sure?
 					</ConfirmDialog>
 				);
 
-				const confirmDialog = wrapper.getByRole( 'dialog' );
-				const button = wrapper.getByText( 'OK' );
+				const confirmDialog = screen.getByRole( 'dialog' );
+				const button = screen.getByText( 'OK' );
 
-				fireEvent.click( button );
+				await user.click( button );
 
 				expect( confirmDialog ).not.toBeInTheDocument();
 				expect( onConfirm ).toHaveBeenCalled();
 			} );
 
 			it( 'should not render if closed by clicking `Cancel`, and the `onCancel` callback should be called', async () => {
+				const user = userEvent.setup( {
+					advanceTimers: jest.advanceTimersByTime,
+				} );
+
 				const onCancel = jest.fn().mockName( 'onCancel()' );
 
-				const wrapper = render(
+				render(
 					<ConfirmDialog onConfirm={ noop } onCancel={ onCancel }>
 						Are you sure?
 					</ConfirmDialog>
 				);
 
-				const confirmDialog = wrapper.getByRole( 'dialog' );
-				const button = wrapper.getByText( 'Cancel' );
+				const confirmDialog = screen.getByRole( 'dialog' );
+				const button = screen.getByText( 'Cancel' );
 
-				fireEvent.click( button );
+				await user.click( button );
 
 				expect( confirmDialog ).not.toBeInTheDocument();
 				expect( onCancel ).toHaveBeenCalled();
 			} );
 
 			it( 'should be dismissable even if an `onCancel` callback is not provided', async () => {
-				const wrapper = render(
+				const user = userEvent.setup( {
+					advanceTimers: jest.advanceTimersByTime,
+				} );
+
+				render(
 					<ConfirmDialog onConfirm={ noop }>
 						Are you sure?
 					</ConfirmDialog>
 				);
 
-				const confirmDialog = wrapper.getByRole( 'dialog' );
-				const button = wrapper.getByText( 'Cancel' );
+				const confirmDialog = screen.getByRole( 'dialog' );
+				const button = screen.getByText( 'Cancel' );
 
-				fireEvent.click( button );
+				await user.click( button );
 
 				expect( confirmDialog ).not.toBeInTheDocument();
 			} );
@@ -131,15 +145,16 @@ describe( 'Confirm', () => {
 			it( 'should not render if dialog is closed by clicking the overlay, and the `onCancel` callback should be called', async () => {
 				const onCancel = jest.fn().mockName( 'onCancel()' );
 
-				const wrapper = render(
+				render(
 					<ConfirmDialog onConfirm={ noop } onCancel={ onCancel }>
 						Are you sure?
 					</ConfirmDialog>
 				);
 
-				const confirmDialog = wrapper.getByRole( 'dialog' );
+				const confirmDialog = screen.getByRole( 'dialog' );
 
 				//The overlay click is handled by detecting an onBlur from the modal frame.
+				// TODO: replace with `@testing-library/user-event`
 				fireEvent.blur( confirmDialog );
 
 				await waitForElementToBeRemoved( confirmDialog );
@@ -149,34 +164,42 @@ describe( 'Confirm', () => {
 			} );
 
 			it( 'should not render if dialog is closed by pressing `Escape`, and the `onCancel` callback should be called', async () => {
+				const user = userEvent.setup( {
+					advanceTimers: jest.advanceTimersByTime,
+				} );
+
 				const onCancel = jest.fn().mockName( 'onCancel()' );
 
-				const wrapper = render(
+				render(
 					<ConfirmDialog onConfirm={ noop } onCancel={ onCancel }>
 						Are you sure?
 					</ConfirmDialog>
 				);
 
-				const confirmDialog = wrapper.getByRole( 'dialog' );
+				const confirmDialog = screen.getByRole( 'dialog' );
 
-				fireEvent.keyDown( confirmDialog, { keyCode: 27 } );
+				await user.keyboard( '[Escape]' );
 
 				expect( confirmDialog ).not.toBeInTheDocument();
 				expect( onCancel ).toHaveBeenCalled();
 			} );
 
 			it( 'should not render if dialog is closed by pressing `Enter`, and the `onConfirm` callback should be called', async () => {
+				const user = userEvent.setup( {
+					advanceTimers: jest.advanceTimersByTime,
+				} );
+
 				const onConfirm = jest.fn().mockName( 'onConfirm()' );
 
-				const wrapper = render(
+				render(
 					<ConfirmDialog onConfirm={ onConfirm }>
 						Are you sure?
 					</ConfirmDialog>
 				);
 
-				const confirmDialog = wrapper.getByRole( 'dialog' );
+				const confirmDialog = screen.getByRole( 'dialog' );
 
-				fireEvent.keyDown( confirmDialog, { keyCode: 13 } );
+				await user.keyboard( '[Enter]' );
 
 				expect( confirmDialog ).not.toBeInTheDocument();
 				expect( onConfirm ).toHaveBeenCalled();
@@ -186,7 +209,7 @@ describe( 'Confirm', () => {
 
 	describe( 'When controlled (isOpen is not `undefined`)', () => {
 		it( 'should render when `isOpen` is set to `true`', async () => {
-			const wrapper = render(
+			render(
 				<ConfirmDialog
 					isOpen={ true }
 					onConfirm={ noop }
@@ -196,13 +219,13 @@ describe( 'Confirm', () => {
 				</ConfirmDialog>
 			);
 
-			const confirmDialog = wrapper.getByRole( 'dialog' );
+			const confirmDialog = screen.getByRole( 'dialog' );
 
 			expect( confirmDialog ).toBeInTheDocument();
 		} );
 
 		it( 'should not render if `isOpen` is set to false', async () => {
-			const wrapper = render(
+			render(
 				<ConfirmDialog
 					isOpen={ false }
 					onConfirm={ noop }
@@ -214,31 +237,39 @@ describe( 'Confirm', () => {
 
 			// `queryByRole` needs to be used here because in this scenario the
 			// dialog is never rendered.
-			const confirmDialog = wrapper.queryByRole( 'dialog' );
+			const confirmDialog = screen.queryByRole( 'dialog' );
 
 			expect( confirmDialog ).not.toBeInTheDocument();
 		} );
 
 		it( 'should call the `onConfirm` callback if `OK`', async () => {
+			const user = userEvent.setup( {
+				advanceTimers: jest.advanceTimersByTime,
+			} );
+
 			const onConfirm = jest.fn().mockName( 'onConfirm()' );
 
-			const wrapper = render(
+			render(
 				<ConfirmDialog isOpen={ true } onConfirm={ onConfirm }>
 					Are you sure?
 				</ConfirmDialog>
 			);
 
-			const button = wrapper.getByText( 'OK' );
+			const button = screen.getByText( 'OK' );
 
-			fireEvent.click( button );
+			await user.click( button );
 
 			expect( onConfirm ).toHaveBeenCalled();
 		} );
 
 		it( 'should call the `onCancel` callback if `Cancel` is clicked', async () => {
+			const user = userEvent.setup( {
+				advanceTimers: jest.advanceTimersByTime,
+			} );
+
 			const onCancel = jest.fn().mockName( 'onCancel()' );
 
-			const wrapper = render(
+			render(
 				<ConfirmDialog
 					isOpen={ true }
 					onConfirm={ noop }
@@ -248,19 +279,17 @@ describe( 'Confirm', () => {
 				</ConfirmDialog>
 			);
 
-			const button = wrapper.getByText( 'Cancel' );
+			const button = screen.getByText( 'Cancel' );
 
-			fireEvent.click( button );
+			await user.click( button );
 
 			expect( onCancel ).toHaveBeenCalled();
 		} );
 
 		it( 'should call the `onCancel` callback if the overlay is clicked', async () => {
-			jest.useFakeTimers();
-
 			const onCancel = jest.fn().mockName( 'onCancel()' );
 
-			const wrapper = render(
+			render(
 				<ConfirmDialog
 					isOpen={ true }
 					onConfirm={ noop }
@@ -270,45 +299,43 @@ describe( 'Confirm', () => {
 				</ConfirmDialog>
 			);
 
-			const frame = wrapper.baseElement.querySelector(
-				'.components-modal__frame'
-			);
+			const confirmDialog = screen.getByRole( 'dialog' );
 
 			//The overlay click is handled by detecting an onBlur from the modal frame.
-			fireEvent.blur( frame );
-
-			// We don't wait for a DOM side effect here, so we need to fake the timers
-			// and "advance" it so that the `queueBlurCheck` in the `useFocusOutside` hook
-			// properly executes its timeout task.
-			jest.advanceTimersByTime( 0 );
-
-			expect( onCancel ).toHaveBeenCalled();
+			// TODO: replace with `@testing-library/user-event`
+			fireEvent.blur( confirmDialog );
 
-			jest.useRealTimers();
+			// Wait for a DOM side effect here, so that the `queueBlurCheck` in the
+			// `useFocusOutside` hook properly executes its timeout task.
+			await waitFor( () => expect( onCancel ).toHaveBeenCalled() );
 		} );
 
 		it( 'should call the `onCancel` callback if the `Escape` key is pressed', async () => {
+			const user = userEvent.setup( {
+				advanceTimers: jest.advanceTimersByTime,
+			} );
+
 			const onCancel = jest.fn().mockName( 'onCancel()' );
 
-			const wrapper = render(
+			render(
 				<ConfirmDialog onConfirm={ noop } onCancel={ onCancel }>
 					Are you sure?
 				</ConfirmDialog>
 			);
 
-			const frame = wrapper.baseElement.querySelector(
-				'.components-modal__frame'
-			);
-
-			fireEvent.keyDown( frame, { keyCode: 27 } );
+			await user.keyboard( '[Escape]' );
 
 			expect( onCancel ).toHaveBeenCalled();
 		} );
 
 		it( 'should call the `onConfirm` callback if the `Enter` key is pressed', async () => {
+			const user = userEvent.setup( {
+				advanceTimers: jest.advanceTimersByTime,
+			} );
+
 			const onConfirm = jest.fn().mockName( 'onConfirm()' );
 
-			const wrapper = render(
+			render(
 				<ConfirmDialog
 					isOpen={ true }
 					onConfirm={ onConfirm }
@@ -318,11 +345,7 @@ describe( 'Confirm', () => {
 				</ConfirmDialog>
 			);
 
-			const frame = wrapper.baseElement.querySelector(
-				'.components-modal__frame'
-			);
-
-			fireEvent.keyDown( frame, { keyCode: 13 } );
+			await user.keyboard( '[Enter]' );
 
 			expect( onConfirm ).toHaveBeenCalled();
 		} );

package/src/{custom-gradient-bar → custom-gradient-picker/gradient-bar}/control-points.js

@@ -11,15 +11,15 @@ import { useInstanceId } from '@wordpress/compose';
 import { useEffect, useRef, useState, useMemo } from '@wordpress/element';
 import { __, sprintf } from '@wordpress/i18n';
 import { plus } from '@wordpress/icons';
-import { LEFT, RIGHT } from '@wordpress/keycodes';
 
 /**
  * Internal dependencies
  */
-import Button from '../button';
-import { ColorPicker } from '../color-picker';
-import { VisuallyHidden } from '../visually-hidden';
-import { CustomColorPickerDropdown } from '../color-palette';
+import Button from '../../button';
+import { HStack } from '../../h-stack';
+import { ColorPicker } from '../../color-picker';
+import { VisuallyHidden } from '../../visually-hidden';
+import { CustomColorPickerDropdown } from '../../color-palette';
 
 import {
 	addControlPoint,
@@ -58,10 +58,6 @@ function ControlPointButton( { isOpen, position, color, ...additionalProps } ) {
 						'is-active': isOpen,
 					}
 				) }
-				style={ {
-					left: `${ position }%`,
-					transform: 'translateX( -50% )',
-				} }
 				{ ...additionalProps }
 			/>
 			<VisuallyHidden id={ descriptionId }>
@@ -75,25 +71,28 @@ function ControlPointButton( { isOpen, position, color, ...additionalProps } ) {
 
 function GradientColorPickerDropdown( {
 	isRenderedInSidebar,
-	gradientPickerDomRef,
+	className,
 	...props
 } ) {
-	const popoverProps = useMemo( () => {
-		const result = {
-			className:
-				'components-custom-gradient-picker__color-picker-popover',
-			position: 'top',
-		};
-		if ( isRenderedInSidebar ) {
-			result.anchorRef = gradientPickerDomRef.current;
-			result.position = 'bottom left';
-		}
-		return result;
-	}, [ gradientPickerDomRef, isRenderedInSidebar ] );
+	// Open the popover below the gradient control/insertion point
+	const popoverProps = useMemo(
+		() => ( {
+			placement: 'bottom',
+			offset: 8,
+		} ),
+		[]
+	);
+
+	const mergedClassName = classnames(
+		'components-custom-gradient-picker__control-point-dropdown',
+		className
+	);
+
 	return (
 		<CustomColorPickerDropdown
 			isRenderedInSidebar={ isRenderedInSidebar }
 			popoverProps={ popoverProps }
+			className={ mergedClassName }
 			{ ...props }
 		/>
 	);
@@ -163,7 +162,6 @@ function ControlPoints( {
 		return (
 			ignoreMarkerPosition !== initialPosition && (
 				<GradientColorPickerDropdown
-					gradientPickerDomRef={ gradientPickerDomRef }
 					isRenderedInSidebar={ __experimentalIsRenderedInSidebar }
 					key={ index }
 					onClose={ onStopControlPointChange }
@@ -205,7 +203,7 @@ function ControlPoints( {
 								}
 							} }
 							onKeyDown={ ( event ) => {
-								if ( event.keyCode === LEFT ) {
+								if ( event.code === 'ArrowLeft' ) {
 									// Stop propagation of the key press event to avoid focus moving
 									// to another editor area.
 									event.stopPropagation();
@@ -219,7 +217,7 @@ function ControlPoints( {
 											)
 										)
 									);
-								} else if ( event.keyCode === RIGHT ) {
+								} else if ( event.code === 'ArrowRight' ) {
 									// Stop propagation of the key press event to avoid focus moving
 									// to another editor area.
 									event.stopPropagation();
@@ -256,24 +254,32 @@ function ControlPoints( {
 								} }
 							/>
 							{ ! disableRemove && controlPoints.length > 2 && (
-								<Button
-									className="components-custom-gradient-picker__remove-control-point"
-									onClick={ () => {
-										onChange(
-											removeControlPoint(
-												controlPoints,
-												index
-											)
-										);
-										onClose();
-									} }
-									variant="link"
+								<HStack
+									className="components-custom-gradient-picker__remove-control-point-wrapper"
+									alignment="center"
 								>
-									{ __( 'Remove Control Point' ) }
-								</Button>
+									<Button
+										onClick={ () => {
+											onChange(
+												removeControlPoint(
+													controlPoints,
+													index
+												)
+											);
+											onClose();
+										} }
+										variant="link"
+									>
+										{ __( 'Remove Control Point' ) }
+									</Button>
+								</HStack>
 							) }
 						</>
 					) }
+					style={ {
+						left: `${ point.position }%`,
+						transform: 'translateX( -50% )',
+					} }
 				/>
 			)
 		);
@@ -288,12 +294,10 @@ function InsertPoint( {
 	insertPosition,
 	disableAlpha,
 	__experimentalIsRenderedInSidebar,
-	gradientPickerDomRef,
 } ) {
 	const [ alreadyInsertedPoint, setAlreadyInsertedPoint ] = useState( false );
 	return (
 		<GradientColorPickerDropdown
-			gradientPickerDomRef={ gradientPickerDomRef }
 			isRenderedInSidebar={ __experimentalIsRenderedInSidebar }
 			className="components-custom-gradient-picker__inserter"
 			onClose={ () => {
@@ -312,16 +316,8 @@ function InsertPoint( {
 						}
 						onToggle();
 					} }
-					className="components-custom-gradient-picker__insert-point"
+					className="components-custom-gradient-picker__insert-point-dropdown"
 					icon={ plus }
-					style={
-						insertPosition !== null
-							? {
-									left: `${ insertPosition }%`,
-									transform: 'translateX( -50% )',
-							  }
-							: undefined
-					}
 				/>
 			) }
 			renderContent={ () => (
@@ -349,6 +345,14 @@ function InsertPoint( {
 					} }
 				/>
 			) }
+			style={
+				insertPosition !== null
+					? {
+							left: `${ insertPosition }%`,
+							transform: 'translateX( -50% )',
+					  }
+					: undefined
+			}
 		/>
 	);
 }

package/src/{custom-gradient-bar → custom-gradient-picker/gradient-bar}/index.js

@@ -136,9 +136,6 @@ export default function CustomGradientBar( {
 							__experimentalIsRenderedInSidebar={
 								__experimentalIsRenderedInSidebar
 							}
-							gradientPickerDomRef={
-								gradientMarkersContainerDomRef
-							}
 							disableAlpha={ disableAlpha }
 							insertPosition={ gradientBarState.insertPosition }
 							value={ controlPoints }

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

@@ -1,3 +1,8 @@
+/**
+ * External dependencies
+ */
+import classnames from 'classnames';
+
 /**
  * WordPress dependencies
  */
@@ -7,9 +12,10 @@ import { __ } from '@wordpress/i18n';
  * Internal dependencies
  */
 import AnglePickerControl from '../angle-picker-control';
-import CustomGradientBar from '../custom-gradient-bar';
+import CustomGradientBar from './gradient-bar';
 import { Flex } from '../flex';
 import SelectControl from '../select-control';
+import { VStack } from '../v-stack';
 import {
 	getGradientAstWithDefault,
 	getLinearGradientRepresentation,
@@ -44,6 +50,7 @@ const GradientAnglePicker = ( { gradientAST, hasGradient, onChange } ) => {
 	};
 	return (
 		<AnglePickerControl
+			__nextHasNoMarginBottom
 			onChange={ onAngleChange }
 			labelPosition="top"
 			value={ hasGradient ? angle : '' }
@@ -86,6 +93,7 @@ const GradientTypePicker = ( { gradientAST, hasGradient, onChange } ) => {
 
 	return (
 		<SelectControl
+			__nextHasNoMarginBottom
 			className="components-custom-gradient-picker__type-picker"
 			label={ __( 'Type' ) }
 			labelPosition="top"
@@ -98,6 +106,8 @@ const GradientTypePicker = ( { gradientAST, hasGradient, onChange } ) => {
 };
 
 export default function CustomGradientPicker( {
+	/** Start opting into the new margin-free styles that will become the default in a future version. */
+	__nextHasNoMargin = false,
 	value,
 	onChange,
 	__experimentalIsRenderedInSidebar,
@@ -116,7 +126,12 @@ export default function CustomGradientPicker( {
 	} ) );
 
 	return (
-		<div className="components-custom-gradient-picker">
+		<VStack
+			spacing={ 5 }
+			className={ classnames( 'components-custom-gradient-picker', {
+				'is-next-has-no-margin': __nextHasNoMargin,
+			} ) }
+		>
 			<CustomGradientBar
 				__experimentalIsRenderedInSidebar={
 					__experimentalIsRenderedInSidebar
@@ -156,6 +171,6 @@ export default function CustomGradientPicker( {
 					) }
 				</AccessoryWrapper>
 			</Flex>
-		</div>
+		</VStack>
 	);
 }

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

@@ -11,6 +11,9 @@ import CustomGradientPicker from '../';
 export default {
 	title: 'Components/CustomGradientPicker',
 	component: CustomGradientPicker,
+	argTypes: {
+		__nextHasNoMargin: { control: { type: 'boolean' } },
+	},
 };
 
 const CustomGradientPickerWithState = ( props ) => {
@@ -24,6 +27,4 @@ const CustomGradientPickerWithState = ( props ) => {
 	);
 };
 
-export const _default = () => {
-	return <CustomGradientPickerWithState />;
-};
+export const Default = CustomGradientPickerWithState.bind( {} );