@wordpress/components 19.0.4 → 19.1.2

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

@@ -15,16 +15,35 @@ describe( 'ToggleGroupControl', () => {
 			<ToggleGroupControlOption value="jack" label="J" />
 		</>
 	);
+	const optionsWithTooltip = (
+		<>
+			<ToggleGroupControlOption
+				value="gnocchi"
+				label="Delicious Gnocchi"
+				aria-label="Click for Delicious Gnocchi"
+				showTooltip={ true }
+			/>
+			<ToggleGroupControlOption
+				value="caponata"
+				label="Sumptuous Caponata"
+				aria-label="Click for Sumptuous Caponata"
+			/>
+		</>
+	);
+
 	it( 'should render correctly', () => {
 		const { container } = render(
 			<ToggleGroupControl label="Test Toggle Group Control">
 				{ options }
 			</ToggleGroupControl>
 		);
+
 		expect( container.firstChild ).toMatchSnapshot();
 	} );
+
 	it( 'should call onChange with proper value', () => {
 		const mockOnChange = jest.fn();
+
 		render(
 			<ToggleGroupControl
 				value="jack"
@@ -34,8 +53,46 @@ describe( 'ToggleGroupControl', () => {
 				{ options }
 			</ToggleGroupControl>
 		);
+
 		const firstRadio = screen.getByRole( 'radio', { name: 'R' } );
+
 		fireEvent.click( firstRadio );
+
 		expect( mockOnChange ).toHaveBeenCalledWith( 'rigas' );
 	} );
+	it( 'should render tooltip where `showTooltip` === `true`', () => {
+		render(
+			<ToggleGroupControl label="Test Toggle Group Control">
+				{ optionsWithTooltip }
+			</ToggleGroupControl>
+		);
+
+		const firstRadio = screen.getByLabelText(
+			'Click for Delicious Gnocchi'
+		);
+
+		fireEvent.focus( firstRadio );
+
+		expect(
+			screen.getByText( 'Click for Delicious Gnocchi' )
+		).toBeInTheDocument();
+	} );
+
+	it( 'should not render tooltip', () => {
+		render(
+			<ToggleGroupControl label="Test Toggle Group Control">
+				{ optionsWithTooltip }
+			</ToggleGroupControl>
+		);
+
+		const secondRadio = screen.getByLabelText(
+			'Click for Sumptuous Caponata'
+		);
+
+		fireEvent.focus( secondRadio );
+
+		expect(
+			screen.queryByText( 'Click for Sumptuous Caponata' )
+		).not.toBeInTheDocument();
+	} );
 } );

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

@@ -18,7 +18,7 @@ import {
 function Example() {
 	return (
 		<ToggleGroupControl label="my label" value="vertical" isBlock>
-			<ToggleGroupControlOption value="horizontal" label="Horizontal" />
+			<ToggleGroupControlOption value="horizontal" label="Horizontal" showTooltip={ true } />
 			<ToggleGroupControlOption value="vertical" label="Vertical" />
 		</ToggleGroupControl>
 	);
@@ -38,3 +38,10 @@ Label for the option. If needed, the `aria-label` prop can be used in addition t
 The value of the `ToggleGroupControlOption`.
 
 - Required: Yes
+
+### `showTooltip`: `boolean`
+
+Whether to show a tooltip when hovering over the option. The tooltip will attempt to use the `aria-label` prop text first, then the `label` prop text if no `aria-label` prop is found.
+
+- Required: No
+

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

@@ -9,7 +9,6 @@ import { Radio } from 'reakit';
 /**
  * WordPress dependencies
  */
-import { __ } from '@wordpress/i18n';
 import { useInstanceId } from '@wordpress/compose';
 
 /**
@@ -20,13 +19,25 @@ import {
 	useContextSystem,
 	WordPressComponentProps,
 } from '../../ui/context';
-import type { ToggleGroupControlOptionProps } from '../types';
+import type { ToggleGroupControlOptionProps, WithToolTipProps } from '../types';
 import { useToggleGroupControlContext } from '../context';
 import * as styles from './styles';
 import { useCx } from '../../utils/hooks';
+import Tooltip from '../../tooltip';
 
 const { ButtonContentView, LabelPlaceholderView, LabelView } = styles;
 
+const WithToolTip = ( { showTooltip, text, children }: WithToolTipProps ) => {
+	if ( showTooltip && text ) {
+		return (
+			<Tooltip text={ text } position="top center">
+				{ children }
+			</Tooltip>
+		);
+	}
+	return <>{ children }</>;
+};
+
 function ToggleGroupControlOption(
 	props: WordPressComponentProps< ToggleGroupControlOptionProps, 'button' >,
 	forwardedRef: Ref< any >
@@ -41,7 +52,14 @@ function ToggleGroupControlOption(
 		'ToggleGroupControlOption'
 	);
 
-	const { className, isBlock = false, label, value, ...radioProps } = {
+	const {
+		className,
+		isBlock = false,
+		label,
+		value,
+		showTooltip = false,
+		...radioProps
+	} = {
 		...toggleGroupControlContext,
 		...buttonProps,
 	};
@@ -54,23 +72,28 @@ function ToggleGroupControlOption(
 		className,
 		isActive && styles.buttonActive
 	);
+	const optionLabel = !! radioProps[ 'aria-label' ]
+		? radioProps[ 'aria-label' ]
+		: label;
 
 	return (
 		<LabelView className={ labelViewClasses } data-active={ isActive }>
-			<Radio
-				{ ...radioProps }
-				as="button"
-				aria-label={ radioProps[ 'aria-label' ] ?? label }
-				className={ classes }
-				data-value={ value }
-				ref={ forwardedRef }
-				value={ value }
-			>
-				<ButtonContentView>{ label }</ButtonContentView>
-				<LabelPlaceholderView aria-hidden>
-					{ label }
-				</LabelPlaceholderView>
-			</Radio>
+			<WithToolTip showTooltip={ showTooltip } text={ optionLabel }>
+				<Radio
+					{ ...radioProps }
+					as="button"
+					aria-label={ optionLabel }
+					className={ classes }
+					data-value={ value }
+					ref={ forwardedRef }
+					value={ value }
+				>
+					<ButtonContentView>{ label }</ButtonContentView>
+					<LabelPlaceholderView aria-hidden>
+						{ label }
+					</LabelPlaceholderView>
+				</Radio>
+			</WithToolTip>
 		</LabelView>
 	);
 }

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

@@ -18,6 +18,30 @@ export type ToggleGroupControlOptionProps = {
 	 * to specify a different label for assistive technologies.
 	 */
 	label: string;
+	/**
+	 * Whether to display a Tooltip for the control option. If set to `true`, the tooltip will
+	 * show the aria-label or the label prop text.
+	 *
+	 * @default false
+	 */
+	showTooltip?: boolean;
+};
+
+export type WithToolTipProps = {
+	/**
+	 * React children
+	 */
+	children: ReactNode;
+	/**
+	 * Label for the Tooltip component.
+	 */
+	text: string;
+	/**
+	 * Whether to wrap the control option in a Tooltip component.
+	 *
+	 * @default false
+	 */
+	showTooltip?: boolean;
 };
 
 export type ToggleGroupControlProps = Omit<

package/src/tooltip/index.js

@@ -92,13 +92,8 @@ const emitToChild = ( children, eventName, event ) => {
 	}
 };
 
-function Tooltip( {
-	children,
-	position,
-	text,
-	shortcut,
-	delay = TOOLTIP_DELAY,
-} ) {
+function Tooltip( props ) {
+	const { children, position, text, shortcut, delay = TOOLTIP_DELAY } = props;
 	/**
 	 * Whether a mouse is currently pressed, used in determining whether
 	 * to handle a focus event as displaying the tooltip immediately.