@wordpress/components 19.11.0 → 19.12.0

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/card/types.ts

@@ -6,7 +6,7 @@ import type { CSSProperties } from 'react';
 /**
  * Internal dependencies
  */
-import type { Props as SurfaceProps } from '../surface/types';
+import type { SurfaceProps } from '../surface/types';
 
 type DeprecatedSizeOptions = 'extraSmall';
 export type SizeOptions = 'xSmall' | 'small' | 'medium' | 'large';

package/src/checkbox-control/test/__snapshots__/index.tsx.snap

@@ -0,0 +1,42 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`CheckboxControl Basic rendering should render the indeterminate icon when in the indeterminate state 1`] = `
+Snapshot Diff:
+- First value
++ Second value
+
+@@ -8,17 +8,31 @@
+        <span
+          class="components-checkbox-control__input-container"
+        >
+          <input
+            class="components-checkbox-control__input"
+-           id="inspector-checkbox-control-5"
++           id="inspector-checkbox-control-6"
+            type="checkbox"
+            value="1"
++         />
++         <svg
++           aria-hidden="true"
++           class="components-checkbox-control__indeterminate"
++           focusable="false"
++           height="24"
++           role="presentation"
++           viewBox="0 0 24 24"
++           width="24"
++           xmlns="http://www.w3.org/2000/svg"
++         >
++           <path
++             d="M7 11.5h10V13H7z"
+            />
++         </svg>
+        </span>
+        <label
+          class="components-checkbox-control__label"
+-         for="inspector-checkbox-control-5"
++         for="inspector-checkbox-control-6"
+        />
+      </div>
+    </div>
+  </div>
+`;

package/src/checkbox-control/test/index.tsx

@@ -0,0 +1,109 @@
+/**
+ * External dependencies
+ */
+import { render, screen } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+import { noop } from 'lodash';
+
+/**
+ * WordPress dependencies
+ */
+import { useState } from '@wordpress/element';
+
+/**
+ * Internal dependencies
+ */
+import BaseCheckboxControl from '..';
+import type { CheckboxControlProps } from '../types';
+
+const getInput = () => screen.getByRole( 'checkbox' ) as HTMLInputElement;
+
+const CheckboxControl = ( props: Omit< CheckboxControlProps, 'onChange' > ) => {
+	return <BaseCheckboxControl onChange={ noop } { ...props } />;
+};
+
+const ControlledCheckboxControl = ( { onChange }: CheckboxControlProps ) => {
+	const [ isChecked, setChecked ] = useState( false );
+	return (
+		<BaseCheckboxControl
+			checked={ isChecked }
+			onChange={ ( value ) => {
+				setChecked( value );
+				onChange( value );
+			} }
+		/>
+	);
+};
+
+describe( 'CheckboxControl', () => {
+	describe( 'Basic rendering', () => {
+		it( 'should render', () => {
+			render( <CheckboxControl /> );
+			expect( getInput() ).not.toBeNull();
+		} );
+
+		it( 'should render an unchecked `checkbox` by default', () => {
+			render( <CheckboxControl /> );
+			expect( getInput() ).toHaveProperty( 'checked', false );
+		} );
+
+		it( 'should render an checked `checkbox` when `checked={ true }`', () => {
+			render( <CheckboxControl checked /> );
+			expect( getInput() ).toHaveProperty( 'checked', true );
+		} );
+
+		it( 'should render label', () => {
+			render( <CheckboxControl label="Hello" /> );
+
+			const label = screen.getByText( 'Hello' );
+			expect( label ).toBeInTheDocument();
+		} );
+
+		it( 'should render a checkbox in an indeterminate state', () => {
+			render( <CheckboxControl indeterminate /> );
+			expect( getInput() ).toHaveProperty( 'indeterminate', true );
+		} );
+
+		it( 'should render the indeterminate icon when in the indeterminate state', () => {
+			const { container: containerDefault } = render(
+				<CheckboxControl />
+			);
+
+			const { container: containerIndeterminate } = render(
+				<CheckboxControl indeterminate />
+			);
+
+			// Expect the diff snapshot to be mostly about the indeterminate icon
+			expect( containerDefault ).toMatchDiffSnapshot(
+				containerIndeterminate
+			);
+		} );
+	} );
+
+	describe( 'Value', () => {
+		it( 'should flip the checked property when clicked', async () => {
+			const user = userEvent.setup( {
+				advanceTimers: jest.advanceTimersByTime,
+			} );
+
+			let state = false;
+			const setState = jest.fn(
+				( nextState: boolean ) => ( state = nextState )
+			);
+
+			render( <ControlledCheckboxControl onChange={ setState } /> );
+
+			const input = getInput();
+
+			await user.click( input );
+			expect( input ).toHaveProperty( 'checked', true );
+			expect( state ).toBe( true );
+
+			await user.click( input );
+			expect( input ).toHaveProperty( 'checked', false );
+			expect( state ).toBe( false );
+
+			expect( setState ).toHaveBeenCalledTimes( 2 );
+		} );
+	} );
+} );

