🤷‍♂️

gitpod-io · Nov 14, 2023 · 18005dd · 18005dd
1 parent 5c575a6
commit 18005dd
Showing 1 changed file with 10 additions and 14 deletions.
diff --git a/components/dashboard/src/components/podkit/forms/RadioListField.tsx b/components/dashboard/src/components/podkit/forms/RadioListField.tsx
@@ -20,6 +20,7 @@ type RadioListFieldProps = {
     topMargin?: boolean;
     onChange: (value: string) => void;
     children: RadioListItem[];
+    className?: string;
 };
 
 export const RadioGroupItem = React.forwardRef<
@@ -30,8 +31,7 @@ export const RadioGroupItem = React.forwardRef<
         <RadioGroup.Item
             ref={ref}
             className={cn(
-                "aspect-square rounded-full border ring-offset-white dark:ring-offset-gray-800 focus:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50",
-                "border-gray-600 dark:border-gray-900 bg-transparent",
+                "aspect-square h-4 w-4 rounded-full border ring-offset-white dark:ring-offset-gray-800 focus:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50",
                 "dark:accent-kumquat-ripe accent-gitpod-black",
                 className,
             )}
@@ -58,6 +58,7 @@ export const RadioListField: React.FC<RadioListFieldProps> = ({
     topMargin = true,
     onChange,
     children,
+    className,
 }) => {
     const maybeId = useId();
     const elementId = id || maybeId;
@@ -72,24 +73,19 @@ export const RadioListField: React.FC<RadioListFieldProps> = ({
     return (
         <InputField error={error} topMargin={topMargin}>
             <RadioGroup.Root
-                className="flex flex-col gap-2"
+                className={cn("grid gap-2", className)}
                 value={selectedValue}
                 onValueChange={handleChange}
                 aria-labelledby={elementId}
             >
                 {children.map((child, index) => (
                     <div key={index} className="flex flex-col">
-                        <div className="flex items-center">
-                            {React.cloneElement(child.radio, {
-                                id: `${elementId}-${index}`,
-                            })}
-                            <label
-                                className="text-sm font-semibold pl-2 cursor-pointer"
-                                htmlFor={`${elementId}-${index}`}
-                            >
-                                {child.label}
-                            </label>
-                        </div>
+                        {React.cloneElement(child.radio, {
+                            id: `${elementId}-${index}`,
+                        })}
+                        <label className="text-sm font-semibold pl-2 cursor-pointer" htmlFor={`${elementId}-${index}`}>
+                            {child.label}
+                        </label>
                         {child.hint && <InputFieldHint>{child.hint}</InputFieldHint>}
                     </div>
                 ))}