Add radio option to ButtonGroup

packages/components/src/button-group/README.md

@@ -46,6 +46,8 @@ Button groups that cannot be selected can either be given a disabled state, or b
 
 ### Usage
 
+**As a simple group**
+
 ```jsx
 import { Button, ButtonGroup } from '@wordpress/components';
 
@@ -57,6 +59,25 @@ const MyButtonGroup = () => (
 );
 ```
 
+**As a radio group**
+
+```jsx
+import { Button, ButtonGroup } from '@wordpress/components';
+import { useState } from '@wordpress/element';
+
+const MyRadioButtonGroup = () => {
+	const [ checked, setChecked ] = useState( 'medium' );
+	return (
+		<ButtonGroup mode="radio" onChange={ setChecked } checked={ checked }>
+			<Button value="small">Small</Button>
+			<Button value="medium">Medium</Button>
+			<Button value="large">Large</Button>
+		</ButtonGroup>
+	);
+};
+```
+
 ## Related components
 
 - For individual buttons, use a `Button` component.
+- For a traditional radio group, use a `RadioControl` component.

packages/components/src/button-group/index.js

@@ -3,10 +3,72 @@
  */
 import classnames from 'classnames';
 
-function ButtonGroup( { className, ...props } ) {
+/**
+ * WordPress dependencies
+ */
+import { Children, useRef, createContext, useMemo } from '@wordpress/element';
+
+// Default values for when a button isn't a child of a group
+export const ButtonGroupContext = createContext( {
+	mode: null,
+	buttons: {},
+} );
+
+function ButtonGroup( {
+	mode,
+	checked,
+	onChange,
+	className,
+	children,
+	...props
+} ) {
 	const classes = classnames( 'components-button-group', className );
+	const role = mode === 'radio' ? 'radiogroup' : 'group';
+	const childRefs = useRef( [] );
+
+	const buttons = useMemo( () => {
+		const buttonsContext = {};
+		if ( mode === 'radio' ) {
+			const childrenArray = Children.toArray( children );
+			childrenArray.forEach( ( child, index ) => {
+				buttonsContext[ child.props.value ] = {
+					isChecked: checked === child.props.value,
+					isFirst: ! checked && index === 0,
+					onPrev: () => {
+						const prevIndex =
+							( index - 1 + childrenArray.length ) %
+							childrenArray.length;
+						childRefs.current[ prevIndex ].focus();
+						onChange( childrenArray[ prevIndex ].props.value );
+					},
+					onNext: () => {
+						const nextIndex = ( index + 1 ) % childrenArray.length;
+						childRefs.current[ nextIndex ].focus();
+						onChange( childrenArray[ nextIndex ].props.value );
+					},
+					onSelect: () => {
+						onChange( child.props.value );
+					},
+					refCallback: ( ref ) => {
+						if ( ref === null ) {
+							delete childRefs.current[ index ];
+						} else {
+							childRefs.current[ index ] = ref;
+						}
+					},
+				};
+			} );
+		}
+		return buttonsContext;
+	}, [ children, mode, onChange, checked, childRefs ] );
 
-	return <div { ...props } className={ classes } role="group" />;
+	return (
+		<div className={ classes } role={ role } { ...props }>
+			<ButtonGroupContext.Provider value={ { mode, buttons } }>
+				{ children }
+			</ButtonGroupContext.Provider>
+		</div>
+	);
 }
 
 export default ButtonGroup;

packages/components/src/button-group/stories/index.js

@@ -1,3 +1,8 @@
+/**
+ * WordPress dependencies
+ */
+import { useState } from '@wordpress/element';
+
 /**
  * Internal dependencies
  */
@@ -19,3 +24,18 @@ export const _default = () => {
 		</ButtonGroup>
 	);
 };
+
+const ButtonGroupWithState = () => {
+	const [ checked, setChecked ] = useState( 'medium' );
+	return (
+		<ButtonGroup mode="radio" onChange={ setChecked } checked={ checked }>
+			<Button value="small">Small</Button>
+			<Button value="medium">Medium</Button>
+			<Button value="large">Large</Button>
+		</ButtonGroup>
+	);
+};
+
+export const radioButtonGroup = () => {
+	return <ButtonGroupWithState />;
+};

packages/components/src/button/index.js

@@ -8,11 +8,12 @@ import { isArray } from 'lodash';
  * WordPress dependencies
  */
 import deprecated from '@wordpress/deprecated';
-import { forwardRef } from '@wordpress/element';
+import { forwardRef, useContext } from '@wordpress/element';
 
 /**
  * Internal dependencies
  */
+import { ButtonGroupContext } from '../button-group';
 import Tooltip from '../tooltip';
 import Icon from '../icon';
 
