@wordpress/components 19.0.3 → 19.1.1

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.