fix(checkboxGroup): vertically align label with checkbox

form-atoms · Nov 28, 2023 · a33dc21 · a33dc21
1 parent 4a7d8d0
commit a33dc21
Show file tree

Hide file tree

Showing 5 changed files with 40 additions and 26 deletions.
diff --git a/src/components/checkbox-group-field/CheckboxGroupField.tsx b/src/components/checkbox-group-field/CheckboxGroupField.tsx
@@ -5,6 +5,7 @@ import {
   ZodArrayField,
 } from "@form-atoms/field";
 import { Checkbox, HelperText, Label } from "flowbite-react";
+import { Option as BaseOption, type OptionRenderProp } from "@/components";
 
 import { FlowbiteField } from "../field";
 
@@ -16,8 +17,11 @@ export const CheckboxGroupField = <Option, Field extends ZodArrayField>({
   label,
   required,
   helperText,
+  Option = BaseOption,
   ...uiProps
-}: UseCheckboxGroupProps<Option, Field> & FieldProps<Field>) => {
+}: UseCheckboxGroupProps<Option, Field> &
+  FieldProps<Field> &
+  OptionRenderProp) => {
   const checkboxGroup = useCheckboxGroup({
     field,
     options,
@@ -36,15 +40,15 @@ export const CheckboxGroupField = <Option, Field extends ZodArrayField>({
         return (
           <>
             {checkboxGroup.map((checkboxProps) => (
-              <div key={checkboxProps.id} className="flex gap-2">
+              <Option key={checkboxProps.id}>
                 <Checkbox
                   role="checkbox"
                   {...uiProps}
                   {...fieldProps}
                   {...checkboxProps}
                 />
                 <Label htmlFor={checkboxProps.id}>{checkboxProps.label}</Label>
-              </div>
+              </Option>
             ))}
             {helperText && <HelperText color={color}>{helperText}</HelperText>}
           </>

diff --git a/src/components/index.ts b/src/components/index.ts
@@ -1,8 +1,10 @@
-export * from "./list-field";
 export * from "./checkbox-field";
 export * from "./checkbox-group-field";
+export * from "./field";
 export * from "./file-field";
+export * from "./list-field";
 export * from "./number-field";
+export * from "./option";
 export * from "./radio-field";
 export * from "./rating-field";
 export * from "./required-indicator";

diff --git a/src/components/option/Option.tsx b/src/components/option/Option.tsx
@@ -0,0 +1,8 @@
+import { PropsWithChildren } from "react";
+import { type RenderProp } from "react-render-prop-type";
+
+export type OptionRenderProp = RenderProp<PropsWithChildren, "Option">;
+
+export const Option = (props: PropsWithChildren) => (
+  <div className="flex items-center gap-2" {...props} />
+);
diff --git a/src/components/option/index.ts b/src/components/option/index.ts
@@ -0,0 +1 @@
+export * from "./Option";
diff --git a/src/components/radio-field/RadioField.tsx b/src/components/radio-field/RadioField.tsx
@@ -7,7 +7,11 @@ import {
 } from "@form-atoms/field";
 import { HelperText, Label, Radio } from "flowbite-react";
 import { RenderProp } from "react-render-prop-type";
-import { FlowbiteField } from "../field";
+import {
+  FlowbiteField,
+  Option as BaseOption,
+  type OptionRenderProp,
+} from "@/components";
 import { Fragment, PropsWithChildren } from "react";
 
 export const RadioField = <Option, Field extends SelectField>({
@@ -19,14 +23,11 @@ export const RadioField = <Option, Field extends SelectField>({
   helperText,
   required,
   Container = Fragment,
-  RadioItem = Fragment,
+  Option = BaseOption,
   ...uiProps
 }: RadioGroupProps<Option, Field> &
   Omit<FieldProps<Field>, "field"> &
-  Partial<
-    RenderProp<PropsWithChildren, "Container"> &
-      RenderProp<PropsWithChildren, "RadioItem">
-  >) => {
+  Partial<RenderProp<PropsWithChildren, "Container"> & OptionRenderProp>) => {
   // @ts-ignore
   const props = useSelectFieldProps({ field, options, getValue });
   const { renderOptions } = useOptions({ field, options, getLabel });
@@ -41,22 +42,20 @@ export const RadioField = <Option, Field extends SelectField>({
       {({ color, helperText, id: fieldId, ...fieldProps }) => (
         <Container>
           {renderOptions.map(({ id, value, label }) => (
-            <RadioItem key={id}>
-              <div className="flex items-center gap-2">
-                <Radio
-                  {...props}
-                  role="radio"
-                  {...uiProps}
-                  {...fieldProps}
-                  id={id}
-                  value={value}
-                  name={props.name ?? fieldId}
-                  checked={props.value === value}
-                  aria-checked={props.value === value}
-                />
-                <Label htmlFor={id}>{label}</Label>
-              </div>
-            </RadioItem>
+            <Option key={id}>
+              <Radio
+                {...props}
+                role="radio"
+                {...uiProps}
+                {...fieldProps}
+                id={id}
+                value={value}
+                name={props.name ?? fieldId}
+                checked={props.value === value}
+                aria-checked={props.value === value}
+              />
+              <Label htmlFor={id}>{label}</Label>
+            </Option>
           ))}
           {helperText && <HelperText color={color}>{helperText}</HelperText>}
         </Container>