feat(react-headless-components-preview): add Toolbar component#35992
Open
dmytrokirpa wants to merge 3 commits intomicrosoft:masterfrom
Open
feat(react-headless-components-preview): add Toolbar component#35992dmytrokirpa wants to merge 3 commits intomicrosoft:masterfrom
dmytrokirpa wants to merge 3 commits intomicrosoft:masterfrom
Conversation
📊 Bundle size report
🤖 This report was generated against 70972f1b1169ae00247b080202ce05581c2dd62f |
|
Pull request demo site: URL |
![github-actions[bot]](https://avatars.githubusercontent.com/in/15368?s=60&v=4){kind=small}
dmytrokirpa
force-pushed
the
base/toolbar
branch
3 times, most recently
from
45a3998 to
aedb98e
Compare
Contributor
Author
|
@copilot fix the TS type mismatch in React 17 https://github.com/microsoft/fluentui/actions/runs/24515914869/job/71659709832?pr=35992#step:10:1576 |
dmytrokirpa
force-pushed
the
base/toolbar
branch
from
45cd22d to
082e0ad
Compare
dmytrokirpa
force-pushed
the
base/toolbar
branch
3 times, most recently
from
d434e7f to
ec6a650
Compare
mainframev
reviewed
Apr 22, 2026
| /** | ||
| * Whether the toolbar toggle button is in a vertically oriented toolbar. | ||
| */ | ||
| vertical?: boolean; |
Contributor
There was a problem hiding this comment.
is this needed? original ToolbarToggleButton did not accept vertical prop. If this is needed for data-vertical then I think we should add that inside useToolbarToggleButton
Contributor
Author
There was a problem hiding this comment.
you're right, removed!
| const button = getByRole('button', { name: 'Bold' }); | ||
| expect(button).toHaveAttribute('aria-pressed', 'true'); | ||
| expect(button).toHaveAttribute('data-checked'); | ||
| }); |
Contributor
There was a problem hiding this comment.
should not we also include testing of disabled and icon-only?
dmytrokirpa
force-pushed
the
base/toolbar
branch
from
e7dd6c0 to
0450181
Compare
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
2 participants
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
This pull request introduces a new headless
Toolbarcomponent suite to the@fluentui/react-headless-components-previewpackage. It adds the coreToolbarcomponent and related subcomponents (such asToolbarButton,ToolbarDivider,ToolbarGroup, andToolbarRadioGroup), 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:
Toolbar,ToolbarButton,ToolbarDivider,ToolbarGroup, andToolbarRadioGroupcomponents, each with corresponding hooks (useToolbar,useToolbarButton, etc.), types, and render functions, providing a headless API for building toolbars. [1] [2] [3] [4] [5]@fluentui/react-toolbardependency to provide base implementations for the Toolbar primitives.Component implementation details:
data-vertical,data-disabled,data-icon-only) on the root element to facilitate styling and state indication. [1] [2] [3] [4] [5]renderButton_unstable,renderDivider_unstable). [1] [2]Testing:
Toolbarcomponent 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.