fix: #205

kobaltedev · May 4, 2023 · 7b3f414 · 7b3f414
1 parent c12b93a
commit 7b3f414
Show file tree

Hide file tree

Showing 3 changed files with 46 additions and 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
@@ -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
@@ -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
@@ -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");
+        }
+      });
     });
   });
 });