feat: add description in boolean field#75
feat: add description in boolean field#75joshunrau merged 1 commit intoDouglasNeuroInformatics:mainfrom
Conversation
WalkthroughAdds an optional description prop to BooleanFieldCheckbox and BooleanFieldRadio, rendering it via FieldGroup.Description within the existing FieldGroup layout. Public component signatures are updated to include description. No changes to value handling, error logic, or other behavior. Changes
Sequence Diagram(s)sequenceDiagram
participant U as User
participant C as BooleanFieldCheckbox/Radio
participant FG as FieldGroup
participant D as FieldGroup.Description
U->>C: Render with { label, value, description? }
C->>FG: Render FieldGroup (label, error, readOnly, disabled)
C->>D: If description provided, render description text
U->>C: Interact (check/select)
C->>C: Maintain existing value handling (unchanged)
Estimated code review effort🎯 2 (Simple) | ⏱️ ~10 minutes Poem
Pre-merge checks and finishing touches✅ Passed checks (3 passed)
✨ Finishing touches
🧪 Generate unit tests (beta)
Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out. Comment |
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 2
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (2)
src/components/Form/BooleanField/BooleanFieldCheckbox.tsx(2 hunks)src/components/Form/BooleanField/BooleanFieldRadio.tsx(3 hunks)
🧰 Additional context used
🧬 Code graph analysis (2)
src/components/Form/BooleanField/BooleanFieldCheckbox.tsx (1)
src/components/Form/FieldGroup/FieldGroup.tsx (1)
FieldGroup(6-10)
src/components/Form/BooleanField/BooleanFieldRadio.tsx (2)
src/components/Form/FieldGroup/FieldGroup.tsx (1)
FieldGroup(6-10)src/components/Label/Label.tsx (1)
Label(13-18)
🔇 Additional comments (3)
src/components/Form/BooleanField/BooleanFieldRadio.tsx (2)
59-59: LGTM! Correct placement for description.The description is rendered before the option rows, providing context before the choices. This is the appropriate placement for radio groups.
26-36: Ensuredescriptionexists on the radio variant type
Confirm that theradiovariant ofBooleanFormFieldin@douglasneuroinformatics/libui-form-typesdefines an optionaldescriptionfield.src/components/Form/BooleanField/BooleanFieldCheckbox.tsx (1)
15-24: Verifydescriptionprop on BooleanFormField checkbox variant
Component destructuresdescription, but confirm the externalBooleanFormFieldtype (variant: 'checkbox') defines this optional field.
| }} | ||
| /> | ||
| <Label htmlFor={name}>{label}</Label> | ||
| <FieldGroup.Description description={description} /> |
There was a problem hiding this comment.
Inconsistent placement compared to BooleanFieldRadio.
In this component, FieldGroup.Description is rendered inside FieldGroup.Row after the Label, but in BooleanFieldRadio.tsx (line 59), it's placed before the FieldGroup.Row elements. This creates inconsistent visual layouts between the two variants.
Apply this diff to align with the radio variant's placement (before FieldGroup.Row):
<FieldGroup name={name}>
+ <FieldGroup.Description description={description} />
<FieldGroup.Row>
<Checkbox
checked={Boolean(value)}
disabled={disabled || readOnly}
id={name}
name={name}
onCheckedChange={(value) => {
if (typeof value === 'boolean') {
setValue(value);
}
}}
/>
<Label htmlFor={name}>{label}</Label>
- <FieldGroup.Description description={description} />
</FieldGroup.Row>📝 Committable suggestion
‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.
| <FieldGroup.Description description={description} /> | |
| <FieldGroup name={name}> | |
| <FieldGroup.Description description={description} /> | |
| <FieldGroup.Row> | |
| <Checkbox | |
| checked={Boolean(value)} | |
| disabled={disabled || readOnly} | |
| id={name} | |
| name={name} | |
| onCheckedChange={(value) => { | |
| if (typeof value === 'boolean') { | |
| setValue(value); | |
| } | |
| }} | |
| /> | |
| <Label htmlFor={name}>{label}</Label> | |
| - <FieldGroup.Description description={description} /> | |
| </FieldGroup.Row> |
🤖 Prompt for AI Agents
In src/components/Form/BooleanField/BooleanFieldCheckbox.tsx around line 40, the
FieldGroup.Description is currently rendered inside FieldGroup.Row after the
Label which is inconsistent with BooleanFieldRadio; move the
FieldGroup.Description out of/above the FieldGroup.Row so it is rendered before
the Row (matching the radio variant), preserving the same description prop and
any surrounding conditional rendering or styling so layout and semantics stay
identical to BooleanFieldRadio.
| <Label | ||
| aria-disabled={disabled || readOnly} | ||
| className="font-normal text-muted-foreground" | ||
| className="text-muted-foreground font-normal" |
There was a problem hiding this comment.
Undocumented className changes.
The PR title and AI summary indicate only adding description functionality, but these lines introduce "text-muted-foreground font-normal" classNames that weren't mentioned. Confirm these styling changes are intentional.
Also applies to: 74-74
🤖 Prompt for AI Agents
In src/components/Form/BooleanField/BooleanFieldRadio.tsx around lines 64 and
74, two className additions ("text-muted-foreground font-normal") were
introduced without documentation or mention in the PR; either confirm these
styling changes are intentional and document them in the component/PR
description, or revert them. If the style should be optional, expose a prop
(e.g., descriptionClassName or muted) and apply the new classes conditionally,
and update the component JSDoc/README and PR summary to reflect the styling
change.
|
🎉 This PR is included in version 4.9.0 🎉 The release is available on: Your semantic-release bot 📦🚀 |
2 participants
Summary by CodeRabbit