package/src/color-palette/index.js

@@ -126,7 +126,7 @@ export function CustomColorPickerDropdown( { isRenderedInSidebar, ...props } ) {
 	);
 }
 
-const extractColorNameFromCurrentValue = (
+export const extractColorNameFromCurrentValue = (
 	currentValue,
 	colors = [],
 	showMultiplePalettes = false
@@ -135,13 +135,20 @@ const extractColorNameFromCurrentValue = (
 		return '';
 	}
 
+	const currentValueIsCssVariable = /^var\(/.test( currentValue );
+	const normalizedCurrentValue = currentValueIsCssVariable
+		? currentValue
+		: colord( currentValue ).toHex();
+
 	// Normalize format of `colors` to simplify the following loop
 	const colorPalettes = showMultiplePalettes ? colors : [ { colors } ];
 	for ( const { colors: paletteColors } of colorPalettes ) {
 		for ( const { name: colorName, color: colorValue } of paletteColors ) {
-			if (
-				colord( currentValue ).toHex() === colord( colorValue ).toHex()
-			) {
+			const normalizedColorValue = currentValueIsCssVariable
+				? colorValue
+				: colord( colorValue ).toHex();
+
+			if ( normalizedCurrentValue === normalizedColorValue ) {
 				return colorName;
 			}
 		}

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

@@ -92,6 +92,9 @@ function ColorPalette( {
 				scrollViewRef.current.scrollTo( { x: 0, y: 0 } );
 			}
 		}
+		// Temporarily disabling exhuastive-deps until the component can be refactored and updated safely.
+		// Please see https://github.com/WordPress/gutenberg/pull/41253 for discussion and details.
+		// eslint-disable-next-line react-hooks/exhaustive-deps
 	}, [ currentSegment ] );
 
 	function isSelectedCustom() {

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

@@ -43,7 +43,10 @@ const meta = {
 export default meta;
 
 const Template = ( args ) => {
-	const [ color, setColor ] = useState( '#f00' );
+	const firstColor =
+		args.colors[ 0 ].color || args.colors[ 0 ].colors[ 0 ].color;
+	const [ color, setColor ] = useState( firstColor );
+
 	return (
 		<SlotFillProvider>
 			<ColorPalette { ...args } value={ color } onChange={ setColor } />
@@ -88,3 +91,24 @@ MultipleOrigins.args = {
 		},
 	],
 };
+
+export const CSSVariables = ( args ) => {
+	return (
+		<div
+			style={ {
+				'--red': '#f00',
+				'--yellow': '#ff0',
+				'--blue': '#00f',
+			} }
+		>
+			<Template { ...args } />
+		</div>
+	);
+};
+CSSVariables.args = {
+	colors: [
+		{ name: 'Red', color: 'var(--red)' },
+		{ name: 'Yellow', color: 'var(--yellow)' },
+		{ name: 'Blue', color: 'var(--blue)' },
+	],
+};

package/src/color-palette/test/utils.ts

@@ -0,0 +1,24 @@
+/**
+ * Internal dependencies
+ */
+import { extractColorNameFromCurrentValue } from '../';
+
+describe( 'ColorPalette: Utils', () => {
+	describe( 'extractColorNameFromCurrentValue', () => {
+		test( 'should support hex values', () => {
+			const result = extractColorNameFromCurrentValue( '#00f', [
+				{ name: 'Red', color: '#f00' },
+				{ name: 'Blue', color: '#00f' },
+			] );
+			expect( result ).toBe( 'Blue' );
+		} );
+
+		test( 'should support CSS variables', () => {
+			const result = extractColorNameFromCurrentValue( 'var(--blue)', [
+				{ name: 'Red', color: 'var(--red)' },
+				{ name: 'Blue', color: 'var(--blue)' },
+			] );
+			expect( result ).toBe( 'Blue' );
+		} );
+	} );
+} );