Revert "fix(RadioGroup): make it easier to select options"

This reverts commit ad7ce79.
bleu · May 6, 2024 · 55a0a28 · 55a0a28
1 parent 9657487
commit 55a0a28
Show file tree

Hide file tree

Showing 4 changed files with 27 additions and 61 deletions.
diff --git a/.eslintrc.js b/.eslintrc.js
@@ -39,8 +39,6 @@ module.exports = {
     "react/jsx-filename-extension": "off",
     "react/jsx-props-no-spreading": "off",
     "react/require-default-props": "off",
-    "react/react-in-jsx-scope": "off",
-    "react/jsx-uses-react": "off",
     "typescript-sort-keys/interface": "error",
     "typescript-sort-keys/string-enum": "error",
     "unused-imports/no-unused-imports": "error",

diff --git a/src/components/FormBuilder/fields/RadioGroupField.tsx b/src/components/FormBuilder/fields/RadioGroupField.tsx
@@ -1,3 +1,4 @@
+import React from "react";
 import { cva } from "class-variance-authority";
 import { cn } from "#/lib/utils";
 import {
@@ -9,11 +10,7 @@ import {
   FormMessage,
 } from "#/components/ui/Form";
 import { Label } from "#/components/ui/Label";
-import {
-  RadioGroup,
-  RadioGroupItem,
-  RadioGroupItemWithChildren,
-} from "#/components/ui/RadioGroup";
+import { RadioGroup, RadioGroupItem } from "#/components/ui/RadioGroup";
 import { BaseField, withConditional } from "../fields";
 
 export interface RadioGroupFieldProps extends BaseField {
@@ -58,25 +55,25 @@ const RadioGroupWithoutSection = ({ form, field }) => (
         <FormControl>
           <RadioGroup
             value={rcfField.value}
-            className={cn(radioGroupVariants(field))}
+            className={cn(radioGroupVariants(field), "py-2")}
           >
-            {field.options.map((option, idx) => (
+            {field.options.map((option) => (
               <FormItem
                 key={option.value}
-                className={cn("", {
-                  "p-2": idx !== field.options.length - 1 && idx > 1,
-                })}
+                className="flex items-center space-x-1 space-y-0"
               >
-                <FormControl>
-                  <RadioGroupItemWithChildren value={option.value}>
-                    <FormLabel
-                      className="text-sm font-normal ml-1 select-none cursor-pointer"
-                      tooltip={option.tooltip}
-                    >
-                      {option.label}
-                    </FormLabel>
-                  </RadioGroupItemWithChildren>
+                <FormControl
+                  onClick={() => {
+                    rcfField.onChange(
+                      rcfField.value === option.value ? null : option.value
+                    );
+                  }}
+                >
+                  <RadioGroupItem value={option.value} />
                 </FormControl>
+                <FormLabel className="font-normal" tooltip={option.tooltip}>
+                  {option.label}
+                </FormLabel>
               </FormItem>
             ))}
           </RadioGroup>

diff --git a/src/components/ui/Form.tsx b/src/components/ui/Form.tsx
@@ -215,22 +215,18 @@ const FormLabel = React.forwardRef<
 >(({ className, tooltip, ...props }, ref) => {
   const { error, formItemId } = useFormField();
 
-  const label = (
-    <Label
-      ref={ref}
-      className={cn(error && "text-destructive", className)}
-      htmlFor={formItemId}
-      {...props}
-    />
-  );
-  return tooltip ? (
-    <Tooltip content={tooltip} className="flex items-center gap-x-2">
-      <div className="inline-flex space-x-1">
-        {label} <InfoCircledIcon />
+  return (
+    <Tooltip content={tooltip}>
+      <div className="flex items-center gap-x-2">
+        <Label
+          ref={ref}
+          className={cn(error && "text-destructive", className)}
+          htmlFor={formItemId}
+          {...props}
+        />
+        {tooltip && <InfoCircledIcon />}
       </div>
     </Tooltip>
-  ) : (
-    label
   );
 });
 FormLabel.displayName = "FormLabel";

diff --git a/src/components/ui/RadioGroup.tsx b/src/components/ui/RadioGroup.tsx
@@ -34,29 +34,4 @@ const RadioGroupItem = React.forwardRef<
 ));
 RadioGroupItem.displayName = RadioGroupPrimitive.Item.displayName;
 
-const RadioGroupItemWithChildren = React.forwardRef<
-  React.ElementRef<typeof RadioGroupPrimitive.Item>,
-  React.ComponentPropsWithoutRef<typeof RadioGroupPrimitive.Item> & {
-    children: React.ReactNode;
-  }
->(({ className, children, ...props }, ref) => (
-  // eslint-disable-next-line jsx-a11y/label-has-associated-control
-  <label className="flex items-center space-x-2 cursor-pointer">
-    <RadioGroupPrimitive.Item
-      ref={ref}
-      className={cn(
-        "border-primary text-primary ring-offset-background focus-visible:ring-ring data-[state=checked]:bg-primary data-[state=checked]:text-primary-foreground aspect-square h-4 w-4 rounded-full border focus:outline-none focus-visible:ring-2 focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50",
-        className
-      )}
-      {...props}
-    >
-      <RadioGroupPrimitive.Indicator className="flex items-center justify-center">
-        <Cross2Icon className="h-3 w-3" />
-      </RadioGroupPrimitive.Indicator>
-    </RadioGroupPrimitive.Item>
-    {children}
-  </label>
-));
-
-RadioGroupItemWithChildren.displayName = RadioGroupPrimitive.Item.displayName;
-export { RadioGroup, RadioGroupItemWithChildren, RadioGroupItem };
+export { RadioGroup, RadioGroupItem };