@wordpress/components 19.7.0 → 19.8.2

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

@@ -1,6 +1,262 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`ToggleGroupControl should render correctly 1`] = `
+exports[`ToggleGroupControl should render correctly with icons 1`] = `
+.emotion-0 {
+  font-family: -apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Oxygen-Sans,Ubuntu,Cantarell,'Helvetica Neue',sans-serif;
+  font-size: 13px;
+}
+
+.emotion-2 {
+  margin-bottom: calc(4px * 2);
+}
+
+.components-panel__row .emotion-2 {
+  margin-bottom: inherit;
+}
+
+.emotion-4 {
+  display: inline-block;
+  margin-bottom: calc(4px * 2);
+}
+
+.emotion-6 {
+  background: #fff;
+  border: 1px solid;
+  border-color: #757575;
+  border-radius: 2px;
+  display: -webkit-inline-box;
+  display: -webkit-inline-flex;
+  display: -ms-inline-flexbox;
+  display: inline-flex;
+  min-height: 36px;
+  min-width: 0;
+  padding: 2px;
+  position: relative;
+  -webkit-transition: -webkit-transform 100ms linear;
+  transition: transform 100ms linear;
+}
+
+@media ( prefers-reduced-motion: reduce ) {
+  .emotion-6 {
+    transition-duration: 0ms;
+  }
+}
+
+.emotion-6:hover {
+  border-color: #757575;
+}
+
+.emotion-6:focus-within {
+  border-color: var( --wp-admin-theme-color-darker-10, #007cba);
+  box-shadow: 0 0 0 0.5px var( --wp-admin-theme-color, #00669b);
+  outline: none;
+  z-index: 1;
+}
+
+.emotion-8 {
+  background: #1e1e1e;
+  border-radius: 2px;
+  box-shadow: transparent;
+  left: 0;
+  position: absolute;
+  top: 2px;
+  bottom: 2px;
+  -webkit-transition: -webkit-transform 160ms ease;
+  transition: transform 160ms ease;
+  z-index: 1;
+}
+
+@media ( prefers-reduced-motion: reduce ) {
+  .emotion-8 {
+    transition-duration: 0ms;
+  }
+}
+
+.emotion-10 {
+  display: -webkit-inline-box;
+  display: -webkit-inline-flex;
+  display: -ms-inline-flexbox;
+  display: inline-flex;
+  max-width: 100%;
+  min-width: 0;
+  position: relative;
+  -webkit-flex: 1;
+  -ms-flex: 1;
+  flex: 1;
+}
+
+.emotion-12 {
+  -webkit-align-items: center;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
+  -webkit-appearance: none;
+  -moz-appearance: none;
+  -ms-appearance: none;
+  appearance: none;
+  background: transparent;
+  border: none;
+  border-radius: 2px;
+  color: #757575;
+  fill: currentColor;
+  cursor: pointer;
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  font-family: inherit;
+  height: 100%;
+  -webkit-box-pack: center;
+  -ms-flex-pack: center;
+  -webkit-justify-content: center;
+  justify-content: center;
+  line-height: 100%;
+  outline: none;
+  padding: 0 12px;
+  position: relative;
+  text-align: center;
+  -webkit-transition: background 160ms linear,color 160ms linear,font-weight 60ms linear;
+  transition: background 160ms linear,color 160ms linear,font-weight 60ms linear;
+  -webkit-user-select: none;
+  -moz-user-select: none;
+  -ms-user-select: none;
+  user-select: none;
+  width: 100%;
+  z-index: 2;
+}
+
+@media ( prefers-reduced-motion: reduce ) {
+  .emotion-12 {
+    transition-duration: 0ms;
+  }
+}
+
+.emotion-12::-moz-focus-inner {
+  border: 0;
+}
+
+.emotion-12:active {
+  background: #fff;
+}
+
+.emotion-13 {
+  color: #fff;
+}
+
+.emotion-13:active {
+  background: transparent;
+}
+
+.emotion-14 {
+  font-size: 13px;
+  line-height: 1;
+}
+
+<div
+  class="components-base-control emotion-0 emotion-1"
+>
+  <div
+    class="components-base-control__field emotion-2 emotion-3"
+  >
+    <div>
+      <span
+        class="components-base-control__label emotion-4 emotion-5"
+      >
+        Test Toggle Group Control
+      </span>
+    </div>
+    <div
+      aria-label="Test Toggle Group Control"
+      class="medium components-toggle-group-control emotion-6 emotion-7"
+      data-wp-c16t="true"
+      data-wp-component="ToggleGroupControl"
+      id="toggle-group-control-1"
+      role="radiogroup"
+    >
+      <iframe
+        aria-hidden="true"
+        frameborder="0"
+        src="about:blank"
+        style="display: block; opacity: 0; position: absolute; top: 0px; left: 0px; height: 100%; width: 100%; overflow: hidden; pointer-events: none; z-index: -1;"
+        tabindex="-1"
+      />
+      <div
+        class="emotion-8 emotion-9"
+        role="presentation"
+        style="transform: translateX(0px); transition: none; width: 0px;"
+      />
+      <div
+        class="emotion-10 emotion-11"
+        data-active="true"
+      >
+        <button
+          aria-checked="true"
+          aria-label="Uppercase"
+          class="emotion-12 components-toggle-group-control-option-base emotion-13"
+          data-value="uppercase"
+          data-wp-c16t="true"
+          data-wp-component="ToggleGroupControlOptionBase"
+          id="toggle-group-control-1-2"
+          role="radio"
+          tabindex="0"
+        >
+          <div
+            class="emotion-14 emotion-15"
+          >
+            <svg
+              aria-hidden="true"
+              focusable="false"
+              height="24"
+              viewBox="0 0 24 24"
+              width="24"
+              xmlns="http://www.w3.org/2000/svg"
+            >
+              <path
+                d="M6.1 6.8L2.1 18h1.6l1.1-3h4.3l1.1 3h1.6l-4-11.2H6.1zm-.8 6.8L7 8.9l1.7 4.7H5.3zm15.1-.7c-.4-.5-.9-.8-1.6-1 .4-.2.7-.5.8-.9.2-.4.3-.9.3-1.4 0-.9-.3-1.6-.8-2-.6-.5-1.3-.7-2.4-.7h-3.5V18h4.2c1.1 0 2-.3 2.6-.8.6-.6 1-1.4 1-2.4-.1-.8-.3-1.4-.6-1.9zm-5.7-4.7h1.8c.6 0 1.1.1 1.4.4.3.2.5.7.5 1.3 0 .6-.2 1.1-.5 1.3-.3.2-.8.4-1.4.4h-1.8V8.2zm4 8c-.4.3-.9.5-1.5.5h-2.6v-3.8h2.6c1.4 0 2 .6 2 1.9.1.6-.1 1-.5 1.4z"
+              />
+            </svg>
+          </div>
+        </button>
+      </div>
+      <div
+        class="emotion-10 emotion-11"
+        data-active="false"
+      >
+        <button
+          aria-checked="false"
+          aria-label="Lowercase"
+          class="emotion-12 components-toggle-group-control-option-base"
+          data-value="lowercase"
+          data-wp-c16t="true"
+          data-wp-component="ToggleGroupControlOptionBase"
+          id="toggle-group-control-1-3"
+          role="radio"
+          tabindex="-1"
+        >
+          <div
+            class="emotion-14 emotion-15"
+          >
+            <svg
+              aria-hidden="true"
+              focusable="false"
+              height="24"
+              viewBox="0 0 24 24"
+              width="24"
+              xmlns="http://www.w3.org/2000/svg"
+            >
+              <path
+                d="M11 16.8c-.1-.1-.2-.3-.3-.5v-2.6c0-.9-.1-1.7-.3-2.2-.2-.5-.5-.9-.9-1.2-.4-.2-.9-.3-1.6-.3-.5 0-1 .1-1.5.2s-.9.3-1.2.6l.2 1.2c.4-.3.7-.4 1.1-.5.3-.1.7-.2 1-.2.6 0 1 .1 1.3.4.3.2.4.7.4 1.4-1.2 0-2.3.2-3.3.7s-1.4 1.1-1.4 2.1c0 .7.2 1.2.7 1.6.4.4 1 .6 1.8.6.9 0 1.7-.4 2.4-1.2.1.3.2.5.4.7.1.2.3.3.6.4.3.1.6.1 1.1.1h.1l.2-1.2h-.1c-.4.1-.6 0-.7-.1zM9.2 16c-.2.3-.5.6-.9.8-.3.1-.7.2-1.1.2-.4 0-.7-.1-.9-.3-.2-.2-.3-.5-.3-.9 0-.6.2-1 .7-1.3.5-.3 1.3-.4 2.5-.5v2zm10.6-3.9c-.3-.6-.7-1.1-1.2-1.5-.6-.4-1.2-.6-1.9-.6-.5 0-.9.1-1.4.3-.4.2-.8.5-1.1.8V6h-1.4v12h1.3l.2-1c.2.4.6.6 1 .8.4.2.9.3 1.4.3.7 0 1.2-.2 1.8-.5.5-.4 1-.9 1.3-1.5.3-.6.5-1.3.5-2.1-.1-.6-.2-1.3-.5-1.9zm-1.7 4c-.4.5-.9.8-1.6.8s-1.2-.2-1.7-.7c-.4-.5-.7-1.2-.7-2.1 0-.9.2-1.6.7-2.1.4-.5 1-.7 1.7-.7s1.2.3 1.6.8c.4.5.6 1.2.6 2s-.2 1.4-.6 2z"
+              />
+            </svg>
+          </div>
+        </button>
+      </div>
+    </div>
+  </div>
+</div>
+`;
+
+exports[`ToggleGroupControl should render correctly with text options 1`] = `
 .emotion-0 {
   font-family: -apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Oxygen-Sans,Ubuntu,Cantarell,'Helvetica Neue',sans-serif;
   font-size: 13px;
@@ -79,6 +335,7 @@ exports[`ToggleGroupControl should render correctly 1`] = `
   border: none;
   border-radius: 2px;
   color: #757575;
+  fill: currentColor;
   cursor: pointer;
   display: -webkit-box;
   display: -webkit-flex;
@@ -145,6 +402,13 @@ exports[`ToggleGroupControl should render correctly 1`] = `
       id="toggle-group-control-0"
       role="radiogroup"
     >
+      <iframe
+        aria-hidden="true"
+        frameborder="0"
+        src="about:blank"
+        style="display: block; opacity: 0; position: absolute; top: 0px; left: 0px; height: 100%; width: 100%; overflow: hidden; pointer-events: none; z-index: -1;"
+        tabindex="-1"
+      />
       <div
         class="emotion-8 emotion-9"
         data-active="false"
@@ -152,10 +416,10 @@ exports[`ToggleGroupControl should render correctly 1`] = `
         <button
           aria-checked="false"
           aria-label="R"
-          class="emotion-10 components-toggle-group-control-option"
+          class="emotion-10 components-toggle-group-control-option-base"
           data-value="rigas"
           data-wp-c16t="true"
-          data-wp-component="ToggleGroupControlOption"
+          data-wp-component="ToggleGroupControlOptionBase"
           id="toggle-group-control-0-0"
           role="radio"
           tabindex="0"
@@ -174,10 +438,10 @@ exports[`ToggleGroupControl should render correctly 1`] = `
         <button
           aria-checked="false"
           aria-label="J"
-          class="emotion-10 components-toggle-group-control-option"
+          class="emotion-10 components-toggle-group-control-option-base"
           data-value="jack"
           data-wp-c16t="true"
-          data-wp-component="ToggleGroupControlOption"
+          data-wp-component="ToggleGroupControlOptionBase"
           id="toggle-group-control-0-1"
           role="radio"
           tabindex="-1"

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

@@ -3,10 +3,19 @@
  */
 import { render, fireEvent, screen } from '@testing-library/react';
 
+/**
+ * WordPress dependencies
+ */
+import { formatLowercase, formatUppercase } from '@wordpress/icons';
+
 /**
  * Internal dependencies
  */
-import { ToggleGroupControl, ToggleGroupControlOption } from '../index';
+import {
+	ToggleGroupControl,
+	ToggleGroupControlOption,
+	ToggleGroupControlOptionIcon,
+} from '../index';
 
 describe( 'ToggleGroupControl', () => {
 	const options = (
@@ -31,16 +40,40 @@ describe( 'ToggleGroupControl', () => {
 		</>
 	);
 
-	it( 'should render correctly', () => {
-		const { container } = render(
-			<ToggleGroupControl label="Test Toggle Group Control">
-				{ options }
-			</ToggleGroupControl>
-		);
-
-		expect( container.firstChild ).toMatchSnapshot();
+	describe( 'should render correctly', () => {
+		it( 'with text options', () => {
+			const { container } = render(
+				<ToggleGroupControl label="Test Toggle Group Control">
+					{ options }
+				</ToggleGroupControl>
+			);
+
+			expect( container.firstChild ).toMatchSnapshot();
+		} );
+		it( 'with icons', () => {
+			const { container } = render(
+				<ToggleGroupControl
+					value="uppercase"
+					label="Test Toggle Group Control"
+				>
+					<ToggleGroupControlOptionIcon
+						value="uppercase"
+						icon={ formatUppercase }
+						showTooltip={ true }
+						aria-label="Uppercase"
+					/>
+					<ToggleGroupControlOptionIcon
+						value="lowercase"
+						icon={ formatLowercase }
+						showTooltip={ true }
+						aria-label="Lowercase"
+					/>
+				</ToggleGroupControl>
+			);
+
+			expect( container.firstChild ).toMatchSnapshot();
+		} );
 	} );
-
 	it( 'should call onChange with proper value', () => {
 		const mockOnChange = jest.fn();
 

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

@@ -4,6 +4,7 @@
 import type { ForwardedRef } from 'react';
 // eslint-disable-next-line no-restricted-imports
 import { RadioGroup, useRadioState } from 'reakit';
+import useResizeAware from 'react-resize-aware';
 
 /**
  * WordPress dependencies
@@ -24,6 +25,7 @@ import { useUpdateEffect, useCx } from '../../utils/hooks';
 import { View } from '../../view';
 import BaseControl from '../../base-control';
 import type { ToggleGroupControlProps } from '../types';
+import ToggleGroupControlBackdrop from './toggle-group-control-backdrop';
 import ToggleGroupControlContext from '../context';
 import * as styles from './styles';
 
@@ -47,6 +49,7 @@ function ToggleGroupControl(
 	} = useContextSystem( props, 'ToggleGroupControl' );
 	const cx = useCx();
 	const containerRef = useRef();
+	const [ resizeListener, sizes ] = useResizeAware();
 	const baseId = useInstanceId(
 		ToggleGroupControl,
 		'toggle-group-control'
@@ -103,6 +106,13 @@ function ToggleGroupControl(
 					{ ...otherProps }
 					ref={ useMergeRefs( [ containerRef, forwardedRef ] ) }
 				>
+					{ resizeListener }
+					<ToggleGroupControlBackdrop
+						{ ...radio }
+						containerRef={ containerRef }
+						containerWidth={ sizes.width }
+						isAdaptiveWidth={ isAdaptiveWidth }
+					/>
 					{ children }
 				</RadioGroup>
 			</ToggleGroupControlContext.Provider>

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

@@ -2,6 +2,7 @@
  * External dependencies
  */
 import { css } from '@emotion/react';
+import styled from '@emotion/styled';
 
 /**
  * Internal dependencies
@@ -36,3 +37,16 @@ export const block = css`
 	display: flex;
 	width: 100%;
 `;
+
+export const BackdropView = styled.div`
+	background: ${ COLORS.gray[ 900 ] };
+	border-radius: ${ CONFIG.controlBorderRadius };
+	box-shadow: ${ CONFIG.toggleGroupControlBackdropBoxShadow };
+	left: 0;
+	position: absolute;
+	top: 2px;
+	bottom: 2px;
+	transition: transform ${ CONFIG.transitionDurationFast } ease;
+	${ reduceMotion( 'transition' ) }
+	z-index: 1;
+`;

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

@@ -0,0 +1,86 @@
+/**
+ * WordPress dependencies
+ */
+import { useState, useEffect, memo } from '@wordpress/element';
+
+/**
+ * Internal dependencies
+ */
+import type { ToggleGroupControlBackdropProps } from '../types';
+import { BackdropView } from './styles';
+
+function ToggleGroupControlBackdrop( {
+	containerRef,
+	containerWidth,
+	isAdaptiveWidth,
+	state,
+}: ToggleGroupControlBackdropProps ) {
+	const [ left, setLeft ] = useState( 0 );
+	const [ width, setWidth ] = useState( 0 );
+	const [ canAnimate, setCanAnimate ] = useState( false );
+	const [ renderBackdrop, setRenderBackdrop ] = useState( false );
+
+	useEffect( () => {
+		const containerNode = containerRef?.current;
+		if ( ! containerNode ) return;
+
+		/**
+		 * Workaround for Reakit
+		 */
+		const targetNode = containerNode.querySelector(
+			`[data-value="${ state }"]`
+		);
+		setRenderBackdrop( !! targetNode );
+		if ( ! targetNode ) {
+			return;
+		}
+
+		const computeDimensions = () => {
+			const {
+				width: offsetWidth,
+				x,
+			} = targetNode.getBoundingClientRect();
+
+			const { x: parentX } = containerNode.getBoundingClientRect();
+
+			const borderWidth = 1;
+			const offsetLeft = x - parentX - borderWidth;
+
+			setLeft( offsetLeft );
+			setWidth( offsetWidth );
+		};
+		// Fix to make the component appear as expected inside popovers.
+		// If the targetNode width is 0 it means the element was not yet rendered we should allow
+		// some time for the render to happen.
+		// requestAnimationFrame instead of setTimeout with a small time does not seems to work.
+		const dimensionsRequestId = window.setTimeout( computeDimensions, 100 );
+
+		let animationRequestId: number;
+		if ( ! canAnimate ) {
+			animationRequestId = window.requestAnimationFrame( () => {
+				setCanAnimate( true );
+			} );
+		}
+		return () => {
+			window.clearTimeout( dimensionsRequestId );
+			window.cancelAnimationFrame( animationRequestId );
+		};
+	}, [ canAnimate, containerRef, containerWidth, state, isAdaptiveWidth ] );
+
+	if ( ! renderBackdrop ) {
+		return null;
+	}
+
+	return (
+		<BackdropView
+			role="presentation"
+			style={ {
+				transform: `translateX(${ left }px)`,
+				transition: canAnimate ? undefined : 'none',
+				width,
+			} }
+		/>
+	);
+}
+
+export default memo( ToggleGroupControlBackdrop );

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

@@ -18,7 +18,11 @@ import {
 function Example() {
 	return (
 		<ToggleGroupControl label="my label" value="vertical" isBlock>
-			<ToggleGroupControlOption value="horizontal" label="Horizontal" showTooltip={ true } />
+			<ToggleGroupControlOption
+				value="horizontal"
+				label="Horizontal"
+				showTooltip={ true }
+			/>
 			<ToggleGroupControlOption value="vertical" label="Vertical" />
 		</ToggleGroupControl>
 	);
@@ -31,17 +35,16 @@ function Example() {
 
 Label for the option. If needed, the `aria-label` prop can be used in addition to specify a different label for assistive technologies.
 
-- Required: Yes
+-   Required: Yes
 
 ### `value`: `string | number`
 
 The value of the `ToggleGroupControlOption`.
 
-- Required: Yes
+-   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
-
+-   Required: No

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

@@ -1,96 +1,26 @@
-/**
- * External dependencies
- */
-import type { ForwardedRef } from 'react';
-// eslint-disable-next-line no-restricted-imports
-import { Radio } from 'reakit';
-
-/**
- * WordPress dependencies
- */
-import { useInstanceId } from '@wordpress/compose';
-
 /**
  * Internal dependencies
  */
-import {
-	contextConnect,
-	useContextSystem,
-	WordPressComponentProps,
-} from '../../ui/context';
-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, 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: ForwardedRef< any >
+import type { WordPressComponentProps } from '../../ui/context';
+import type { ToggleGroupControlOptionProps } from '../types';
+import { ToggleGroupControlOptionBase } from '../toggle-group-control-option-base';
+
+export default function ToggleGroupControlOption(
+	props: WordPressComponentProps<
+		ToggleGroupControlOptionProps,
+		'button',
+		false
+	>
 ) {
-	const toggleGroupControlContext = useToggleGroupControlContext();
-	const id = useInstanceId(
-		ToggleGroupControlOption,
-		toggleGroupControlContext.baseId || 'toggle-group-control-option'
-	) as string;
-	const buttonProps = useContextSystem(
-		{ ...props, id },
-		'ToggleGroupControlOption'
-	);
-
-	const {
-		className,
-		isBlock = false,
-		label,
-		value,
-		showTooltip = false,
-		...radioProps
-	} = {
-		...toggleGroupControlContext,
-		...buttonProps,
-	};
-
-	const isActive = radioProps.state === value;
-	const cx = useCx();
-	const labelViewClasses = cx( isBlock && styles.labelBlock );
-	const classes = cx(
-		styles.buttonView,
-		className,
-		isActive && styles.buttonActive
-	);
-	const optionLabel = !! radioProps[ 'aria-label' ]
-		? radioProps[ 'aria-label' ]
-		: label;
-
+	const { label, ...restProps } = props;
+	const optionLabel = restProps[ 'aria-label' ] || label;
 	return (
-		<LabelView className={ labelViewClasses } data-active={ isActive }>
-			<WithToolTip showTooltip={ showTooltip } text={ optionLabel }>
-				<Radio
-					{ ...radioProps }
-					as="button"
-					aria-label={ optionLabel }
-					className={ classes }
-					data-value={ value }
-					ref={ forwardedRef }
-					value={ value }
-				>
-					<ButtonContentView>{ label }</ButtonContentView>
-				</Radio>
-			</WithToolTip>
-		</LabelView>
+		<ToggleGroupControlOptionBase
+			{ ...restProps }
+			aria-label={ optionLabel }
+		>
+			{ label }
+		</ToggleGroupControlOptionBase>
 	);
 }
 
@@ -115,9 +45,3 @@ function ToggleGroupControlOption(
  * }
  * ```
  */
-const ConnectedToggleGroupControlOption = contextConnect(
-	ToggleGroupControlOption,
-	'ToggleGroupControlOption'
-);
-
-export default ConnectedToggleGroupControlOption;