[ui][radio list] support required, disabled and item descriptions

apps/storybook/stories/radio-list.stories.tsx

@@ -83,6 +83,7 @@ export function Controlled() {
 
   return (
     <RadioList
+      description="You will be served it during dinner"
       label="Choose a fruit"
       value={value}
       onChange={(newValue: string) => setValue(newValue)}>
@@ -93,6 +94,132 @@ export function Controlled() {
   );
 }
 
+export function Required() {
+  const items = [
+    {
+      label: 'Apple',
+      value: 'apple',
+    },
+    {
+      label: 'Banana',
+      value: 'banana',
+    },
+    {
+      label: 'Orange',
+      value: 'orange',
+    },
+  ];
+
+  const [value, setValue] = useState('apple');
+
+  return (
+    <RadioList
+      description="You will be served it during dinner"
+      label="Choose a fruit"
+      required={true}
+      value={value}
+      onChange={(newValue: string) => setValue(newValue)}>
+      {items.map(({ label: itemLabel, value: itemValue }) => (
+        <RadioList.Item key={itemLabel} label={itemLabel} value={itemValue} />
+      ))}
+    </RadioList>
+  );
+}
+
+export function Disabled() {
+  const items = [
+    {
+      description: 'A red fruit',
+      disabled: false,
+      label: 'Apple',
+      value: 'apple',
+    },
+    {
+      description: 'A yellow fruit',
+      disabled: true,
+      label: 'Banana',
+      value: 'banana',
+    },
+    {
+      description: 'An orange fruit',
+      disabled: false,
+      label: 'Orange',
+      value: 'orange',
+    },
+  ];
+
+  const [value, setValue] = useState('apple');
+
+  return (
+    <div className="space-y-4">
+      <RadioList
+        disabled={true}
+        label="Choose a fruit (all fruits disabled)"
+        value={value}
+        onChange={(newValue: string) => setValue(newValue)}>
+        {items.map(({ label: itemLabel, value: itemValue }) => (
+          <RadioList.Item key={itemLabel} label={itemLabel} value={itemValue} />
+        ))}
+      </RadioList>
+      <HorizontalDivider />
+      <RadioList
+        defaultValue={value}
+        label="Choose a fruit (some fruits disabled)"
+        name="fruit-5">
+        {items.map(
+          ({ description, label: itemLabel, value: itemValue, disabled }) => (
+            <RadioList.Item
+              key={itemLabel}
+              description={description}
+              disabled={disabled}
+              label={itemLabel}
+              value={itemValue}
+            />
+          ),
+        )}
+      </RadioList>
+    </div>
+  );
+}
+
+export function ItemDescriptions() {
+  const items = [
+    {
+      description: 'A red fruit',
+      label: 'Apple',
+      value: 'apple',
+    },
+    {
+      description: 'A yellow fruit',
+      label: 'Banana',
+      value: 'banana',
+    },
+    {
+      description: 'An orange fruit',
+      label: 'Orange',
+      value: 'orange',
+    },
+  ];
+
+  const [value, setValue] = useState('apple');
+
+  return (
+    <RadioList
+      label="Choose a fruit"
+      value={value}
+      onChange={(newValue: string) => setValue(newValue)}>
+      {items.map(({ description, label: itemLabel, value: itemValue }) => (
+        <RadioList.Item
+          key={itemValue}
+          description={description}
+          label={itemLabel}
+          value={itemValue}
+        />
+      ))}
+    </RadioList>
+  );
+}
+
 export function Orientation() {
   const items = [
     {

packages/ui/src/RadioList/RadioList.tsx

@@ -1,5 +1,6 @@
 import clsx from 'clsx';
 import type { ChangeEvent } from 'react';
+import { useId } from 'react';
 
 import { RadioListContext } from './RadioListContext';
 import RadioListItem from './RadioListItem';
@@ -10,11 +11,13 @@ type Props<T> = Readonly<{
   children: ReadonlyArray<React.ReactElement<typeof RadioListItem>>;
   defaultValue?: T;
   description?: string;
+  disabled?: boolean;
   isLabelHidden?: boolean;
   label: string;
   name?: string;
   onChange?: (value: T, event: ChangeEvent<HTMLInputElement>) => void;
   orientation?: RadioListOrientation;
+  required?: boolean;
   value?: T;
 }>;
 
@@ -24,35 +27,47 @@ export default function RadioList<T>({
   children,
   defaultValue,
   description,
+  disabled,
   orientation = 'vertical',
   isLabelHidden,
   name,
   label,
+  required,
   value,
   onChange,
 }: Props<T>) {
+  const labelId = useId();
   return (
-    // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+    <RadioListContext.Provider
-    // @ts-ignore TODO: Figure out how to type the onChange.
+      // eslint-disable-next-line @typescript-eslint/ban-ts-comment
-    <RadioListContext.Provider value={{ defaultValue, name, onChange, value }}>
+      // @ts-ignore TODO: Figure out how to type the onChange.
+      value={{ defaultValue, disabled, name, onChange, value }}>
       <div>
-        <div className={clsx(isLabelHidden ? 'sr-only' : 'mb-4')}>
+        <div className={clsx(isLabelHidden ? 'sr-only' : 'mb-2')}>
-          <label className="text-base font-medium text-gray-900">{label}</label>
+          <label className="text-sm font-medium text-gray-900" id={labelId}>
+            {label}
+            {required && (
+              <span aria-hidden="true" className="text-danger-500">
+                {' '}
+                *
+              </span>
+            )}
+          </label>
           {description && (
-            <p className="text-sm leading-5 text-gray-500">{description}</p>
+            <p className="text-xs leading-5 text-gray-500">{description}</p>
           )}
         </div>
-        <fieldset>
+        <div
-          <legend className="sr-only">TODO</legend>
+          aria-labelledby={labelId}
-          <div
+          aria-required={required != null ? required : undefined}
-            className={clsx(
+          className={clsx(
-              'space-y-4',
+            'space-y-2',
-              orientation === 'horizontal' &&
+            orientation === 'horizontal' &&
-                'sm:flex sm:items-center sm:space-y-0 sm:space-x-10',
+              'sm:flex sm:items-center sm:space-y-0 sm:space-x-10',
-            )}>
+          )}
-            {children}
+          role="radiogroup">
-          </div>
+          {children}
-        </fieldset>
+        </div>
       </div>
     </RadioListContext.Provider>
   );

packages/ui/src/RadioList/RadioListContext.ts

@@ -3,6 +3,7 @@ import { createContext, useContext } from 'react';
 
 type RadioListContextValue<T = unknown> = {
   defaultValue?: T;
+  disabled?: boolean;
   name?: string;
   onChange?: (
     value: T,

packages/ui/src/RadioList/RadioListItem.tsx

@@ -1,42 +1,78 @@
+import clsx from 'clsx';
 import { useId } from 'react';
 
 import { useRadioListContext } from './RadioListContext';
 
 type Props<T> = Readonly<{
-  label?: string;
+  description?: string;
+  disabled?: boolean;
+  label: string;
   value: T;
 }>;
 
-export default function RadioListItem<T>({ label, value }: Props<T>) {
+export default function RadioListItem<T>({
+  description,
+  disabled: disabledProp = false,
+  label,
+  value,
+}: Props<T>) {
   const id = useId();
+  const descriptionId = useId();
   const context = useRadioListContext();
+  const disabled = context?.disabled ?? disabledProp;
 
   return (
-    <div className="flex items-center">
+    <div
-      <input
+      className={clsx(
-        checked={context?.value != null ? value === context?.value : undefined}
+        'relative flex',
-        className="text-primary-600 focus:ring-primary-500 h-4 w-4 border-gray-300"
+        // Vertically center only when there's no description.
-        defaultChecked={
+        description == null && 'items-center',
-          context?.defaultValue != null
+      )}>
-            ? value === context?.defaultValue
+      <div className="flex h-5 items-center">
-            : undefined
+        <input
-        }
+          aria-describedby={description != null ? descriptionId : undefined}
-        id={id}
+          checked={
-        name={context?.name}
+            context?.value != null ? value === context?.value : undefined
-        type="radio"
+          }
-        onChange={
+          className={clsx(
-          context?.onChange != null
+            'text-primary-600 focus:ring-primary-500 h-4 w-4 border-slate-300',
-            ? (event) => {
+            disabled && 'bg-slate-100',
-                context?.onChange?.(value, event);
+          )}
-              }
+          defaultChecked={
-            : undefined
+            context?.defaultValue != null
-        }
+              ? value === context?.defaultValue
-      />
+              : undefined
-      <label
+          }
-        className="ml-3 block text-sm font-medium text-gray-700"
+          disabled={disabled}
-        htmlFor={id}>
+          id={id}
-        {label}
+          name={context?.name}
-      </label>
+          type="radio"
+          onChange={
+            context?.onChange != null
+              ? (event) => {
+                  context?.onChange?.(value, event);
+                }
+              : undefined
+          }
+        />
+      </div>
+      <div className="ml-3 text-sm">
+        <label
+          className={clsx(
+            'block font-medium',
+            disabled ? 'text-slate-400' : 'text-slate-700',
+          )}
+          htmlFor={id}>
+          {label}
+        </label>
+        {description && (
+          <p
+            className={clsx(disabled ? 'text-slate-400' : 'text-slate-500')}
+            id={descriptionId}>
+            {description}
+          </p>
+        )}
+      </div>
     </div>
   );
 }