Skip to content

feat(react-cap-theme): add react-spinbutton component#658

Draft
pixel-perfectionist wants to merge 2 commits into
mainfrom
olkatruk/cap-theme/spin-button
Draft

feat(react-cap-theme): add react-spinbutton component#658
pixel-perfectionist wants to merge 2 commits into
mainfrom
olkatruk/cap-theme/spin-button

Conversation

@pixel-perfectionist

Copy link
Copy Markdown
Member

Adds react-spinbutton component to react-cap-theme (CAP theme style overrides for SpinButton).

Changes

  • SpinButton.types.ts — component types
  • useSpinButtonStyles.styles.ts — CAP theme style hook overrides
  • index.ts — exports
  • changefile

Draft for review.

Add a CAP-themed SpinButton style hook layering CAP deltas on the Fluent base
state: pill radius on the `outline` appearance (root and `::before` border),
accessible stroke on all four borders (Fluent base only makes the bottom
accessible), CAP field heights (36px medium / 28px small), and removal of the
Fluent animated focus underline (`::after`) on `outline` only — other
appearances keep the base focus underline.

Registered via CAP_STYLE_HOOKS.useSpinButtonStyles_unstable, mirroring the
react-input / react-search pattern.

Co-authored-by: Copilot <223556219+Copilot@users.noreply.github.com>
@pixel-perfectionist pixel-perfectionist force-pushed the olkatruk/cap-theme/spin-button branch from a6101de to 0eba508 Compare June 9, 2026 00:34
Default, Appearance, Size, and Disabled stories adapted from the Fluent
react-spinbutton examples. Rendered under CAP_STYLE_HOOKS via the storybook
decorator to visually verify the CAP outline overrides.
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