chore!: refactor Checkbox to use radix primitive

Author: joshuaellis

.changeset/long-cats-flow.md

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

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

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

docs/stories/03-inputs/Checkbox.mdx

@@ -15,7 +15,8 @@ import * as CheckboxStories from './Checkbox.stories';
 
 ## Overview
 
-Checkboxes allow users to choose one or multiple values from a range of options.
+Checkboxes allow users to choose one or multiple values from a range of options. Use the
+[Radio](../?path=/docs/inputs-radio--docs) button component if the user should select only one value.
 
 <ViewSource path="components/Checkbox" />
 
@@ -27,10 +28,6 @@ Checkboxes allow users to choose one or multiple values from a range of options.
 import { Checkbox } from '@strapi/design-system';
 ```
 
-- Use the [Radio](../?path=/docs/inputs-radio--docs) button component if the user should select only one value.
-- Checkbox labels are aligned differently based on language direction: to the right in LTR languages and to the left in
-  RTL languages.
-
 ## Props
 
 <TypeTable of={Checkbox} />
@@ -41,11 +38,12 @@ import { Checkbox } from '@strapi/design-system';
 
 <Canvas of={CheckboxStories.Base} />
 
-### Checkbox Group
+### Indeterminate
 
-Partially selected options display as an indeterminate state at parent level
+The `checked` prop can be set to either a `boolean` value denoting checked or unchecked, or to `'indeterminate'`. This
+is useful when the checkbox is parent of a checkbox group and some, but not all, of the children checkboxes are checked.
 
-<Canvas of={CheckboxStories.CheckboxGroup} />
+<Canvas of={CheckboxStories.Indeterminate} />
 
 ### Disabled
 
@@ -54,14 +52,21 @@ another action first.
 
 <Canvas of={CheckboxStories.Disabled} />
 
-### Checkbox field
+### Without Label
+
+Some instances, such as being used in a table, you may want to have a checkbox without the visual label. If this is the
+case, you should instead supply the `aria-label` prop so it is still accessible.
+
+<Canvas of={CheckboxStories.WithoutLabel} />
+
+### With Name & Label
 
-Wrap the input in the necessary [`Field`](../?path=/docs/components-field--docs) component to create a powerful complete
-form input
+If using in a typical `form` element, you can provide a `name` and `value` prop that will be added to the `FormData` on
+submission. The story below fires a unique action `onSubmit` demonstrating this. However, if you're not using it within
+a `form`, you can omit this.
 
-<Canvas of={CheckboxStories.WithField} />
+<Canvas of={CheckboxStories.WithNameAndValue} />
 
 ## Accessibility
 
-- Checkbox has role of checkbox.
-- When Checkbox has focus, `Space` or `Enter` activates/deactivates it.
+Adheres to the [tri-state Checkbox WAI-ARIA design pattern](https://www.w3.org/WAI/ARIA/apg/patterns/checkbox/).

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

@@ -1,8 +1,8 @@
 import * as React from 'react';
 
-import { useArgs } from '@storybook/preview-api';
 import { Meta, StoryObj } from '@storybook/react';
-import { Checkbox, Field, Flex } from '@strapi/design-system';
+import { fn } from '@storybook/test';
+import { Button, Checkbox, Flex } from '@strapi/design-system';
 import { default as outdent } from 'outdent';
 
 const meta: Meta<typeof Checkbox> = {
@@ -15,37 +15,22 @@ const meta: Meta<typeof Checkbox> = {
       </Flex>
     ),
   ],
+  args: {
+    children: 'Remember me',
+    onCheckedChange: fn(),
+  },
   parameters: {
     chromatic: { disableSnapshot: false },
   },
+  render: (args) => {
+    return <Checkbox {...args} />;
+  },
 };
 export default meta;
 
 type Story = StoryObj<typeof Checkbox>;
 
-const Template: Story = {
-  render: ({ children, checked, ...props }) => {
-    const [, updateArgs] = useArgs();
-
-    const handleChange = () => {
-      updateArgs({ checked: !checked });
-    };
-
-    return (
-      <Checkbox {...props} value={checked} onChange={handleChange}>
-        {children}
-      </Checkbox>
-    );
-  },
-};
-
 export const Base = {
-  ...Template,
-  args: {
-    children: 'Label',
-    checked: false,
-  },
-
   parameters: {
     docs: {
       source: {
@@ -59,186 +44,67 @@ export const Base = {
   name: 'base',
 };
 
-export const CheckboxGroup = {
-  render: () => {
-    const [fruitsChecked, setFruitsChecked] = React.useState([true, false]);
-    const [veggiesChecked, setVeggiesChecked] = React.useState([true, true]);
-    const [sweetsChecked, setSweetsChecked] = React.useState([false, false]);
-    const allFruitsChecked = fruitsChecked.every(Boolean);
-    const allVeggiesChecked = veggiesChecked.every(Boolean);
-    const allSweetsChecked = sweetsChecked.every(Boolean);
-    const isFruitsIndeterminate = fruitsChecked.some(Boolean) && !allFruitsChecked;
-    const isVeggiesIndeterminate = veggiesChecked.some(Boolean) && !allVeggiesChecked;
-    const isSweetsIndeterminate = sweetsChecked.some(Boolean) && !allSweetsChecked;
-
-    return (
-      <ul>
-        <li>
-          <Checkbox
-            id="fruits"
-            name="fruits"
-            indeterminate={isFruitsIndeterminate}
-            onValueChange={(value) => setFruitsChecked([value, value])}
-            value={allFruitsChecked}
-          >
-            Fruits
-          </Checkbox>
-        </li>
-        <li>
-          <ul style={{ paddingLeft: '24px' }}>
-            <li>
-              <Checkbox
-                id="apple"
-                name="apple"
-                onValueChange={(value) => setFruitsChecked([value, fruitsChecked[1]])}
-                value={fruitsChecked[0]}
-              >
-                Apple
-              </Checkbox>
-            </li>
-            <li>
-              <Checkbox
-                id="banana"
-                name="banana"
-                onValueChange={(value) => setFruitsChecked([fruitsChecked[0], value])}
-                value={fruitsChecked[1]}
-              >
-                Banana
-              </Checkbox>
-            </li>
-          </ul>
-        </li>
-        <li>
-          <Checkbox
-            id="vegetables"
-            name="vegetables"
-            indeterminate={isVeggiesIndeterminate}
-            onValueChange={(value) => setVeggiesChecked([value, value])}
-            value={allVeggiesChecked}
-          >
-            Vegetables
-          </Checkbox>
-        </li>
-        <li>
-          <ul style={{ paddingLeft: '24px' }}>
-            <li>
-              <Checkbox
-                id="beans"
-                name="beans"
-                onValueChange={(value) => setVeggiesChecked([value, veggiesChecked[1]])}
-                value={veggiesChecked[0]}
-              >
-                Beans
-              </Checkbox>
-            </li>
-            <li>
-              <Checkbox
-                id="pumpkin"
-                name="pumpkin"
-                onValueChange={(value) => setVeggiesChecked([veggiesChecked[0], value])}
-                value={veggiesChecked[1]}
-              >
-                Pumpkin
-              </Checkbox>
-            </li>
-          </ul>
-        </li>
-        <li>
-          <Checkbox
-            id="sweets"
-            name="sweets"
-            indeterminate={isSweetsIndeterminate}
-            onValueChange={(value) => setSweetsChecked([value, value])}
-            value={allSweetsChecked}
-          >
-            Sweets
-          </Checkbox>
-        </li>
-        <li>
-          <ul style={{ paddingLeft: '24px' }}>
-            <li>
-              <Checkbox
-                id="chocolate"
-                name="chocolate"
-                onValueChange={(value) => setSweetsChecked([value, sweetsChecked[1]])}
-                value={sweetsChecked[0]}
-              >
-                Chocolate
-              </Checkbox>
-            </li>
-            <li>
-              <Checkbox
-                id="candy"
-                name="candy"
-                onValueChange={(value) => setSweetsChecked([sweetsChecked[0], value])}
-                value={sweetsChecked[1]}
-              >
-                Candy
-              </Checkbox>
-            </li>
-          </ul>
-        </li>
-      </ul>
-    );
+export const Indeterminate = {
+  argTypes: {
+    checked: {
+      control: 'select',
+      options: [true, false, 'indeterminate'],
+    },
   },
-
-  name: 'checkbox group',
+  args: {
+    checked: 'indeterminate',
+  },
+  name: 'indeterminate',
 } satisfies Story;
 
 export const Disabled = {
-  ...Template,
   args: {
-    ...Base.args,
     disabled: true,
   },
   name: 'disabled',
-
   parameters: {
     docs: {
       source: {
-        code: '<Checkbox disabled>Label</Checkbox>',
+        code: '<Checkbox disabled>Remember me</Checkbox>',
       },
     },
   },
 } satisfies Story;
 
-export const WithField = {
-  render: ({ checked, error, hint, children }) => {
-    const [, updateArgs] = useArgs();
-
-    const handleChange = () => {
-      updateArgs({ checked: !checked });
-    };
-
-    return (
-      <Field.Root id="with_field" error={error} hint={hint}>
-        <Checkbox value={checked} onChange={handleChange}>
-          {children}
-        </Checkbox>
-        <Field.Error />
-        <Field.Hint />
-      </Field.Root>
-    );
+export const WithoutLabel = {
+  args: {
+    children: null,
+    ['aria-label']: 'Select row 1',
   },
+  name: 'without label',
+} satisfies Story;
+
+export const WithNameAndValue = {
   args: {
-    ...Base.args,
-    error: 'Error',
-    hint: 'Description line lorem ipsum',
+    name: 'rememberMe',
+    value: 'yes',
+    onSubmit: fn(),
   },
-  parameters: {
-    docs: {
-      source: {
-        code: outdent`
-        <Field.Root id="with_field" error={error} hint={hint}>
-          <Checkbox value={checked} onChange={handleChange}>
-            {children}
-          </Checkbox>
-          <Field.Error />
-          <Field.Hint />
-        </Field.Root>
-        `,
-      },
-    },
+  render: ({ onSubmit, ...args }) => {
+    return (
+      <Flex
+        tag="form"
+        direction="column"
+        gap={4}
+        alignItems="flex-start"
+        onSubmit={(e) => {
+          e.preventDefault();
+          if (onSubmit) {
+            const data = new FormData(e.target as HTMLFormElement);
+            // @ts-expect-error – We're demonstrating `value` and `name` here.
+            onSubmit(data.get('rememberMe'));
+          }
+        }}
+      >
+        <Checkbox {...args} />
+        <Button type="submit">Submit</Button>
+      </Flex>
+    );
   },
-  name: 'with field',
-};
+  name: 'with name and value',
+} satisfies Story;