@wordpress/components 22.1.0 → 23.0.0

package/src/tooltip/test/index.js

@@ -1,7 +1,7 @@
 /**
  * External dependencies
  */
-import { render, screen, act } from '@testing-library/react';
+import { render, screen, act, waitFor } from '@testing-library/react';
 import userEvent from '@testing-library/user-event';
 
 /**
@@ -13,6 +13,10 @@ import Tooltip from '../';
  */
 import { TOOLTIP_DELAY } from '../index.js';
 
+function getWrappingPopoverElement( element ) {
+	return element.closest( '.components-popover' );
+}
+
 describe( 'Tooltip', () => {
 	describe( '#render()', () => {
 		it( 'should not render the tooltip if multiple children are passed', () => {
@@ -24,7 +28,7 @@ describe( 'Tooltip', () => {
 			);
 
 			const button = screen.getByText( 'Button 1' );
-			button.focus();
+			act( () => button.focus() );
 			expect( screen.queryByText( 'Help text' ) ).not.toBeInTheDocument();
 		} );
 
@@ -37,11 +41,11 @@ describe( 'Tooltip', () => {
 
 			expect(
 				screen.getByRole( 'button', { name: 'Hover Me!' } )
-			).toBeInTheDocument();
+			).toBeVisible();
 			expect( screen.queryByText( 'Help text' ) ).not.toBeInTheDocument();
 		} );
 
-		it( 'should render children with additional tooltip when focused', () => {
+		it( 'should render children with additional tooltip when focused', async () => {
 			const mockOnFocus = jest.fn();
 
 			render(
@@ -51,20 +55,28 @@ describe( 'Tooltip', () => {
 			);
 
 			const button = screen.getByRole( 'button', { name: 'Hover Me!' } );
-			expect( button ).toBeInTheDocument();
+			expect( button ).toBeVisible();
 
 			// Before focus, the tooltip is not shown.
 			expect( screen.queryByText( 'Help text' ) ).not.toBeInTheDocument();
 
-			button.focus();
+			act( () => button.focus() );
 
 			// Tooltip is shown after focusing the anchor.
-			expect( screen.getByText( 'Help text' ) ).toBeInTheDocument();
+			const tooltip = screen.getByText( 'Help text' );
+			expect( tooltip ).toBeVisible();
 			expect( mockOnFocus ).toHaveBeenCalledWith(
 				expect.objectContaining( {
 					type: 'focus',
 				} )
 			);
+
+			// Wait for the tooltip element to be positioned (aligned with the button)
+			await waitFor( () =>
+				expect(
+					getWrappingPopoverElement( tooltip )
+				).toBePositionedPopover()
+			);
 		} );
 
 		it( 'should render children with additional tooltip when hovered', async () => {
@@ -79,7 +91,7 @@ describe( 'Tooltip', () => {
 			);
 
 			const button = screen.getByRole( 'button', { name: 'Hover Me!' } );
-			expect( button ).toBeInTheDocument();
+			expect( button ).toBeVisible();
 
 			await user.hover( button );
 
@@ -89,7 +101,15 @@ describe( 'Tooltip', () => {
 			act( () => jest.advanceTimersByTime( TOOLTIP_DELAY ) );
 
 			// Tooltip shows after the delay
-			expect( screen.getByText( 'Help text' ) ).toBeInTheDocument();
+			const tooltip = screen.getByText( 'Help text' );
+			expect( tooltip ).toBeVisible();
+
+			// Wait for the tooltip element to be positioned (aligned with the button)
+			await waitFor( () =>
+				expect(
+					getWrappingPopoverElement( tooltip )
+				).toBePositionedPopover()
+			);
 		} );
 
 		it( 'should not show tooltip on focus as result of mouse click', async () => {
@@ -105,7 +125,7 @@ describe( 'Tooltip', () => {
 			);
 
 			const button = screen.getByRole( 'button', { text: 'Hover Me!' } );
-			expect( button ).toBeInTheDocument();
+			expect( button ).toBeVisible();
 
 			await user.click( button );
 
@@ -144,7 +164,7 @@ describe( 'Tooltip', () => {
 			);
 
 			const button = screen.getByRole( 'button', { name: 'Hover Me!' } );
-			expect( button ).toBeInTheDocument();
+			expect( button ).toBeVisible();
 
 			await user.hover( button );
 
@@ -161,9 +181,17 @@ describe( 'Tooltip', () => {
 			act( () => jest.advanceTimersByTime( TEST_DELAY - TOOLTIP_DELAY ) );
 
 			// Tooltip shows after TEST_DELAY time
-			expect( screen.getByText( 'Help text' ) ).toBeInTheDocument();
+			const tooltip = screen.getByText( 'Help text' );
+			expect( tooltip ).toBeVisible();
 
 			expect( mockOnFocus ).not.toHaveBeenCalled();
+
+			// Wait for the tooltip element to be positioned (aligned with the button)
+			await waitFor( () =>
+				expect(
+					getWrappingPopoverElement( tooltip )
+				).toBePositionedPopover()
+			);
 		} );
 
 		it( 'should show tooltip when an element is disabled', async () => {
@@ -178,12 +206,13 @@ describe( 'Tooltip', () => {
 			);
 
 			const button = screen.getByRole( 'button', { name: 'Click me' } );
-			expect( button ).toBeInTheDocument();
+			expect( button ).toBeVisible();
 			expect( button ).toBeDisabled();
 
 			// Note: this is testing for implementation details,
 			// but couldn't find a better way.
 			const buttonRect = button.getBoundingClientRect();
+			// eslint-disable-next-line testing-library/no-container, testing-library/no-node-access
 			const eventCatcher = container.querySelector( '.event-catcher' );
 			const eventCatcherRect = eventCatcher.getBoundingClientRect();
 			expect( buttonRect ).toEqual( eventCatcherRect );
@@ -198,9 +227,15 @@ describe( 'Tooltip', () => {
 			act( () => jest.advanceTimersByTime( TOOLTIP_DELAY ) );
 
 			// Tooltip shows after the delay
-			expect(
-				screen.getByText( 'Show helpful text here' )
-			).toBeInTheDocument();
+			const tooltip = screen.getByText( 'Show helpful text here' );
+			expect( tooltip ).toBeVisible();
+
+			// Wait for the tooltip element to be positioned (aligned with the button)
+			await waitFor( () =>
+				expect(
+					getWrappingPopoverElement( tooltip )
+				).toBePositionedPopover()
+			);
 		} );
 
 		it( 'should not emit events back to children when they are disabled', async () => {
@@ -217,8 +252,8 @@ describe( 'Tooltip', () => {
 				</Tooltip>
 			);
 
-			const eventCatcher =
-				container.getElementsByClassName( 'event-catcher' )[ 0 ];
+			// eslint-disable-next-line testing-library/no-container, testing-library/no-node-access
+			const eventCatcher = container.querySelector( '.event-catcher' );
 			await user.click( eventCatcher );
 			expect( onClickMock ).not.toHaveBeenCalled();
 		} );
@@ -276,5 +311,61 @@ describe( 'Tooltip', () => {
 			// Tooltip won't show, since the mouse has left the anchor
 			expect( screen.queryByText( 'Help text' ) ).not.toBeInTheDocument();
 		} );
+
+		it( 'should render the shortcut display text when a string is passed as the shortcut', async () => {
+			const user = userEvent.setup( {
+				advanceTimers: jest.advanceTimersByTime,
+			} );
+
+			render(
+				<Tooltip text="Help text" shortcut="shortcut text">
+					<button>Hover Me!</button>
+				</Tooltip>
+			);
+
+			const button = screen.getByRole( 'button', { name: 'Hover Me!' } );
+			await user.hover( button );
+
+			const tooltip = await screen.findByText( 'shortcut text' );
+			expect( tooltip ).toBeVisible();
+
+			// Wait for the tooltip element to be positioned (aligned with the button)
+			await waitFor( () =>
+				expect(
+					getWrappingPopoverElement( tooltip )
+				).toBePositionedPopover()
+			);
+		} );
+
+		it( 'should render the shortcut display text and aria-label when an object is passed as the shortcut with the correct properties', async () => {
+			const user = userEvent.setup( {
+				advanceTimers: jest.advanceTimersByTime,
+			} );
+
+			render(
+				<Tooltip
+					text="Help text"
+					shortcut={ {
+						display: 'shortcut text',
+						ariaLabel: 'shortcut label',
+					} }
+				>
+					<button>Hover Me!</button>
+				</Tooltip>
+			);
+
+			const button = screen.getByRole( 'button', { name: 'Hover Me!' } );
+			await user.hover( button );
+
+			const tooltip = await screen.findByLabelText( 'shortcut label' );
+			expect( tooltip ).toHaveTextContent( 'shortcut text' );
+
+			// Wait for the tooltip element to be positioned (aligned with the button)
+			await waitFor( () =>
+				expect(
+					getWrappingPopoverElement( tooltip )
+				).toBePositionedPopover()
+			);
+		} );
 	} );
 } );

package/src/ui/context/context-system-provider.js

@@ -1,7 +1,8 @@
 /**
  * External dependencies
  */
-import { isEqual, merge } from 'lodash';
+import fastDeepEqual from 'fast-deep-equal/es6';
+import { merge } from 'lodash';
 
 /**
  * WordPress dependencies
@@ -42,7 +43,7 @@ function useContextSystemBridge( { value } ) {
 	useUpdateEffect( () => {
 		if (
 			// Objects are equivalent.
-			isEqual( valueRef.current, value ) &&
+			fastDeepEqual( valueRef.current, value ) &&
 			// But not the same reference.
 			valueRef.current !== value
 		) {

package/src/ui/context/test/context-system-provider.js

@@ -61,7 +61,7 @@ describe( 'props', () => {
 		);
 
 		expect( container ).toMatchSnapshot();
-		expect( container.firstChild.innerHTML ).toContain( 'Code is Poetry' );
+		expect( screen.getByText( 'Code is Poetry' ) ).toBeVisible();
 	} );
 
 	test( 'should render _override props', () => {
@@ -100,10 +100,11 @@ describe( 'props', () => {
 
 		expect( container ).toMatchSnapshot();
 
-		const el = container.querySelector( '.test-component' );
+		const element = screen.getByText( 'Code is Poetry' );
+		expect( element ).toBeVisible();
+		expect( element ).toHaveClass( 'test-component' );
 
-		expect( el.innerHTML ).toContain( 'Code is Poetry' );
-		expect( el.innerHTML ).not.toContain( 'WordPress.org' );
+		expect( screen.queryByText( 'WordPress.org' ) ).not.toBeInTheDocument();
 	} );
 } );
 

package/src/ui/control-label/test/index.js

@@ -1,7 +1,7 @@
 /**
  * External dependencies
  */
-import { render } from '@testing-library/react';
+import { render, screen } from '@testing-library/react';
 
 /**
  * Internal dependencies
@@ -16,11 +16,9 @@ describe( 'props', () => {
 	} );
 
 	test( 'should render htmlFor', () => {
-		const { container } = render(
-			<ControlLabel htmlFor="Field">Label</ControlLabel>
-		);
+		render( <ControlLabel htmlFor="Field">Label</ControlLabel> );
 
-		expect( container.firstChild ).toHaveAttribute( 'for', 'Field' );
+		expect( screen.getByText( 'Label' ) ).toHaveAttribute( 'for', 'Field' );
 	} );
 
 	test( 'should render size', () => {

package/src/unit-control/README.md

@@ -67,6 +67,12 @@ Callback invoked when either the quantity or unit inputs fire the `blur` event.
 
 -   Required: No
 
+### `onFocus`: `FocusEventHandler< HTMLInputElement | HTMLSelectElement >`
+
+Callback invoked when either the quantity or unit inputs fire the `focus` event.
+
+-   Required: No
+
 ### `onChange`: `UnitControlOnChangeCallback`
 
 Callback when the `value` changes.
@@ -121,7 +127,9 @@ const Example = () => {
 		{ value: 'em', label: 'em', default: 0 },
 	];
 
-	return <UnitControl onChange={ setValue } value={ value } units={units} />;
+	return (
+		<UnitControl onChange={ setValue } value={ value } units={ units } />
+	);
 };
 ```
 

package/src/unit-control/index.tsx

@@ -60,6 +60,7 @@ function UnforwardedUnitControl(
 		units: unitsProp = CSS_UNITS,
 		value: valueProp,
 		onBlur: onBlurProp,
+		onFocus: onFocusProp,
 		...props
 	} = unitControlProps;
 
@@ -244,6 +245,7 @@ function UnforwardedUnitControl(
 			unit={ unit }
 			units={ units }
 			onBlur={ onBlurProp }
+			onFocus={ onFocusProp }
 		/>
 	) : null;
 
@@ -277,6 +279,7 @@ function UnforwardedUnitControl(
 			value={ parsedQuantity ?? '' }
 			step={ step }
 			__unstableStateReducer={ stateReducer }
+			onFocus={ onFocusProp }
 		/>
 	);
 }

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

@@ -115,6 +115,7 @@ describe( 'UnitControl', () => {
 				withoutClassName.querySelector( '.components-unit-control' )
 			).not.toHaveClass( 'hello' );
 			expect(
+				// eslint-disable-next-line testing-library/no-container, testing-library/no-node-access
 				withClassName.querySelector( '.components-unit-control' )
 			).toHaveClass( 'hello' );
 		} );

package/src/unit-control/types.ts

@@ -99,4 +99,8 @@ export type UnitControlProps = Omit< UnitSelectControlProps, 'unit' > &
 		 * Callback when either the quantity or the unit inputs lose focus.
 		 */
 		onBlur?: FocusEventHandler< HTMLInputElement | HTMLSelectElement >;
+		/**
+		 * Callback when either the quantity or the unit inputs gains focus.
+		 */
+		onFocus?: FocusEventHandler< HTMLInputElement | HTMLSelectElement >;
 	};

package/src/utils/colors-values.js

@@ -41,7 +41,7 @@ const UI = {
 	themeDark10: ADMIN.themeDark10,
 	background: white,
 	backgroundDisabled: GRAY[ 100 ],
-	border: GRAY[ 700 ],
+	border: GRAY[ 600 ],
 	borderHover: GRAY[ 700 ],
 	borderFocus: ADMIN.themeDark10,
 	borderDisabled: GRAY[ 400 ],

package/src/utils/config-values.js

@@ -15,9 +15,7 @@ const CONTROL_PROPS = {
 	controlPaddingXSmall: `calc(${ CONTROL_PADDING_X } / 1.3334)`,
 	controlBackgroundColor: COLORS.white,
 	controlBorderRadius: '2px',
-	controlBorderColor: COLORS.gray[ 700 ],
 	controlBoxShadow: 'transparent',
-	controlBorderColorHover: COLORS.gray[ 700 ],
 	controlBoxShadowFocus: `0 0 0 0.5px ${ COLORS.ui.theme }`,
 	controlDestructiveBorderColor: COLORS.alert.red,
 	controlHeight: CONTROL_HEIGHT,

package/src/utils/hooks/use-controlled-value.ts

@@ -22,7 +22,7 @@ export function useControlledValue< T >( {
 	defaultValue,
 	onChange,
 	value: valueProp,
-}: Props< T > ): [ T | undefined, ( value: T ) => void ] {
+}: Props< T > ) {
 	const hasValue = typeof valueProp !== 'undefined';
 	const initialValue = hasValue ? valueProp : defaultValue;
 	const [ state, setState ] = useState( initialValue );
@@ -40,5 +40,5 @@ export function useControlledValue< T >( {
 		setValue = setState;
 	}
 
-	return [ value, setValue ];
+	return [ value, setValue as typeof setState ] as const;
 }

package/src/utils/theme-variables.scss

@@ -6,3 +6,23 @@
 $components-color-accent: var(--wp-components-color-accent, var(--wp-admin-theme-color, #007cba));
 $components-color-accent-darker-10: var(--wp-components-color-accent-darker-10, var(--wp-admin-theme-color-darker-10, #006ba1));
 $components-color-accent-darker-20: var(--wp-components-color-accent-darker-20, var(--wp-admin-theme-color-darker-20, #005a87));
+
+// Used when placing text on the accent color.
+$components-color-accent-inverted: var(--wp-components-color-accent-inverted, $white);
+
+$components-color-background: var(--wp-components-color-background, $white);
+$components-color-foreground: var(--wp-components-color-foreground, $gray-900);
+
+// Used when placing text on the foreground color.
+$components-color-foreground-inverted: var(--wp-components-color-foreground-inverted, $white);
+
+$components-color-gray-100: var(--wp-components-color-gray-100, $gray-100);
+$components-color-gray-200: var(--wp-components-color-gray-200, $gray-200);
+$components-color-gray-300: var(--wp-components-color-gray-300, $gray-300);
+$components-color-gray-400: var(--wp-components-color-gray-400, $gray-400);
+$components-color-gray-600: var(--wp-components-color-gray-600, $gray-600);
+$components-color-gray-700: var(--wp-components-color-gray-700, $gray-700);
+$components-color-gray-800: var(--wp-components-color-gray-800, $gray-800);
+
+// Semantic aliases (prefer these over raw gray values when applicable).
+$components-color-border: #{ $components-color-gray-600 };

package/tsconfig.json

@@ -37,10 +37,9 @@
 		"src/**/*.ios.js",
 		"src/**/*.native.js",
 		"src/**/react-native-*",
-		"src/**/stories/**.js", // only exclude js files, tsx files should be checked
-		"src/**/test/**.js", // only exclude js files, ts{x} files should be checked
+		"src/**/stories/**/*.js", // only exclude js files, tsx files should be checked
+		"src/**/test/**/*.js", // only exclude js files, ts{x} files should be checked
 		"src/index.js",
-		"src/alignment-matrix-control",
 		"src/angle-picker-control",
 		"src/autocomplete",
 		"src/box-control",
@@ -65,7 +64,6 @@
 		"src/query-controls",
 		"src/responsive-wrapper",
 		"src/sandbox",
-		"src/snackbar",
 		"src/toolbar",
 		"src/toolbar-button",
 		"src/toolbar-context",