@wordpress/components 19.15.0 → 20.0.0

package/src/flex/test/index.tsx

@@ -0,0 +1,84 @@
+/**
+ * External dependencies
+ */
+import { render, screen } from '@testing-library/react';
+
+/**
+ * Internal dependencies
+ */
+import { View } from '../../view';
+import { Flex, FlexBlock, FlexItem } from '../';
+
+describe( 'props', () => {
+	beforeEach( () => {
+		render(
+			<Flex data-testid="base-flex">
+				<FlexItem>Item</FlexItem>
+				<FlexBlock>Item</FlexBlock>
+			</Flex>
+		);
+	} );
+
+	test( 'should render correctly', () => {
+		expect( screen.getByTestId( 'base-flex' ) ).toMatchSnapshot();
+	} );
+
+	test( 'should render + wrap non Flex children', () => {
+		render(
+			<Flex data-testid="flex">
+				<FlexItem>Item</FlexItem>
+				<View />
+				<div />
+				<FlexBlock>Item</FlexBlock>
+			</Flex>
+		);
+
+		expect( screen.getByTestId( 'flex' ) ).toMatchDiffSnapshot(
+			screen.getByTestId( 'base-flex' )
+		);
+	} );
+
+	test( 'should render align', () => {
+		render(
+			<Flex align="flex-start" data-testid="flex">
+				<FlexItem>Item</FlexItem>
+				<FlexBlock>Item</FlexBlock>
+			</Flex>
+		);
+		expect( screen.getByTestId( 'flex' ) ).toMatchStyleDiffSnapshot(
+			screen.getByTestId( 'base-flex' )
+		);
+	} );
+
+	test( 'should render justify', () => {
+		render(
+			<Flex justify="flex-start" data-testid="flex">
+				<FlexItem>Item</FlexItem>
+				<FlexBlock>Item</FlexBlock>
+			</Flex>
+		);
+		expect( screen.getByTestId( 'flex' ) ).toMatchStyleDiffSnapshot(
+			screen.getByTestId( 'base-flex' )
+		);
+	} );
+
+	test( 'should render spacing', () => {
+		render(
+			<>
+				<Flex>
+					<FlexItem>Item</FlexItem>
+					<FlexBlock data-testid="flex-block">Item</FlexBlock>
+				</Flex>
+				<Flex gap={ 5 }>
+					<FlexItem>Item</FlexItem>
+					<FlexBlock data-testid="flex-block-with-gap">
+						Item
+					</FlexBlock>
+				</Flex>
+			</>
+		);
+		expect( screen.getByTestId( 'flex-block' ) ).toMatchStyleDiffSnapshot(
+			screen.getByTestId( 'flex-block-with-gap' )
+		);
+	} );
+} );

package/src/flex/types.ts

@@ -1,7 +1,7 @@
 /**
  * External dependencies
  */
-import type { CSSProperties } from 'react';
+import type { CSSProperties, ReactNode } from 'react';
 
 /**
  * Internal dependencies
@@ -15,33 +15,40 @@ export type FlexDirection = ResponsiveCSSValue<
 
 export type FlexProps = {
 	/**
-	 * Aligns children using CSS Flexbox `align-items`. Vertically aligns content if the `direction` is `row`, or horizontally aligns content if the `direction` is `column`.
-	 *
-	 * In the example below, `flex-start` will align the children content to the top.
+	 * Aligns children using CSS Flexbox `align-items`. Vertically aligns
+	 * content if the `direction` is `row`, or horizontally aligns content if
+	 * the `direction` is `column`.
 	 *
 	 * @default 'center'
 	 */
 	align?: CSSProperties[ 'alignItems' ];
 	/**
-	 * The direction flow of the children content can be adjusted with `direction`. `column` will align children vertically and `row` will align children horizontally.
+	 * The direction flow of the children content can be adjusted with
+	 * `direction`. `column` will align children vertically and `row` will align
+	 * children horizontally.
 	 *
 	 * @default 'row'
 	 */
 	direction?: FlexDirection;
 	/**
-	 * Expands to the maximum available width (if horizontal) or height (if vertical).
+	 * Expands to the maximum available width (if horizontal) or height (if
+	 * vertical).
 	 *
 	 * @default true
 	 */
 	expanded?: boolean;
 	/**
-	 * Spacing in between each child can be adjusted by using `gap`. The value of `gap` works as a multiplier to the library's grid system (base of `4px`).
+	 * Spacing in between each child can be adjusted by using `gap`.
+	 *
+	 * Can either be a number (which will act as a multiplier to the library's
+	 * grid system base of 4px), or a literal CSS value string.
 	 *
 	 * @default 2
 	 */
 	gap?: SpaceInput;
 	/**
-	 * Horizontally aligns content if the `direction` is `row`, or vertically aligns content if the `direction` is `column`.
+	 * Horizontally aligns content if the `direction` is `row`, or vertically
+	 * aligns content if the `direction` is `column`.
 	 *
 	 * @default 'space-between'
 	 */
