From 21e5e0672ad39b2d29effe9f4029161b93010a49 Mon Sep 17 00:00:00 2001
From: Yangshun Tay <tay.yang.shun@gmail.com>
Date: Sun, 9 Oct 2022 08:54:57 +0800
Subject: [PATCH] [ui][radio list] remove disabled prop on radio list level

---
 apps/storybook/stories/radio-list.stories.tsx | 24 +++++++------------
 packages/ui/src/RadioList/RadioList.tsx       |  6 ++---
 packages/ui/src/RadioList/RadioListContext.ts |  1 -
 packages/ui/src/RadioList/RadioListItem.tsx   |  8 ++++---
 4 files changed, 16 insertions(+), 23 deletions(-)

diff --git a/apps/storybook/stories/radio-list.stories.tsx b/apps/storybook/stories/radio-list.stories.tsx
index 4217bd13..91ca7b72 100644
--- a/apps/storybook/stories/radio-list.stories.tsx
+++ b/apps/storybook/stories/radio-list.stories.tsx
@@ -29,7 +29,11 @@ export default {
 export function Basic({
   description,
   label,
-}: Pick<React.ComponentProps<typeof RadioList>, 'description' | 'label'>) {
+  orientation,
+}: Pick<
+  React.ComponentProps<typeof RadioList>,
+  'description' | 'label' | 'orientation'
+>) {
   const items = [
     {
       label: 'Apple',
@@ -50,7 +54,8 @@ export function Basic({
       defaultValue="apple"
       description={description}
       label={label}
-      name="fruit">
+      name="fruit"
+      orientation={orientation}>
       {items.map(({ label: itemLabel, value }) => (
         <RadioList.Item key={itemLabel} label={itemLabel} value={value} />
       ))}
@@ -61,6 +66,7 @@ export function Basic({
 Basic.args = {
   description: 'Your favorite fruit',
   label: 'Choose a fruit',
+  orientation: 'vertical',
 };
 
 export function Controlled() {
@@ -148,22 +154,10 @@ export function Disabled() {
     },
   ];
 
-  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}
+        defaultValue="apple"
         label="Choose a fruit (some fruits disabled)"
         name="fruit-5">
         {items.map(
diff --git a/packages/ui/src/RadioList/RadioList.tsx b/packages/ui/src/RadioList/RadioList.tsx
index 974491f1..6919c819 100644
--- a/packages/ui/src/RadioList/RadioList.tsx
+++ b/packages/ui/src/RadioList/RadioList.tsx
@@ -11,7 +11,6 @@ type Props<T> = Readonly<{
   children: ReadonlyArray<React.ReactElement<typeof RadioListItem>>;
   defaultValue?: T;
   description?: string;
-  disabled?: boolean;
   isLabelHidden?: boolean;
   label: string;
   name?: string;
@@ -27,10 +26,9 @@ export default function RadioList<T>({
   children,
   defaultValue,
   description,
-  disabled,
-  orientation = 'vertical',
   isLabelHidden,
   name,
+  orientation = 'vertical',
   label,
   required,
   value,
@@ -41,7 +39,7 @@ export default function RadioList<T>({
     <RadioListContext.Provider
       // eslint-disable-next-line @typescript-eslint/ban-ts-comment
       // @ts-ignore TODO: Figure out how to type the onChange.
-      value={{ defaultValue, disabled, name, onChange, value }}>
+      value={{ defaultValue, name, onChange, value }}>
       <div>
         <div className={clsx(isLabelHidden ? 'sr-only' : 'mb-2')}>
           <label className="text-sm font-medium text-gray-900" id={labelId}>
diff --git a/packages/ui/src/RadioList/RadioListContext.ts b/packages/ui/src/RadioList/RadioListContext.ts
index 0e23210f..6058bc09 100644
--- a/packages/ui/src/RadioList/RadioListContext.ts
+++ b/packages/ui/src/RadioList/RadioListContext.ts
@@ -3,7 +3,6 @@ import { createContext, useContext } from 'react';
 
 type RadioListContextValue<T = unknown> = {
   defaultValue?: T;
-  disabled?: boolean;
   name?: string;
   onChange?: (
     value: T,
diff --git a/packages/ui/src/RadioList/RadioListItem.tsx b/packages/ui/src/RadioList/RadioListItem.tsx
index 3b852a89..3f80f5f9 100644
--- a/packages/ui/src/RadioList/RadioListItem.tsx
+++ b/packages/ui/src/RadioList/RadioListItem.tsx
@@ -12,14 +12,13 @@ type Props<T> = Readonly<{
 
 export default function RadioListItem<T>({
   description,
-  disabled: disabledProp = false,
+  disabled = false,
   label,
   value,
 }: Props<T>) {
   const id = useId();
   const descriptionId = useId();
   const context = useRadioListContext();
-  const disabled = context?.disabled ?? disabledProp;
 
   return (
     <div
@@ -67,7 +66,10 @@ export default function RadioListItem<T>({
         </label>
         {description && (
           <p
-            className={clsx(disabled ? 'text-slate-400' : 'text-slate-500')}
+            className={clsx(
+              'text-xs',
+              disabled ? 'text-slate-400' : 'text-slate-500',
+            )}
             id={descriptionId}>
             {description}
           </p>