@wordpress/components 19.0.5 → 19.1.0

package/src/{color-edit → palette-edit}/styles.js

@@ -12,7 +12,6 @@ import { HStack } from '../h-stack';
 import { space } from '../ui/utils/space';
 import { COLORS, CONFIG } from '../utils';
 import { View } from '../view';
-import ColorIndicator from '../color-indicator';
 import InputControl from '../input-control';
 import Item from '../item-group/item';
 import {
@@ -20,20 +19,15 @@ import {
 	Input,
 	BackdropUI as InputBackdropUI,
 } from '../input-control/styles/input-control-styles';
+import CircularOptionPicker from '../circular-option-picker';
 
-export const ColorIndicatorStyled = styled( ColorIndicator )`
-	&& {
-		display: block;
-		border-radius: 50%;
-		border: 0;
-		height: ${ space( 6 ) };
-		width: ${ space( 6 ) };
-		margin-left: 0;
-		padding: 0;
-	}
+export const IndicatorStyled = styled( CircularOptionPicker.Option )`
+	width: ${ space( 6 ) };
+	height: ${ space( 6 ) };
+	pointer-events: none;
 `;
 
-export const ColorNameInputControl = styled( InputControl )`
+export const NameInputControl = styled( InputControl )`
 	${ InputControlContainer } {
 		background: ${ COLORS.gray[ 100 ] };
 		border-radius: 2px;
@@ -47,17 +41,20 @@ export const ColorNameInputControl = styled( InputControl )`
 	}
 `;
 
-export const ColorItem = styled( Item )`
+export const PaletteItem = styled( Item )`
 	padding: 3px 0 3px ${ space( 3 ) };
 	height: calc( 40px - ${ CONFIG.borderWidth } );
 `;
 
-export const ColorNameContainer = styled.span`
+export const NameContainer = styled.div`
 	line-height: ${ space( 8 ) };
 	margin-left: ${ space( 2 ) };
+	margin-right: ${ space( 2 ) };
+	white-space: nowrap;
+	overflow: hidden;
 `;
 
-export const ColorHeading = styled( Heading )`
+export const PaletteHeading = styled( Heading )`
 	text-transform: uppercase;
 	line-height: ${ space( 6 ) };
 	font-weight: 500;
@@ -67,16 +64,16 @@ export const ColorHeading = styled( Heading )`
 	}
 `;
 
-export const ColorActionsContainer = styled( View )`
+export const PaletteActionsContainer = styled( View )`
 	height: ${ space( 6 ) };
 	display: flex;
 `;
 
-export const ColorHStackHeader = styled( HStack )`
+export const PaletteHStackHeader = styled( HStack )`
 	margin-bottom: ${ space( 2 ) };
 `;
 
-export const ColorEditStyles = styled( View )`
+export const PaletteEditStyles = styled( View )`
 	&&& {
 		.components-button.has-icon {
 		min-width: 0;

package/src/popover/index.js

@@ -131,7 +131,11 @@ function computeAnchorRect(
 	}
 
 	const { parentNode } = anchorRefFallback.current;
-	const rect = parentNode.getBoundingClientRect();
+	const rect = offsetIframe(
+		parentNode.getBoundingClientRect(),
+		parentNode.ownerDocument,
+		container
+	);
 
 	if ( shouldAnchorIncludePadding ) {
 		return rect;

package/src/style.scss

@@ -4,7 +4,7 @@
 @import "./button/style.scss";
 @import "./checkbox-control/style.scss";
 @import "./circular-option-picker/style.scss";
-@import "./color-edit/style.scss";
+@import "./palette-edit/style.scss";
 @import "./color-indicator/style.scss";
 @import "./combobox-control/style.scss";
 @import "./color-list-picker/style.scss";

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

@@ -71,6 +71,11 @@ const _default = ( { options } ) => {
 				opt[ 'aria-label' ],
 				`${ KNOBS_GROUPS.ToggleGroupControlOption }-${ index + 1 }`
 			) }
+			showTooltip={ boolean(
+				`${ KNOBS_GROUPS.ToggleGroupControlOption }: showTooltip`,
+				opt.showTooltip,
+				`${ KNOBS_GROUPS.ToggleGroupControlOption }-${ index + 1 }`
+			) }
 		/>
 	) );
 
@@ -101,6 +106,16 @@ Default.args = {
 	],
 };
 
+export const WithTooltip = _default.bind( {} );
+WithTooltip.args = {
+	...Default.args,
+	options: [
+		{ value: 1, label: '1', showTooltip: true, 'aria-label': 'One' },
+		{ value: 2, label: '2', showTooltip: true, 'aria-label': 'Two' },
+		{ value: 3, label: '3', showTooltip: true, 'aria-label': 'Three' },
+	],
+};
+
 export const WithAriaLabel = _default.bind( {} );
 WithAriaLabel.args = {
 	...Default.args,

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.