From ad06af48e429e1844492fbafacd081494b919e13 Mon Sep 17 00:00:00 2001
From: Lena Morita <lena@jaguchi.com>
Date: Thu, 15 Sep 2022 04:29:15 +0900
Subject: [PATCH] Add ToggleMultipleGroupControl

---
 .../test/__snapshots__/index.tsx.snap         |  2 +
 .../component.tsx                             | 26 ++++---
 .../styles.ts                                 |  9 +++
 .../toggle-group-control/as-button-group.tsx  | 11 ++-
 .../toggle-group-control/as-radio-group.tsx   |  8 ++-
 .../toggle-group-control/styles.ts            |  4 +-
 .../src/toggle-group-control/types.ts         | 11 ++-
 .../component.tsx                             | 54 ++++++++++++++
 .../toggle-multiple-group-control/index.ts    |  1 +
 .../option-icon.tsx                           | 40 +++++++++++
 .../stories/index.tsx                         | 70 +++++++++++++++++++
 .../toggle-multiple-group-control/types.ts    | 26 +++++++
 12 files changed, 245 insertions(+), 17 deletions(-)
 create mode 100644 packages/components/src/toggle-multiple-group-control/component.tsx
 create mode 100644 packages/components/src/toggle-multiple-group-control/index.ts
 create mode 100644 packages/components/src/toggle-multiple-group-control/option-icon.tsx
 create mode 100644 packages/components/src/toggle-multiple-group-control/stories/index.tsx
 create mode 100644 packages/components/src/toggle-multiple-group-control/types.ts

diff --git a/packages/components/src/toggle-group-control/test/__snapshots__/index.tsx.snap b/packages/components/src/toggle-group-control/test/__snapshots__/index.tsx.snap
index 8367f1df88844..dae96c1df92e3 100644
--- a/packages/components/src/toggle-group-control/test/__snapshots__/index.tsx.snap
+++ b/packages/components/src/toggle-group-control/test/__snapshots__/index.tsx.snap
@@ -142,6 +142,7 @@ exports[`ToggleGroupControl should render correctly with icons 1`] = `
   width: 100%;
   z-index: 2;
   width: 30px;
+  height: 30px;
   padding-left: 0;
   padding-right: 0;
   color: #fff;
@@ -209,6 +210,7 @@ exports[`ToggleGroupControl should render correctly with icons 1`] = `
   width: 100%;
   z-index: 2;
   width: 30px;
+  height: 30px;
   padding-left: 0;
   padding-right: 0;
 }
