feat: intent for input and textarea#60
Conversation
chmurson
commented
Nov 6, 2025
chmurson
commented
✅ Deploy Preview for fluffy-ui ready!
To edit notification comments on pull requests, go to your Netlify project configuration. |
|
Important Review skippedAuto incremental reviews are disabled on this repository. Please check the settings in the CodeRabbit UI or the You can disable this status message by setting the 📝 WalkthroughWalkthroughIntroduces intent-based styling for Input and Textarea components by adding a new module defining five intent variants (primary, neutral, destructive, success, warning). Updates both components to accept an optional intent prop with styling applied via class-variance-authority. Adds corresponding story variants showcasing all intent states in normal and disabled configurations. Changes
Estimated code review effort🎯 3 (Moderate) | ⏱️ ~20 minutes
Pre-merge checks and finishing touches✅ Passed checks (3 passed)
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: 1
Caution
Some comments are outside the diff and can’t be posted inline due to platform limitations.
⚠️ Outside diff range comments (1)
lib/ui/Input/Input.tsx (1)
9-22: Remove debug console.log statement.Line 10 contains a
console.log(intent)statement that appears to be debug code and should be removed before merging to production.Apply this diff:
const Input = React.forwardRef<HTMLInputElement, InputProps>(({ className, intent = "neutral", ...props }, ref) => { - console.log(intent); return (
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (6)
lib/ui/Input/Input.stories.tsx(1 hunks)lib/ui/Input/Input.tsx(1 hunks)lib/ui/Input/index.ts(1 hunks)lib/ui/Input/input-intent.ts(1 hunks)lib/ui/Textarea/Textarea.stories.tsx(1 hunks)lib/ui/Textarea/Textarea.tsx(1 hunks)
🧰 Additional context used
🧬 Code graph analysis (5)
lib/ui/Input/Input.tsx (2)
lib/ui/Input/input-intent.ts (2)
InputIntent(3-3)inputIntentColors(5-21)lib/utils.ts (1)
cn(4-6)
lib/ui/Input/Input.stories.tsx (1)
lib/ui/Textarea/Textarea.stories.tsx (1)
AllIntents(105-172)
lib/ui/Textarea/Textarea.stories.tsx (1)
lib/ui/Input/Input.stories.tsx (1)
AllIntents(86-153)
lib/ui/Input/input-intent.ts (1)
lib/ui/Input/index.ts (2)
InputIntent(2-2)inputIntentColors(2-2)
lib/ui/Textarea/Textarea.tsx (1)
lib/utils.ts (1)
cn(4-6)
🔇 Additional comments (6)
lib/ui/Input/input-intent.ts (1)
1-21: LGTM! Well-structured intent system.The intent type and CVA configuration are cleanly implemented. The use of CSS custom properties with
color-mix()for dynamic theming is a solid approach, and the neutral variant appropriately overrides the base classes for default styling.lib/ui/Input/index.ts (1)
2-2: LGTM! Clean public API.The type and utility re-exports with concise aliases provide a clean public interface for consumers.
lib/ui/Textarea/Textarea.stories.tsx (1)
105-172: LGTM! Comprehensive intent demonstration.The AllIntents story effectively showcases all intent variants in both normal and disabled states, maintaining consistency with the Input component's story structure.
lib/ui/Input/Input.stories.tsx (1)
86-153: LGTM! Thorough intent showcase.The AllIntents story comprehensively demonstrates all intent variants in both normal and disabled states, providing clear visual examples for each intent type.
lib/ui/Textarea/Textarea.tsx (1)
3-7: LGTM! Proper intent integration.The intent prop is correctly typed and imported from the shared Input module, promoting consistency across form components.
lib/ui/Input/Input.tsx (1)
3-8: LGTM! Intent prop correctly integrated.The intent prop is properly typed and integrated into the InputProps interface, maintaining consistency with the Textarea component.
| const Textarea = React.forwardRef<HTMLTextAreaElement, TextareaProps>( | ||
| ({ className, intent = "neutral", ...props }, ref) => { | ||
| return ( | ||
| <textarea | ||
| className={cn( | ||
| intentColors({ intent }), | ||
| "flex min-h-[80px] w-full rounded-md border x-3 py-2 text-sm ring-offset-background focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50", | ||
| className, | ||
| )} | ||
| ref={ref} | ||
| {...props} | ||
| /> | ||
| ); | ||
| }, | ||
| ); |
There was a problem hiding this comment.
Fix typo in className: "x-3" should be "px-3".
Line 15 contains a typo where x-3 should be px-3 for horizontal padding. This would break the padding styling of the textarea.
Apply this diff:
- "flex min-h-[80px] w-full rounded-md border x-3 py-2 text-sm ring-offset-background focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50",
+ "flex min-h-[80px] w-full rounded-md border px-3 py-2 text-sm ring-offset-background focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50",📝 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.
| const Textarea = React.forwardRef<HTMLTextAreaElement, TextareaProps>( | |
| ({ className, intent = "neutral", ...props }, ref) => { | |
| return ( | |
| <textarea | |
| className={cn( | |
| intentColors({ intent }), | |
| "flex min-h-[80px] w-full rounded-md border x-3 py-2 text-sm ring-offset-background focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50", | |
| className, | |
| )} | |
| ref={ref} | |
| {...props} | |
| /> | |
| ); | |
| }, | |
| ); | |
| const Textarea = React.forwardRef<HTMLTextAreaElement, TextareaProps>( | |
| ({ className, intent = "neutral", ...props }, ref) => { | |
| return ( | |
| <textarea | |
| className={cn( | |
| intentColors({ intent }), | |
| "flex min-h-[80px] w-full rounded-md border px-3 py-2 text-sm ring-offset-background focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50", | |
| className, | |
| )} | |
| ref={ref} | |
| {...props} | |
| /> | |
| ); | |
| }, | |
| ); |
🤖 Prompt for AI Agents
In lib/ui/Textarea/Textarea.tsx around lines 9 to 23, there's a typo in the
textarea className: "x-3" should be "px-3". Update the className string to
replace "x-3" with "px-3" so the horizontal padding applies correctly, leaving
the rest of the classes and props unchanged.
1 participant
