Skip to content

feat(react-headless-components-preview): add ToolbarRadioButton#36100

Merged
dmytrokirpa merged 2 commits intomicrosoft:masterfrom
dmytrokirpa:feat/headless-toolbar-radio-button
May 6, 2026
Merged

feat(react-headless-components-preview): add ToolbarRadioButton#36100
dmytrokirpa merged 2 commits intomicrosoft:masterfrom
dmytrokirpa:feat/headless-toolbar-radio-button

Conversation

@dmytrokirpa
Copy link
Copy Markdown
Contributor

@dmytrokirpa dmytrokirpa commented May 5, 2026

Summary

  • Adds ToolbarRadioButton to react-headless-components-preview as a headless wrapper around useToolbarRadioButtonBase_unstable from @fluentui/react-toolbar
  • Stamps data-disabled, data-disabled-focusable, data-icon-only, and data-checked data attributes on the root element via stringifyDataAttribute, matching the same pattern as ToolbarToggleButton
  • Renders via renderToggleButton_unstable from @fluentui/react-button (same as ToolbarToggleButton)
  • Exports ToolbarRadioButton, renderToolbarRadioButton, useToolbarRadioButton, and their types from both the component barrel and the package public API (toolbar.ts)
  • Adds a Storybook RadioButton story showing three mutually exclusive text-alignment buttons inside a ToolbarRadioGroup

Test plan

  • yarn nx run react-headless-components-preview:type-check passes
  • ToolbarRadioButton story renders in Storybook with correct initial selection (left)
  • Clicking a radio button selects it and deselects the previous one (data-checked toggles)
  • Disabled state correctly sets data-disabled and data-disabled-focusable attributes
  • Icon-only usage sets data-icon-only attribute

🤖 Generated with Claude Code

…nent

Wraps useToolbarRadioButtonBase_unstable from @fluentui/react-toolbar with
data-attribute stamping (data-disabled, data-disabled-focusable, data-icon-only,
data-checked) following the same headless pattern as ToolbarToggleButton.
Includes Storybook story showing mutually exclusive alignment selection.

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
@github-actions
Copy link
Copy Markdown

github-actions Bot commented May 5, 2026

📊 Bundle size report

Package & Exports Baseline (minified/GZIP) PR Change
react-headless-components-preview
react-headless-components-preview: entire library
105.261 kB
31.122 kB
106.031 kB
31.23 kB
770 B
108 B

🤖 This report was generated against 30a42808ed35608a185fab611fd0465ec05b7748

@github-actions
Copy link
Copy Markdown

github-actions Bot commented May 5, 2026

Pull request demo site: URL

@dmytrokirpa dmytrokirpa self-assigned this May 5, 2026
@dmytrokirpa dmytrokirpa marked this pull request as ready for review May 5, 2026 16:00
@dmytrokirpa dmytrokirpa requested a review from a team as a code owner May 5, 2026 16:00
@dmytrokirpa dmytrokirpa merged commit 1012c9d into microsoft:master May 6, 2026
12 checks passed
@dmytrokirpa dmytrokirpa deleted the feat/headless-toolbar-radio-button branch May 6, 2026 08:51
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Projects

None yet

Development

Successfully merging this pull request may close these issues.

3 participants