update RadioGridGroup

packages/web-ui/src/components/FormFieldGroup/index.ts

@@ -0,0 +1,8 @@
+export { FormFieldGroup } from './FormFieldGroup';
+export type { FormFieldGroupProps } from './FormFieldGroup.props';
+export {
+  FormFieldGroupContext,
+  FormFieldGroupProvider,
+  useFormFieldGroup,
+} from './FormFieldGroup.context';
+export type { FormFieldGroupContextValue } from './FormFieldGroup.context';

packages/web-ui/src/components/Radio/Radio.tsx

@@ -14,9 +14,9 @@ import { colors, colorsCommon } from '@utilitywarehouse/colour-system';
 import { RadioProps } from './Radio.props';
 
 import { Flex } from '../Flex';
+import { useFormFieldGroup } from '../FormFieldGroup';
 import { HelperText } from '../HelperText';
 import { Label } from '../Label';
-import { useFormFieldGroup } from '../RadioGroup/FormFieldGroup.context';
 
 import { useIds } from '../../hooks';
 import { styled } from '../../theme';

packages/web-ui/src/components/RadioGridGroup/RadioGridGroup.props.ts

@@ -1,7 +1,28 @@
-import { BaseRadioGroupProps } from '../BaseRadioGroup';
-import { StackProps } from '../Stack';
+import { RadioGridGroupRootProps } from './RadioGridGroupRoot.props';
 
