@wordpress/components 22.1.0 → 23.1.0

package/src/tooltip/stories/index.js

@@ -1,14 +1,3 @@
-/**
- * External dependencies
- */
-import styled from '@emotion/styled';
-import { text, select, number } from '@storybook/addon-knobs';
-
-/**
- * WordPress dependencies
- */
-import { useState } from '@wordpress/element';
-
 /**
  * Internal dependencies
  */
@@ -17,79 +6,80 @@ import Tooltip from '../';
 export default {
 	title: 'Components/ToolTip',
 	component: Tooltip,
+	argTypes: {
+		delay: { control: 'number' },
+		position: {
+			control: {
+				type: 'select',
+				options: [
+					'top left',
+					'top center',
+					'top right',
+					'bottom left',
+					'bottom center',
+					'bottom right',
+				],
+			},
+		},
+		text: { control: 'text' },
+	},
 	parameters: {
-		knobs: { disable: false },
+		docs: { source: { state: 'open' } },
 	},
 };
 
-export const _default = () => {
-	const positionOptions = {
-		'top left': 'top left',
-		'top center ': 'top center',
-		'top right': 'top right',
-		'bottom left': 'bottom left',
-		'bottom center ': 'bottom center',
-		'bottom right': 'bottom right',
-	};
-	const tooltipText = text( 'Text', 'More information' );
-	const position = select( 'Position', positionOptions, 'top center' );
-	const delay = number( 'Delay', 700 );
-	return (
-		<>
-			<Tooltip text={ tooltipText } position={ position } delay={ delay }>
-				<div
-					style={ {
-						margin: '50px auto',
-						width: '200px',
-						padding: '20px',
-						textAlign: 'center',
-						border: '1px solid #ccc',
-					} }
-				>
-					Hover for more information
-				</div>
-			</Tooltip>
-			<Tooltip text={ tooltipText } position={ position } delay={ delay }>
-				<div
-					style={ {
-						margin: '50px auto',
-						width: 'min-content',
-						padding: '4px',
-						textAlign: 'center',
-						border: '1px solid #ccc',
-					} }
-				>
-					Small target
-				</div>
-			</Tooltip>
-		</>
-	);
+const Template = ( args ) => {
+	return <Tooltip { ...args } />;
 };
 
-const Button = styled.button`
-	margin: 0 10px;
-`;
+export const Default = Template.bind( {} );
+Default.args = {
+	text: 'More information',
+	children: (
+		<div
+			style={ {
+				margin: '50px auto',
+				width: '200px',
+				padding: '20px',
+				textAlign: 'center',
+				border: '1px solid #ccc',
+			} }
+		>
+			Hover for more information
+		</div>
+	),
+};
 
-export const DisabledElement = () => {
-	const [ showMessage, toggleMessage ] = useState( false );
+export const SmallTarget = Template.bind( {} );
+SmallTarget.args = {
+	...Default.args,
+	children: (
+		<div
+			style={ {
+				margin: '50px auto',
+				width: 'min-content',
+				padding: '4px',
+				textAlign: 'center',
+				border: '1px solid #ccc',
+			} }
+		>
+			Small target
+		</div>
+	),
+};
 
-	return (
-		<>
-			<Tooltip text="Hey, I am tooltip" position="bottom center">
-				<Button onClick={ () => toggleMessage( ! showMessage ) }>
-					Hover me!
-				</Button>
-			</Tooltip>
-			<Tooltip text="Hey, I am tooltip" position="bottom center">
-				<Button
-					disabled
-					onClick={ () => toggleMessage( ! showMessage ) }
-				>
-					Hover me, but I am disabled
-				</Button>
-			</Tooltip>
-			<br />
-			{ showMessage ? <p>Hello World!</p> : null }
-		</>
-	);
+export const DisabledChild = Template.bind( {} );
+DisabledChild.args = {
+	...Default.args,
+	children: (
+		<button
+			disabled
+			onClick={ () =>
+				// eslint-disable-next-line no-alert
+				window.alert( 'This alert should not be triggered' )
+			}
+		>
+			Hover me, but I am disabled
+		</button>
+	),
 };

package/src/tooltip/style.scss

@@ -7,11 +7,11 @@
 }
 
 .components-tooltip .components-popover__content {
-	background: $gray-900;
+	background: $components-color-foreground; // TODO: Discuss with designers.
 	border-radius: $radius-block-ui;
 	border-width: 0;
 	outline: none;
-	color: $white;
+	color: $components-color-foreground-inverted;
 	white-space: nowrap;
 	text-align: center;
 	line-height: 1.4;

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,12 @@ import Tooltip from '../';
  */
 import { TOOLTIP_DELAY } from '../index.js';
 
+jest.useFakeTimers();
+
+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 +30,7 @@ describe( 'Tooltip', () => {
 			);
 
 			const button = screen.getByText( 'Button 1' );
-			button.focus();
+			act( () => button.focus() );
 			expect( screen.queryByText( 'Help text' ) ).not.toBeInTheDocument();
 		} );
 
@@ -37,11 +43,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 +57,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 +93,7 @@ describe( 'Tooltip', () => {
 			);
 
 			const button = screen.getByRole( 'button', { name: 'Hover Me!' } );
-			expect( button ).toBeInTheDocument();
+			expect( button ).toBeVisible();
 
 			await user.hover( button );
 
@@ -89,7 +103,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 +127,7 @@ describe( 'Tooltip', () => {
 			);
 
 			const button = screen.getByRole( 'button', { text: 'Hover Me!' } );
-			expect( button ).toBeInTheDocument();
+			expect( button ).toBeVisible();
 
 			await user.click( button );
 
@@ -144,7 +166,7 @@ describe( 'Tooltip', () => {
 			);
 
 			const button = screen.getByRole( 'button', { name: 'Hover Me!' } );
-			expect( button ).toBeInTheDocument();
+			expect( button ).toBeVisible();
 
 			await user.hover( button );
 
@@ -161,9 +183,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 +208,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 +229,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 +254,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 +313,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

@@ -16,6 +16,8 @@ import UnitControl from '..';
 import { parseQuantityAndUnitFromRawValue } from '../utils';
 import type { UnitControlOnChangeCallback } from '../types';
 
+jest.useFakeTimers();
+
 const getInput = ( {
 	isInputTypeText = false,
 }: {
@@ -112,9 +114,11 @@ describe( 'UnitControl', () => {
 			);
 
 			expect(
+				// eslint-disable-next-line testing-library/no-node-access
 				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/test/use-latest-ref.js

@@ -13,6 +13,8 @@ import { useState } from '@wordpress/element';
  */
 import { useLatestRef } from '..';
 
+jest.useFakeTimers();
+
 function debounce( callback, timeout = 0 ) {
 	let timeoutId = 0;
 	return ( ...args ) => {

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",