chore: add button story for style adjustments#920
Conversation
|
The latest updates on your projects. Learn more about Vercel for Git ↗︎
|
WalkthroughA new Storybook story for the Button component was added, introducing interactive testing for its rendering. Additionally, the Button's size variant heights were adjusted: the default size is now shorter, and the large size is taller. No other logic or exported entities were changed. Changes
Poem
✨ Finishing Touches
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. 🪧 TipsChatThere are 3 ways to chat with CodeRabbit:
SupportNeed help? Create a ticket on our support page for assistance with any issues or questions. 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: 1
🧹 Nitpick comments (1)
packages/ui/src/button.tsx (1)
18-21:defaultsize is now smaller thansm; confirm this is intentional
defaulthas been reduced toh-6whilesmremainsh-8. This reverses the usual hierarchy (default≥sm) and may break consumer expectations, snapshots, or layout that relied on the previous sizing. If the rename is unintentional, consider either:- default: 'h-6 font-medium px-3', - sm: 'h-8 px-3', + default: 'h-8 font-medium px-3', + sm: 'h-6 px-3',or updating all usages / docs to clarify the new semantics.
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (2)
packages/ui/src/button.stories.tsx(1 hunks)packages/ui/src/button.tsx(1 hunks)
⏰ Context from checks skipped due to timeout of 90000ms (3)
- GitHub Check: deploy-preview
- GitHub Check: main
- GitHub Check: Analyze (javascript-typescript)
| export const Primary: Story = { | ||
| args: { | ||
| children: 'Test Button', | ||
| size: 'sm', | ||
| }, | ||
| play: async ({ canvasElement }) => { | ||
| const canvas = within(canvasElement); | ||
| expect(canvas.getByText(/Badge/gi)).toBeTruthy(); | ||
| }, | ||
| }; |
There was a problem hiding this comment.
Play-test assertion fails – looking for “Badge” while rendering “Test Button”
canvas.getByText(/Badge/gi) will throw because the story renders "Test Button". The play step will fail CI. Align the text or the assertion:
- children: 'Test Button',
+ children: 'Badge',
...
- expect(canvas.getByText(/Badge/gi)).toBeTruthy();
+ expect(canvas.getByText(/Test Button/gi)).toBeTruthy();Either variant is fine as long as both sides match.
📝 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.
| export const Primary: Story = { | |
| args: { | |
| children: 'Test Button', | |
| size: 'sm', | |
| }, | |
| play: async ({ canvasElement }) => { | |
| const canvas = within(canvasElement); | |
| expect(canvas.getByText(/Badge/gi)).toBeTruthy(); | |
| }, | |
| }; | |
| export const Primary: Story = { | |
| args: { | |
| children: 'Badge', | |
| size: 'sm', | |
| }, | |
| play: async ({ canvasElement }) => { | |
| const canvas = within(canvasElement); | |
| expect(canvas.getByText(/Test Button/gi)).toBeTruthy(); | |
| }, | |
| }; |
🤖 Prompt for AI Agents
In packages/ui/src/button.stories.tsx around lines 14 to 23, the play test
assertion looks for the text "Badge" but the story renders "Test Button",
causing the test to fail. To fix this, update the assertion to look for "Test
Button" instead of "Badge" so the expected text matches the rendered content, or
alternatively change the rendered text to "Badge" to match the assertion.
2 participants
Summary by CodeRabbit
New Features
Style