@@ -55,7 +62,7 @@ export type FlexProps = {
 	/**
 	 * The children elements.
 	 */
-	children: React.ReactNode;
+	children: ReactNode;
 	/**
 	 * @deprecated
 	 */
@@ -76,7 +83,7 @@ export type FlexItemProps = {
 	/**
 	 * The children elements.
 	 */
-	children: React.ReactNode;
+	children?: ReactNode;
 };
 
 export type FlexBlockProps = Omit< FlexItemProps, 'isBlock' >;

package/src/focal-point-picker/index.js

@@ -9,7 +9,6 @@ import classnames from 'classnames';
 import { __ } from '@wordpress/i18n';
 import { Component, createRef } from '@wordpress/element';
 import { withInstanceId } from '@wordpress/compose';
-import { UP, DOWN, LEFT, RIGHT } from '@wordpress/keycodes';
 
 /**
  * Internal dependencies
@@ -171,15 +170,21 @@ export class FocalPointPicker extends Component {
 		this.props.onDragEnd?.( event );
 	}
 	onKeyDown( event ) {
-		const { keyCode, shiftKey } = event;
-		if ( ! [ UP, DOWN, LEFT, RIGHT ].includes( keyCode ) ) return;
+		const { code, shiftKey } = event;
+		if (
+			! [ 'ArrowUp', 'ArrowDown', 'ArrowLeft', 'ArrowRight' ].includes(
+				code
+			)
+		)
+			return;
 
 		event.preventDefault();
 
 		const next = { ...this.state.percentages };
 		const step = shiftKey ? 0.1 : 0.01;
-		const delta = keyCode === UP || keyCode === LEFT ? -1 * step : step;
-		const axis = keyCode === UP || keyCode === DOWN ? 'y' : 'x';
+		const delta =
+			code === 'ArrowUp' || code === 'ArrowLeft' ? -1 * step : step;
+		const axis = code === 'ArrowUp' || code === 'ArrowDown' ? 'y' : 'x';
 		const value = parseFloat( next[ axis ] ) + delta;
 
 		next[ axis ] = roundClamp( value, 0, 1, step );

package/src/focal-point-picker/styles/focal-point-picker-style.js

@@ -12,14 +12,12 @@ import { COLORS } from '../../utils';
 
 export const MediaWrapper = styled.div`
 	background-color: transparent;
-	box-sizing: border-box;
 	text-align: center;
 	width: 100%;
 `;
 
 export const MediaContainer = styled.div`
 	align-items: center;
-	box-sizing: border-box;
 	box-shadow: 0 0 0 1px rgba( 0, 0, 0, 0.2 );
 	cursor: pointer;
 	display: inline-flex;
@@ -44,7 +42,6 @@ export const MediaContainer = styled.div`
 
 export const MediaPlaceholder = styled.div`
 	background: ${ COLORS.lightGray[ 300 ] };
-	box-sizing: border-box;
 	height: 170px;
 	max-width: 280px;
 	min-width: 200px;
@@ -61,7 +58,6 @@ export const ControlWrapper = styled( Flex )`
 `;
 
 export const GridView = styled.div`
-	box-sizing: border-box;
 	left: 50%;
 	opacity: 0;
 	overflow: hidden;
@@ -80,7 +76,6 @@ export const GridView = styled.div`
 `;
 
 export const GridLine = styled.div`
-	box-sizing: border-box;
 	background: white;
 	box-shadow: 0 0 2px rgba( 0, 0, 0, 0.6 );
 	position: absolute;

package/src/focal-point-picker/styles/focal-point-style.js

@@ -15,7 +15,6 @@ import { COLORS } from '../../utils';
 
 export const FocalPointWrapper = styled.div`
 	background-color: transparent;
-	box-sizing: border-box;
 	cursor: grab;
 	height: 30px;
 	margin: -15px 0 0 -15px;
@@ -43,6 +42,5 @@ export const PointerIconPathOutline = styled( Path )`
 `;
 
 export const PointerIconPathFill = styled( Path )`
-	fill: ${ COLORS.blue.wordpress[ 700 ] };
 	fill: ${ COLORS.ui.theme };
 `;

package/src/focal-point-picker/test/index.js

@@ -1,7 +1,8 @@
 /**
  * External dependencies
  */
-import { act, fireEvent, render } from '@testing-library/react';
+import { fireEvent, render, screen } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
 
 /**
  * Internal dependencies
@@ -10,31 +11,49 @@ import Picker from '../index.js';
 
 describe( 'FocalPointPicker', () => {
 	describe( 'focus and blur', () => {
-		let firedDragEnd;
-		let firedDrag;
-		const { getByRole, unmount } = render(
-			<Picker
-				onChange={ () => {} }
-				onDragEnd={ () => ( firedDragEnd = true ) }
-				onDrag={ () => ( firedDrag = true ) }
-			/>
-		);
-		const dragArea = getByRole( 'button' );
-		fireEvent.mouseDown( dragArea );
-		const gainedFocus = dragArea.ownerDocument.activeElement === dragArea;
-
-		fireEvent.blur( dragArea );
-		fireEvent.mouseMove( dragArea );
-
-		// cleans up as it's not automated for renders outside of test blocks
-		unmount();
-
-		it( 'should focus the draggable area', () => {
-			expect( gainedFocus ).toBe( true );
+		it( 'clicking the draggable area should focus it', async () => {
+			const user = userEvent.setup( {
+				advanceTimers: jest.advanceTimersByTime,
+			} );
+
+			const mockOnChange = jest.fn();
+
+			render( <Picker onChange={ mockOnChange } /> );
+
+			const draggableArea = screen.getByRole( 'button' );
+
+			await user.click( draggableArea );
+
+			expect( draggableArea ).toHaveFocus();
 		} );
 
 		it( 'should stop a drag operation when focus is lost', () => {
-			expect( firedDragEnd && ! firedDrag ).toBe( true );
+			const mockOnDrag = jest.fn();
+			const mockOnDragEnd = jest.fn();
+			const mockOnChange = jest.fn();
+
+			render(
+				<Picker
+					onChange={ mockOnChange }
+					onDrag={ mockOnDrag }
+					onDragEnd={ mockOnDragEnd }
+				/>
+			);
+
+			const draggableArea = screen.getByRole( 'button' );
+
+			// `user-event` is not capable of testing drag interactions properly.
+			// we could consider using playwright instead.
+			fireEvent.mouseDown( draggableArea );
+
+			expect( mockOnDrag ).not.toHaveBeenCalled();
+			expect( mockOnDragEnd ).not.toHaveBeenCalled();
+
+			fireEvent.blur( draggableArea );
+			fireEvent.mouseMove( draggableArea );
+
+			expect( mockOnDrag ).not.toHaveBeenCalled();
+			expect( mockOnDragEnd ).toHaveBeenCalledTimes( 1 );
 		} );
 	} );
 
@@ -47,13 +66,17 @@ describe( 'FocalPointPicker', () => {
 			events.forEach( ( name ) => {
 				handlers[ name ] = ( ...all ) => eventLogger( name, all );
 			} );
-			const { getByRole } = render( <Picker { ...handlers } /> );
-			const dragArea = getByRole( 'button' );
-			act( () => {
-				fireEvent.mouseDown( dragArea );
-				fireEvent.mouseMove( dragArea );
-				fireEvent.mouseUp( dragArea );
-			} );
+
+			render( <Picker { ...handlers } /> );
+
+			const dragArea = screen.getByRole( 'button' );
+
+			// `user-event` is not capable of testing drag interactions properly.
+			// we could consider using playwright instead.
+			fireEvent.mouseDown( dragArea );
+			fireEvent.mouseMove( dragArea );
+			fireEvent.mouseUp( dragArea );
+
 			expect(
 				events.reduce( ( last, eventName, index ) => {
 					return last && logs[ index ].name === eventName;
@@ -64,9 +87,14 @@ describe( 'FocalPointPicker', () => {
 
 	describe( 'resolvePoint handling', () => {
 		it( 'should allow value altering', async () => {
+			const user = userEvent.setup( {
+				advanceTimers: jest.advanceTimersByTime,
+			} );
+
 			const spyChange = jest.fn();
 			const spy = jest.fn();
-			const { getByRole } = render(
+
+			render(
 				<Picker
 					value={ { x: 0.25, y: 0.25 } }
 					onChange={ spyChange }
@@ -76,12 +104,13 @@ describe( 'FocalPointPicker', () => {
 					} }
 				/>
 			);
+
 			// Click and press arrow up
-			const dragArea = getByRole( 'button' );
-			act( () => {
-				fireEvent.mouseDown( dragArea );
-				fireEvent.keyDown( dragArea, { charCode: 0, keyCode: 38 } );
-			} );
+			const dragArea = screen.getByRole( 'button' );
+
+			await user.click( dragArea );
+			await user.keyboard( '[ArrowUp]' );
+
 			expect( spy ).toHaveBeenCalled();
 			expect( spyChange ).toHaveBeenCalledWith( {
 				x: '0.91',
@@ -92,27 +121,31 @@ describe( 'FocalPointPicker', () => {
 
 	describe( 'controllability', () => {
 		it( 'should update value from props', () => {
-			const { rerender, getByRole } = render(
+			const { rerender } = render(
 				<Picker value={ { x: 0.25, y: 0.5 } } />
 			);
-			const xInput = getByRole( 'spinbutton', { name: 'Left' } );
+			const xInput = screen.getByRole( 'spinbutton', { name: 'Left' } );
 			rerender( <Picker value={ { x: 0.93, y: 0.5 } } /> );
 			expect( xInput.value ).toBe( '93' );
 		} );
 		it( 'call onChange with the expected values', async () => {
+			const user = userEvent.setup( {
+				advanceTimers: jest.advanceTimersByTime,
+			} );
+
 			const spyChange = jest.fn();
-			const { getByRole } = render(
+			render(
 				<Picker value={ { x: 0.14, y: 0.62 } } onChange={ spyChange } />
 			);
 			// Click and press arrow up
-			const dragArea = getByRole( 'button' );
-			act( () => {
-				fireEvent.mouseDown( dragArea );
-				fireEvent.keyDown( dragArea, { charCode: 0, keyCode: 38 } );
-			} );
+			const dragArea = screen.getByRole( 'button' );
+
+			await user.click( dragArea );
+			await user.keyboard( '[ArrowDown]' );
+
 			expect( spyChange ).toHaveBeenCalledWith( {
 				x: '0.14',
-				y: '0.61',
+				y: '0.63',
 			} );
 		} );
 	} );