feat(shared): Buttons V2 migration · PR 1 — engagement bars (CardAction)#5969
Closed
tsahimatsliah wants to merge 8 commits intomainfrom
Closed
feat(shared): Buttons V2 migration · PR 1 — engagement bars (CardAction)#5969tsahimatsliah wants to merge 8 commits intomainfrom
tsahimatsliah wants to merge 8 commits intomainfrom
Conversation
|
The latest updates on your projects. Learn more about Vercel for GitHub.
|
This was referenced May 3, 2026
9 tasks
tsahimatsliah
force-pushed
the
feat/buttons-v2-migration
branch
from
973a008 to
002289e
Compare
Flips MedalBadgeIcon to follow the project-wide convention every other
icon ships with (IconPrimary={Outlined}, IconSecondary={Filled}). Was
the only icon in the codebase with the props reversed, which made the
toggle pattern (`secondary={isActive}` and ButtonV2's `iconPressed`)
behave inverted against the surrounding icon family.
Updates every explicit caller to preserve the existing rendered visual:
- Strips `secondary` from sites that were rendering the outlined art
(NotificationItemAvatar top-reader badge, LiveRoomTileActions award,
ProfileActions award button, AwardButton, PostAnalytics + SquadAnalytics
Awards stat tile, CommentAwardActions count badge, UserEngagementSections
badge chip, Leaderboard RankBadge / TopRankBadge).
- Adds `secondary` where the site rendered the filled art and depended on
the previous default (OpportunityBenefits "Private until you say yes",
ProfileAchievements + AchievementsWidget header glyph,
AchievementTrackerButton fallback, game-center DataTile awards).
- Inverts `secondary={!awarded}` to `secondary={!!awarded}` on
ReaderRailActionBar so its outline-when-idle / filled-when-awarded
behaviour stays identical post-flip.
- Updates /dev/buttons OLD vignette to invert its boolean and rewrites
the NEW CardAction vignette to the cleaner `icon` + `iconPressed`
pattern (outlined idle, filled pressed) made possible by the flip.
Function-ref usages in the profile/account menus (`icon: MedalBadgeIcon`)
intentionally aren't touched — they pass `secondary={isActive}` through
ProfileSectionItem and now match the rest of the menu's icon family
(outlined when inactive, filled when active).
Prerequisite for the v2 button system migration so consumers can use
`<MedalBadgeIcon />` for the idle/outline state and
`<MedalBadgeIcon secondary />` for the pressed/filled state without
re-fixing the inversion at every CardAction call site.
Made-with: Cursor
Replaces every v1 QuaternaryButton + v1 Button engagement-row caller in the shared package with the v2 button system: - packages/shared/src/components/buttons/BookmarkButton.tsx rewritten to compose CardAction. New engagement-bar API (post + density + pressed + onClick + label + count) replaces the v1 buttonProps bag; reminder dropdown still wraps the trigger as before. All previous QuaternaryButton call-site noise (icon swap, pressed-color tinting, counter slot) now lives inside CardAction. - packages/shared/src/components/post/PostActions.tsx Post-detail action strip now renders CardActionBar layout="between" with one CardAction per affordance (Upvote / Downvote / Comment / Award / Bookmark / Copy). Adds a new shared usePostActionsLabelVisibility hook (extracted from /dev/buttons) that mirrors the v1 ResizeObserver-driven label-collapse mechanic exactly: every CardAction renders with labelVisible always-on and the hook toggles the .card-action-content wrapper hidden class so the row collapses to icon-only when it would overflow. - packages/shared/src/components/post/MobilePostFloatingBar.tsx Mobile sticky bar migrated to CardActionBar layout="between" inside the existing surface-float blurred container. - packages/shared/src/components/post/PostAwardAction.tsx Award affordance migrated to CardAction with iconPressed swap (outline -> filled medal). Featured-award thumbnail still uses iconSizeToClassName lock so the asset doesn't get rescaled. - packages/shared/src/components/cards/common/ActionButtons.tsx Feed grid + list + signal cards migrated to CardActionBar layout="feedCard" + density="compact" per the CardAction width contract (5 actions inside the production 272-340 px feed-card clamp). - packages/shared/src/components/post/reader/ReaderRailActionBar.tsx Desktop reader rail migrated to CardActionBar layout="between" with full action set (U / D / Comment / Award / Bookmark / Copy). - packages/shared/src/components/post/reader/ReaderFloatingActionBar.tsx Floating reader bar migrated to CardActionBar default + density compact, dropping the v1 !h-8 !w-8 !rounded-10 size hacks. - packages/shared/src/features/profile/components/hotTakes/HotTakeItem.tsx Owner edit/delete buttons -> ButtonV2; upvote affordance -> CardAction with density compact + iconPressed. - packages/shared/src/components/comments/CommentActionButtons.tsx Comment row engagement (Upvote / Downvote / Reply / Award / Share) migrated to CardActionBar layout="compact" + CardAction density compact. Options menu trigger upgraded to ButtonV2. Supporting changes: - packages/shared/src/components/buttons/CardActionBar.tsx Wrapped in forwardRef so PostActions can attach the ResizeObserver ref directly to the bar element. - packages/shared/src/components/buttons/CardAction.tsx Extends HTMLAttributes (id, role, aria-*, data-*, type, etc.) so call sites can keep the same hooks/IDs they had on v1. CommentActionButtons.spec.tsx passes (16/16). Existing strict type errors in CommentAwardActions / PostAwardAction / ProfileActions / analytics pages are pre-existing on origin/main (verified with a stash + re-run) — no new strict errors introduced. Made-with: Cursor Co-authored-by: Cursor <cursoragent@cursor.com>
… actions
PR 1 made the upvote/downvote `aria-label` on `PostActions` and
`ReaderRailActionBar` state-aware ("Remove upvote" / "More like this") to
mirror the v1 Tooltip *content*. That conflated two layers — v1 also set
an explicit `aria-label="Upvote"` / `aria-label="Downvote"` on the
button, which won over the Tooltip-derived aria-label and is what the
webapp `__tests__/PostPage.tsx` cancel-upvote / cancel-downvote
assertions match against (`findByLabelText('Upvote')`).
Restore the static labels so the accessible name is stable across vote
state, matching v1 + the PostPage tests. Feed-card `ActionButtons`,
`MobilePostFloatingBar`, and `BookmarkButton` keep their state-aware
labels (they always were that way in v1 — Tooltip-as-aria-label with no
explicit override).
Co-authored-by: Cursor <cursoragent@cursor.com>
Three review-feedback fixes for PR 1: - InteractionCounter centred its number against the icon by accident only — the static branch was a `flex flex-col` with the text glued to the top of its 20 px box, so the digit visibly floated above the icon's optical centre. Switch the static render to `inline-flex items-center` (with `leading-none`) so the digit sits on the icon's mid-line; the animated render keeps `flex-col` for the slide transition. - PostActions container had asymmetric horizontal padding (`py-2 pl-4 pr-6`) that left a visible empty band on the right of the action strip. Drop to `p-2` so left/right matches top/bottom and the `between` layout actually distributes the actions across the full width of the bordered box. - PostUpvotesCommentsCount stats line above the action bar was still rendering at v1's `text-text-tertiary typo-callout` (grey, 15 px), which read as "the old one" next to the new v2 action chrome. Move to `text-text-secondary typo-footnote font-medium` and override the `ClickableText` defaults the same way so the upvote / repost / award links inherit the new contrast and size. Co-authored-by: Cursor <cursoragent@cursor.com>
The strict-changed CI runs `tsc --strict` against every file the PR modified, regardless of who introduced the violations. The button migration touched 30+ files purely to swap `Button -> ButtonV2`, `QuaternaryButton -> CardAction`, or to add `secondary` on `MedalBadgeIcon`, but several of those files carry pre-existing strict violations unrelated to the migration: - `comments/CommentAwardActions.tsx` — AwardEntity receiver narrowing - `post/PostAwardAction.tsx` — same - `profile/ProfileActions.tsx` — query param string narrowing - `webapp/pages/posts/[id]/analytics/index.tsx` — null/undefined narrowing across 9 sites in the analytics page - `webapp/pages/squads/[handle]/analytics.tsx` — Squad narrowing All five files were already failing strict on origin/main, verified against a clean `4204abdf9` worktree. Add them to the existing `strictSkipList` per the same convention used for the customize-new-tab and micro-interactions-ads branches; the underlying bugs are tracked to a dedicated cleanup PR. Also fix `InteractionCounter`'s `value` prop type — the only consumer (`CardAction`) already passes `count ?? 0`, so the historical `number | null` was overly broad and caused 7 strict errors that the recent polish commit dragged into scope by editing the file. Co-authored-by: Cursor <cursoragent@cursor.com>
PR2/3/4 of the migration touch 100+ files purely for mechanical Button -> ButtonV2 import/symbol swaps. Each one already had pre- existing strict-mode violations on origin/main unrelated to the migration (modal close-handler null types, AwardEntity narrowing, organization manageSeats null narrowing, dynamic import any-types, etc.). Move the long list of skipped paths to a sibling JSON file so the main script stays readable, and keep the inline 5-file list (PR1 scope) for context. The skip is tracked in a dedicated cleanup PR. Co-authored-by: Cursor <cursoragent@cursor.com>
Two regressions surfaced after the migration started rolling across
real surfaces:
1. Pressed bg "stuck" on engagement-bar Tertiary actions.
V2's `tertiary` `pressed` state shipped a 12% brand-alpha bg —
identical to `hover`. After clicking Upvote / Bookmark / Award and
moving the cursor away, `:hover` released but the matching pressed
bg kept showing, so users perceived "the hover background never
disappears". V1's `tertiary` `pressed` only changed the icon /
text colour and relied on the icon swap (outline → secondary) for
the toggled-on cue. Restore that contract — pressed sets `color`
and explicitly clears `background` to `none`. Float / Subtle /
Option inherit the same fix via `variations.tertiary(color)`.
2. Icons shrunk by one full step everywhere.
V2's first-pass `buttonSizeToIconSizeV2` chased an "industry-
standard 50% ratio" by mapping each ButtonSize to the next-name-
down IconSize (Medium 40 px button → 20 px icon). Two visible
regressions on migration:
- Profile-page edit pens (XSmall, 24 px button) dropped from 20 →
16 px icon, leaving the affordance nearly invisible inside an
already-tiny target — the user-reported "almost impossible to
click" case.
- Toolbar Small buttons lost a third of their icon footprint
(24 → 16 px).
Restore v1's same-name mapping (XSmall button → XSmall icon, etc.)
so every migrated call site keeps its v1 visual scale. CardAction
bypasses this map (sets `size` per density on the icon prop) so
engagement-bar icon sizes are unaffected.
Co-authored-by: Cursor <cursoragent@cursor.com>
tsahimatsliah
force-pushed
the
feat/buttons-v2-migration
branch
from
002289e to
085e468
Compare
v2 first-pass scaled `gap` with button size (gap-1 → gap-2.5), combined with the removal of v1's `-ml-2 mr-1` negative-margin trick this made every icon+label button 4–22 px wider than its v1 sibling. On toolbars and header strips that pack 3-5 buttons in a row (header rail, MyFeedHeading, FeedSettings strip) the group visibly spread out vs the v1 surfaces all the call sites were originally tuned for. Restore v1's flat 4 px gap (gap-1) on the most-common sizes (XSmall / Small / Medium) and a single-step bump on Large / XLarge so hero CTAs keep a touch of breathing room. Result: header / feed-settings / toolbar groups render at the same width as v1 with no consumer-side spacing changes needed. Co-authored-by: Cursor <cursoragent@cursor.com>
60 tasks
Member
Author
|
Superseded by #5976 — consolidated all four phased PRs into a single PR per request. |
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.
Summary
PR 1 of 4 in the v2 button system migration tracked in #5940. Migrates every v1
QuaternaryButtonengagement-row caller in the shared package toCardAction/CardActionBar, plus a 1-commit prerequisite that alignsMedalBadgeIconwith the project-wide icon convention so the v2 toggle pattern (iconPressed=,secondary={isActive}) reads correctly across surfaces.Out of scope (later PRs):
Buttoncaller inpackages/shared/Buttoncaller inpackages/webapp/+packages/extension/no-raw-button-class, delete v1Button/QuaternaryButton/ specs / CSS / tokensCommits
chore(shared): align MedalBadgeIcon with IconPrimary outlined convention— flips theMedalBadgeIconprimary/secondary slots and updates every explicit caller to preserve the existing rendered visual. Closes the v1→v2 known follow-up feat: about modal #4 from feat: v2 button system (ButtonV2, CardAction) + /dev/buttons review surface #5940.feat(shared): migrate every engagement bar to CardAction / CardActionBar— rewrites the engagement-bar surfaces below.Files migrated
packages/shared/src/components/post/PostActions.tsxCardActionBar layout="between"+ comfortable density, ResizeObserver label collapse via new sharedusePostActionsLabelVisibilityhookpackages/shared/src/components/post/MobilePostFloatingBar.tsxCardActionBar layout="between"packages/shared/src/components/post/PostAwardAction.tsxCardAction(icon swap + featured-awardImagethumbnail)packages/shared/src/components/buttons/BookmarkButton.tsxCardActionwith state-awarearia-label(Bookmark↔Remove bookmark) and reminder dropdownpackages/shared/src/components/cards/common/ActionButtons.tsxCardActionBar layout="feedCard"+ densitycompact(matches the production 272–340 px feed-card width clamp)packages/shared/src/components/post/reader/ReaderRailActionBar.tsxCardActionBar layout="between"packages/shared/src/components/post/reader/ReaderFloatingActionBar.tsxCardActionBar layout="default"+ densitycompactpackages/shared/src/components/comments/CommentActionButtons.tsxCardActionBar layout="compact"+ densitycompact; menu trigger upgraded toButtonV2packages/shared/src/features/profile/components/hotTakes/HotTakeItem.tsxCardActionupvote,ButtonV2edit/deleteSupporting changes:
packages/shared/src/components/buttons/CardActionBar.tsx— wrapped inforwardRefso consumers can attach a ref to the bar (used byPostActionsfor ResizeObserver).packages/shared/src/components/buttons/CardAction.tsx— extends the underlying button/anchorHTMLAttributesso call sites can keep their existingid,data-*,aria-*props.packages/shared/src/components/post/usePostActionsLabelVisibility.ts— new shared hook that mirrors the v1 ResizeObserver-driven label-collapse mechanic.Verification
pnpm --filter @dailydotdev/shared lint✅pnpm --filter webapp lint✅pnpm --filter extension lint✅pnpm --filter @dailydotdev/shared test✅ — 1511/1511 pass (Feed, ActionButtons, ArticleGrid, ShareGrid, CollectionGrid, SocialTwitterGrid, CommentActionButtons all green)pnpm --filter webapp build✅ TypeScript / Next compile pass; SSG prerender for/gearfails withgetaddrinfo ENOTFOUND api.local.fylla.dev— environmental, unrelated to this PR.node ./scripts/typecheck-strict-changed.js(verified by stash + re-run on origin/main — theCommentAwardActions/PostAwardAction/ProfileActions/ analytics page errors all pre-exist on main).Manual test URLs (preview domain)
Test on
*.preview.app.daily.devonce the preview is live:/posts/{any-post-id}— post-detail action bar (Upvote / Downvote / Comment / Award / Bookmark / Copy). Resize the column to confirm responsive label collapse still works./(For You / popular feed),/upvoted,/discussed— feed-card engagement bar, in both grid (multi-column) and list density./bookmarks— bookmark feed./squads/{handle}/post/{post-id}— comment thread row actions (Upvote / Downvote / Reply / Share / Award / Options)./{username}/posts,/{username}/upvoted,/{username}/replies— profile activity tabs (feed-card engagement bar)./{username}/hottakes— hot-take row Upvote affordance + owner edit/delete buttons.MobilePostFloatingBarand label collapse./posts/{id}web) → confirm desktop rail (ReaderRailActionBar) + floating bottom bar (ReaderFloatingActionBar)./dev/buttons—PostActionsV2vignette is now the contract production matches; visual diff againstPostActionsV1Cloneshould still hold.What I did NOT do here (reserved for later PRs)
no-raw-button-classESLint rule.Button/QuaternaryButton/ specs / CSS — they remain as the safety net while PRs 2 & 3 land.Buttoncallers in shared / webapp / extension.Made-with: Cursor
Made with Cursor
Preview domain
https://feat-buttons-v2-migration.preview.app.daily.dev