Skip to content

feat(scraps): add ToggleCard component - #128676

Merged
natemoo-re merged 3 commits into
masterfrom
nm/scraps/radio-card
Oct 23, 2026
Merged

feat(scraps): add ToggleCard component#128676
natemoo-re merged 3 commits into
masterfrom
nm/scraps/radio-card

Conversation

@natemoo-re

@natemoo-re natemoo-re commented Oct 23, 2026 •
edited
Loading

Copy link
Copy Markdown
Member

Consolidates existing checkbox/radio cards onto a new ToggleCard primitive with variant: 'radio' | 'checkbox' | 'button'.

Replaces custom card wrappers throughout checkout, onboarding, billing, and analytics. SegmentedRadioField is kept as a legacy form adapter.

closes DE-1624

Changed

Location Before After
Settings › Subscription › Spending limits, light Settings › Subscription › Spending limits, light before Settings › Subscription › Spending limits, light after
Settings › Subscription › Spending limits, dark Settings › Subscription › Spending limits, dark before Settings › Subscription › Spending limits, dark after
Checkout › Plan, light Checkout › Plan, light before Checkout › Plan, light after
Checkout › Plan, dark Checkout › Plan, dark before Checkout › Plan, dark after
Checkout › Billing cycle, light Checkout › Billing cycle, light before Checkout › Billing cycle, light after
Checkout › Billing cycle, dark Checkout › Billing cycle, dark before Checkout › Billing cycle, dark after
Checkout › Legacy Seer, light Checkout › Legacy Seer, light before Checkout › Legacy Seer, light after
Checkout › Legacy Seer, dark Checkout › Legacy Seer, dark before Checkout › Legacy Seer, dark after
Checkout › Seer, light Checkout › Seer, light before Checkout › Seer, light after
Checkout › Seer, dark Checkout › Seer, dark before Checkout › Seer, dark after
Monitors › Metric › Issue detection, light Monitors › Metric › Issue detection, light before Monitors › Metric › Issue detection, light after
Monitors › Metric › Issue detection, dark Monitors › Metric › Issue detection, dark before Monitors › Metric › Issue detection, dark after
Monitors › Mobile build › Measurement, light Monitors › Mobile build › Measurement, light before Monitors › Mobile build › Measurement, light after
Monitors › Mobile build › Measurement, dark Monitors › Mobile build › Measurement, dark before Monitors › Mobile build › Measurement, dark after
Monitors › Mobile build › Issue detection, light Monitors › Mobile build › Issue detection, light before Monitors › Mobile build › Issue detection, light after
Monitors › Mobile build › Issue detection, dark Monitors › Mobile build › Issue detection, dark before Monitors › Mobile build › Issue detection, dark after
Onboarding › Platform, light Onboarding › Platform, light before Onboarding › Platform, light after
Onboarding › Platform, dark Onboarding › Platform, dark before Onboarding › Platform, dark after
Onboarding › Products, light Onboarding › Products, light before Onboarding › Products, light after
Onboarding › Products, dark Onboarding › Products, dark before Onboarding › Products, dark after
Onboarding › Manual setup, light Onboarding › Manual setup, light before Onboarding › Manual setup, light after
Onboarding › Manual setup, dark Onboarding › Manual setup, dark before Onboarding › Manual setup, dark after
Project creation › Manual setup, light Project creation › Manual setup, light before Project creation › Manual setup, light after
Project creation › Manual setup, dark Project creation › Manual setup, dark before Project creation › Manual setup, dark after
Project creation › Platform, light Project creation › Platform, light before Project creation › Platform, light after
Project creation › Platform, dark Project creation › Platform, dark before Project creation › Platform, dark after
Project creation › Products, light Project creation › Products, light before Project creation › Products, light after
Project creation › Products, dark Project creation › Products, dark before Project creation › Products, dark after
Project creation › Alerts, custom threshold, light Project creation › Alerts, custom threshold, light before Project creation › Alerts, custom threshold, light after
Project creation › Alerts, custom threshold, dark Project creation › Alerts, custom threshold, dark before Project creation › Alerts, custom threshold, dark after

Native inputs cover each card’s selection area, preserving the existing aria-label click selectors.

@linear-code

linear-code Bot commented Oct 23, 2026

Copy link
Copy Markdown

DE-1624

@github-actions github-actions Bot added the Scope: Frontend Automatically applied to PRs that change frontend components label Oct 23, 2026
@github-actions

github-actions Bot commented Oct 23, 2026 •
edited
Loading

Copy link
Copy Markdown
Contributor

Story previews

Preview the stories changed in this PR on the Vercel deployment:

Preview deployment: https://sentry-7fw90hs8b.sentry.dev

@natemoo-re natemoo-re mentioned this pull request Oct 23, 2026
Closed
@natemoo-re
natemoo-re changed the base branch from master to nm/test/radio-card-selectors October 23, 2026 18:08
@natemoo-re
natemoo-re force-pushed the nm/scraps/radio-card branch from 920f08e to 3664576 Compare October 23, 2026 18:08
@natemoo-re
natemoo-re force-pushed the nm/scraps/radio-card branch from 3664576 to 00b7ccf Compare October 23, 2026 19:04
@natemoo-re
natemoo-re changed the base branch from nm/test/radio-card-selectors to master October 23, 2026 19:05
@natemoo-re
natemoo-re force-pushed the nm/scraps/radio-card branch from 00b7ccf to 4722333 Compare October 23, 2026 19:55
@natemoo-re natemoo-re changed the title feat(scraps): Add reusable RadioCard controls feat(scraps): Normalize selection cards with ToggleCard Oct 23, 2026
@natemoo-re
natemoo-re force-pushed the nm/scraps/radio-card branch from 4722333 to 8eccdb2 Compare October 23, 2026 21:17
@natemoo-re
feat(scraps): Normalize selection cards with ToggleCard
7603309 
Share native controls, indicators, theme-aware chonk, and expanded details across card consumers.

Refs DE-1624
@natemoo-re
natemoo-re force-pushed the nm/scraps/radio-card branch from 8eccdb2 to 7603309 Compare October 23, 2026 21:29
@natemoo-re
natemoo-re marked this pull request as ready for review October 23, 2026 21:54
@natemoo-re
natemoo-re requested review from a team as code owners October 23, 2026 21:54
scttcper
scttcper approved these changes Oct 23, 2026
View reviewed changes

@scttcper scttcper left a comment

Copy link
Copy Markdown
Member

Choose a reason for hiding this comment

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

lot of consolidation there

@natemoo-re natemoo-re changed the title feat(scraps): Normalize selection cards with ToggleCard feat(scraps): add ToggleCard component Oct 23, 2026
@natemoo-re
natemoo-re enabled auto-merge (squash) October 23, 2026 22:38
@natemoo-re
natemoo-re merged commit f3e53fc into master Oct 23, 2026
77 checks passed
@natemoo-re
natemoo-re deleted the nm/scraps/radio-card branch October 23, 2026 22:44

This branch was successfully deployed

1 active deployment
Preview — 3892f0cc Deployed Oct 23, 2026 by vercel[bot]
View deployment
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Reviewers

@scttcper scttcper scttcper approved these changes
@itsdangold itsdangold Awaiting requested review from itsdangold
@JoshuaKGoldberg JoshuaKGoldberg Awaiting requested review from JoshuaKGoldberg

Assignees

No one assigned

Labels

Scope: Frontend Automatically applied to PRs that change frontend components

Projects

None yet

Milestone

No milestone

Development

Successfully merging this pull request may close these issues.

2 participants

@natemoo-re @scttcper