From 7b3f414d74ac12edd17b732b184f026268356e59 Mon Sep 17 00:00:00 2001
From: Fabien MARIE-LOUISE <fabienml.dev@gmail.com>
Date: Thu, 4 May 2023 08:59:13 +0200
Subject: [PATCH] fix: #205

---
 .../radio-group/radio-group-item-context.tsx  |  2 +
 .../core/src/radio-group/radio-group-item.tsx |  3 +-
 .../core/src/radio-group/radio-group.test.tsx | 46 +++++++++++++++++--
 3 files changed, 46 insertions(+), 5 deletions(-)

diff --git a/packages/core/src/radio-group/radio-group-item-context.tsx b/packages/core/src/radio-group/radio-group-item-context.tsx
index d8b1df8b..8bf260af 100644
--- a/packages/core/src/radio-group/radio-group-item-context.tsx
+++ b/packages/core/src/radio-group/radio-group-item-context.tsx
@@ -4,7 +4,9 @@ export interface RadioGroupItemDataSet {
   "data-valid": string | undefined;
   "data-invalid": string | undefined;
   "data-checked": string | undefined;
+  "data-required": string | undefined;
   "data-disabled": string | undefined;
+  "data-readonly": string | undefined;
 }
 
 export interface RadioGroupItemContextValue {
diff --git a/packages/core/src/radio-group/radio-group-item.tsx b/packages/core/src/radio-group/radio-group-item.tsx
index 1178bccc..590c4206 100644
--- a/packages/core/src/radio-group/radio-group-item.tsx
+++ b/packages/core/src/radio-group/radio-group-item.tsx
@@ -69,8 +69,7 @@ export function RadioGroupItem(props: RadioGroupItemProps) {
   };
 
   const dataset: Accessor<RadioGroupItemDataSet> = createMemo(() => ({
-    "data-valid": formControlContext.dataset()["data-valid"],
-    "data-invalid": formControlContext.dataset()["data-invalid"],
+    ...formControlContext.dataset(),
     "data-checked": isSelected() ? "" : undefined,
     "data-disabled": isDisabled() ? "" : undefined,
   }));
diff --git a/packages/core/src/radio-group/radio-group.test.tsx b/packages/core/src/radio-group/radio-group.test.tsx
index d1be38c7..7a440ccd 100644
--- a/packages/core/src/radio-group/radio-group.test.tsx
+++ b/packages/core/src/radio-group/radio-group.test.tsx
@@ -1312,9 +1312,9 @@ describe("RadioGroup", () => {
         }
       });
 
-      it("should have 'data-checked' attribute on checked radio", async () => {
+      it("should have 'data-required' attribute on radios when radio group is required", async () => {
         render(() => (
-          <RadioGroup.Root value="cats">
+          <RadioGroup.Root value="cats" required>
             <RadioGroup.Item data-testid="radio-root" value="cats">
               <RadioGroup.ItemInput />
               <RadioGroup.ItemControl data-testid="radio-control">
@@ -1328,7 +1328,27 @@ describe("RadioGroup", () => {
         const elements = screen.getAllByTestId(/^radio/);
 
         for (const el of elements) {
-          expect(el).toHaveAttribute("data-checked");
+          expect(el).toHaveAttribute("data-required");
+        }
+      });
+
+      it("should have 'data-readonly' attribute on radios when radio group is readonly", async () => {
+        render(() => (
+          <RadioGroup.Root value="cats" readOnly>
+            <RadioGroup.Item data-testid="radio-root" value="cats">
+              <RadioGroup.ItemInput />
+              <RadioGroup.ItemControl data-testid="radio-control">
+                <RadioGroup.ItemIndicator data-testid="radio-indicator" />
+              </RadioGroup.ItemControl>
+              <RadioGroup.ItemLabel data-testid="radio-label">Cats</RadioGroup.ItemLabel>
+            </RadioGroup.Item>
+          </RadioGroup.Root>
+        ));
+
+        const elements = screen.getAllByTestId(/^radio/);
+
+        for (const el of elements) {
+          expect(el).toHaveAttribute("data-readonly");
         }
       });
 
@@ -1371,6 +1391,26 @@ describe("RadioGroup", () => {
           expect(el).toHaveAttribute("data-disabled");
         }
       });
+
+      it("should have 'data-checked' attribute on checked radio", async () => {
+        render(() => (
+          <RadioGroup.Root value="cats">
+            <RadioGroup.Item data-testid="radio-root" value="cats">
+              <RadioGroup.ItemInput />
+              <RadioGroup.ItemControl data-testid="radio-control">
+                <RadioGroup.ItemIndicator data-testid="radio-indicator" />
+              </RadioGroup.ItemControl>
+              <RadioGroup.ItemLabel data-testid="radio-label">Cats</RadioGroup.ItemLabel>
+            </RadioGroup.Item>
+          </RadioGroup.Root>
+        ));
+
+        const elements = screen.getAllByTestId(/^radio/);
+
+        for (const el of elements) {
+          expect(el).toHaveAttribute("data-checked");
+        }
+      });
     });
   });
 });