fix(RadioGroup): make it easier to select options

closes CLICK-801
bleu · May 4, 2024 · ad7ce79 · ad7ce79
1 parent 610f874
commit ad7ce79
Show file tree

Hide file tree

Showing 4 changed files with 61 additions and 27 deletions.
diff --git a/.eslintrc.js b/.eslintrc.js
@@ -39,6 +39,8 @@ 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,4 +1,3 @@
-import React from "react";
 import { cva } from "class-variance-authority";
 import { cn } from "#/lib/utils";
 import {
@@ -10,7 +9,11 @@ import {
   FormMessage,
 } from "#/components/ui/Form";
 import { Label } from "#/components/ui/Label";
-import { RadioGroup, RadioGroupItem } from "#/components/ui/RadioGroup";
+import {
+  RadioGroup,
+  RadioGroupItem,
+  RadioGroupItemWithChildren,
+} from "#/components/ui/RadioGroup";
 import { BaseField, withConditional } from "../fields";
 
 export interface RadioGroupFieldProps extends BaseField {
@@ -55,25 +58,25 @@ const RadioGroupWithoutSection = ({ form, field }) => (
         <FormControl>
           <RadioGroup
             value={rcfField.value}
-            className={cn(radioGroupVariants(field), "py-2")}
+            className={cn(radioGroupVariants(field))}
           >
-            {field.options.map((option) => (
+            {field.options.map((option, idx) => (
               <FormItem
                 key={option.value}
-                className="flex items-center space-x-1 space-y-0"
+                className={cn("", {
+                  "p-2": idx !== field.options.length - 1 && idx > 1,
+                })}
               >
-                <FormControl
-                  onClick={() => {
-                    rcfField.onChange(
-                      rcfField.value === option.value ? null : option.value
-                    );
-                  }}
-                >
-                  <RadioGroupItem value={option.value} />
+                <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>
-                <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,18 +215,22 @@ const FormLabel = React.forwardRef<
 >(({ className, tooltip, ...props }, ref) => {
   const { error, formItemId } = useFormField();
 
-  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 />}
+  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 />
       </div>
     </Tooltip>
+  ) : (
+    label
   );
 });
 FormLabel.displayName = "FormLabel";

diff --git a/src/components/ui/RadioGroup.tsx b/src/components/ui/RadioGroup.tsx
@@ -34,4 +34,29 @@ const RadioGroupItem = React.forwardRef<
 ));
 RadioGroupItem.displayName = RadioGroupPrimitive.Item.displayName;
 
-export { RadioGroup, RadioGroupItem };
+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 };