Skip to content

✨ feat: close small API gaps in DropdownButton, Switch, Alert, Stepper and Button - #724

Open
futjesus wants to merge 1 commit into
mainfrom
feat/small-api-gaps
Open

futjesus wants to merge 1 commit into
mainfrom
feat/small-api-gaps

Conversation

@futjesus

@futjesus futjesus commented Sep 3, 2026

Copy link
Copy Markdown
Contributor

Summary

Five small, independent additions that microfrontends were working around:

  • DropdownButton: disabled, isLoading (spinner replaces the chevron, trigger disabled + aria-busy) and variant / appearance / version forwarded to the trigger. Billing (DownloadInvoiceButton) fell back to a plain Button for the in-flight download.
  • Switch: isLoading (disabled + spinner + aria-busy) and labels: { on, off } that switch the visible label and the accessible name with the state. Settings (StatusCell) composed both around the switch.
  • Alert: action (call to action at the right end) and icon (replaces the type icon). Billing built AlertBanner from scratch for this layout.
  • Stepper: fullWidth stretches nav and list and gives horizontal steps equal width. Dashboard-manager (SignupStepper) and billing (Stepper) reproduced it with the same classNames overrides.
  • Button: asChild + disabled now sets aria-disabled, tabIndex=-1 and pointer-events-none on the child instead of an invalid disabled attribute on a link (dashboard-manager BillingStatCard swapped the Link for a span and styled it by hand). shape="pill" covers the signup PillButton.

All defaults unchanged.

Test plan

  • New tests per component (disabled/loading trigger, state labels + loading switch, alert action/icon, full-width distribution, inert disabled link + pill)
  • npx vitest run on the five components (128), lint, types, prettier
  • Storybook: DropdownButtonStates; SwitchStateLabelsAndLoading; AlertWithAction; StepperHorizontal full width; Button/Light/Pill

…r and Button

DropdownButton gains `disabled`, `isLoading` (spinner in place of the
chevron, trigger disabled and aria-busy) and `variant` / `appearance` /
`version` passthrough; billing fell back to a plain Button for the
in-flight download.

Switch gains `isLoading` (disabled + spinner + aria-busy) and `labels`
with on/off text that also names the control; settings composed both
around the switch in its webhooks StatusCell.

Alert gains `action` (call to action at the right end) and `icon`
(replaces the type icon); billing built an AlertBanner from scratch for
this layout.

Stepper gains `fullWidth`, which stretches the nav and list and gives
horizontal steps equal width; dashboard-manager and billing reproduced it
with the same `classNames` overrides.

Button with `asChild` + `disabled` now marks the child `aria-disabled`,
removes it from the tab order and blocks pointer events instead of setting
an invalid `disabled` attribute on a link; dashboard-manager swapped the
Link for a span and styled it by hand. `shape="pill"` covers the signup
PillButton.

This branch has not been deployed

No deployments
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant