feat(components): add selected icon to ToggleButton

[ShreyasGit51283]

Summary

A selected ToggleButton currently reads only from its border and fill. This adds an explicit selection affordance, matching the Figma work in the LaunchPad branch.

Try out the design here → interactive Storybook for this PR. No checkout or setup needed — click between the options to watch the icon swap.

Two new props on ToggleButton:

• icon — leading icon shown while the button is not selected.
• selectedIcon — leading icon shown while it is selected. Defaults to check-circle; pass null to opt out.

The two never render together: selecting a button with a leading icon swaps that icon for check-circle rather than stacking them, so a button shows exactly one icon in either state.

appearance="elevated" defaults selectedIcon to null and shows no icon when selected — its raised surface already makes the selection legible, so a check would be redundant. Passing selectedIcon explicitly still opts back in.

Implementation wraps children in composeRenderProps to read RAC's isSelected render prop, so no new state and no change to the existing class/variant logic. The icon is aria-hidden; selection is still announced through aria-pressed / aria-selected.

Reviewer call-out

This changes rendered output for every existing selected default-appearance toggle button, not just new usages — in gonfalon that includes the access-token status filter and CategoryPills. Two things worth an explicit decision:

1. Bump level. Filed as minor (additive props, additive behavior), but the repo's rules list "changed default" under major. Happy to re-cut as major if you read it that way.
2. Width. A selected button is ~20px wider than an unselected one, so segments resize as selection moves. Most visible in narrow groups like 5% / 10% / 50% / 90% / Custom. The design decision so far was to accept this rather than reserve icon space; say the word if you'd prefer it reserved.

Screenshots

Selected state — a selected button that has no icon of its own now shows check-circle. This is the existing ToggleButtonGroup → Example story, unchanged apart from the new default:

Group where every button has an icon — "First" is selected, so its flask has been replaced by the check, while "Second" and "Third" keep flag and toggle-on. One icon per button in either state, never two:

Chromatic has the full picture: 14 visual and accessibility changes to accept as baselines, covering every existing story with a selected toggle.

Testing approaches

• Seven unit tests in ToggleButton.spec.tsx covering: check renders when selected, no icon when unselected, leading icon while unselected, icon-swaps-to-check on selection, custom selectedIcon, selectedIcon={null}, elevated renders nothing, and the icon is aria-hidden.
• Two new stories in ToggleButtonGroup.stories.tsx — SelectedIconSwap (with a play function that clicks through to show the swap) and WithoutSelectedIcon.
• Doc note on the elevated stories explaining why that appearance opts out.
• pnpm typecheck, pnpm oxlint:js, pnpm fmt:check clean; all 16 tests across the three toggle specs pass.

_{Screenshots are hosted on the assets/pr-2017-screenshots branch (images only, never merged) — safe to delete once this lands.}

[changeset-bot]

🦋 Changeset detected

Latest commit: bf9277b

The changes in this PR will be included in the next version bump.

This PR includes changesets to release 1 package

Name	Type
@launchpad-ui/components	Minor

Not sure what this means? Click here to learn what changesets are.

Click here if you're a maintainer who wants to add another changeset to this PR

[pkg-pr-new]

yarn add https://pkg.pr.new/@launchpad-ui/components@2017.tgz

yarn add https://pkg.pr.new/@launchpad-ui/icons@2017.tgz

yarn add https://pkg.pr.new/@launchpad-ui/tokens@2017.tgz

commit: bf9277b