Button component with color prop , tests and stories updated #788
Conversation
WalkthroughThe pull request introduces a new optional Changes
Sequence DiagramsequenceDiagram
participant Dev as Developer
participant Button as Button Component
participant DOM as Rendered DOM
Dev->>Button: Render with color="yellow"
Button->>DOM: Add data-accent-color="yellow"
DOM-->>Dev: Button with custom color displayed
Poem
Finishing Touches
Thank you for using CodeRabbit. We offer it for free to the OSS community and would appreciate your support in helping us grow. If you find it useful, would you consider giving us a shout-out on your favorite social media? 🪧 TipsChatThere are 3 ways to chat with CodeRabbit:
Note: Be mindful of the bot's finite context window. It's strongly recommended to break down tasks such as reading entire modules into smaller chunks. For a focused discussion, use review comments to chat about specific files and their changes, instead of using the PR comments. CodeRabbit Commands (Invoked using PR comments)
Other keywords and placeholders
CodeRabbit Configuration File (
|
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 0
🧹 Nitpick comments (6)
src/components/ui/Button/Button.tsx (3)
14-14: Fix type definition spacing.The type definition has inconsistent spacing around the colon. Maintain consistency with other props.
- color?:string; + color?: string;
Line range hint
8-8: Remove outdated comment.The comment "make the color prop default accent color" appears to be outdated and no longer reflects the current implementation.
17-17: Consider improvements to color prop handling.A few suggestions to enhance the color prop implementation:
- Use
undefinedinstead of empty string as default to better indicate absence of color- Consider adding color value validation to prevent invalid colors
-const Button = ({ children, type = 'button', customRootClass = '', className = '', variant = '', size = '', color = '', ...props }: ButtonProps) => { +const Button = ({ children, type = 'button', customRootClass = '', className = '', variant = '', size = '', color, ...props }: ButtonProps) => {Also applies to: 31-33
src/components/ui/Button/tests/Button.test.tsx (1)
19-23: Enhance test coverage for color prop.Consider adding more test cases to thoroughly validate the color prop behavior:
- Test default behavior when color prop is not provided
- Test with different valid color values
- Test with invalid color values (if validation is added)
Example additional test cases:
test('renders button without color attribute when color prop is not provided', () => { render(<Button>button</Button>); const button = screen.getByText('button'); expect(button).not.toHaveAttribute('data-accent-color'); }); test('renders button with different color values', () => { const colors = ['red', '#FF0000', 'rgb(255,0,0)']; colors.forEach(color => { render(<Button color={color}>button</Button>); const button = screen.getByText('button'); expect(button).toHaveAttribute('data-accent-color', color); }); });src/components/ui/Button/stories/Button.stories.js (2)
46-51: Enhance Color story documentation and examples.The Color story could be improved by:
- Adding description about supported color values
- Showing examples with different color values
- Demonstrating interaction with different variants
Example enhancement:
export const Color = { args: { color: "yellow" }, parameters: { docs: { description: { story: 'The Button component accepts a `color` prop that can be used to customize the accent color. Supports color names, hex values, and RGB/HSL values.' } } } }; // Add examples with different colors and variants export const ColorVariants = { render: () => ( <div className="space-y-4"> {['red', 'blue', 'green'].map(color => ( <div key={color} className="space-x-2"> {Variants.map(variant => ( <Button key={variant} color={color} variant={variant}> {color} {variant} </Button> ))} </div> ))} </div> ) };
27-29: Update icon colors to reflect the color prop.The ArrowIcon components use hardcoded color classes (
text-accent-900andtext-white). Consider updating these to reflect the custom color when provided.Also applies to: 31-33
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (3)
src/components/ui/Button/Button.tsx(2 hunks)src/components/ui/Button/stories/Button.stories.js(2 hunks)src/components/ui/Button/tests/Button.test.tsx(1 hunks)
kotAPI
added
the
automerge
2 participants
Summary by CodeRabbit
New Features
colorprop to the Button componentTests
data-accent-colorattributeDocumentation