feat: sidebar "what's new" announcement cards#6201
Open
tsahimatsliah wants to merge 20 commits into
Open
Conversation
Add a Linear-style announcement surface for the bottom of the V2 sidebar to prominently announce new features/releases and drive a single action. - AnnouncementCard with Compact / Default / Cover variants, built from existing primitives (Card tokens, Typography, Button, CloseButton, Pill) - AnnouncementCarousel stack: dot indicators, prev/next, advance-on-dismiss - useSidebarAnnouncements + content config; dismissal persists client-side via usePersistentState (no backend ActionType needed) - SidebarAnnouncements container wired into SidebarDesktopV2, gated by the new sidebar_announcements feature flag and shown only in the expanded home panel - Storybook stories for every variant/state + a Guidelines & anatomy page Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
|
The latest updates on your projects. Learn more about Vercel for GitHub.
|
The badge used cabbage (brand purple) subtlest bg with brand-default text, which rendered as low-contrast purple-on-purple. Card used a filled surface-float that read too heavy in the sidebar. - Badge: neutral, readable label (bg-surface-float + text-text-secondary) - Card: transparent with a hairline border; interactive (compact) variant gets a subtle hover fill instead of a permanent one - Update Guidelines spec tables to match Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
Pill defaults to align-self:flex-start, top-aligning the 16px badge in the 24px icon row. Set alignment="self-center" so it sits centered. Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
Replace the solid Primary close over the cover image with a translucent, backdrop-blurred circular button (bg-overlay-secondary-pepper + backdrop-blur-md + subtle white border), matching the floating-control idiom in ArticleFeaturedWideGridCard. Reads cleaner over imagery than a solid fill. Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
Match the design-system corner radius (Small icon button = rounded-10) instead of a fully circular close, keeping the frosted-glass treatment. Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
The ~8% surface-float badge fill was nearly invisible, and in the Default variant the leading icon pushed the badge right of the title, so the label read as misaligned floating text. - Badge: idiomatic flat-accent chip (bg-accent-cabbage-flat + text-brand-default) — a visible, theme-safe brand tint with readable text - Default/Cover now lead with the badge (flush-left, aligned with the title); the inline leading icon is dropped for these variants (icon stays Compact-only) - Drop the now-unused icon props/imports from content + stories; update Guidelines Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
Polish the carousel into a proper "what's new" stack and add a playground to explore every interaction. - Stacked-card cue: edges of the cards behind peek under the active card (1–2 layers, shrinking as the stack empties) - Switching animates with a keyed enter (fade-slide-up via animate-composer-in) - Dismiss plays an exit (fade + slide/scale) then the next card slides into place and fires its impression - Respects prefers-reduced-motion (motion-safe enter; exit delay skipped) - New Components/Announcements/Playground: stateful harness with switch / dismiss / add / reset / dismiss-all, empty state, and a live event log Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
Address review feedback on the stack and badge. - Stack: one single, centered card peeking behind (was two misaligned bars), dimmed so it reads as recessed; the active card sits on a defined bg-background-subtle surface with a shadow-2 for the 3D "lift" off the card behind. Dismissing reveals the card behind before the next slides in. - Label: small flush-left brand-colored text label (typo-caption2) instead of the filled chip — visible but no longer competing with the title. - Update Guidelines spec (surface + badge tokens). Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
- Add a subtle white inner gradient hugging the card's bottom edge (from-white/8 → transparent) for a soft 3D "lip" that's visible on the dark sidebar where a dark inner shadow wouldn't read - Soften the stacked outer shadow to a small, transparent drop (0 4px 12px -6px rgba(0,0,0,.25)) instead of shadow-2 Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
Make the surface feel alive and standout, all motion-safe (reduced-motion falls back to instant): - Card: gentle hover lift + border brighten (transition-all) - Cover: image scales up softly on card hover (group/card) - Stack: hovering "opens" it — the card behind slides out and brightens (group/stack), and the active card's shadow deepens on hover - Frosted close: scale up on hover, press-down on active - Carousel dots scale on hover; prev/next arrows scale on hover and press Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
Replace the prev/next arrows with a centered, segmented indicator: - Hovering (or focusing) a dot switches to that announcement — scrub across the dots to flip through the stack - Active dot stretches into a pill and the fill glides between positions - Removes the right-side arrow buttons entirely - Update Playground copy to match Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
- Card border uses border-subtlest-quaternary (the soft V2 sidebar border) by default; hover brightens one step to tertiary - Active indicator is now a small rounded rectangle (rounded-2, 16x6) instead of an oval pill — slightly smaller - More vertical gap between the dots and the card Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
…ests Address PR review findings: - Impressions now fire only after a card dwells (400ms) and once per id, so hovering across the dots to browse no longer logs an impression per card - Don't render the sidebar announcements when the feedback widget occupies the bottom slot, avoiding overlap - Memoize the hook's dismiss callback - Add AnnouncementCarousel + useSidebarAnnouncements specs (switch, dismiss, empty, impression dedupe; filtering, hydration gating, persistence) Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
Replace the rotated ArrowIcon on the Compact card with MoveToIcon (points right by default) at XXSmall (12px) for a clearer, lighter 'go to' affordance. Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
A single Storybook page exploring 16 cover treatments at the real ~240px sidebar width — classic, full-bleed overlays, brand wash, duotone, framed, thumbnail, hero, floating panel, dual scrim, corner badge, glass panel, split color, icon-only, video, and top-accent. Every image is full-bleed and every scrim/overlay spans edge to edge so directions can be compared cleanly. Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
- TEMPORARY: featureSidebarAnnouncements defaults to true so the card shows in the V2 sidebar without GrowthBook config (revert to false before shipping) - Add a Storybook story that mounts the real SidebarAnnouncements container (flag + curated content + persisted dismissal) to review live behavior Tagged the pre-flip reviewed baseline as `announcements-v1`. Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
Root cause the card wasn't visible: it mounts inside SidebarDesktopV2, which only renders when featureLayoutV2 is on (default was false), so the legacy sidebar showed instead. Temporarily default layout_v2 to true so the V2 sidebar + announcements card render without GrowthBook config. TEMPORARY — revert layout_v2 and sidebar_announcements to false before shipping. Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
Root cause it stayed hidden: MainLayout passes showFeedbackWidget={!hideFeedbackWidget}
(true in the common case), and the announcements guard had `!showFeedbackWidget`,
so the card was suppressed almost everywhere. Drop that condition — the card
renders above the help/feedback area in the expanded home panel.
Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
- Add a small gap below the carousel dots - Revert the temporary review defaults: layout_v2 and sidebar_announcements are back to false (enable via GrowthBook), so nothing is hard-coded on - Remove the review-only "In Sidebar" live-container story Keeps the full reviewed card implementation + the feedback-widget visibility fix. Shippable state. Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
- Drop the unused exampleCoverImage export (and its now-unused import) - Correct the badge/icon doc comments to match the final design (text label defaulting to brand color; icon is Compact-only) Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
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
1 participant
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.
Changes
A Linear-style "what's new" announcement surface for the bottom of the V2 sidebar — to prominently announce a new feature/release and drive one clear action. Behind the
sidebar_announcementsfeature flag (default off).AnnouncementCardwith three tiers, built from existing primitives (Card tokens,Typography,Button,CloseButton,Pill,Image):Primary, sinceFloatis invisible over imagery)AnnouncementCarousel— browsable stack with dot indicators, prev/next, "1 of N", advance-on-dismiss; renders nothing when emptyuseSidebarAnnouncements+ curated content config. Dismissal persists client-side viausePersistentState(IndexedDB, keyed by id) — this repo can't add a backendActionType, so we follow the Brief-card pattern rather thancompleteActionSidebarAnnouncementscontainer wired intoSidebarDesktopV2, shown only when the sidebar is expanded and on the home panelNote
Content in
content.tsxis placeholder copy reusing existing media.daily.dev images — swap in real announcements/cover art before enabling the flag. Guidelines are delivered as a TSX docs story (not MDX) because this Storybook 9 setup has no resolvable@storybook/blocks.Events
Yes — three sidebar announcement tracking events:
impression announcementclick announcementdismiss announcementExperiment
Yes — feature flag
sidebar_announcements(boolean, default off) gates the surface.Manual Testing
On those affected packages:
layout_v2: stack shows in expanded sidebar, dismiss persists across reload, hidden when collapsed / on utility panels / when empty)Components/Announcements— variants, carousel, guidelinesVerified locally: strict typecheck guard, shared ESLint clean,
AnnouncementCard.spec.tsx(4/4), and Storybook dev boots/serves the new stories.🤖 Generated with Claude Code
Preview domain
https://claude-sleepy-newton-72736a.preview.app.daily.dev