@wordpress/components 22.0.0 → 23.0.0

package/src/toggle-group-control/test/__snapshots__/index.tsx.snap

@@ -41,6 +41,7 @@ exports[`ToggleGroupControl should render correctly with icons 1`] = `
 .emotion-8 {
   background: #fff;
   border: 1px solid transparent;
+  border-radius: 2px;
   display: -webkit-inline-box;
   display: -webkit-inline-flex;
   display: -ms-inline-flexbox;
@@ -51,8 +52,6 @@ exports[`ToggleGroupControl should render correctly with icons 1`] = `
   -webkit-transition: -webkit-transform 100ms linear;
   transition: transform 100ms linear;
   min-height: 36px;
-  border-color: #757575;
-  border-radius: 2px;
 }
 
 @media ( prefers-reduced-motion: reduce ) {
@@ -66,8 +65,8 @@ exports[`ToggleGroupControl should render correctly with icons 1`] = `
 }
 
 .emotion-8:focus-within {
-  border-color: var( --wp-admin-theme-color-darker-10, #006ba1);
-  box-shadow: 0 0 0 0.5px var( --wp-admin-theme-color, #007cba);
+  border-color: var(--wp-components-color-accent-darker-10, var(--wp-admin-theme-color-darker-10, #006ba1));
+  box-shadow: 0 0 0 0.5px var(--wp-components-color-accent, var(--wp-admin-theme-color, #007cba));
   outline: none;
   z-index: 1;
 }
@@ -377,6 +376,7 @@ exports[`ToggleGroupControl should render correctly with text options 1`] = `
 .emotion-8 {
   background: #fff;
   border: 1px solid transparent;
+  border-radius: 2px;
   display: -webkit-inline-box;
   display: -webkit-inline-flex;
   display: -ms-inline-flexbox;
@@ -387,8 +387,6 @@ exports[`ToggleGroupControl should render correctly with text options 1`] = `
   -webkit-transition: -webkit-transform 100ms linear;
   transition: transform 100ms linear;
   min-height: 36px;
-  border-color: #757575;
-  border-radius: 2px;
 }
 
 @media ( prefers-reduced-motion: reduce ) {
@@ -402,8 +400,8 @@ exports[`ToggleGroupControl should render correctly with text options 1`] = `
 }
 
 .emotion-8:focus-within {
-  border-color: var( --wp-admin-theme-color-darker-10, #006ba1);
-  box-shadow: 0 0 0 0.5px var( --wp-admin-theme-color, #007cba);
+  border-color: var(--wp-components-color-accent-darker-10, var(--wp-admin-theme-color-darker-10, #006ba1));
+  box-shadow: 0 0 0 0.5px var(--wp-components-color-accent, var(--wp-admin-theme-color, #007cba));
   outline: none;
   z-index: 1;
 }

package/src/toggle-group-control/test/index.tsx

@@ -1,7 +1,7 @@
 /**
  * External dependencies
  */
-import { render, fireEvent, screen } from '@testing-library/react';
+import { render, screen, waitFor } from '@testing-library/react';
 import userEvent from '@testing-library/user-event';
 
 /**
@@ -18,6 +18,10 @@ import {
 	ToggleGroupControlOptionIcon,
 } from '../index';
 
+function getWrappingPopoverElement( element: HTMLElement ) {
+	return element.closest( '.components-popover' );
+}
+
 describe( 'ToggleGroupControl', () => {
 	const options = (
 		<>
@@ -51,6 +55,7 @@ describe( 'ToggleGroupControl', () => {
 
 			expect( container ).toMatchSnapshot();
 		} );
+
 		it( 'with icons', () => {
 			const { container } = render(
 				<ToggleGroupControl
@@ -73,7 +78,10 @@ describe( 'ToggleGroupControl', () => {
 			expect( container ).toMatchSnapshot();
 		} );
 	} );
-	it( 'should call onChange with proper value', () => {
+	it( 'should call onChange with proper value', async () => {
+		const user = userEvent.setup( {
+			advanceTimers: jest.advanceTimersByTime,
+		} );
 		const mockOnChange = jest.fn();
 
 		render(
@@ -86,13 +94,15 @@ describe( 'ToggleGroupControl', () => {
 			</ToggleGroupControl>
 		);
 
-		const firstRadio = screen.getByRole( 'radio', { name: 'R' } );
-
-		fireEvent.click( firstRadio );
+		await user.click( screen.getByRole( 'radio', { name: 'R' } ) );
 
 		expect( mockOnChange ).toHaveBeenCalledWith( 'rigas' );
 	} );
-	it( 'should render tooltip where `showTooltip` === `true`', () => {
+
+	it( 'should render tooltip where `showTooltip` === `true`', async () => {
+		const user = userEvent.setup( {
+			advanceTimers: jest.advanceTimersByTime,
+		} );
 		render(
 			<ToggleGroupControl label="Test Toggle Group Control">
 				{ optionsWithTooltip }
@@ -103,14 +113,25 @@ describe( 'ToggleGroupControl', () => {
 			'Click for Delicious Gnocchi'
 		);
 
-		fireEvent.focus( firstRadio );
+		await user.hover( firstRadio );
+
+		const tooltip = await screen.findByText(
+			'Click for Delicious Gnocchi'
+		);
+
+		await waitFor( () =>
+			expect(
+				getWrappingPopoverElement( tooltip )
+			).toBePositionedPopover()
+		);
 
-		expect(
-			screen.getByText( 'Click for Delicious Gnocchi' )
-		).toBeInTheDocument();
+		expect( tooltip ).toBeVisible();
 	} );
 
-	it( 'should not render tooltip', () => {
+	it( 'should not render tooltip', async () => {
+		const user = userEvent.setup( {
+			advanceTimers: jest.advanceTimersByTime,
+		} );
 		render(
 			<ToggleGroupControl label="Test Toggle Group Control">
 				{ optionsWithTooltip }
@@ -121,11 +142,13 @@ describe( 'ToggleGroupControl', () => {
 			'Click for Sumptuous Caponata'
 		);
 
-		fireEvent.focus( secondRadio );
+		await user.hover( secondRadio );
 
-		expect(
-			screen.queryByText( 'Click for Sumptuous Caponata' )
-		).not.toBeInTheDocument();
+		await waitFor( () =>
+			expect(
+				screen.queryByText( 'Click for Sumptuous Caponata' )
+			).not.toBeInTheDocument()
+		);
 	} );
 
 	describe( 'isDeselectable', () => {
@@ -196,7 +219,7 @@ describe( 'ToggleGroupControl', () => {
 				);
 
 				await user.click(
-					await screen.getByRole( 'button', {
+					screen.getByRole( 'button', {
 						name: 'R',
 						pressed: true,
 					} )
@@ -208,7 +231,7 @@ describe( 'ToggleGroupControl', () => {
 						name: 'R',
 						pressed: false,
 					} )
-				).toBeInTheDocument();
+				).toBeVisible();
 			} );
 
 			it( 'should tab to the next option button', async () => {

package/src/toggle-group-control/toggle-group-control/README.md

@@ -50,9 +50,16 @@ Determines if segments should be rendered with equal widths.
 -   Required: No
 -   Default: `false`
 
+### `isDeselectable`: `boolean`
+
+Whether an option can be deselected by clicking it again.
+
+-   Required: No
+-   Default: `false`
+
 ### `isBlock`: `boolean`
 
-Renders `ToggleGroupControl` as a (CSS) block element.
+Renders `ToggleGroupControl` as a (CSS) block element, spanning the entire width of the available space. This is the recommended style when the options are text-based and not icons.
 
 -   Required: No
 -   Default: `false`

package/src/toggle-group-control/toggle-group-control/component.tsx

@@ -50,7 +50,7 @@ function UnconnectedToggleGroupControl(
 	const classes = useMemo(
 		() =>
 			cx(
-				styles.ToggleGroupControl( { isDeselectable, size } ),
+				styles.ToggleGroupControl( { isBlock, isDeselectable, size } ),
 				isBlock && styles.block,
 				className
 			),

package/src/toggle-group-control/toggle-group-control/styles.ts

@@ -11,14 +11,15 @@ import { CONFIG, COLORS, reduceMotion } from '../../utils';
 import type { ToggleGroupControlProps } from '../types';
 
 export const ToggleGroupControl = ( {
+	isBlock,
 	isDeselectable,
 	size,
-}: {
-	isDeselectable?: boolean;
+}: Pick< ToggleGroupControlProps, 'isBlock' | 'isDeselectable' > & {
 	size: NonNullable< ToggleGroupControlProps[ 'size' ] >;
 } ) => css`
 	background: ${ COLORS.ui.background };
 	border: 1px solid transparent;
+	border-radius: ${ CONFIG.controlBorderRadius };
 	display: inline-flex;
 	min-width: 0;
 	padding: 2px;
@@ -27,24 +28,29 @@ export const ToggleGroupControl = ( {
 	${ reduceMotion( 'transition' ) }
 
 	${ toggleGroupControlSize( size ) }
-	${ ! isDeselectable && enclosingBorder }
+	${ ! isDeselectable && enclosingBorders( isBlock ) }
 `;
 
-const enclosingBorder = css`
-	border-color: ${ COLORS.ui.border };
-	border-radius: ${ CONFIG.controlBorderRadius };
+const enclosingBorders = ( isBlock: ToggleGroupControlProps[ 'isBlock' ] ) => {
+	const enclosingBorder = css`
+		border-color: ${ COLORS.ui.border };
+	`;
+
+	return css`
+		${ isBlock && enclosingBorder }
 
-	&:hover {
-		border-color: ${ COLORS.ui.borderHover };
-	}
+		&:hover {
+			border-color: ${ COLORS.ui.borderHover };
+		}
 
-	&:focus-within {
-		border-color: ${ COLORS.ui.borderFocus };
-		box-shadow: ${ CONFIG.controlBoxShadowFocus };
-		outline: none;
-		z-index: 1;
-	}
-`;
+		&:focus-within {
+			border-color: ${ COLORS.ui.borderFocus };
+			box-shadow: ${ CONFIG.controlBoxShadowFocus };
+			outline: none;
+			z-index: 1;
+		}
+	`;
+};
 
 export const toggleGroupControlSize = (
 	size: NonNullable< ToggleGroupControlProps[ 'size' ] >

package/src/toggle-group-control/types.ts

@@ -92,7 +92,8 @@ export type ToggleGroupControlProps = Pick<
 	 */
 	isAdaptiveWidth?: boolean;
 	/**
-	 * Renders `ToggleGroupControl` as a (CSS) block element.
+	 * Renders `ToggleGroupControl` as a (CSS) block element, spanning the entire width of
+	 * the available space. This is the recommended style when the options are text-based and not icons.
 	 *
 	 * @default false
 	 */

package/src/toolbar-group/test/index.js

@@ -76,15 +76,17 @@ describe( 'ToolbarGroup', () => {
 				],
 			];
 
-			const { container } = render(
-				<ToolbarGroup controls={ controls } />
-			);
+			render( <ToolbarGroup controls={ controls } /> );
 
 			const buttons = screen.getAllByRole( 'button' );
+
 			expect( buttons ).toHaveLength( 2 );
-			expect(
-				container.querySelector( '.has-left-divider button' )
-			).toBe( buttons[ 1 ] );
+			expect( buttons[ 0 ].parentElement ).not.toHaveClass(
+				'has-left-divider'
+			);
+			expect( buttons[ 1 ].parentElement ).toHaveClass(
+				'has-left-divider'
+			);
 		} );
 
 		it( 'should call the clickHandler on click.', () => {

package/src/tools-panel/stories/index.js

@@ -494,7 +494,7 @@ export const WithConditionallyRenderedControl = () => {
 	);
 };
 
-export { ToolsPanelWithItemGroupSlot } from './tools-panel-with-item-group-slot';
+export { ToolsPanelWithItemGroupSlot } from './utils/tools-panel-with-item-group-slot';
 
 const PanelWrapperView = styled.div`
 	font-size: 13px;

package/src/tools-panel/stories/{tools-panel-with-item-group-slot.js → utils/tools-panel-with-item-group-slot.js}

@@ -12,17 +12,20 @@ import { useContext, useState } from '@wordpress/element';
 /**
  * Internal dependencies
  */
-import Button from '../../button';
-import ColorIndicator from '../../color-indicator';
-import ColorPalette from '../../color-palette';
-import Dropdown from '../../dropdown';
-import Panel from '../../panel';
-import { FlexItem } from '../../flex';
-import { HStack } from '../../h-stack';
-import { Item, ItemGroup } from '../../item-group';
-import { ToolsPanel, ToolsPanelItem, ToolsPanelContext } from '..';
-import { createSlotFill, Provider as SlotFillProvider } from '../../slot-fill';
-import { useCx } from '../../utils';
+import Button from '../../../button';
+import ColorIndicator from '../../../color-indicator';
+import ColorPalette from '../../../color-palette';
+import Dropdown from '../../../dropdown';
+import Panel from '../../../panel';
+import { FlexItem } from '../../../flex';
+import { HStack } from '../../../h-stack';
+import { Item, ItemGroup } from '../../../item-group';
+import { ToolsPanel, ToolsPanelItem, ToolsPanelContext } from '../..';
+import {
+	createSlotFill,
+	Provider as SlotFillProvider,
+} from '../../../slot-fill';
+import { useCx } from '../../../utils';
 
 // Available border colors.
 const colors = [

package/src/tools-panel/styles.ts

@@ -148,7 +148,7 @@ export const DropdownMenu = css`
 `;
 
 export const ResetLabel = styled.span`
-	color: var( --wp-admin-theme-color-darker-10 );
+	color: ${ COLORS.ui.themeDark10 };
 	font-size: 11px;
 	font-weight: 500;
 	line-height: 1.4;

package/src/tools-panel/test/index.js

@@ -2,6 +2,7 @@
  * External dependencies
  */
 import { render, screen, fireEvent, within } from '@testing-library/react';
+import { act } from 'react-test-renderer';
 
 /**
  * Internal dependencies
@@ -170,9 +171,10 @@ const getMenuButton = () => {
  *
  * @return {HTMLElement} The menuButton.
  */
-const openDropdownMenu = () => {
+const openDropdownMenu = async () => {
 	const menuButton = getMenuButton();
 	fireEvent.click( menuButton );
+	await act( () => Promise.resolve() );
 	return menuButton;
 };
 
@@ -240,16 +242,16 @@ describe( 'ToolsPanel', () => {
 			expect( menu ).not.toBeInTheDocument();
 		} );
 
-		it( 'should render panel menu when at least one panel item', () => {
+		it( 'should render panel menu when at least one panel item', async () => {
 			renderPanel();
 
-			const menuButton = openDropdownMenu();
+			const menuButton = await openDropdownMenu();
 			expect( menuButton ).toBeInTheDocument();
 		} );
 
 		it( 'should render reset all item in menu', async () => {
 			renderPanel();
-			openDropdownMenu();
+			await openDropdownMenu();
 
 			const resetAllItem = await screen.findByRole( 'menuitem' );
 
@@ -258,7 +260,7 @@ describe( 'ToolsPanel', () => {
 
 		it( 'should render panel menu items correctly', async () => {
 			renderPanel();
-			openDropdownMenu();
+			await openDropdownMenu();
 
 			const menuItems = await screen.findAllByRole( 'menuitemcheckbox' );
 
@@ -355,7 +357,7 @@ describe( 'ToolsPanel', () => {
 					</ToolsPanelItem>
 				</ToolsPanel>
 			);
-			openDropdownMenu();
+			await openDropdownMenu();
 
 			const menuGroups = screen.getAllByRole( 'group' );
 
@@ -419,7 +421,7 @@ describe( 'ToolsPanel', () => {
 			let linkedItem = screen.queryByText( 'Linked control' );
 			expect( linkedItem ).not.toBeInTheDocument();
 
-			openDropdownMenu();
+			await openDropdownMenu();
 
 			// The linked control should initially appear in the optional controls
 			// menu group. There should be three menu groups: default controls,
@@ -503,7 +505,7 @@ describe( 'ToolsPanel', () => {
 
 			// The conditional control should not yet appear in the default controls
 			// menu group.
-			openDropdownMenu();
+			await openDropdownMenu();
 			let menuGroups = screen.getAllByRole( 'group' );
 			let defaultItem = within( menuGroups[ 0 ] ).queryByText(
 				'Conditional'
@@ -735,7 +737,7 @@ describe( 'ToolsPanel', () => {
 
 		it( 'should render grouped items within the menu', async () => {
 			renderGroupedItemsInPanel();
-			openDropdownMenu();
+			await openDropdownMenu();
 
 			const defaultItem = screen.getByText( 'Nested Control 1' );
 			const defaultMenuItem = screen.getByRole( 'menuitem', {
@@ -771,9 +773,9 @@ describe( 'ToolsPanel', () => {
 			expect( altItem ).not.toBeInTheDocument();
 		} );
 
-		it( 'should render wrapped items within the menu', () => {
+		it( 'should render wrapped items within the menu', async () => {
 			renderWrappedItemInPanel();
-			openDropdownMenu();
+			await openDropdownMenu();
 
 			const defaultItem = screen.getByText( 'Nested Control 1' );
 			const defaultMenuItem = screen.getByRole( 'menuitem', {
@@ -1073,7 +1075,10 @@ describe( 'ToolsPanel', () => {
 						<ToolsPanelItem { ...altControlProps }>
 							<div>Item 1</div>
 						</ToolsPanelItem>
-						<ToolsPanelItem { ...controlProps }>
+						<ToolsPanelItem
+							{ ...controlProps }
+							data-testid="item-2"
+						>
 							<div>Item 2</div>
 						</ToolsPanelItem>
 					</ToolsPanelItems>
@@ -1081,6 +1086,7 @@ describe( 'ToolsPanel', () => {
 						<ToolsPanelItem
 							{ ...altControlProps }
 							label="Item 3"
+							data-testid="item-3"
 							isShownByDefault={ true }
 						>
 							<div>Item 3</div>
@@ -1111,8 +1117,8 @@ describe( 'ToolsPanel', () => {
 			expect( item3 ).toBeInTheDocument();
 			expect( screen.queryByText( 'Item 4' ) ).not.toBeInTheDocument();
 
-			expect( item2.parentElement ).toHaveClass( 'first' );
-			expect( item3.parentElement ).toHaveClass( 'last' );
+			expect( screen.getByTestId( 'item-2' ) ).toHaveClass( 'first' );
+			expect( screen.getByTestId( 'item-3' ) ).toHaveClass( 'last' );
 		} );
 	} );
 } );

package/src/tools-panel/tools-panel-item/hook.ts

@@ -108,11 +108,15 @@ export function useToolsPanelItem(
 	const menuGroup = isShownByDefault ? 'default' : 'optional';
 	const isMenuItemChecked = menuItems?.[ menuGroup ]?.[ label ];
 	const wasMenuItemChecked = usePrevious( isMenuItemChecked );
+	const isRegistered = menuItems?.[ menuGroup ]?.[ label ] !== undefined;
 
 	// Determine if the panel item's corresponding menu is being toggled and
 	// trigger appropriate callback if it is.
 	useEffect( () => {
-		if ( isResetting || ! hasMatchingPanel ) {
+		// We check whether this item is currently registered as items rendered
+		// via fills can persist through the parent panel being remounted.
+		// See: https://github.com/WordPress/gutenberg/pull/45673
+		if ( ! isRegistered || isResetting || ! hasMatchingPanel ) {
 			return;
 		}
 
@@ -126,6 +130,7 @@ export function useToolsPanelItem(
 	}, [
 		hasMatchingPanel,
 		isMenuItemChecked,
+		isRegistered,
 		isResetting,
 		isValueSet,
 		wasMenuItemChecked,

package/src/tooltip/README.md

@@ -46,6 +46,13 @@ The tooltip text to show on focus or hover.
 -   Type: `String`
 -   Required: No
 
+### shortcut (web only)
+
+-   Type: `string` or `object`
+-   Required: No
+
+If shortcut is a string, it is expecting the display text. If shortcut is an object, it will accept the properties of `display` (string) and `ariaLabel` (string).
+
 ### delay (web only)
 
 Time in milliseconds to wait before showing tooltip after the tooltip's visibility is toggled. This prop is currently only available for the web platforms.

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;