@wordpress/components 19.17.0 → 20.0.2-next.957ca95e4c.0

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

@@ -31,18 +31,21 @@ import BaseControl from '../../base-control';
 import type { ToggleGroupControlProps } from '../types';
 import ToggleGroupControlBackdrop from './toggle-group-control-backdrop';
 import ToggleGroupControlContext from '../context';
+import { VisualLabelWrapper } from './styles';
 import * as styles from './styles';
 
 const noop = () => {};
 
-function ToggleGroupControl(
-	props: WordPressComponentProps< ToggleGroupControlProps, 'input' >,
+function UnconnectedToggleGroupControl(
+	props: WordPressComponentProps< ToggleGroupControlProps, 'input', false >,
 	forwardedRef: ForwardedRef< any >
 ) {
 	const {
+		__nextHasNoMarginBottom = false,
 		className,
 		isAdaptiveWidth = false,
 		isBlock = false,
+		__experimentalIsIconGroup = false,
 		label,
 		hideLabelFromVision = false,
 		help,
@@ -85,22 +88,26 @@ function ToggleGroupControl(
 		() =>
 			cx(
 				styles.ToggleGroupControl( { size } ),
+				! __experimentalIsIconGroup && styles.border,
 				isBlock && styles.block,
 				className
 			),
-		[ className, cx, isBlock, size ]
+		[ className, cx, isBlock, __experimentalIsIconGroup, size ]
 	);
 	return (
-		<BaseControl help={ help }>
+		<BaseControl
+			help={ help }
+			__nextHasNoMarginBottom={ __nextHasNoMarginBottom }
+		>
 			<ToggleGroupControlContext.Provider
-				value={ { ...radio, isBlock: ! isAdaptiveWidth } }
+				value={ { ...radio, isBlock: ! isAdaptiveWidth, size } }
 			>
 				{ ! hideLabelFromVision && (
-					<div>
+					<VisualLabelWrapper>
 						<BaseControl.VisualLabel>
 							{ label }
 						</BaseControl.VisualLabel>
-					</div>
+					</VisualLabelWrapper>
 				) }
 				<RadioGroup
 					{ ...radio }
@@ -129,11 +136,14 @@ function ToggleGroupControl(
  * represented in horizontal segments. To render options for this control use
  * `ToggleGroupControlOption` component.
  *
+ * This component is intended for selecting a single persistent value from a set of options,
+ * similar to a how a radio button group would work. If you simply want a toggle to switch between views,
+ * use a `TabPanel` instead.
+ *
  * Only use this control when you know for sure the labels of items inside won't
  * wrap. For items with longer labels, you can consider a `SelectControl` or a
  * `CustomSelectControl` component instead.
  *
- * @example
  * ```jsx
  * import {
  *   __experimentalToggleGroupControl as ToggleGroupControl,
@@ -150,9 +160,9 @@ function ToggleGroupControl(
  * }
  * ```
  */
-const ConnectedToggleGroupControl = contextConnect(
-	ToggleGroupControl,
+export const ToggleGroupControl = contextConnect(
+	UnconnectedToggleGroupControl,
 	'ToggleGroupControl'
 );
 
-export default ConnectedToggleGroupControl;
+export default ToggleGroupControl;

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

@@ -16,8 +16,7 @@ export const ToggleGroupControl = ( {
 	size: NonNullable< ToggleGroupControlProps[ 'size' ] >;
 } ) => css`
 	background: ${ COLORS.ui.background };
-	border: 1px solid;
-	border-color: ${ COLORS.ui.border };
+	border: 1px solid transparent;
 	border-radius: ${ CONFIG.controlBorderRadius };
 	display: inline-flex;
 	min-width: 0;
@@ -28,10 +27,6 @@ export const ToggleGroupControl = ( {
 
 	${ toggleGroupControlSize( size ) }
 
-	&:hover {
-		border-color: ${ COLORS.ui.borderHover };
-	}
-
 	&:focus-within {
 		border-color: ${ COLORS.ui.borderFocus };
 		box-shadow: ${ CONFIG.controlBoxShadowFocus };
@@ -40,6 +35,14 @@ export const ToggleGroupControl = ( {
 	}
 `;
 
+export const border = css`
+	border-color: ${ COLORS.ui.border };
+
+	&:hover {
+		border-color: ${ COLORS.ui.borderHover };
+	}
+`;
+
 export const toggleGroupControlSize = (
 	size: NonNullable< ToggleGroupControlProps[ 'size' ] >
 ) => {
@@ -70,3 +73,8 @@ export const BackdropView = styled.div`
 	${ reduceMotion( 'transition' ) }
 	z-index: 1;
 `;
+
+export const VisualLabelWrapper = styled.div`
+	// Makes the inline label be the correct height, equivalent to setting line-height: 0
+	display: flex;
+`;

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

@@ -1,3 +1,13 @@
+/**
+ * External dependencies
+ */
+import type { ForwardedRef } from 'react';
+
+/**
+ * WordPress dependencies
+ */
+import { forwardRef } from '@wordpress/element';
+
 /**
  * Internal dependencies
  */
@@ -5,12 +15,13 @@ import type { WordPressComponentProps } from '../../ui/context';
 import type { ToggleGroupControlOptionProps } from '../types';
 import { ToggleGroupControlOptionBase } from '../toggle-group-control-option-base';
 
-export default function ToggleGroupControlOption(
+function UnforwardedToggleGroupControlOption(
 	props: WordPressComponentProps<
 		ToggleGroupControlOptionProps,
 		'button',
 		false
-	>
+	>,
+	ref: ForwardedRef< any >
 ) {
 	const { label, ...restProps } = props;
 	const optionLabel = restProps[ 'aria-label' ] || label;
@@ -18,6 +29,7 @@ export default function ToggleGroupControlOption(
 		<ToggleGroupControlOptionBase
 			{ ...restProps }
 			aria-label={ optionLabel }
+			ref={ ref }
 		>
 			{ label }
 		</ToggleGroupControlOptionBase>
@@ -28,7 +40,6 @@ export default function ToggleGroupControlOption(
  * `ToggleGroupControlOption` is a form component and is meant to be used as a
  * child of `ToggleGroupControl`.
  *
- * @example
  * ```jsx
  * import {
  *   __experimentalToggleGroupControl as ToggleGroupControl,
@@ -45,3 +56,8 @@ export default function ToggleGroupControlOption(
  * }
  * ```
  */
+export const ToggleGroupControlOption = forwardRef(
+	UnforwardedToggleGroupControlOption
+);
+
+export default ToggleGroupControlOption;

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

@@ -60,8 +60,10 @@ function ToggleGroupControlOptionBase(
 	const {
 		className,
 		isBlock = false,
+		isIcon = false,
 		value,
 		children,
+		size = 'default',
 		showTooltip = false,
 		...radioProps
 	} = {
@@ -74,6 +76,7 @@ function ToggleGroupControlOptionBase(
 	const labelViewClasses = cx( isBlock && styles.labelBlock );
 	const classes = cx(
 		styles.buttonView,
+		isIcon && styles.isIcon( { size } ),
 		className,
 		isActive && styles.buttonActive
 	);

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

@@ -8,6 +8,7 @@ import styled from '@emotion/styled';
  * Internal dependencies
  */
 import { CONFIG, COLORS, reduceMotion } from '../../utils';
+import type { ToggleGroupControlProps } from '../types';
 
 export const LabelView = styled.div`
 	display: inline-flex;
@@ -69,3 +70,20 @@ export const ButtonContentView = styled.div`
 export const separatorActive = css`
 	background: transparent;
 `;
+
+export const isIcon = ( {
+	size,
+}: {
+	size: NonNullable< ToggleGroupControlProps[ 'size' ] >;
+} ) => {
+	const iconButtonSizes = {
+		default: '30px',
+		'__unstable-large': '34px',
+	};
+
+	return css`
+		width: ${ iconButtonSizes[ size ] };
+		padding-left: 0;
+		padding-right: 0;
+	`;
+};

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

@@ -17,18 +17,16 @@ import { formatLowercase, formatUppercase } from '@wordpress/icons';
 
 function Example() {
 	return (
-		<ToggleGroupControl label="my label" value="lowercase" isBlock>
+		<ToggleGroupControl __experimentalIsIconGroup>
 			<ToggleGroupControlOptionIcon
 				value="uppercase"
 				icon={ formatUppercase }
-				showTooltip={ true }
-				aria-label="Uppercase"
+				label="Uppercase"
 			/>
 			<ToggleGroupControlOptionIcon
 				value="lowercase"
 				icon={ formatLowercase }
-				showTooltip={ true }
-				aria-label="Lowercase"
+				label="Lowercase"
 			/>
 		</ToggleGroupControl>
 	);
@@ -49,8 +47,8 @@ Icon displayed as the content of the option. Usually one of the icons from the `
 
 -   Required: Yes
 
-### `showTooltip`: `boolean`
+### `label`: `string`
 
-Whether to show a tooltip when hovering over the option. The tooltip will only show if a label for it is provided using the `aria-label` prop.
+The text to accessibly label the icon option. Will also be shown in a tooltip.
 
--   Required: No
+-   Required: Yes

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

@@ -1,3 +1,13 @@
+/**
+ * External dependencies
+ */
+import type { ForwardedRef } from 'react';
+
+/**
+ * WordPress dependencies
+ */
+import { forwardRef } from '@wordpress/element';
+
 /**
  * Internal dependencies
  */
@@ -6,16 +16,23 @@ import type { ToggleGroupControlOptionIconProps } from '../types';
 import { ToggleGroupControlOptionBase } from '../toggle-group-control-option-base';
 import Icon from '../../icon';
 
-export default function ToggleGroupControlOptionIcon(
+function UnforwardedToggleGroupControlOptionIcon(
 	props: WordPressComponentProps<
 		ToggleGroupControlOptionIconProps,
 		'button',
 		false
-	>
+	>,
+	ref: ForwardedRef< any >
 ) {
-	const { icon, ...restProps } = props;
+	const { icon, label, ...restProps } = props;
 	return (
-		<ToggleGroupControlOptionBase { ...restProps }>
+		<ToggleGroupControlOptionBase
+			{ ...restProps }
+			isIcon
+			aria-label={ label }
+			showTooltip
+			ref={ ref }
+		>
 			<Icon icon={ icon } />
 		</ToggleGroupControlOptionBase>
 	);
@@ -25,7 +42,6 @@ export default function ToggleGroupControlOptionIcon(
  * `ToggleGroupControlOptionIcon` is a form component which is meant to be used as a
  * child of `ToggleGroupControl` and displays an icon.
  *
- * @example
  * ```jsx
  *
  * import {
@@ -36,17 +52,24 @@ export default function ToggleGroupControlOptionIcon(
  *
  * function Example() {
  *	return (
- *		<ToggleGroupControl label="my label" value="vertical" isBlock>
+ *		<ToggleGroupControl __experimentalIsIconGroup>
  *			<ToggleGroupControlOptionIcon
  *				value="uppercase"
+ *				label="Uppercase"
  *				icon={ formatUppercase }
  *			/>
  *			<ToggleGroupControlOptionIcon
  *				value="lowercase"
+ *				label="Lowercase"
  *				icon={ formatLowercase }
  *			/>
  *		</ToggleGroupControl>
  *	);
  * }
- ** ```
+ * ```
  */
+export const ToggleGroupControlOptionIcon = forwardRef(
+	UnforwardedToggleGroupControlOptionIcon
+);
+
+export default ToggleGroupControlOptionIcon;

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

@@ -8,10 +8,17 @@ import type { RadioStateReturn } from 'reakit';
 /**
  * Internal dependencies
  */
+import type { BaseControlProps } from '../base-control/types';
 import type { FormElementProps } from '../utils/types';
 
 export type ToggleGroupControlOptionBaseProps = {
 	children: ReactNode;
+	/**
+	 * Style the option as an icon option.
+	 *
+	 * @default false
+	 */
+	isIcon?: boolean;
 	value: ReactText;
 	/**
 	 * Whether to display a Tooltip for the control option. If set to `true`, the tooltip will
@@ -22,20 +29,24 @@ export type ToggleGroupControlOptionBaseProps = {
 	showTooltip?: boolean;
 };
 
-export type ToggleGroupControlOptionIconProps = Omit<
+export type ToggleGroupControlOptionIconProps = Pick<
 	ToggleGroupControlOptionBaseProps,
-	'children'
+	'value'
 > & {
 	/**
 	 * Icon displayed as the content of the option. Usually one of the icons from
 	 * the `@wordpress/icons` package, or a custom React `<svg>` icon.
 	 */
 	icon: JSX.Element;
+	/**
+	 * The text to accessibly label the icon option. Will also be shown in a tooltip.
+	 */
+	label: string;
 };
 
-export type ToggleGroupControlOptionProps = Omit<
+export type ToggleGroupControlOptionProps = Pick<
 	ToggleGroupControlOptionBaseProps,
-	'children'
+	'value' | 'showTooltip'
 > & {
 	/**
 	 * Label for the option. If needed, the `aria-label` prop can be used in addition
@@ -64,62 +75,66 @@ export type WithToolTipProps = {
 export type ToggleGroupControlProps = Omit<
 	FormElementProps< any >,
 	'defaultValue'
-> & {
-	/**
-	 * Label for the form element.
-	 */
-	label: string;
-	/**
-	 * If true, the label will only be visible to screen readers.
-	 *
-	 * @default false
-	 */
-	hideLabelFromVision?: boolean;
-	/**
-	 * Determines if segments should be rendered with equal widths.
-	 *
-	 * @default false
-	 */
-	isAdaptiveWidth?: boolean;
-	/**
-	 * Renders `ToggleGroupControl` as a (CSS) block element.
-	 *
-	 * @default false
-	 */
-	isBlock?: boolean;
-	/**
-	 * Callback when a segment is selected.
-	 */
-	onChange?: ( value: ReactText | undefined ) => void;
-	/**
-	 * The value of `ToggleGroupControl`
-	 */
-	value?: ReactText;
-	/**
-	 * React children
-	 */
-	children: ReactNode;
-	/**
-	 * If this property is added, a help text will be generated
-	 * using help property as the content.
-	 */
-	help?: ReactNode;
-	/**
-	 * The size variant of the control.
-	 *
-	 * @default 'default'
-	 */
-	size?: 'default' | '__unstable-large';
-};
+> &
+	Pick< BaseControlProps, 'help' | '__nextHasNoMarginBottom' > & {
+		/**
+		 * Label for the form element.
+		 */
+		label: string;
+		/**
+		 * If true, the label will only be visible to screen readers.
+		 *
+		 * @default false
+		 */
+		hideLabelFromVision?: boolean;
+		/**
+		 * Determines if segments should be rendered with equal widths.
+		 *
+		 * @default false
+		 */
+		isAdaptiveWidth?: boolean;
+		/**
+		 * Renders `ToggleGroupControl` as a (CSS) block element.
+		 *
+		 * @default false
+		 */
+		isBlock?: boolean;
+		/**
+		 * Style for use with `ToggleGroupControlOptionIcon`s.
+		 *
+		 * @default false
+		 */
+		__experimentalIsIconGroup?: boolean; // TODO: Refactor so this can be private
+		/**
+		 * Callback when a segment is selected.
+		 */
+		onChange?: ( value: ReactText | undefined ) => void;
+		/**
+		 * The value of `ToggleGroupControl`
+		 */
+		value?: ReactText;
+		/**
+		 * The options to render in the `ToggleGroupControl`, using either the `ToggleGroupControlOption` or
+		 * `ToggleGroupControlOptionIcon` components.
+		 */
+		children: ReactNode;
+		/**
+		 * The size variant of the control.
+		 *
+		 * @default 'default'
+		 */
+		size?: 'default' | '__unstable-large';
+	};
 
-export type ToggleGroupControlContextProps = RadioStateReturn & {
-	/**
-	 * Renders `ToggleGroupControl` as a (CSS) block element.
-	 *
-	 * @default false
-	 */
-	isBlock?: boolean;
-};
+export type ToggleGroupControlContextProps = RadioStateReturn &
+	Pick< ToggleGroupControlProps, 'size' > & {
+		/**
+		 * Renders `ToggleGroupControl` as a (CSS) block element.
+		 *
+		 * @default false
+		 */
+		isBlock?: boolean;
+	};
 
 export type ToggleGroupControlBackdropProps = {
 	containerRef: MutableRefObject< HTMLElement | undefined >;

package/src/toolbar/test/index.js

@@ -1,7 +1,7 @@
 /**
  * External dependencies
  */
-import { render } from '@testing-library/react';
+import { render, screen } from '@testing-library/react';
 
 /**
  * Internal dependencies
@@ -12,7 +12,7 @@ import ToolbarButton from '../../toolbar-button';
 describe( 'Toolbar', () => {
 	describe( 'basic rendering', () => {
 		it( 'should render a toolbar with toolbar buttons', () => {
-			const { getByLabelText } = render(
+			render(
 				<Toolbar label="blocks">
 					<ToolbarButton label="control1" />
 					<ToolbarButton label="control2" />
@@ -20,10 +20,10 @@ describe( 'Toolbar', () => {
 			);
 
 			expect(
-				getByLabelText( 'control1', { selector: 'button' } )
+				screen.getByLabelText( 'control1', { selector: 'button' } )
 			).toBeTruthy();
 			expect(
-				getByLabelText( 'control2', { selector: 'button' } )
+				screen.getByLabelText( 'control2', { selector: 'button' } )
 			).toBeTruthy();
 		} );
 	} );

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

@@ -1,7 +1,7 @@
 /**
  * External dependencies
  */
-import { fireEvent, render } from '@testing-library/react';
+import { fireEvent, render, screen } from '@testing-library/react';
 
 /**
  * Internal dependencies
@@ -33,11 +33,9 @@ describe( 'ToolbarGroup', () => {
 				},
 			];
 
-			const { getByLabelText } = render(
-				<ToolbarGroup controls={ controls } />
-			);
+			render( <ToolbarGroup controls={ controls } /> );
 
-			const toolbarButton = getByLabelText( 'WordPress' );
+			const toolbarButton = screen.getByLabelText( 'WordPress' );
 			expect( toolbarButton.getAttribute( 'aria-pressed' ) ).toBe(
 				'false'
 			);
@@ -55,11 +53,9 @@ describe( 'ToolbarGroup', () => {
 				},
 			];
 
-			const { getByLabelText } = render(
-				<ToolbarGroup controls={ controls } />
-			);
+			render( <ToolbarGroup controls={ controls } /> );
 
-			const toolbarButton = getByLabelText( 'WordPress' );
+			const toolbarButton = screen.getByLabelText( 'WordPress' );
 			expect( toolbarButton.getAttribute( 'aria-pressed' ) ).toBe(
 				'true'
 			);
@@ -84,11 +80,11 @@ describe( 'ToolbarGroup', () => {
 				],
 			];
 
-			const { container, getAllByRole } = render(
+			const { container } = render(
 				<ToolbarGroup controls={ controls } />
 			);
 
-			const buttons = getAllByRole( 'button' );
+			const buttons = screen.getAllByRole( 'button' );
 			expect( buttons ).toHaveLength( 2 );
 			expect(
 				container.querySelector( '.has-left-divider button' )
@@ -105,11 +101,9 @@ describe( 'ToolbarGroup', () => {
 					isActive: true,
 				},
 			];
-			const { getByLabelText } = render(
-				<ToolbarGroup controls={ controls } />
-			);
+			render( <ToolbarGroup controls={ controls } /> );
 
-			fireEvent.click( getByLabelText( 'WordPress' ) );
+			fireEvent.click( screen.getByLabelText( 'WordPress' ) );
 			expect( clickHandler ).toHaveBeenCalledTimes( 1 );
 		} );
 	} );

package/src/tools-panel/styles.ts

@@ -20,8 +20,8 @@ const toolsPanelGrid = {
 		grid-template-columns: ${ `repeat( ${ columns }, minmax(0, 1fr) )` };
 	`,
 	spacing: css`
-		column-gap: ${ space( 4 ) };
-		row-gap: ${ space( 6 ) };
+		column-gap: ${ space( 2 ) };
+		row-gap: ${ space( 4 ) };
 	`,
 	item: {
 		fullWidth: css`

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

@@ -1069,7 +1069,7 @@ describe( 'ToolsPanel', () => {
 
 	describe( 'first and last panel items', () => {
 		it( 'should apply first/last classes to appropriate items', () => {
-			const { container } = render(
+			render(
 				<SlotFillProvider>
 					<ToolsPanelItems>
 						<ToolsPanelItem { ...altControlProps }>
@@ -1113,7 +1113,8 @@ describe( 'ToolsPanel', () => {
 			expect( item3 ).toBeInTheDocument();
 			expect( screen.queryByText( 'Item 4' ) ).not.toBeInTheDocument();
 
-			expect( container ).toMatchSnapshot();
+			expect( item2.parentElement ).toHaveClass( 'first' );
+			expect( item3.parentElement ).toHaveClass( 'last' );
 		} );
 	} );
 } );

package/src/tooltip/index.js

@@ -1,8 +1,4 @@
 // @ts-nocheck
-/**
- * External dependencies
- */
-import { includes } from 'lodash';
 
 /**
  * WordPress dependencies
@@ -211,7 +207,7 @@ function Tooltip( props ) {
 			// quickly blur/mouseleave before delayedSetIsOver is called.
 			delayedSetIsOver.cancel();
 
-			const _isOver = includes( [ 'focus', 'mouseenter' ], event.type );
+			const _isOver = [ 'focus', 'mouseenter' ].includes( event.type );
 			if ( _isOver === isOver ) {
 				return;
 			}