-export interface RadioGridGroupProps extends Omit<BaseRadioGroupProps, 'direction'> {
-  /** Sets the number of columns to display the contents in. */
-  columns?: StackProps['spacing'];
+import { FormFieldGroupProps } from '../FormFieldGroup';
+
+export interface RadioGridGroupProps
+  extends Pick<
+      RadioGridGroupRootProps,
+      'columns' | 'loop' | 'defaultValue' | 'value' | 'onValueChange' | 'required'
+    >,
+    Pick<
+      FormFieldGroupProps,
+      | 'className'
+      | 'name'
+      | 'disabled'
+      | 'label'
+      | 'helperText'
+      | 'helperTextPosition'
+      | 'showHelperTextIcon'
+      | 'error'
+      | 'errorMessage'
+      | 'showErrorMessageIcon'
+    > {
+  /**
+   * Set the container width of the RadioGroup children, independent to the width of the
+   * parent RadioGroup.
+   */
+  contentWidth?: RadioGridGroupRootProps['width'];
 }

packages/web-ui/src/components/RadioGridGroup/RadioGridGroup.tsx

@@ -3,11 +3,10 @@ import * as React from 'react';
 import clsx from 'clsx';
 
 import type { RadioGridGroupProps } from './RadioGridGroup.props';
+import { RadioGridGroupRoot } from './RadioGridGroupRoot';
 
-import { BaseRadioGroup } from '../BaseRadioGroup';
-import { Box } from '../Box';
+import { FormFieldGroup } from '../FormFieldGroup';
 
-import { getColumns } from '../../helpers';
 import type { PropsWithSx } from '../../types';
 import { withGlobalPrefix } from '../../utils';
 
@@ -23,20 +22,65 @@ const componentClassName = withGlobalPrefix(componentName);
  * and disabled state, as well as determining the presentation and selection of
  * the items in the list. Follows the [WAI-ARIA Radio Group Pattern](https://www.w3.org/WAI/ARIA/apg/patterns/radio/) for radio groups not contained in a toolbar.
  */
-export const RadioGridGroup = React.forwardRef<HTMLDivElement, PropsWithSx<RadioGridGroupProps>>(
-  ({ children, contentWidth = 'fit-content', columns = 2, className, ...props }, ref) => {
+export const RadioGridGroup = React.forwardRef<
+  HTMLFieldSetElement,
+  React.PropsWithChildren<PropsWithSx<RadioGridGroupProps>>
+>(
+  (
+    {
+      children,
+      contentWidth = 'fit-content',
+      className,
+      label,
+      helperText,
+      helperTextPosition,
+      showHelperTextIcon,
+      error,
+      errorMessage,
+      showErrorMessageIcon,
+      required,
+      disabled,
+      loop,
+      defaultValue,
+      value,
+      onValueChange,
+      name,
+      columns,
+      ...props
+    },
+    ref
+  ) => {
+    const formFieldGroupProps = {
+      ...props,
+      disabled,
+      required,
+      label,
+      helperText,
+      helperTextPosition,
+      showHelperTextIcon,
+      error,
+      errorMessage,
+      showErrorMessageIcon,
+    };
+    const radioGridGroupRootProps = {
+      width: contentWidth,
+      name,
+      required,
+      disabled,
+      loop,
+      defaultValue,
+      value,
+      onValueChange,
+      columns,
+    };
     return (
-      <BaseRadioGroup ref={ref} className={clsx(componentClassName, className)} {...props}>
-        <Box
-          display="grid"
-          gap={2}
-          gridTemplateColumns={getColumns(columns)}
-          minWidth="fit-content"
-          width={contentWidth}
-        >
-          {children}
-        </Box>
-      </BaseRadioGroup>
+      <FormFieldGroup
+        ref={ref}
+        className={clsx(componentClassName, className)}
+        {...formFieldGroupProps}
+      >
+        <RadioGridGroupRoot {...radioGridGroupRootProps}>{children}</RadioGridGroupRoot>
+      </FormFieldGroup>
     );
   }
 );

packages/web-ui/src/components/RadioGridGroup/RadioGridGroupRoot.props.ts

@@ -0,0 +1,10 @@
+import { type RadioGroupProps as RadixRadioGroupProps } from '@radix-ui/react-radio-group';
+
+import { BoxProps } from '../Box';
+import { StackProps } from '../Stack';
+
+export interface RadioGridGroupRootProps extends Omit<RadixRadioGroupProps, 'dir' | 'orientation'> {
+  /** Sets the number of columns to display the contents in. */
+  columns?: StackProps['spacing']; // TODO: use responsive CSS classes to implement this
+  width?: BoxProps['width'];
+}

packages/web-ui/src/components/RadioGridGroup/RadioGridGroupRoot.tsx

@@ -0,0 +1,53 @@
+import * as React from 'react';
+
+import clsx from 'clsx';
+
+import { Root } from '@radix-ui/react-radio-group';
+
+import type { RadioGridGroupProps } from './RadioGridGroup.props';
+
+import { Box } from '../Box';
+
+import { getColumns } from '../../helpers';
+import type { PropsWithSx } from '../../types';
+import { withGlobalPrefix } from '../../utils';
+
+const componentName = 'RadioGridGroupRoot';
+const componentClassName = withGlobalPrefix(componentName);
+
+/**
+ * The `RadioGridGroup` provides an accessible way to group and control a set
+ * of `Radio` or `RadioTile` components, displayed in a grid layout, allowing
+ * the user to select one option from a set. For displaying radios in a column
+ * or row, please use the `RadioGroup` component. The `RadioGridGroup` is
+ * responsible for handling the value, helper text, error state, error message,
+ * and disabled state, as well as determining the presentation and selection of
+ * the items in the list. Follows the [WAI-ARIA Radio Group Pattern](https://www.w3.org/WAI/ARIA/apg/patterns/radio/) for radio groups not contained in a toolbar.
+ */
+export const RadioGridGroupRoot = React.forwardRef<
+  HTMLDivElement,
+  PropsWithSx<RadioGridGroupProps>
+>(({ id, disabled, children, width, columns = 2, className, ...props }, ref) => {
+  return (
+    <Root
+      ref={ref}
+      asChild
+      {...props}
+      disabled={disabled}
+      id={id}
+      className={clsx(componentClassName, className)}
+    >
+      <Box
+        display="grid"
+        gap={2}
+        gridTemplateColumns={getColumns(columns)}
+        minWidth="fit-content"
+        width={width}
+      >
+        {children}
+      </Box>
+    </Root>
+  );
+});
+
+RadioGridGroupRoot.displayName = componentName;

packages/web-ui/src/components/RadioGridGroup/index.ts

@@ -1,2 +1,4 @@
 export { RadioGridGroup } from './RadioGridGroup';
 export type { RadioGridGroupProps } from './RadioGridGroup.props';
+export { RadioGridGroupRoot } from './RadioGridGroupRoot';
+export type { RadioGridGroupRootProps } from './RadioGridGroupRoot.props';