style(components): Alert component redesign#1876
Conversation
🦋 Changeset detectedLatest commit: 3aef1ce The changes in this PR will be included in the next version bump. This PR includes changesets to release 1 package
Not sure what this means? Click here to learn what changesets are. Click here if you're a maintainer who wants to add another changeset to this PR |
commit: |
Co-authored-by: Claude <noreply@anthropic.com> Made-with: Cursor
nhironaka
left a comment
There was a problem hiding this comment.
I'd address the 2 comments that the bots left, but lgtm!
….css Co-authored-by: devin-ai-integration[bot] <158243242+devin-ai-integration[bot]@users.noreply.github.com>
Co-authored-by: devin-ai-integration[bot] <158243242+devin-ai-integration[bot]@users.noreply.github.com>
There was a problem hiding this comment.
Cursor Bugbot has reviewed your changes and found 1 potential issue.
❌ Bugbot Autofix is OFF. To automatically fix reported issues with cloud agents, have a team admin enable autofix in the Cursor dashboard.
Reviewed by Cursor Bugbot for commit ff52673. Configure here.
| --color-1: var(--lp-color-gray-500); | ||
| --color-2: var(--lp-color-gray-400); | ||
| border-color: var(--alert-color-border-neutral); | ||
| background-color: var(--alert-color-bg-neutral); |
There was a problem hiding this comment.
Redundant neutral CSS block duplicates parent defaults
Low Severity
The &.neutral block sets border-color and background-color to the exact same --alert-color-border-neutral and --alert-color-bg-neutral values already declared on the parent .default, .inline selector. Every other status variant (error, info, success, warning) overrides the parent defaults with distinct values, but &.neutral is purely redundant since neutral is effectively the "unset" state.
Additional Locations (1)
Reviewed by Cursor Bugbot for commit ff52673. Configure here.


Summary
Implementing new Alert styles (both block and inline). cc @OneHunnid
https://www.loom.com/share/26cb41e2a6bb4860971b2c159d47db13
Screenshots
Testing approaches
Note
Medium Risk
Primarily visual and layout changes, but it also introduces a new
hideIconprop and changes inline action/close button sizing and styling, which could affect existing Alert appearances and spacing in consuming apps.Overview
Updates
Alertto a redesigned banner style wheredefaultandinlinevariants share the same base container styling and status-based border/background colors (including new light/dark theme aliases), removing the old top gradient bar.Adds an opt-in
hideIconprop, adjusts icon/close button sizing, and forinlinealerts appliesButtonContextoverrides to style inline actions consistently (with new.inlineActionlayout rules). Storybook stories are expanded to cover the new variants, hidden icon, and inline action examples.Reviewed by Cursor Bugbot for commit 3aef1ce. Bugbot is set up for automated code reviews on this repo. Configure here.