feat(shared): Buttons V2 migration · PR 1 — engagement bars (CardAction)#5969
Open
tsahimatsliah wants to merge 3 commits intomainfrom
Open
feat(shared): Buttons V2 migration · PR 1 — engagement bars (CardAction)#5969tsahimatsliah wants to merge 3 commits intomainfrom
tsahimatsliah wants to merge 3 commits intomainfrom
Conversation
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>
|
The latest updates on your projects. Learn more about Vercel for GitHub.
|
16 tasks
… 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>
20 tasks
9 tasks
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