@@ -41,6 +42,9 @@ export function Button( props, ref ) {
 		shortcut,
 		label,
 		children,
+		value,
+		onKeyDown,
+		onClick,
 		__experimentalIsFocusable: isFocusable,
 		...additionalProps
 	} = props;
@@ -76,19 +80,75 @@ export function Button( props, ref ) {
 					'aria-pressed': isPressed,
 			  };
 
+	const disabledEventProps = {};
+
 	if ( disabled && isFocusable ) {
 		// In this case, the button will be disabled, but still focusable and
 		// perceivable by screen reader users.
 		tagProps[ 'aria-disabled' ] = true;
 
 		for ( const disabledEvent of disabledEventsOnDisabledButton ) {
-			additionalProps[ disabledEvent ] = ( event ) => {
+			disabledEventProps[ disabledEvent ] = ( event ) => {
 				event.stopPropagation();
 				event.preventDefault();
 			};
 		}
 	}
 
+	const groupContext = useContext( ButtonGroupContext );
+	const buttonContext = groupContext.buttons[ value ];
+	const groupProps = {};
+
+	if ( groupContext.mode === 'radio' && buttonContext ) {
+		const {
+			isChecked,
+			isFirst,
+			onPrev,
+			onNext,
+			onSelect,
+			refCallback,
+		} = buttonContext;
+
+		Object.assign( groupProps, {
+			role: groupContext.mode,
+			'aria-checked': isChecked,
+			tabIndex: isChecked || isFirst ? 0 : -1,
+			// Pass through events and also handle the keyboard controls
+			onKeyDown( e ) {
+				if ( typeof onKeyDown === 'function' ) onKeyDown( e );
+				if ( e.key === 'ArrowUp' || e.key === 'ArrowLeft' ) {
+					e.preventDefault();
+					onPrev();
+				}
+				if ( e.key === 'ArrowDown' || e.key === 'ArrowRight' ) {
+					e.preventDefault();
+					onNext();
+				}
+			},
+			// May get overridden when disabled && isFocusable
+			onClick( e ) {
+				if ( typeof onClick === 'function' ) onClick( e );
+				onSelect();
+			},
+			// Grab a ref for handling onPrev and onNext in the group, but also
+			// pass through the ref from forwardRef
+			ref: ( current ) => {
+				refCallback( current );
+
+				if ( typeof ref === 'function' ) {
+					ref( current );
+				} else if ( ref ) {
+					ref.current = current;
+				}
+			},
+			// Automatically handle the styling for the selected button
+			className: classnames( classes, {
+				'is-secondary': ! isChecked,
+				'is-primary': isChecked,
+			} ),
+		} );
+	}
+
 	// Should show the tooltip if...
 	const shouldShowTooltip =
 		! trulyDisabled &&
@@ -106,11 +166,15 @@ export function Button( props, ref ) {
 
 	const element = (
 		<Tag
+			ref={ ref }
 			{ ...tagProps }
 			{ ...additionalProps }
 			className={ classes }
 			aria-label={ additionalProps[ 'aria-label' ] || label }
-			ref={ ref }
+			onKeyDown={ onKeyDown }
+			onClick={ onClick }
+			{ ...groupProps } // Overrides className, onKeyDown, and onClick
+			{ ...disabledEventProps } // May override onMouseDown and/or onClick
 		>
 			{ icon && <Icon icon={ icon } size={ iconSize } /> }
 			{ children }

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

@@ -121,3 +121,4 @@ A function that receives the value of the new option that is being selected as i
 
 * To select one or more items from a set, use the `CheckboxControl` component.
 * To toggle a single setting on or off, use the `ToggleControl` component.
+* To format as a button group, use the `ButtonGroup` component with `role="radio"`.

storybook/test/__snapshots__/index.js.snap

@@ -801,6 +801,47 @@ exports[`Storyshots Components/ButtonGroup Default 1`] = `
 </div>
 `;
 
+exports[`Storyshots Components/ButtonGroup Radio Button Group 1`] = `
+<div
+  className="components-button-group"
+  role="radiogroup"
+>
+  <button
+    aria-checked={false}
+    className="components-button is-secondary"
+    onClick={[Function]}
+    onKeyDown={[Function]}
+    role="radio"
+    tabIndex={-1}
+    type="button"
+  >
+    Small
+  </button>
+  <button
+    aria-checked={true}
+    className="components-button is-primary"
+    onClick={[Function]}
+    onKeyDown={[Function]}
+    role="radio"
+    tabIndex={0}
+    type="button"
+  >
+    Medium
+  </button>
+  <button
+    aria-checked={false}
+    className="components-button is-secondary"
+    onClick={[Function]}
+    onKeyDown={[Function]}
+    role="radio"
+    tabIndex={-1}
+    type="button"
+  >
+    Large
+  </button>
+</div>
+`;
+
 exports[`Storyshots Components/Card Default 1`] = `
 .emotion-6 {
   background: #fff;