chore!: refactor Radio to use radix primitive

Author: joshuaellis

.changeset/beige-crabs-compete.md

@@ -0,0 +1,5 @@
+---
+'@strapi/design-system': major
+---
+
+chore!: refactor Radio to use radix primitive

docs/stories/00-getting started/migration guides/migration-v1-v2.mdx

@@ -205,6 +205,7 @@ for any of these components to understand better how to migrate your code.
 - `Accordion`
 - `Avatar`
 - `Popover`
+- `Radio`
 - `Tabs`
 - `Tooltip`
 

docs/stories/03-inputs/Radio.mdx

@@ -1,47 +1,76 @@
 import { Meta, Canvas } from '@storybook/blocks';
-import { Radio, RadioGroup } from '@strapi/design-system';
+import { Radio } from '@strapi/design-system';
 
 import * as RadioStories from './Radio.stories';
 
 <Meta of={RadioStories} />
 
 # Radio
 
-Radio buttons allow users to choose a single value from a range of options.
+- [Overview](#overview)
+- [Usage](#usage)
+- [Props](#props)
+- [Variants](#variants)
+- [Accessibility](#accessibility)
 
-**Best practices**
+## Overview
 
-- When a user picks an option, the previous one is automatically deselected.
-- Radio buttons should be used when there is at least two options.
-- Label of the Radio button should be concise and straightforward.
-- Use the Checkbox component if the user could select one or several values.
-- Start all Radio button labels with a capital letter.
-- There is no need to include Radio buttons in a Select component when only a single value can be selected.
-- Radio buttons should be used sparingly in the interface.
-- Radio buttons should be used only when it is not obvious enough that a choice is required.
-- Radio buttons should not be used in Table components.
-- Use Switch or Toggle component to make binary choices.
+Radio buttons allow users to choose a single value from a range of options.
 
-[View source](https://github.com/strapi/design-system/tree/main/packages/design-system/src/Radio)
+<ViewSource path="components/Radio" />
 
-## Imports
+## Usage
 
 ```js
-import { Radio, RadioGroup } from '@strapi/design-system';
+import { Radio } from '@strapi/design-system';
 ```
 
-## Usage
+<Canvas of={RadioStories.Base} />
+
+## Props
+
+### Radio.Group
+
+<TypeTable of={Radio.GroupProps} />
+
+### Radio.Item
+
+<TypeTable of={Radio.ItemProps} />
 
-Radio buttons allow users to choose a single value from a range of at least two options.
+## Variants
+
+### Basic
 
 <Canvas of={RadioStories.Base} />
 
-## Props
+### With initial value
+
+By default, no radio item is selected. You can set an initial value using the `defaultValue` prop. This behaviour can be
+useful if you require a value to be submitted.
+
+<Canvas of={RadioStories.DefaultValue} />
+
+### Controlled
+
+<Canvas of={RadioStories.Controlled} />
+
+### Disabled
+
+The below story shows passing `disabled` to the `Radio.Group` component. This will disable all radio items within.
+However, it is possible to disable individual items by passing `disabled` to said `Radio.Item`.
+
+<Canvas of={RadioStories.Disabled} />
+
+### With Label
 
-### Radio
+The `Radio.Group` component requires a label of some description. This can either be via the `aria-label` attribute or
+alternatively if you want to show the label you can use `aria-labelledby` & share the `id` with the respective label
+Element.
 
-<TypeTable of={Radio} />
+<Canvas of={RadioStories.WithLabel} />
 
-### RadioGroup
+## Accessibility
 
-<TypeTable of={RadioGroup} />
+Adheres to the [Radio Group WAI-ARIA design pattern](https://www.w3.org/WAI/ARIA/apg/patterns/radio/) and uses
+[roving tabindex](https://www.w3.org/WAI/ARIA/apg/patterns/radio/examples/radio/) to manage focus movement among radio
+items.

docs/stories/03-inputs/Radio.stories.tsx

@@ -1,38 +1,82 @@
-import * as React from 'react';
+import { useId } from 'react';
 
 import { Meta, StoryObj } from '@storybook/react';
-import { Radio, RadioGroup, Typography } from '@strapi/design-system';
+import { fn } from '@storybook/test';
+import { Radio, Typography } from '@strapi/design-system';
 
-const meta: Meta<typeof Radio> = {
+type RadioArgs = Radio.GroupProps;
+
+const meta: Meta<RadioArgs> = {
   title: 'Inputs/Radio',
-  component: Radio,
+  component: Radio.Group,
+  argTypes: {
+    defaultValue: {
+      control: 'select',
+      options: ['system', 'light', 'dark'],
+    },
+  },
+  args: {
+    defaultValue: '',
+    disabled: false,
+    loop: true,
+    name: 'theme',
+    required: false,
+    onValueChange: fn(),
+  },
+  render: (args) => {
+    return (
+      <Radio.Group {...args} aria-label="Theme">
+        <Radio.Item value="system">System</Radio.Item>
+        <Radio.Item value="light">Light</Radio.Item>
+        <Radio.Item value="dark">Dark</Radio.Item>
+      </Radio.Group>
+    );
+  },
 };
 
 export default meta;
 
-type Story = StoryObj<typeof Radio>;
+type Story = StoryObj<RadioArgs>;
 
 export const Base = {
-  render: () => {
-    const [selected, setSelected] = React.useState<string>();
+  name: 'base',
+} satisfies Story;
+
+export const DefaultValue = {
+  args: {
+    defaultValue: 'system',
+  },
+  name: 'default value',
+} satisfies Story;
+
+export const Controlled = {
+  args: {
+    value: 'dark',
+  },
+  name: 'controlled',
+} satisfies Story;
+
+export const Disabled = {
+  args: {
+    disabled: true,
+  },
+  name: 'disabled',
+} satisfies Story;
+
+export const WithLabel = {
+  render: (args) => {
+    const id = useId();
 
     return (
-      <div>
-        <Typography variant="beta" id="trophy-champions">
-          Make a choice
+      <Radio.Group aria-labelledby={id} {...args}>
+        <Typography tag="label" id={id} variant="pi" textColor="neutral800" fontWeight="bold">
+          Select Theme
         </Typography>
-        <RadioGroup
-          labelledBy="trophy-champions"
-          onChange={(e) => setSelected(e.target.value)}
-          value={selected}
-          name="meal"
-        >
-          <Radio value="pizza">Pizza</Radio>
-          <Radio value="bagel">Bagel</Radio>
-        </RadioGroup>
-      </div>
+        <Radio.Item value="system">System</Radio.Item>
+        <Radio.Item value="light">Light</Radio.Item>
+        <Radio.Item value="dark">Dark</Radio.Item>
+      </Radio.Group>
     );
   },
-
-  name: 'base',
+  name: 'with label',
 } satisfies Story;

docs/stories/BaseRadio.mdx

@@ -21,6 +21,7 @@
     "@radix-ui/react-dropdown-menu": "2.0.6",
     "@radix-ui/react-focus-scope": "1.0.4",
     "@radix-ui/react-popover": "1.0.7",
+    "@radix-ui/react-radio-group": "1.1.3",
     "@radix-ui/react-scroll-area": "1.0.5",
     "@radix-ui/react-tabs": "1.0.4",
     "@radix-ui/react-tooltip": "1.0.7",