Skip to content

feat(react-headless-components-preview): add Toolbar component#35992

Open
dmytrokirpa wants to merge 6 commits intomicrosoft:masterfrom
dmytrokirpa:base/toolbar
Open

feat(react-headless-components-preview): add Toolbar component#35992
dmytrokirpa wants to merge 6 commits intomicrosoft:masterfrom
dmytrokirpa:base/toolbar

Conversation

@dmytrokirpa
Copy link
Copy Markdown
Contributor

@dmytrokirpa dmytrokirpa commented Apr 15, 2026

This pull request introduces a new headless Toolbar component suite to the @fluentui/react-headless-components-preview package. It adds the core Toolbar component and related subcomponents (such as ToolbarButton, ToolbarDivider, ToolbarGroup, and ToolbarRadioGroup), along with their hooks, types, and renderers. These components are built on top of the primitives from @fluentui/react-toolbar, exposing a headless API for advanced composition and styling. The PR also adds tests and updates package dependencies.

New Toolbar suite integration:

  • Added Toolbar, ToolbarButton, ToolbarDivider, ToolbarGroup, and ToolbarRadioGroup components, each with corresponding hooks (useToolbar, useToolbarButton, etc.), types, and render functions, providing a headless API for building toolbars. [1] [2] [3] [4] [5]
  • Extended the public API and type definitions to include all new Toolbar-related components, props, states, slots, and context values, ensuring they are documented and available for consumers. [1] [2] [3] [4]
  • Integrated the new @fluentui/react-toolbar dependency to provide base implementations for the Toolbar primitives.

Component implementation details:

  • Each Toolbar subcomponent sets appropriate data attributes (e.g., data-vertical, data-disabled, data-icon-only) on the root element to facilitate styling and state indication. [1] [2] [3] [4] [5]
  • Render functions for Toolbar subcomponents delegate rendering to the corresponding base component renderers from Fluent UI (e.g., renderButton_unstable, renderDivider_unstable). [1] [2]

Testing:

  • Added conformance and rendering tests for the Toolbar component to ensure correct behavior and accessibility attributes.

This update enables advanced headless composition of toolbars and related controls using Fluent UI primitives in the preview package.

@dmytrokirpa dmytrokirpa requested review from a team as code owners April 15, 2026 13:53
@dmytrokirpa dmytrokirpa marked this pull request as draft April 15, 2026 13:53
@dmytrokirpa dmytrokirpa self-assigned this Apr 15, 2026
@github-actions
Copy link
Copy Markdown

github-actions Bot commented Apr 15, 2026

📊 Bundle size report

Package & Exports Baseline (minified/GZIP) PR Change
react-headless-components-preview
react-headless-components-preview: entire library
70.65 kB
20.862 kB
74.506 kB
21.7 kB
3.856 kB
838 B

🤖 This report was generated against 81852161f3ed30c461b2c8e7af30b8d0b4387fa1

@github-actions
Copy link
Copy Markdown

Pull request demo site: URL

@dmytrokirpa dmytrokirpa force-pushed the base/toolbar branch 3 times, most recently from 45a3998 to aedb98e Compare April 16, 2026 15:37
@dmytrokirpa
Copy link
Copy Markdown
Contributor Author

@dmytrokirpa dmytrokirpa force-pushed the base/toolbar branch 3 times, most recently from d434e7f to ec6a650 Compare April 21, 2026 19:30
@dmytrokirpa dmytrokirpa marked this pull request as ready for review April 22, 2026 11:27
@dmytrokirpa dmytrokirpa enabled auto-merge (squash) April 22, 2026 20:41
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.

2 participants