Skip to content

style(components): Alert component redesign#1876

Open
cmwinters wants to merge 11 commits intomainfrom
cmwinters/style/alert-redesign
Open

style(components): Alert component redesign#1876
cmwinters wants to merge 11 commits intomainfrom
cmwinters/style/alert-redesign

Conversation

@cmwinters
Copy link
Copy Markdown
Contributor

@cmwinters cmwinters commented Apr 7, 2026

Summary

Implementing new Alert styles (both block and inline). cc @OneHunnid

https://www.loom.com/share/26cb41e2a6bb4860971b2c159d47db13

Figma Figma reference

Screenshots

CleanShot 2026-04-07 at 17 20 55@2x CleanShot 2026-04-07 at 17 20 44@2x CleanShot 2026-04-07 at 17 20 33@2x CleanShot 2026-04-07 at 17 20 24@2x

Testing approaches


Note

Medium Risk
Primarily visual and layout changes, but it also introduces a new hideIcon prop and changes inline action/close button sizing and styling, which could affect existing Alert appearances and spacing in consuming apps.

Overview
Updates Alert to a redesigned banner style where default and inline variants 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 hideIcon prop, adjusts icon/close button sizing, and for inline alerts applies ButtonContext overrides to style inline actions consistently (with new .inlineAction layout 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.


Open with Devin

@changeset-bot
Copy link
Copy Markdown

changeset-bot bot commented Apr 7, 2026

🦋 Changeset detected

Latest commit: 3aef1ce

The changes in this PR will be included in the next version bump.

This PR includes changesets to release 1 package
Name Type
@launchpad-ui/components Minor

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

@pkg-pr-new
Copy link
Copy Markdown

pkg-pr-new bot commented Apr 7, 2026

yarn add https://pkg.pr.new/@launchpad-ui/components@1876.tgz
yarn add https://pkg.pr.new/@launchpad-ui/icons@1876.tgz
yarn add https://pkg.pr.new/@launchpad-ui/tokens@1876.tgz

commit: 3aef1ce

@cmwinters cmwinters self-assigned this Apr 7, 2026
@cmwinters cmwinters changed the title Alert component redesign style(components): Alert component redesign Apr 7, 2026
@cmwinters cmwinters marked this pull request as ready for review April 8, 2026 00:22
@cmwinters cmwinters requested a review from a team as a code owner April 8, 2026 00:22
cursor[bot]

This comment was marked as resolved.

devin-ai-integration[bot]

This comment was marked as resolved.

Copy link
Copy Markdown
Contributor

@nhironaka nhironaka left a comment

Choose a reason for hiding this comment

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

I'd address the 2 comments that the bots left, but lgtm!

cmwinters and others added 2 commits April 8, 2026 08:41
….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>
Copy link
Copy Markdown

@cursor cursor bot left a comment

Choose a reason for hiding this comment

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

Cursor Bugbot has reviewed your changes and found 1 potential issue.

Fix All in Cursor

❌ 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);
Copy link
Copy Markdown

Choose a reason for hiding this comment

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

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)
Fix in Cursor Fix in Web

Reviewed by Cursor Bugbot for commit ff52673. Configure here.

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