diff --git a/packages/components/src/toggle-group-control/toggle-group-control-option-base/component.tsx b/packages/components/src/toggle-group-control/toggle-group-control-option-base/component.tsx
index e1d90fc1085a2..3c807ed9746d1 100644
--- a/packages/components/src/toggle-group-control/toggle-group-control-option-base/component.tsx
+++ b/packages/components/src/toggle-group-control/toggle-group-control-option-base/component.tsx
@@ -66,26 +66,33 @@ function ToggleGroupControlOptionBase(
 	const {
 		className,
 		isIcon = false,
+		isMultiple = false,
 		value,
 		children,
 		showTooltip = false,
 		...otherButtonProps
 	} = buttonProps;
 
-	const isPressed = otherContextProps.state === value;
+	const isPressed =
+		otherContextProps.state === value ||
+		otherButtonProps[ 'aria-pressed' ] === true;
 	const cx = useCx();
 	const labelViewClasses = cx( isBlock && styles.labelBlock );
 	const classes = cx(
-		styles.buttonView( { isDeselectable, isIcon, isPressed, size } ),
+		styles.buttonView( {
+			isDeselectable,
+			isIcon,
+			isMultiple,
+			isPressed,
+			size,
+		} ),
 		className
 	);
 
-	const buttonOnClick = () => {
-		if ( isDeselectable && isPressed ) {
-			otherContextProps.setState( undefined );
-		} else {
-			otherContextProps.setState( value );
-		}
+	const singleSelectButtonProps = {
+		'aria-pressed': isPressed,
+		onClick: () =>
+			otherContextProps.setState( isPressed ? undefined : value ),
 	};
 
 	return (
@@ -97,11 +104,10 @@ function ToggleGroupControlOptionBase(
 				{ isDeselectable ? (
 					<button
 						{ ...otherButtonProps }
-						aria-pressed={ isPressed }
+						{ ...( isMultiple ? {} : singleSelectButtonProps ) }
 						type="button"
 						className={ classes }
 						data-value={ value }
-						onClick={ buttonOnClick }
 						ref={ forwardedRef }
 					>
 						<ButtonContentView>{ children }</ButtonContentView>
diff --git a/packages/components/src/toggle-group-control/toggle-group-control-option-base/styles.ts b/packages/components/src/toggle-group-control/toggle-group-control-option-base/styles.ts
index 0ebc28a990a80..1591e51af77f8 100644
--- a/packages/components/src/toggle-group-control/toggle-group-control-option-base/styles.ts
+++ b/packages/components/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 { BACKDROP_BG_COLOR } from '../toggle-group-control/styles';
 import type { ToggleGroupControlProps } from '../types';
 
 export const LabelView = styled.div`
@@ -24,11 +25,13 @@ export const labelBlock = css`
 export const buttonView = ( {
 	isDeselectable,
 	isIcon,
+	isMultiple,
 	isPressed,
 	size,
 }: {
 	isDeselectable?: boolean;
 	isIcon?: boolean;
+	isMultiple?: boolean;
 	isPressed?: boolean;
 	size: NonNullable< ToggleGroupControlProps[ 'size' ] >;
 } ) => css`
@@ -66,9 +69,14 @@ export const buttonView = ( {
 
 	${ isDeselectable && deselectable }
 	${ isIcon && isIconStyles( { size } ) }
+	${ isMultiple && isPressed && staticBackground }
 	${ isPressed && pressed }
 `;
 
+const staticBackground = css`
+	background: ${ BACKDROP_BG_COLOR };
+`;
+
 const pressed = css`
 	color: ${ COLORS.white };
 	&:active {
@@ -103,6 +111,7 @@ const isIconStyles = ( {
 
 	return css`
 		width: ${ iconButtonSizes[ size ] };
+		height: ${ iconButtonSizes[ size ] };
 		padding-left: 0;
 		padding-right: 0;
 	`;
diff --git a/packages/components/src/toggle-group-control/toggle-group-control/as-button-group.tsx b/packages/components/src/toggle-group-control/toggle-group-control/as-button-group.tsx
index 42ffadd0371e3..6c31ff1384108 100644
--- a/packages/components/src/toggle-group-control/toggle-group-control/as-button-group.tsx
+++ b/packages/components/src/toggle-group-control/toggle-group-control/as-button-group.tsx
@@ -22,7 +22,8 @@ import ToggleGroupControlBackdrop from './toggle-group-control-backdrop';
 import ToggleGroupControlContext from '../context';
 import { useUpdateEffect } from '../../utils/hooks';
 import type { WordPressComponentProps } from '../../ui/context';
-import type { ToggleGroupControlAsRadioProps } from '../types';
+import type { ToggleGroupControlInnerGroupProps } from '../types';
+import { HStack } from '../../h-stack';
 
 function UnforwardedToggleGroupControlAsButtonGroup(
 	{
@@ -33,7 +34,11 @@ function UnforwardedToggleGroupControlAsButtonGroup(
 		size,
 		value,
 		...otherProps
-	}: WordPressComponentProps< ToggleGroupControlAsRadioProps, 'div', false >,
+	}: WordPressComponentProps<
+		ToggleGroupControlInnerGroupProps,
+		'div',
+		false
+	>,
 	forwardedRef: ForwardedRef< HTMLDivElement >
 ) {
 	const containerRef = useRef();
@@ -88,7 +93,7 @@ function UnforwardedToggleGroupControlAsButtonGroup(
 					containerWidth={ sizes.width }
 					isAdaptiveWidth={ isAdaptiveWidth }
 				/>
-				{ children }
+				<HStack spacing={ 1 }>{ children }</HStack>
 			</View>
 		</ToggleGroupControlContext.Provider>
 	);
diff --git a/packages/components/src/toggle-group-control/toggle-group-control/as-radio-group.tsx b/packages/components/src/toggle-group-control/toggle-group-control/as-radio-group.tsx
index bb27783527adf..5422469ec5b73 100644
--- a/packages/components/src/toggle-group-control/toggle-group-control/as-radio-group.tsx
+++ b/packages/components/src/toggle-group-control/toggle-group-control/as-radio-group.tsx
@@ -24,7 +24,7 @@ import ToggleGroupControlBackdrop from './toggle-group-control-backdrop';
 import ToggleGroupControlContext from '../context';
 import { useUpdateEffect } from '../../utils/hooks';
 import type { WordPressComponentProps } from '../../ui/context';
-import type { ToggleGroupControlAsRadioProps } from '../types';
+import type { ToggleGroupControlInnerGroupProps } from '../types';
 
 function UnforwardedToggleGroupControlAsRadio(
 	{
@@ -35,7 +35,11 @@ function UnforwardedToggleGroupControlAsRadio(
 		size,
 		value,
 		...otherProps
-	}: WordPressComponentProps< ToggleGroupControlAsRadioProps, 'div', false >,
+	}: WordPressComponentProps<
+		ToggleGroupControlInnerGroupProps,
+		'div',
+		false
+	>,
 	forwardedRef: ForwardedRef< HTMLDivElement >
 ) {
 	const containerRef = useRef();
diff --git a/packages/components/src/toggle-group-control/toggle-group-control/styles.ts b/packages/components/src/toggle-group-control/toggle-group-control/styles.ts
index 0c8da12bc1051..c2f3883217840 100644
--- a/packages/components/src/toggle-group-control/toggle-group-control/styles.ts
+++ b/packages/components/src/toggle-group-control/toggle-group-control/styles.ts
@@ -10,6 +10,8 @@ import styled from '@emotion/styled';
 import { CONFIG, COLORS, reduceMotion } from '../../utils';
 import type { ToggleGroupControlProps } from '../types';
 
+export const BACKDROP_BG_COLOR = COLORS.gray[ 900 ];
+
 export const ToggleGroupControl = ( {
 	isDeselectable,
 	size,
@@ -65,7 +67,7 @@ export const block = css`
 `;
 
 export const BackdropView = styled.div`
-	background: ${ COLORS.gray[ 900 ] };
+	background: ${ BACKDROP_BG_COLOR };
 	border-radius: ${ CONFIG.controlBorderRadius };
 	left: 0;
 	position: absolute;
diff --git a/packages/components/src/toggle-group-control/types.ts b/packages/components/src/toggle-group-control/types.ts
index 4ea6685f76dc7..fcdc5061b7d98 100644
--- a/packages/components/src/toggle-group-control/types.ts
+++ b/packages/components/src/toggle-group-control/types.ts
@@ -18,6 +18,15 @@ export type ToggleGroupControlOptionBaseProps = {
 	 * @default false
 	 */
 	isIcon?: boolean;
+	/**
+	 * Whether the group supports multiple selection.
+	 *
+	 * @default false
+	 */
+	isMultiple?: boolean;
+	/**
+	 * The unique key of the option.
+	 */
 	value: ReactText;
 	/**
 	 * Whether to display a Tooltip for the control option. If set to `true`, the tooltip will
@@ -137,7 +146,7 @@ export type ToggleGroupControlBackdropProps = {
 	state?: any;
 };
 
-export type ToggleGroupControlAsRadioProps = Pick<
+export type ToggleGroupControlInnerGroupProps = Pick<
 	ToggleGroupControlProps,
 	'children' | 'isAdaptiveWidth' | 'label' | 'size'
 > & {
diff --git a/packages/components/src/toggle-multiple-group-control/component.tsx b/packages/components/src/toggle-multiple-group-control/component.tsx
new file mode 100644
index 0000000000000..f988685879b82
--- /dev/null
+++ b/packages/components/src/toggle-multiple-group-control/component.tsx
@@ -0,0 +1,54 @@
+/**
+ * External dependencies
+ */
+import type { ForwardedRef } from 'react';
+
+/**
+ * Internal dependencies
+ */
+import {
+	contextConnect,
+	ContextSystemProvider,
+	WordPressComponentProps,
+} from '../ui/context';
+import type { ToggleMultipleGroupControlProps } from './types';
+import { ToggleGroupControl } from '../toggle-group-control';
+import { useContextSystem } from '../ui/context/use-context-system';
+
+const contextProviderValue = {
+	ToggleGroupControlOptionBase: {
+		isMultiple: true,
+	},
+};
+
+function UnconnectedToggleMultipleGroupControl(
+	props: WordPressComponentProps<
+		ToggleMultipleGroupControlProps,
+		'div',
+		false
+	>,
+	forwardedRef: ForwardedRef< any >
+) {
+	const {
+		onChange, // omit
+		...otherProps
+	} = useContextSystem( props, 'UnconnectedToggleMultipleGroupControl' );
+
+	return (
+		<ContextSystemProvider value={ contextProviderValue }>
+			<ToggleGroupControl
+				{ ...otherProps }
+				isDeselectable
+				__nextHasNoMarginBottom
+				ref={ forwardedRef }
+			/>
+		</ContextSystemProvider>
+	);
+}
+
+export const ToggleMultipleGroupControl = contextConnect(
+	UnconnectedToggleMultipleGroupControl,
+	'ToggleMultipleGroupControl'
+);
+
+export default ToggleMultipleGroupControl;
diff --git a/packages/components/src/toggle-multiple-group-control/index.ts b/packages/components/src/toggle-multiple-group-control/index.ts
new file mode 100644
index 0000000000000..bf6217c1d47af
--- /dev/null
+++ b/packages/components/src/toggle-multiple-group-control/index.ts
@@ -0,0 +1 @@
+export { ToggleMultipleGroupControl } from './component';
diff --git a/packages/components/src/toggle-multiple-group-control/option-icon.tsx b/packages/components/src/toggle-multiple-group-control/option-icon.tsx
new file mode 100644
index 0000000000000..a1045a5d6a5ab
--- /dev/null
+++ b/packages/components/src/toggle-multiple-group-control/option-icon.tsx
@@ -0,0 +1,40 @@
+/**
+ * External dependencies
+ */
+import type { ForwardedRef } from 'react';
+
+/**
+ * WordPress dependencies
+ */
+import { forwardRef } from '@wordpress/element';
+
+/**
+ * Internal dependencies
+ */
+import { ToggleGroupControlOptionIcon } from '../toggle-group-control';
+import type { ToggleMultipleGroupControlOptionIconProps } from './types';
+import type { WordPressComponentProps } from '../ui/context';
+
+function UnforwardedToggleMultipleGroupControlOptionIcon(
+	{
+		isPressed,
+		...otherProps
+	}: WordPressComponentProps<
+		ToggleMultipleGroupControlOptionIconProps,
+		'button',
+		false
+	>,
+	ref: ForwardedRef< any >
+) {
+	return (
+		<ToggleGroupControlOptionIcon
+			{ ...otherProps }
+			ref={ ref }
+			aria-pressed={ isPressed }
+		/>
+	);
+}
+
+export const ToggleMultipleGroupControlOptionIcon = forwardRef(
+	UnforwardedToggleMultipleGroupControlOptionIcon
+);
diff --git a/packages/components/src/toggle-multiple-group-control/stories/index.tsx b/packages/components/src/toggle-multiple-group-control/stories/index.tsx
new file mode 100644
index 0000000000000..d0e4a398fee9b
--- /dev/null
+++ b/packages/components/src/toggle-multiple-group-control/stories/index.tsx
@@ -0,0 +1,70 @@
+/**
+ * External dependencies
+ */
+import type { ComponentMeta, ComponentStory } from '@storybook/react';
+
+/**
+ * WordPress dependencies
+ */
+import { useState } from '@wordpress/element';
+import { formatBold, formatItalic, formatUnderline } from '@wordpress/icons';
+
+/**
+ * Internal dependencies
+ */
+import { ToggleMultipleGroupControl } from '../';
+import { ToggleMultipleGroupControlOptionIcon } from '../option-icon';
+
+const meta: ComponentMeta< typeof ToggleMultipleGroupControl > = {
+	component: ToggleMultipleGroupControl,
+	title: 'Components (Experimental)/ToggleMultipleGroupControl',
+	subcomponents: { ToggleMultipleGroupControlOptionIcon },
+	argTypes: {
+		help: { control: { type: 'text' } },
+	},
+	parameters: {
+		controls: { expanded: true },
+		docs: { source: { state: 'open' } },
+	},
+};
+export default meta;
+
+const Template: ComponentStory< typeof ToggleMultipleGroupControl > = (
+	props
+) => {
+	const [ bold, setBold ] = useState( false );
+	const [ italic, setItalic ] = useState( false );
+	const [ underline, setUndeline ] = useState( false );
+
+	return (
+		<ToggleMultipleGroupControl { ...props }>
+			<ToggleMultipleGroupControlOptionIcon
+				value="bold"
+				label="Bold"
+				icon={ formatBold }
+				isPressed={ bold }
+				onClick={ () => setBold( ! bold ) }
+			/>
+			<ToggleMultipleGroupControlOptionIcon
+				value="italic"
+				label="Italic"
+				icon={ formatItalic }
+				isPressed={ italic }
+				onClick={ () => setItalic( ! italic ) }
+			/>
+			<ToggleMultipleGroupControlOptionIcon
+				value="underline"
+				label="Underline"
+				icon={ formatUnderline }
+				isPressed={ underline }
+				onClick={ () => setUndeline( ! underline ) }
+			/>
+		</ToggleMultipleGroupControl>
+	);
+};
+
+export const Default: ComponentStory< typeof ToggleMultipleGroupControl > =
+	Template.bind( {} );
+Default.args = {
+	label: 'Label',
+};
diff --git a/packages/components/src/toggle-multiple-group-control/types.ts b/packages/components/src/toggle-multiple-group-control/types.ts
new file mode 100644
index 0000000000000..d15bd5a863d73
--- /dev/null
+++ b/packages/components/src/toggle-multiple-group-control/types.ts
@@ -0,0 +1,26 @@
+/**
+ * Internal dependencies
+ */
+import type {
+	ToggleGroupControlOptionIconProps,
+	ToggleGroupControlProps,
+} from '../toggle-group-control/types';
+
+export type ToggleMultipleGroupControlProps = Pick<
+	ToggleGroupControlProps,
+	'children' | 'label' | 'help' | 'hideLabelFromVision' | 'size'
+>;
+
+export type ToggleMultipleGroupControlOptionIconProps =
+	ToggleGroupControlOptionIconProps & {
+		/**
+		 * Whether the button is pressed.
+		 *
+		 * @default false
+		 */
+		isPressed: boolean;
+		/**
+		 * Listen to click events to manage the `isPressed` state.
+		 */
+		onClick: () => void;
+	};