@wordpress/components 19.9.0 → 19.12.0

package/src/box-control/index.js

@@ -21,7 +21,6 @@ import AxialInputControls from './axial-input-controls';
 import BoxControlIcon from './icon';
 import { Text } from '../text';
 import LinkedButton from './linked-button';
-import Visualizer from './visualizer';
 import {
 	Root,
 	Header,
@@ -30,7 +29,6 @@ import {
 import { parseQuantityAndUnitFromRawValue } from '../unit-control/utils';
 import {
 	DEFAULT_VALUES,
-	DEFAULT_VISUALIZER_VALUES,
 	getInitialSide,
 	isValuesMixed,
 	isValuesDefined,
@@ -50,7 +48,6 @@ export default function BoxControl( {
 	id: idProp,
 	inputProps = defaultInputProps,
 	onChange = noop,
-	onChangeShowVisualizer = noop,
 	label = __( 'Box Control' ),
 	values: valuesProp,
 	units,
@@ -103,14 +100,6 @@ export default function BoxControl( {
 		setIsDirty( true );
 	};
 
-	const handleOnHoverOn = ( next = {} ) => {
-		onChangeShowVisualizer( { ...DEFAULT_VISUALIZER_VALUES, ...next } );
-	};
-
-	const handleOnHoverOff = ( next = {} ) => {
-		onChangeShowVisualizer( { ...DEFAULT_VISUALIZER_VALUES, ...next } );
-	};
-
 	const handleOnReset = () => {
 		onChange( resetValues );
 		setValues( resetValues );
@@ -122,8 +111,6 @@ export default function BoxControl( {
 		...inputProps,
 		onChange: handleOnChange,
 		onFocus: handleOnFocus,
-		onHoverOn: handleOnHoverOn,
-		onHoverOff: handleOnHoverOff,
 		isLinked,
 		units,
 		selectedUnits,
@@ -189,5 +176,3 @@ export default function BoxControl( {
 		</Root>
 	);
 }
-
-BoxControl.__Visualizer = Visualizer;

package/src/box-control/stories/index.js

@@ -11,7 +11,6 @@ import { useState } from '@wordpress/element';
  * Internal dependencies
  */
 import BoxControl from '../';
-import BoxControlVisualizer from '../visualizer';
 import { Flex, FlexBlock } from '../../flex';
 
 export default {
@@ -36,7 +35,6 @@ function DemoExample( {
 	splitOnAxis = false,
 } ) {
 	const [ values, setValues ] = useState( defaultValues );
-	const [ showVisualizer, setShowVisualizer ] = useState( {} );
 
 	return (
 		<Container align="top" gap={ 8 }>
@@ -47,31 +45,14 @@ function DemoExample( {
 						values={ values }
 						sides={ sides }
 						onChange={ setValues }
-						onChangeShowVisualizer={ setShowVisualizer }
 						splitOnAxis={ splitOnAxis }
 					/>
 				</Content>
 			</FlexBlock>
-			<FlexBlock>
-				<Content>
-					<BoxContainer>
-						<BoxControlVisualizer
-							showValues={ showVisualizer }
-							values={ values }
-						>
-							<Box />
-						</BoxControlVisualizer>
-					</BoxContainer>
-				</Content>
-			</FlexBlock>
 		</Container>
 	);
 }
 
-export const visualizer = () => {
-	return <DemoExample />;
-};
-
 export const arbitrarySides = () => {
 	return (
 		<DemoExample
@@ -108,16 +89,6 @@ const Container = styled( Flex )`
 	max-width: 780px;
 `;
 
-const BoxContainer = styled.div`
-	width: 300px;
-	height: 300px;
-`;
-
-const Box = styled.div`
-	background: #ddd;
-	height: 300px;
-`;
-
 const Content = styled.div`
 	padding: 20px;
 `;

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

@@ -1,19 +1,29 @@
 /**
  * External dependencies
  */
-import { render, fireEvent, screen } from '@testing-library/react';
+import { render, screen } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
 
 /**
  * WordPress dependencies
  */
 import { useState } from '@wordpress/element';
-import { ENTER } from '@wordpress/keycodes';
 
 /**
  * Internal dependencies
  */
 import BoxControl from '../';
 
+const setupUser = () =>
+	userEvent.setup( {
+		advanceTimers: jest.advanceTimersByTime,
+	} );
+
+const getInput = () =>
+	screen.getByLabelText( 'Box Control', { selector: 'input' } );
+const getSelect = () => screen.getByLabelText( 'Select unit' );
+const getReset = () => screen.getByText( /Reset/ );
+
 describe( 'BoxControl', () => {
 	describe( 'Basic rendering', () => {
 		it( 'should render', () => {
@@ -23,42 +33,41 @@ describe( 'BoxControl', () => {
 			expect( input ).toBeTruthy();
 		} );
 
-		it( 'should update values when interacting with input', () => {
-			const { container } = render( <BoxControl /> );
-			const input = container.querySelector( 'input' );
-			const unitSelect = container.querySelector( 'select' );
+		it( 'should update values when interacting with input', async () => {
+			const user = setupUser();
+			render( <BoxControl /> );
+			const input = getInput();
+			const select = getSelect();
 
-			input.focus();
-			fireEvent.change( input, { target: { value: '100%' } } );
-			fireEvent.keyDown( input, { keyCode: ENTER } );
+			await user.type( input, '100%' );
+			await user.keyboard( '{Enter}' );
 
-			expect( input.value ).toBe( '100' );
-			expect( unitSelect.value ).toBe( '%' );
+			expect( input ).toHaveValue( '100' );
+			expect( select ).toHaveValue( '%' );
 		} );
 	} );
 
 	describe( 'Reset', () => {
-		it( 'should reset values when clicking Reset', () => {
-			const { container, getByText } = render( <BoxControl /> );
-			const input = container.querySelector( 'input' );
-			const unitSelect = container.querySelector( 'select' );
-			const reset = getByText( /Reset/ );
+		it( 'should reset values when clicking Reset', async () => {
+			const user = setupUser();
+			render( <BoxControl /> );
+			const input = getInput();
+			const select = getSelect();
+			const reset = getReset();
 
-			input.focus();
-			fireEvent.change( input, { target: { value: '100px' } } );
-			fireEvent.keyDown( input, { keyCode: ENTER } );
+			await user.type( input, '100px' );
+			await user.keyboard( '{Enter}' );
 
-			expect( input.value ).toBe( '100' );
-			expect( unitSelect.value ).toBe( 'px' );
+			expect( input ).toHaveValue( '100' );
+			expect( select ).toHaveValue( 'px' );
 
-			reset.focus();
-			fireEvent.click( reset );
+			await user.click( reset );
 
-			expect( input.value ).toBe( '' );
-			expect( unitSelect.value ).toBe( 'px' );
+			expect( input ).toHaveValue( '' );
+			expect( select ).toHaveValue( 'px' );
 		} );
 
-		it( 'should reset values when clicking Reset, if controlled', () => {
+		it( 'should reset values when clicking Reset, if controlled', async () => {
 			const Example = () => {
 				const [ state, setState ] = useState();
 
@@ -69,26 +78,25 @@ describe( 'BoxControl', () => {
 					/>
 				);
 			};
-			const { container, getByText } = render( <Example /> );
-			const input = container.querySelector( 'input' );
-			const unitSelect = container.querySelector( 'select' );
-			const reset = getByText( /Reset/ );
+			const user = setupUser();
+			render( <Example /> );
+			const input = getInput();
+			const select = getSelect();
+			const reset = getReset();
 
-			input.focus();
-			fireEvent.change( input, { target: { value: '100px' } } );
-			fireEvent.keyDown( input, { keyCode: ENTER } );
+			await user.type( input, '100px' );
+			await user.keyboard( '{Enter}' );
 
-			expect( input.value ).toBe( '100' );
-			expect( unitSelect.value ).toBe( 'px' );
+			expect( input ).toHaveValue( '100' );
+			expect( select ).toHaveValue( 'px' );
 
-			reset.focus();
-			fireEvent.click( reset );
+			await user.click( reset );
 
-			expect( input.value ).toBe( '' );
-			expect( unitSelect.value ).toBe( 'px' );
+			expect( input ).toHaveValue( '' );
+			expect( select ).toHaveValue( 'px' );
 		} );
 
-		it( 'should reset values when clicking Reset, if controlled <-> uncontrolled state changes', () => {
+		it( 'should reset values when clicking Reset, if controlled <-> uncontrolled state changes', async () => {
 			const Example = () => {
 				const [ state, setState ] = useState();
 
@@ -106,70 +114,78 @@ describe( 'BoxControl', () => {
 					/>
 				);
 			};
-			const { container, getByText } = render( <Example /> );
-			const input = container.querySelector( 'input' );
-			const unitSelect = container.querySelector( 'select' );
-			const reset = getByText( /Reset/ );
+			const user = setupUser();
+			render( <Example /> );
+			const input = getInput();
+			const select = getSelect();
+			const reset = getReset();
 
-			input.focus();
-			fireEvent.change( input, { target: { value: '100px' } } );
-			fireEvent.keyDown( input, { keyCode: ENTER } );
+			await user.type( input, '100px' );
+			await user.keyboard( '{Enter}' );
 
-			expect( input.value ).toBe( '100' );
-			expect( unitSelect.value ).toBe( 'px' );
+			expect( input ).toHaveValue( '100' );
+			expect( select ).toHaveValue( 'px' );
 
-			reset.focus();
-			fireEvent.click( reset );
+			await user.click( reset );
 
-			expect( input.value ).toBe( '' );
-			expect( unitSelect.value ).toBe( 'px' );
+			expect( input ).toHaveValue( '' );
+			expect( select ).toHaveValue( 'px' );
 		} );
 
-		it( 'should persist cleared value when focus changes', () => {
-			render( <BoxControl /> );
+		it( 'should persist cleared value when focus changes', async () => {
+			const user = setupUser();
+			const spyChange = jest.fn();
+			render( <BoxControl onChange={ ( v ) => spyChange( v ) } /> );
 			const input = screen.getByLabelText( 'Box Control', {
 				selector: 'input',
 			} );
 			const unitSelect = screen.getByLabelText( 'Select unit' );
 
-			input.focus();
-			fireEvent.change( input, { target: { value: '100%' } } );
-			fireEvent.keyDown( input, { keyCode: ENTER } );
+			await user.type( input, '100%' );
+			await user.keyboard( '{Enter}' );
 
-			expect( input.value ).toBe( '100' );
-			expect( unitSelect.value ).toBe( '%' );
+			expect( input ).toHaveValue( '100' );
+			expect( unitSelect ).toHaveValue( '%' );
 
-			fireEvent.change( input, { target: { value: '' } } );
-			fireEvent.blur( input );
+			await user.clear( input );
+			expect( input ).toHaveValue( '' );
+			// Clicking document.body to trigger a blur event on the input.
+			await user.click( document.body );
 
-			expect( input.value ).toBe( '' );
+			expect( input ).toHaveValue( '' );
+			expect( spyChange ).toHaveBeenLastCalledWith( {
+				top: undefined,
+				right: undefined,
+				bottom: undefined,
+				left: undefined,
+			} );
 		} );
 	} );
 
 	describe( 'Unlinked Sides', () => {
-		it( 'should update a single side value when unlinked', () => {
+		it( 'should update a single side value when unlinked', async () => {
 			let state = {};
 			const setState = ( newState ) => ( state = newState );
 
-			const { container, getByLabelText } = render(
+			const { getAllByLabelText, getByLabelText } = render(
 				<BoxControl
 					values={ state }
 					onChange={ ( next ) => setState( next ) }
 				/>
 			);
-
+			const user = setupUser();
 			const unlink = getByLabelText( /Unlink Sides/ );
-			fireEvent.click( unlink );
 
-			const input = container.querySelector( 'input' );
-			const unitSelect = container.querySelector( 'select' );
+			await user.click( unlink );
+
+			const input = getByLabelText( /Top/ );
+			const select = getAllByLabelText( /Select unit/ )[ 0 ];
 
-			input.focus();
-			fireEvent.change( input, { target: { value: '100px' } } );
-			fireEvent.keyDown( input, { keyCode: ENTER } );
+			await user.type( input, '100px' );
+			await user.keyboard( '{Enter}' );
 
-			expect( input.value ).toBe( '100' );
-			expect( unitSelect.value ).toBe( 'px' );
+			expect( input ).toHaveValue( '100' );
+			expect( select ).toHaveValue( 'px' );
 
 			expect( state ).toEqual( {
 				top: '100px',
@@ -179,30 +195,30 @@ describe( 'BoxControl', () => {
 			} );
 		} );
 
-		it( 'should update a whole axis when value is changed when unlinked', () => {
+		it( 'should update a whole axis when value is changed when unlinked', async () => {
 			let state = {};
 			const setState = ( newState ) => ( state = newState );
 
-			const { container, getByLabelText } = render(
+			const { getAllByLabelText, getByLabelText } = render(
 				<BoxControl
 					values={ state }
 					onChange={ ( next ) => setState( next ) }
 					splitOnAxis={ true }
 				/>
 			);
-
+			const user = setupUser();
 			const unlink = getByLabelText( /Unlink Sides/ );
-			fireEvent.click( unlink );
 
-			const input = container.querySelector( 'input' );
-			const unitSelect = container.querySelector( 'select' );
+			await user.click( unlink );
+
+			const input = getByLabelText( /Vertical/ );
+			const select = getAllByLabelText( /Select unit/ )[ 0 ];
 
-			input.focus();
-			fireEvent.change( input, { target: { value: '100px' } } );
-			fireEvent.keyDown( input, { keyCode: ENTER } );
+			await user.type( input, '100px' );
+			await user.keyboard( '{Enter}' );
 
-			expect( input.value ).toBe( '100' );
-			expect( unitSelect.value ).toBe( 'px' );
+			expect( input ).toHaveValue( '100' );
+			expect( select ).toHaveValue( 'px' );
 
 			expect( state ).toEqual( {
 				top: '100px',
@@ -214,36 +230,34 @@ describe( 'BoxControl', () => {
 	} );
 
 	describe( 'Unit selections', () => {
-		it( 'should update unlinked controls unit selection based on all input control', () => {
+		it( 'should update unlinked controls unit selection based on all input control', async () => {
 			// Render control.
 			render( <BoxControl /> );
+			const user = setupUser();
 
 			// Make unit selection on all input control.
-			const allUnitSelect = screen.getByLabelText( 'Select unit' );
-			allUnitSelect.focus();
-			fireEvent.change( allUnitSelect, { target: { value: 'em' } } );
+			const allUnitSelect = getSelect();
+			await user.selectOptions( allUnitSelect, [ 'em' ] );
 
 			// Unlink the controls.
-			const unlink = screen.getByLabelText( /Unlink Sides/ );
-			fireEvent.click( unlink );
+			await user.click( screen.getByLabelText( /Unlink Sides/ ) );
 
 			// Confirm that each individual control has the selected unit
 			const unlinkedSelects = screen.getAllByDisplayValue( 'em' );
 			expect( unlinkedSelects.length ).toEqual( 4 );
 		} );
 
-		it( 'should use individual side attribute unit when available', () => {
+		it( 'should use individual side attribute unit when available', async () => {
 			// Render control.
 			const { rerender } = render( <BoxControl /> );
+			const user = setupUser();
 
 			// Make unit selection on all input control.
-			const allUnitSelect = screen.getByLabelText( 'Select unit' );
-			allUnitSelect.focus();
-			fireEvent.change( allUnitSelect, { target: { value: 'vw' } } );
+			const allUnitSelect = getSelect();
+			await user.selectOptions( allUnitSelect, [ 'vw' ] );
 
 			// Unlink the controls.
-			const unlink = screen.getByLabelText( /Unlink Sides/ );
-			fireEvent.click( unlink );
+			await user.click( screen.getByLabelText( /Unlink Sides/ ) );
 
 			// Confirm that each individual control has the selected unit
 			const unlinkedSelects = screen.getAllByDisplayValue( 'vw' );
@@ -261,18 +275,15 @@ describe( 'BoxControl', () => {
 	} );
 
 	describe( 'onChange updates', () => {
-		it( 'should call onChange when values contain more than just CSS units', () => {
+		it( 'should call onChange when values contain more than just CSS units', async () => {
 			const setState = jest.fn();
 
 			render( <BoxControl onChange={ setState } /> );
+			const user = setupUser();
+			const input = getInput();
 
-			const input = screen.getByLabelText( 'Box Control', {
-				selector: 'input',
-			} );
-
-			input.focus();
-			fireEvent.change( input, { target: { value: '7.5rem' } } );
-			fireEvent.keyDown( input, { keyCode: ENTER } );
+			await user.type( input, '7.5rem' );
+			await user.keyboard( '{Enter}' );
 
 			expect( setState ).toHaveBeenCalledWith( {
 				top: '7.5rem',
@@ -282,14 +293,14 @@ describe( 'BoxControl', () => {
 			} );
 		} );
 
-		it( 'should not pass invalid CSS unit only values to onChange', () => {
+		it( 'should not pass invalid CSS unit only values to onChange', async () => {
 			const setState = jest.fn();
 
 			render( <BoxControl onChange={ setState } /> );
+			const user = setupUser();
 
-			const allUnitSelect = screen.getByLabelText( 'Select unit' );
-			allUnitSelect.focus();
-			fireEvent.change( allUnitSelect, { target: { value: 'rem' } } );
+			const allUnitSelect = getSelect();
+			await user.selectOptions( allUnitSelect, 'rem' );
 
 			expect( setState ).toHaveBeenCalledWith( {
 				top: undefined,

package/src/box-control/utils.js

@@ -31,13 +31,6 @@ export const DEFAULT_VALUES = {
 	left: undefined,
 };
 
-export const DEFAULT_VISUALIZER_VALUES = {
-	top: false,
-	right: false,
-	bottom: false,
-	left: false,
-};
-
 export const ALL_SIDES = [ 'top', 'right', 'bottom', 'left' ];
 
 /**

package/src/button/index.js

@@ -3,7 +3,6 @@
  * External dependencies
  */
 import classnames from 'classnames';
-import { isArray } from 'lodash';
 
 /**
  * WordPress dependencies
@@ -140,8 +139,7 @@ export function Button( props, ref ) {
 			// There's a label and...
 			( !! label &&
 				// The children are empty and...
-				( ! children ||
-					( isArray( children ) && ! children.length ) ) &&
+				! children?.length &&
 				// The tooltip is not explicitly disabled.
 				false !== showTooltip ) );
 
@@ -186,7 +184,7 @@ export function Button( props, ref ) {
 	return (
 		<>
 			<Tooltip
-				text={ describedBy ? describedBy : label }
+				text={ children?.length && describedBy ? describedBy : label }
 				shortcut={ shortcut }
 				position={ tooltipPosition }
 			>

package/src/button/index.native.js

@@ -9,11 +9,12 @@ import {
 	Platform,
 } from 'react-native';
 import { isArray } from 'lodash';
+import { LongPressGestureHandler, State } from 'react-native-gesture-handler';
 
 /**
  * WordPress dependencies
  */
-import { Children, cloneElement } from '@wordpress/element';
+import { Children, cloneElement, useCallback } from '@wordpress/element';
 import {
 	usePreferredColorScheme,
 	usePreferredColorSchemeStyle,
@@ -163,6 +164,15 @@ export function Button( props ) {
 		  } )
 		: null;
 
+	const longPressHandler = useCallback(
+		( { nativeEvent } ) => {
+			if ( nativeEvent.state === State.ACTIVE && onLongPress ) {
+				onLongPress();
+			}
+		},
+		[ onLongPress ]
+	);
+
 	const element = (
 		<TouchableOpacity
 			activeOpacity={ 0.7 }
@@ -172,28 +182,33 @@ export function Button( props ) {
 			accessibilityRole={ 'button' }
 			accessibilityHint={ hint }
 			onPress={ onClick }
-			onLongPress={ onLongPress }
 			style={ containerStyle }
 			disabled={ isDisabled }
 			testID={ testID }
 		>
-			<View style={ buttonViewStyle }>
-				<View style={ { flexDirection: 'row' } }>
-					{ newIcon }
-					{ newChildren }
-					{ subscript && (
-						<Text
-							style={
-								isPressed
-									? styles.subscriptActive
-									: subscriptInactive
-							}
-						>
-							{ subscript }
-						</Text>
-					) }
+			<LongPressGestureHandler
+				minDurationMs={ 500 }
+				maxDist={ 150 }
+				onHandlerStateChange={ longPressHandler }
+			>
+				<View style={ buttonViewStyle }>
+					<View style={ { flexDirection: 'row' } }>
+						{ newIcon }
+						{ newChildren }
+						{ subscript && (
+							<Text
+								style={
+									isPressed
+										? styles.subscriptActive
+										: subscriptInactive
+								}
+							>
+								{ subscript }
+							</Text>
+						) }
+					</View>
 				</View>
-			</View>
+			</LongPressGestureHandler>
 		</TouchableOpacity>
 	);
 

package/src/button/test/index.js

@@ -164,7 +164,7 @@ describe( 'Button', () => {
 			expect( buttonDescription ).toBe( 'Description text' );
 		} );
 
-		it( 'should populate tooltip with describedBy content', () => {
+		it( 'should populate tooltip with label content for buttons without visible labels (no children)', () => {
 			const buttonTooltip = shallow(
 				<Button
 					describedBy="Description text"
@@ -173,6 +173,21 @@ describe( 'Button', () => {
 				/>
 			).find( 'Tooltip' );
 
+			expect( buttonTooltip.prop( 'text' ) ).toBe( 'Label' );
+		} );
+
+		it( 'should populate tooltip with description content for buttons with visible labels (buttons with children)', () => {
+			const buttonTooltip = shallow(
+				<Button
+					label="Label"
+					describedBy="Description text"
+					icon={ plusCircle }
+					showTooltip
+				>
+					Children
+				</Button>
+			).find( 'Tooltip' );
+
 			expect( buttonTooltip.prop( 'text' ) ).toBe( 'Description text' );
 		} );