refactor(ui): standardize banners — Phase 1 migration to shared Banner component#2036
Draft
evanjacobson wants to merge 17 commits intomainfrom
Draft
refactor(ui): standardize banners — Phase 1 migration to shared Banner component#2036evanjacobson wants to merge 17 commits intomainfrom
evanjacobson wants to merge 17 commits intomainfrom
Conversation
… 3 named banner files - Add green color variant to Banner - Add Banner.Dismiss subcomponent (X button) - Migrate OldSessionBanner, AdminViewingBanner, ErrorBanner to shared Banner - Save standardize-banners migration plan to .plans/
Migrate BillingBanner, FreeTrialWarningBanner, and InsufficientBalanceBanner to the shared Banner component. Add banner-showcase/ with standalone before/after comparison page and per-banner app screenshots at desktop and mobile viewports.
…fix Banner.Action gap - Add sticky controls bar with width slider, collapse/expand all buttons - Restructure screenshot galleries to 2 rows (desktop, mobile) - Make page full-width (remove max-w constraints) - Fix Banner.Action missing flex gap-2 for multi-button layouts - Re-capture screenshots with updated button spacing
Remove the banner-showcase/ standalone app (couldn't resolve parent transitive deps cleanly). Add before/after Storybook stories for all 6 Phase 1 banners under storybook/stories/banner-migration/. These use the real imported components and run in the existing Storybook infra. Also add storybook/stories/_pr/ to .gitignore for future ephemeral PR-scoped stories.
Lightweight standalone preview (~250KB) importing real components from the parent app via Vite resolve.alias. Features sidebar tabs per component, variant subtabs, and iframe-based mobile viewport toggle that correctly triggers Tailwind sm: breakpoints. Deployed to https://banner-showcase.pages.dev
BannerAction now uses flex-col sm:flex-row so multiple buttons stack on narrow viewports instead of overflowing side-by-side.
Banner.Dismiss now uses absolute positioning (top-3 right-3) so it always appears in the top-right corner regardless of flex-wrap layout or viewport size. BannerRoot gains 'relative' to establish the positioning context.
The Dismiss action button already handles dismissal — the X was calling the same onDismiss callback. Removed to avoid duplicate affordances.
BannerButton now accepts variant='primary' (default, solid fill) or variant='outline' (transparent with border). ErrorBanner uses outline for Dismiss to visually differentiate it from the primary Retry action.
The previous outline style used border-current/30 which isn't valid Tailwind v4 syntax. Added outlineButton to colorMap with explicit color classes (e.g. border-red-500/40, text-red-400, hover:bg-red-500/10) for each color.
- secondary: dark gray fill (bg-white/10), neutral — for primary actions that shouldn't carry the banner's accent color - ghost: transparent with subtle text — for de-emphasized actions ErrorBanner now uses secondary for Retry and ghost for Dismiss, matching the visual weight of the old Alert-based buttons.
Retry gets the outlined border style, Dismiss stays ghost/transparent.
Remove banner-showcase/, storybook/stories/banner-migration/, banner-test page, screenshots, and .playwright-mcp artifacts. Restore pnpm-workspace.yaml and .gitignore to main state.
evanjacobson
force-pushed
the
improvement/standardize-banners
branch
from
9b680c0 to
9126d8c
Compare
…opener noreferrer" for _blank links
Contributor
|
Due to the monorepo restructure you will need to recreate this PR on a new branch from main. Pass the prompt found at, https://github.com/Kilo-Org/cloud/blob/main/plans/monorepo-migration-prompt.md, to your coding agent while running in this branch. Please close this PR once done or if you don't plan to proceed with it. |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
2 participants
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Summary
Migrate 6 named
*Banner.tsxfiles from hand-rolled divs and shadcn<Alert>to the shared<Banner>compound component, establishing a single source of truth for colored informational/warning/error/success banners. This is Phase 1 of the migration plan in.plans/standardize-banners.md.Banner component enhancements:
greencolor variant andBanner.Dismisssubcomponent (absolute-positioned X button)BannerButtonvariants:primary(solid fill),outline(color border),secondary(gray fill),ghost(transparent)BannerActionstacks buttons vertically on mobile (flex-col sm:flex-row)BannerRootgainsrelativepositioning for dismiss button placementMigrated files:
OldSessionBanner.tsx— Alert warning → Banner amberErrorBanner.tsx— Alert destructive → Banner red (outline Retry + ghost Dismiss)AdminViewingBanner.tsx— Alert warning + overrides → Banner amberBillingBanner.tsx— hand-rolled div with color map → Banner blue/amber/redFreeTrialWarningBanner.tsx— hand-rolled div with border-b → Banner blue/amber/redInsufficientBalanceBanner.tsx— hand-rolled div (yellow/blue) → Banner amber/blue (default + compact)Live before/after preview: https://banner-showcase.pages.dev
Verification
pnpm typecheck— passespnpm format:check— passesVisual Changes
Live before/after preview with desktop/mobile toggle: https://banner-showcase.pages.dev
<Alert>with grid layout, small icons, outline buttons<Banner>with flex-wrap layout, larger icons, color-matched buttonscolorMapin Banner.tsxflex-col sm:flex-rowReviewer Notes
*Banner.tsxfiles). Phases 2-3 (~40 inline banner-like divs across ~25 files) are planned but not in this PR. See.plans/standardize-banners.mdfor the full scope.outlineButtonfield was added to the color map to work around Tailwind v4 not supporting opacity modifiers oncurrentColor.ErrorBannerno longer has a redundant X dismiss button — the ghost "Dismiss" action button serves that purpose.