Components: polish ToggleGroupControl (#35600)

docs/manifest.json

@@ -1247,10 +1247,16 @@
 		"markdown_source": "../packages/components/src/toggle-control/README.md",
 		"parent": "components"
 	},
+	{
+		"title": "ToggleGroupControlOption",
+		"slug": "toggle-group-control-option",
+		"markdown_source": "../packages/components/src/toggle-group-control/toggle-group-control-option/README.md",
+		"parent": "components"
+	},
 	{
 		"title": "ToggleGroupControl",
 		"slug": "toggle-group-control",
-		"markdown_source": "../packages/components/src/toggle-group-control/README.md",
+		"markdown_source": "../packages/components/src/toggle-group-control/toggle-group-control/README.md",
 		"parent": "components"
 	},
 	{

packages/components/CHANGELOG.md

@@ -13,6 +13,7 @@
 ### Experimental
 
 -   Removed the `fieldset` wrapper from the `FontAppearanceControl` component ([35461](https://github.com/WordPress/gutenberg/pull/35461)).
+-   Refactored the `ToggleGroupControl` component's structure and embedded `ToggleGroupControlButton` directly into `ToggleGroupControlOption` ([#35600](https://github.com/WordPress/gutenberg/pull/35600)).
 
 ## 18.0.0 (2021-10-12)
 

packages/components/src/toggle-group-control/index.ts

@@ -1,2 +1,2 @@
-export { default as ToggleGroupControl } from './component';
-export { default as ToggleGroupControlOption } from './toggle-group-control-option';
+export { ToggleGroupControl } from './toggle-group-control';
+export { ToggleGroupControlOption } from './toggle-group-control-option';

packages/components/src/toggle-group-control/toggle-group-control-option/README.md

@@ -0,0 +1,40 @@
+# `ToggleGroupControlOption`
+
+<div class="callout callout-alert">
+This feature is still experimental. “Experimental” means this is an early implementation subject to drastic and breaking changes.
+</div>
+
+`ToggleGroupControlOption` is a form component and is meant to be used as a child of [`ToggleGroupControl`]((/packages/components/src/toggle-group-control/toggle-group-control/README.md)).
+
+
+## Usage
+
+```js
+import {
+	__experimentalToggleGroupControl as ToggleGroupControl,
+	__experimentalToggleGroupControlOption as ToggleGroupControlOption,
+} from '@wordpress/components';
+
+function Example() {
+	return (
+		<ToggleGroupControl label="my label" value="vertical" isBlock>
+			<ToggleGroupControlOption value="horizontal" label="Horizontal" />
+			<ToggleGroupControlOption value="vertical" label="Vertical" />
+		</ToggleGroupControl>
+	);
+}
+```
+
+## Props
+
+### `label`: `string`
+
+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
+
+### `value`: `string | number`
+
+The value of the `ToggleGroupControlOption`.
+
+- Required: Yes

packages/components/src/toggle-group-control/toggle-group-control-option/component.tsx

@@ -0,0 +1,104 @@
+/**
+ * External dependencies
+ */
+// eslint-disable-next-line no-restricted-imports
+import type { Ref } from 'react';
+// eslint-disable-next-line no-restricted-imports
+import { Radio } from 'reakit';
+
+/**
+ * WordPress dependencies
+ */
+import { __ } from '@wordpress/i18n';
+import { useInstanceId } from '@wordpress/compose';
+
+/**
+ * Internal dependencies
+ */
+import {
+	contextConnect,
+	useContextSystem,
+	WordPressComponentProps,
+} from '../../ui/context';
+import type { ToggleGroupControlOptionProps } from '../types';
+import { useToggleGroupControlContext } from '../context';
+import * as styles from './styles';
+import { useCx } from '../../utils/hooks';
+
+const { ButtonContentView, LabelPlaceholderView, LabelView } = styles;
+
+function ToggleGroupControlOption(
+	props: WordPressComponentProps< ToggleGroupControlOptionProps, 'button' >,
+	forwardedRef: Ref< any >
+) {
+	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, ...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
+	);
+
+	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>
+		</LabelView>
+	);
+}
+
+/**
+ * `ToggleGroupControlOption` is a form component and is meant to be used as a
+ * child of `ToggleGroupControl`.
+ *
+ * @example
+ * ```jsx
+ * import {
+ *   __experimentalToggleGroupControl as ToggleGroupControl,
+ *   __experimentalToggleGroupControlOption as ToggleGroupControlOption,
+ * } from '@wordpress/components';
+ *
+ * function Example() {
+ *   return (
+ *     <ToggleGroupControl label="my label" value="vertical" isBlock>
+ *       <ToggleGroupControlOption value="horizontal" label="Horizontal" />
+ *       <ToggleGroupControlOption value="vertical" label="Vertical" />
+ *     </ToggleGroupControl>
+ *   );
+ * }
+ * ```
+ */
+const ConnectedToggleGroupControlOption = contextConnect(
+	ToggleGroupControlOption,
+	'ToggleGroupControlOption'
+);
+
+export default ConnectedToggleGroupControlOption;

packages/components/src/toggle-group-control/toggle-group-control-option/index.ts

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

packages/components/src/toggle-group-control/styles.ts → packages/components/src/toggle-group-control/toggle-group-control-option/styles.ts

@@ -7,49 +7,7 @@ import styled from '@emotion/styled';
 /**
  * Internal dependencies
  */
-import { CONFIG, COLORS, reduceMotion } from '../utils';
-
-export const ToggleGroupControl = css`
-	background: ${ COLORS.ui.background };
-	border: 1px solid;
-	border-color: ${ COLORS.ui.border };
-	border-radius: ${ CONFIG.controlBorderRadius };
-	display: inline-flex;
-	min-height: ${ CONFIG.controlHeight };
-	min-width: 0;
-	padding: 2px;
-	position: relative;
-	transition: transform ${ CONFIG.transitionDurationFastest } linear;
-	${ reduceMotion( 'transition' ) }
-	&:hover {
-		border-color: ${ COLORS.ui.borderHover };
-	}
-
-	&:focus-within {
-		border-color: ${ COLORS.ui.borderFocus };
-		box-shadow: ${ CONFIG.controlBoxShadowFocus };
-		outline: none;
-		z-index: 1;
-	}
-`;
-
-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;
-`;
+import { CONFIG, COLORS, reduceMotion } from '../../utils';
 
 export const LabelView = styled.div`
 	display: inline-flex;