[Components]: Add SegmentedControl

docs/manifest.json

@@ -1151,6 +1151,12 @@
 		"markdown_source": "../packages/components/src/search-control/README.md",
 		"parent": "components"
 	},
+	{
+		"title": "SegmentedControl",
+		"slug": "segmented-control",
+		"markdown_source": "../packages/components/src/segmented-control/README.md",
+		"parent": "components"
+	},
 	{
 		"title": "SelectControl",
 		"slug": "select-control",

packages/components/src/base-field/test/__snapshots__/index.js.snap

@@ -131,7 +131,7 @@ exports[`base field should render correctly 1`] = `
 .emotion-0:focus,
 .emotion-0[data-focused='true'] {
   border-color: var( --wp-admin-theme-color, #00669b);
-  box-shadow: 0 0 0,0.5px,[object Object];
+  box-shadow: 0 0 0,0.5px,var( --wp-admin-theme-color, #00669b);
 }
 
 <div

packages/components/src/index.js

@@ -109,6 +109,7 @@ export { default as ResizableBox } from './resizable-box';
 export { default as ResponsiveWrapper } from './responsive-wrapper';
 export { default as SandBox } from './sandbox';
 export { default as SearchControl } from './search-control';
+export { SegmentedControl as __experimentalSegmentedControl } from './segmented-control';
 export { default as SelectControl } from './select-control';
 export { default as Snackbar } from './snackbar';
 export { default as SnackbarList } from './snackbar/list';

packages/components/src/segmented-control/README.md

@@ -0,0 +1,71 @@
+# SegementedControl
+
+<div class="callout callout-alert">
+This feature is still experimental. “Experimental” means this is an early implementation subject to drastic and breaking changes.
+</div>
+
+`SegementedControl` is a form component that lets users choose options represented in horizontal segments. To render options for this control use `SegmentedControl.Option` component.
+
+## Usage
+
+```js
+import { __experimentalSegmentedControl as SegmentedControl } from '@wordpress/components';
+
+function Example() {
+	return (
+		<SegmentedControl
+			label="my label"
+			value="vertical"
+			isBlock
+		>
+			<SegmentedControl.Option value="horizontal" label="horizontal" />
+			<SegmentedControl.Option value="vertical" label="vertical" />
+		</SegmentedControl>
+	);
+}
+```
+
+## Props
+
+### `label`
+
+-   Type: `string`
+
+Label for the form element.
+
+### `baseId`
+
+-   Type: `string`
+-   Required: No
+
+ID that will serve as a base for all the items IDs.
+
+### `isAdaptiveWidth`
+
+-   Type: `boolean`
+-   Required: No
+-   Default: `false`
+
+Determines if segments should be rendered with equal widths.
+
+### `isBlock`
+
+-   Type: `boolean`
+-   Required: No
+-   Default: `false`
+
+Renders `SegmentedControl` as a (CSS) block element.
+
+### `onChange`
+
+-   Type: `boolean`
+-   Required: No
+-   Default: `false`
+
+Callback when a segment is selected.
+
+### `value`
+
+-   Type: `string | number`
+
+The value of the `SegmentedControl`.

packages/components/src/segmented-control/component.tsx

@@ -0,0 +1,112 @@
+/**
+ * External dependencies
+ */
+// eslint-disable-next-line no-restricted-imports
+import { cx } from '@emotion/css';
+// eslint-disable-next-line no-restricted-imports
+import { RadioGroup, useRadioState } from 'reakit';
+import useResizeAware from 'react-resize-aware';
+
+/**
+ * WordPress dependencies
+ */
+import { __ } from '@wordpress/i18n';
+import { useRef, useMemo } from '@wordpress/element';
+import { useMergeRefs } from '@wordpress/compose';
+
+/**
+ * Internal dependencies
+ */
+import {
+	contextConnect,
+	useContextSystem,
+	PolymorphicComponentProps,
+} from '../ui/context';
+import { View } from '../view';
+import * as styles from './styles';
+import { useUpdateEffect } from '../utils/hooks';
+import Backdrop from './segmented-control-backdrop';
+import Option from './segmented-control-option';
+import type { SegmentedControlProps } from './types';
+import RadioContext from './radio-context';
+
+const noop = () => {};
+
+function SegmentedControl(
+	props: PolymorphicComponentProps< SegmentedControlProps, 'input' >,
+	forwardedRef: import('react').Ref< any >
+) {
+	const {
+		className,
+		baseId,
+		isAdaptiveWidth = false,
+		isBlock = false,
+		id,
+		label,
+		onChange = noop,
+		value,
+		children,
+		...otherProps
+	} = useContextSystem( props, 'SegmentedControl' );
+
+	const containerRef = useRef();
+	const [ resizeListener, sizes ] = useResizeAware();
+
+	const radio = useRadioState( {
+		baseId: baseId || id,
+		state: value,
+	} );
+
+	// Propagate radio.state change
+	useUpdateEffect( () => {
+		onChange( radio.state );
+	}, [ radio.state ] );
+
+	// Sync incoming value with radio.state
+	useUpdateEffect( () => {
+		if ( value !== radio.state ) {
+			radio.setState( value );
+		}
+	}, [ value ] );
+
+	const classes = useMemo(
+		() =>
+			cx(
+				styles.SegmentedControl,
+				isBlock && styles.block,
+				'medium',
+				className
+			),
+		[ className ]
+	);
+	return (
+		<RadioContext.Provider
+			value={ { ...radio, isBlock: ! isAdaptiveWidth } }
+		>
+			<RadioGroup
+				{ ...radio }
+				aria-label={ label }
+				as={ View }
+				className={ classes }
+				{ ...otherProps }
+				ref={ useMergeRefs( [ containerRef, forwardedRef ] ) }
+			>
+				{ resizeListener }
+				<Backdrop
+					{ ...radio }
+					containerRef={ containerRef }
+					containerWidth={ sizes.width }
+				/>
+				{ children }
+			</RadioGroup>
+		</RadioContext.Provider>
+	);
+}
+
+const ConnectedSegmentedControl: any = contextConnect(
+	SegmentedControl,
+	'SegmentedControl'
+);
+ConnectedSegmentedControl.Option = Option;
+
+export default ConnectedSegmentedControl;

packages/components/src/segmented-control/index.ts

@@ -0,0 +1 @@
+export { default as SegmentedControl } from './component';

packages/components/src/segmented-control/radio-context.ts

@@ -0,0 +1,13 @@
+/**
+ * WordPress dependencies
+ */
+import { createContext } from '@wordpress/element';
+
+/**
+ * Internal dependencies
+ */
+import type { SegmentedControlRadioState } from './types';
+
+const RadioContext = createContext( {} as SegmentedControlRadioState );
+
+export default RadioContext;

packages/components/src/segmented-control/segmented-control-backdrop.tsx

@@ -0,0 +1,60 @@
+/**
+ * WordPress dependencies
+ */
+import { useState, useEffect, memo } from '@wordpress/element';
+
+/**
+ * Internal dependencies
+ */
+import type { SegmentedControlBackdropProps } from './types';
+import { BackdropView } from './styles';
+
+function SegmentedControlBackdrop( {
+	containerRef,
+	containerWidth,
+	state,
+}: SegmentedControlBackdropProps ) {
+	const [ left, setLeft ] = useState( 0 );
+	const [ width, setWidth ] = useState( 0 );
+	const [ canAnimate, setCanAnimate ] = useState( false );
+
+	useEffect( () => {
+		const containerNode = containerRef?.current;
+		if ( ! containerNode ) return;
+
+		/**
+		 * Workaround for Reakit
+		 */
+		const targetNode = containerNode.querySelector(
+			`[data-value="${ state }"]`
+		);
+		if ( ! targetNode ) return;
+
+		const { x: parentX } = containerNode.getBoundingClientRect();
+		const { width: offsetWidth, x } = targetNode.getBoundingClientRect();
+		const borderWidth = 1;
+		const offsetLeft = x - parentX - borderWidth;
+
+		setLeft( offsetLeft );
+		setWidth( offsetWidth );
+
+		if ( ! canAnimate ) {
+			window.requestAnimationFrame( () => {
+				setCanAnimate( true );
+			} );
+		}
+	}, [ canAnimate, containerRef, containerWidth, state ] );
+
+	return (
+		<BackdropView
+			role="presentation"
+			style={ {
+				transform: `translateX(${ left }px)`,
+				transition: canAnimate ? undefined : 'none',
+				width,
+			} }
+		/>
+	);
+}
+
+export default memo( SegmentedControlBackdrop );

packages/components/src/segmented-control/segmented-control-button.tsx

@@ -0,0 +1,71 @@
+/**
+ * External dependencies
+ */
+// eslint-disable-next-line no-restricted-imports
+import { cx } from '@emotion/css';
+// eslint-disable-next-line no-restricted-imports
+import { Radio } from 'reakit';
+
+/**
+ * WordPress dependencies
+ */
+import { memo } from '@wordpress/element';
+
+/**
+ * Internal dependencies
+ */
+import * as styles from './styles';
+import type { SegmentedControlButtonProps } from './types';
+
+const {
+	ButtonContentView,
+	LabelPlaceholderView,
+	LabelView,
+	SeparatorView,
+} = styles;
+
+function SegmentedControlButton( {
+	className,
+	forwardedRef,
+	isBlock = false,
+	label,
+	showSeparator,
+	value,
+	...props
+}: SegmentedControlButtonProps ) {
+	const isActive = props.state === value;
+	const labelViewClasses = cx( isBlock && styles.labelBlock );
+	const classes = cx(
+		styles.buttonView,
+		className,
+		isActive && styles.buttonActive
+	);
+	return (
+		<LabelView className={ labelViewClasses } data-active={ isActive }>
+			<Radio
+				{ ...props }
+				as="button"
+				aria-label={ label }
+				className={ classes }
+				data-value={ value }
+				ref={ forwardedRef }
+				value={ value }
+			>
+				<ButtonContentView>{ label }</ButtonContentView>
+				<LabelPlaceholderView aria-hidden>
+					{ label }
+				</LabelPlaceholderView>
+			</Radio>
+			<SegmentedControlSeparator isActive={ ! showSeparator } />
+		</LabelView>
+	);
+}
+
+const SegmentedControlSeparator = memo(
+	( { isActive }: { isActive: boolean } ) => {
+		const classes = cx( isActive && styles.separatorActive );
+		return <SeparatorView aria-hidden className={ classes } />;
+	}
+);
+
+export default memo( SegmentedControlButton );