feat(ui): enhance Alert, Button, Checkbox components#162
Conversation
kylengn
requested review from
EnzalRad,
dvxam and
noe-charmet
as code owners
|
The latest updates on your projects. Learn more about Vercel for GitHub.
|
|
Note Other AI code review bot(s) detectedCodeRabbit has detected other AI code review bot(s) in this pull request and will avoid duplicating their findings in the review comments. This may lead to a less comprehensive review. WalkthroughThis PR enhances Alert with controlled/uncontrolled state management, animations, autoClose functionality, and context-based variant sharing. Alert stories simplify AlertClose usage and add a form validation example. Button variants gain cursor-pointer and aria-disabled attributes for better UX and accessibility. Checkbox-links is refactored to use ButtonLink, and policy links are updated with real destinations. Changes
Sequence DiagramsequenceDiagram
actor User
participant Alert as Alert Component
participant Context as AlertContext
participant Motion as AnimatePresence
participant Timer as AutoClose Timer
User->>Alert: Mount with animated=true, autoClose=5000
Alert->>Context: Provide isOpen, onClose, variant
alt autoClose enabled
Alert->>Timer: Start countdown
Timer-->>Timer: 5000ms elapsed
Timer->>Alert: Trigger onClose
end
User->>Alert: Interact (click close button)
Alert->>Alert: invoke onClose
Alert->>Motion: Trigger exit animation
Motion-->>User: Fade out with transition
Alert->>Alert: Remove from DOM
Estimated code review effort🎯 3 (Moderate) | ⏱️ ~25 minutes
Possibly related PRs
Suggested reviewers
Poem
Pre-merge checks and finishing touches❌ Failed checks (1 warning)
✅ Passed checks (2 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 |
There was a problem hiding this comment.
Pull Request Overview
This PR enhances the Alert, Button, and Checkbox components with improved interactivity, accessibility, and user experience features. The Alert component gains animation support, controlled/uncontrolled state management, and auto-close functionality. Button components receive explicit cursor styling and aria attributes. Checkbox links are updated to use real URLs and the ButtonLink component for consistent styling.
Key Changes:
- Alert component refactored with animation support (framer-motion), context-based state management, and auto-close timer functionality
- Button components enhanced with explicit
cursor-pointerclass andaria-disabledattribute - Checkbox links updated to use real Shipfox legal URLs and replace raw button elements with ButtonLink component
Reviewed Changes
Copilot reviewed 7 out of 7 changed files in this pull request and generated 3 comments.
Show a summary per file
| File | Description |
|---|---|
| libs/react/ui/src/components/alert/alert.tsx | Added animation, controlled/uncontrolled state, context API, and auto-close feature to Alert component |
| libs/react/ui/src/components/alert/alert.stories.tsx | Added form validation story demonstrating new Alert features with auto-close and controlled state |
| libs/react/ui/src/components/button/button.tsx | Added cursor-pointer class and aria-disabled attribute to button variants |
| libs/react/ui/src/components/button/icon-button.tsx | Added cursor-pointer class and aria-disabled attribute to icon button variants |
| libs/react/ui/src/components/button/button-link.tsx | Added cursor-pointer class to button link variants |
| libs/react/ui/src/components/checkbox/checkbox-links.tsx | Replaced placeholder URLs with real Shipfox legal links, added security attributes, replaced button with ButtonLink, added transition animation |
| libs/react/ui/src/components/checkbox/checkbox.stories.tsx | Updated stories with real URLs and window.open handlers with proper security parameters |
💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.
![cursor[bot]](https://avatars.githubusercontent.com/in/1210556?s=60&v=4){kind=small}
There was a problem hiding this comment.
This PR is being reviewed by Cursor Bugbot
Details
Your team is on the Bugbot Free tier. On this plan, Bugbot will review limited PRs each billing cycle for each member of your team.
To receive Bugbot reviews on all of your PRs, visit the Cursor dashboard to activate Pro and start your 14-day free trial.
|
The latest updates on your projects. Learn more about Argos notifications ↗︎
|
![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 (7)
libs/react/ui/src/components/alert/alert.stories.tsx(3 hunks)libs/react/ui/src/components/alert/alert.tsx(4 hunks)libs/react/ui/src/components/button/button-link.tsx(1 hunks)libs/react/ui/src/components/button/button.tsx(2 hunks)libs/react/ui/src/components/button/icon-button.tsx(2 hunks)libs/react/ui/src/components/checkbox/checkbox-links.tsx(2 hunks)libs/react/ui/src/components/checkbox/checkbox.stories.tsx(1 hunks)
🧰 Additional context used
📓 Path-based instructions (1)
**/*
⚙️ CodeRabbit configuration file
We handle errors at the edge of our applications in most cases. Do not recommend to add error handling around every single function. We prefer them to bubble up and be handled at upper layers.
Files:
libs/react/ui/src/components/button/button-link.tsxlibs/react/ui/src/components/checkbox/checkbox-links.tsxlibs/react/ui/src/components/button/button.tsxlibs/react/ui/src/components/alert/alert.stories.tsxlibs/react/ui/src/components/button/icon-button.tsxlibs/react/ui/src/components/alert/alert.tsxlibs/react/ui/src/components/checkbox/checkbox.stories.tsx
🧬 Code graph analysis (4)
libs/react/ui/src/components/checkbox/checkbox-links.tsx (1)
libs/react/ui/src/components/button/button-link.tsx (1)
ButtonLink(46-76)
libs/react/ui/src/components/alert/alert.stories.tsx (2)
libs/react/ui/src/components/input/input.tsx (1)
Input(24-43)libs/react/ui/src/components/button/button.tsx (1)
Button(50-91)
libs/react/ui/src/components/alert/alert.tsx (1)
libs/react/ui/src/components/icon/icon.tsx (1)
Icon(73-76)
libs/react/ui/src/components/checkbox/checkbox.stories.tsx (1)
libs/react/ui/src/components/checkbox/checkbox-links.tsx (1)
CheckboxLinks(23-90)
⏰ Context from checks skipped due to timeout of 90000ms. You can increase the timeout in your CodeRabbit configuration to a maximum of 15 minutes (900000ms). (2)
- GitHub Check: Agent
- GitHub Check: Cursor Bugbot
🔇 Additional comments (8)
libs/react/ui/src/components/button/button.tsx (1)
8-8: Cursor + ARIA disabled alignment looks goodAdding
cursor-pointerto the base variant andaria-disabled={disabled || isLoading}keeps visual/keyboard behavior consistent with other button-like components and exposes the disabled/loading state to assistive tech, especially when rendered viaSlot.Also applies to: 76-80
libs/react/ui/src/components/button/icon-button.tsx (1)
8-8: IconButton cursor and ARIA updates are consistent with ButtonThe added
cursor-pointerandaria-disabled={disabled || isLoading}mirror the mainButtonbehavior and improve consistency and accessibility for icon-only buttons.Also applies to: 80-84
libs/react/ui/src/components/button/button-link.tsx (1)
8-8: ButtonLink cursor update aligns with other button componentsAdding
cursor-pointerto the basebuttonLinkVariantsmatches the rest of the button family and clearly indicates interactivity without changing behavior.libs/react/ui/src/components/checkbox/checkbox.stories.tsx (1)
359-368: CheckboxLinksStory URL updates are reasonable and consistentPointing
Terms of useandPrivacy Policyat the real/legalURLs, and usingwindow.openwith'noopener,noreferrer'for the onClick variant, aligns the stories with the new CheckboxLinks behavior while keeping external navigation safe.Also applies to: 375-384
libs/react/ui/src/components/alert/alert.stories.tsx (2)
59-151: Form validation + error toaster story looks solidThe
ErrorValidationToasterExampleandWithFormValidationstory wire up validation, aggregated error messaging,showErrorstate, andAlert’sautoClosebehavior coherently. The Dismiss action correctly clears field errors and hides the toaster, and the conditionalerrorCount > 0guard keeps the alert mounted only when there are validation errors. No changes needed here.
53-53: Context-basedAlertCloseusage is correctSwitching
AlertCloseto be used without avariantprop in bothDefaultandDesignMockaligns with the new context-driven API; the surroundingAlertprovides the variant, so these stories will stay visually consistent across variants.Also applies to: 171-171
libs/react/ui/src/components/alert/alert.tsx (2)
63-163: Alert controlled/uncontrolled state, context, and auto‑close are implemented correctlyThe introduction of
AlertContext,AlertProps(open,defaultOpen,onOpenChange,animated,transition,autoClose), and the split between animated/non‑animated render paths is coherent and idiomatic:
isOpencorrectly derives fromopenwhen controlled and falls back to internal state otherwise.handleCloserespects controlled vs uncontrolled usage while still invokingonOpenChange(false)for consumers.- The
autoCloseeffect uses a ref to the latest close handler, avoiding stale closures while ensuring timers are cleaned up whenisOpenorautoClosechange.- Context provisioning covers both animated and non‑animated branches so
AlertCloseand other subcomponents have consistent access.Behaviorally this matches expectations for a dismissible, optionally animated alert with auto‑dismiss.
279-290: Exports of new API surface look consistentExporting
alertDefaultTransitionalongsideAlert, subcomponents, and theAlertPropstype provides a clear public surface for consumers to configure transitions and type their props. The ordering and naming are intuitive; no further changes needed.
2 participants
Note
Introduces a controllable, animated Alert with auto-close and context-driven close; improves button accessibility and link behavior; adds a form validation story.
components/alert/alert.tsx):open,defaultOpen,onOpenChange,autoClose,animated, and customizabletransition(via framer-motion).variantandonClose;AlertClosenow closes via context and no longer requires explicitvariant.alertDefaultTransitionandAlertProps.button.tsx,icon-button.tsx: addcursor-pointerand propagatearia-disabledwhenasChildis used; maintain loading ARIA states.button-link.tsx: addscursor-pointerand size/underline variants usage consistency.checkbox-links.tsx):rel="noopener noreferrer"; button-style links usebuttonLinkVariants.alert.stories.tsx: adds form validation example usingzod/react-hook-formand error Alert withautoClose; removes passingvarianttoAlertClose.checkbox.stories.tsx: updates legal links to real URLs and new window behavior.@shipfox/react-ui.Written by Cursor Bugbot for commit 1316756. This will update automatically on new commits. Configure here.
Summary by CodeRabbit
Release Notes
New Features
Improvements
✏️ Tip: You can customize this high-level summary in your review settings.