Skip to content

feat(Alert): improve icon handling and Storybook controls#15

Merged
garrity-miepub merged 3 commits intomainfrom
feature/alert-update-fix
Jan 28, 2026
Merged

feat(Alert): improve icon handling and Storybook controls#15
garrity-miepub merged 3 commits intomainfrom
feature/alert-update-fix

Conversation

@garrity-miepub
Copy link
Copy Markdown
Contributor

  • Use React.isValidElement() check to handle empty objects from Storybook
  • Change icon prop type from ReactNode to ReactElement for stricter typing
  • Replace inline SVG dismiss button with Lucide X icon
  • Convert stories from render functions to args pattern for working controls
  • Add Lucide icon dropdown selector in Storybook
  • Add semantic icons to variant stories (CheckCircle, AlertTriangle, etc.)
alert-component.mov

@garrity-miepub garrity-miepub marked this pull request as ready for review January 28, 2026 01:32
@cloudflare-workers-and-pages
Copy link
Copy Markdown

cloudflare-workers-and-pages bot commented Jan 28, 2026

Deploying ui with  Cloudflare Pages  Cloudflare Pages

Latest commit: fd27a94
Status: ✅  Deploy successful!
Preview URL: https://72d61a52.ui-6d0.pages.dev
Branch Preview URL: https://feature-alert-update-fix.ui-6d0.pages.dev

View logs

Copy link
Copy Markdown

Copilot AI left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Pull request overview

This PR improves the Alert component's icon handling and enhances the Storybook development experience by addressing edge cases with icon rendering and making component controls more interactive.

Changes:

  • Strengthened type safety by changing the icon prop from ReactNode to ReactElement | null
  • Added React.isValidElement() checks to handle empty objects from Storybook controls
  • Replaced inline SVG dismiss button with Lucide's X icon for consistency
  • Converted Storybook stories from render functions to args pattern for working controls
  • Added icon dropdown selector with Lucide icons in Storybook
  • Enhanced variant stories with semantic icons (CheckCircle, AlertTriangle, etc.)

Reviewed changes

Copilot reviewed 2 out of 2 changed files in this pull request and generated 2 comments.

File Description
src/components/Alert/Alert.tsx Updated icon prop type to ReactElement | null, added validation checks, replaced inline SVG with Lucide X icon, and changed padding logic from CSS selector to conditional className
src/components/Alert/Alert.stories.tsx Added icon registry for Storybook controls, converted stories to args pattern, added icon control with mapping, and included semantic Lucide icons in variant examples

💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.

@garrity-miepub garrity-miepub merged commit f1e53f8 into main Jan 28, 2026
4 of 7 checks passed
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

2 participants