[sparkle] - refactor: update RadioGroup to support ReactNode labels

- Removed `Label` component import, allowing more flexible `label` prop types in `RadioGroupItem` - Replaced static text labels with JSX labels in `RadioGroup.stories` - Simplified the wrapper div class logic for RadioGroupItem components - Enhanced `RadioGroupWithChildrenExample` with additional icon and style adjustments
dust-tt · Nov 19, 2024 · 18a3e0e · 18a3e0e
1 parent 89e9870
commit 18a3e0e
Show file tree

Hide file tree

Showing 2 changed files with 17 additions and 16 deletions.
diff --git a/sparkle/src/components/RadioGroup.tsx b/sparkle/src/components/RadioGroup.tsx
@@ -2,7 +2,6 @@ import * as RadioGroupPrimitive from "@radix-ui/react-radio-group";
 import { cva, VariantProps } from "class-variance-authority";
 import * as React from "react";
 
-import { Label } from "@sparkle/components/Label";
 import { Tooltip } from "@sparkle/components/Tooltip";
 import { cn } from "@sparkle/lib/utils";
 
@@ -61,7 +60,7 @@ interface RadioGroupItemProps
     VariantProps<typeof radioStyles> {
   tooltipMessage?: string;
   tooltipAsChild?: boolean;
-  label?: string;
+  label?: React.ReactNode;
 }
 
 const RadioGroupItem = React.forwardRef<
@@ -102,15 +101,11 @@ const RadioGroupItem = React.forwardRef<
         ) : (
           item
         )}
-        {label && <Label>{label}</Label>}
+        {label}
       </div>
     );
 
-    return (
-      <div className={cn("s-group", size === "sm" ? "s-h-5" : "s-h-4")}>
-        {wrappedItem}
-      </div>
-    );
+    return <div className="s-group">{wrappedItem}</div>;
   }
 );
 

diff --git a/sparkle/src/stories/RadioGroup.stories.tsx b/sparkle/src/stories/RadioGroup.stories.tsx
@@ -3,6 +3,7 @@ import React from "react";
 
 import {
   Button,
+  FolderIcon,
   Icon,
   Label,
   LockIcon,
@@ -24,21 +25,21 @@ export const RadioGroupExample = () => {
           <RadioGroupItem
             value="option-one"
             id="option-one"
-            label="Option One"
+            label={<Label htmlFor="option-one">Option One</Label>}
           />
         </div>
         <div className="s-flex s-items-center s-space-x-2">
           <RadioGroupItem
             value="option-two"
             id="option-two"
-            label="Option Two"
+            label={<Label htmlFor="option-two">Option Two</Label>}
           />
         </div>
         <div className="s-flex s-items-center s-space-x-2">
           <RadioGroupItem
             value="option-three"
             id="option-three"
-            label="Option Three"
+            label={<Label htmlFor="option-two">Option Three</Label>}
           />
         </div>
       </RadioGroup>
@@ -49,7 +50,7 @@ export const RadioGroupExample = () => {
             id="option-four"
             size="sm"
             tooltipMessage="This is a nice tooltip message"
-            label="Option One"
+            label={<Label htmlFor="option-one">Option One</Label>}
           />
         </div>
         <div className="s-flex s-items-center s-space-x-2">
@@ -58,15 +59,15 @@ export const RadioGroupExample = () => {
             id="option-five"
             size="sm"
             disabled
-            label="Option Two"
+            label={<Label htmlFor="option-two">Option Two</Label>}
           />
         </div>
         <div className="s-flex s-items-center s-space-x-2">
           <RadioGroupItem
             value="option-six"
             id="option-three"
             size="sm"
-            label="Option Three"
+            label={<Label htmlFor="option-three">Option Three</Label>}
           />
         </div>
       </RadioGroup>
@@ -93,10 +94,15 @@ export const RadioGroupWithChildrenExample = () => {
           <RadioGroupChoice
             value={choice.id}
             iconPosition="start"
-            label={choice.label}
+            label={
+              <div className="s-flex s-items-center s-gap-2">
+                <Icon visual={LockIcon} />
+                <Label>{choice.label}</Label>
+              </div>
+            }
           >
             <div className="s-flex s-items-center s-gap-2 s-border s-border-red-500 s-p-2">
-              <Icon visual={LockIcon} />
+              <Icon visual={FolderIcon} />
               <Label>{choice.label}</Label>
               <Button label="Click me" />
             </div>