feat(react-headless-components-preview): add Toolbar component#35992
Draft
dmytrokirpa wants to merge 3 commits intomicrosoft:masterfrom
Draft
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 c93849cf045adf92b80a2a4fa8efc615f94f9a86 |
|
Pull request demo site: URL |
![github-actions[bot]](https://avatars.githubusercontent.com/in/15368?s=60&v=4){kind=small}
| @@ -0,0 +1,7 @@ | |||
| { | |||
There was a problem hiding this comment.
🕵🏾♀️ visual changes to review in the Visual Change Report
vr-tests-react-components/Avatar Converged 1 screenshots
| Image Name | Diff(in Pixels) | Image Type |
|---|---|---|
| vr-tests-react-components/Avatar Converged.badgeMask.normal.chromium.png | 1 | Changed |
vr-tests-react-components/Charts-DonutChart 2 screenshots
| Image Name | Diff(in Pixels) | Image Type |
|---|---|---|
| vr-tests-react-components/Charts-DonutChart.Dynamic - RTL.default.chromium.png | 5570 | Changed |
| vr-tests-react-components/Charts-DonutChart.Dynamic.default.chromium.png | 5581 | Changed |
vr-tests-react-components/Menu 1 screenshots
| Image Name | Diff(in Pixels) | Image Type |
|---|---|---|
| vr-tests-react-components/Menu.Nested Submenus Small Viewport Stacked.nested menu.chromium.png | 353 | Changed |
vr-tests-react-components/Menu Converged - submenuIndicator slotted content 2 screenshots
| Image Name | Diff(in Pixels) | Image Type |
|---|---|---|
| vr-tests-react-components/Menu Converged - submenuIndicator slotted content.default.submenus open.chromium.png | 413 | Changed |
| vr-tests-react-components/Menu Converged - submenuIndicator slotted content.default - RTL.submenus open.chromium.png | 404 | Changed |
vr-tests-react-components/Positioning 2 screenshots
| Image Name | Diff(in Pixels) | Image Type |
|---|---|---|
| vr-tests-react-components/Positioning.Positioning end.chromium.png | 510 | Changed |
| vr-tests-react-components/Positioning.Positioning end.updated 2 times.chromium.png | 503 | Changed |
vr-tests-react-components/ProgressBar converged 3 screenshots
| Image Name | Diff(in Pixels) | Image Type |
|---|---|---|
| vr-tests-react-components/ProgressBar converged.Indeterminate + thickness - Dark Mode.default.chromium.png | 56 | Changed |
| vr-tests-react-components/ProgressBar converged.Indeterminate + thickness - High Contrast.default.chromium.png | 235 | Changed |
| vr-tests-react-components/ProgressBar converged.Indeterminate + thickness.default.chromium.png | 27 | Changed |
vr-tests-web-components/Accordion 1 screenshots
| Image Name | Diff(in Pixels) | Image Type |
|---|---|---|
| vr-tests-web-components/Accordion. - Dark Mode.normal.chromium_1.png | 3154 | Changed |
vr-tests-web-components/Badge 1 screenshots
| Image Name | Diff(in Pixels) | Image Type |
|---|---|---|
| vr-tests-web-components/Badge. - Dark Mode.normal.chromium.png | 443 | Changed |
vr-tests-web-components/MenuList 3 screenshots
| Image Name | Diff(in Pixels) | Image Type |
|---|---|---|
| vr-tests-web-components/MenuList. - RTL.1st selected.chromium_2.png | 39384 | Changed |
| vr-tests-web-components/MenuList. - RTL.2nd selected.chromium.png | 17 | Changed |
| vr-tests-web-components/MenuList. - RTL.2nd selected.chromium_3.png | 38816 | Changed |
vr-tests/Callout 13 screenshots
| Image Name | Diff(in Pixels) | Image Type |
|---|---|---|
| vr-tests/Callout.Bottom right edge.default.chromium.png | 1130 | Changed |
| vr-tests/Callout.Beak 25.default.chromium.png | 2198 | Changed |
| vr-tests/Callout.Gap space 25.default.chromium.png | 2195 | Changed |
| vr-tests/Callout.Bottom right edge - RTL.default.chromium.png | 1124 | Changed |
| vr-tests/Callout.Bottom left edge - RTL.default.chromium.png | 2199 | Changed |
| vr-tests/Callout.Left center.default.chromium.png | 2584 | Changed |
| vr-tests/Callout.No callout width specified.default.chromium.png | 2143 | Changed |
| vr-tests/Callout.Right bottom edge.default.chromium.png | 3095 | Changed |
| vr-tests/Callout.Left bottom edge.default.chromium.png | 3182 | Changed |
| vr-tests/Callout.Root.default.chromium.png | 2195 | Changed |
| vr-tests/Callout.Top center.default.chromium.png | 2127 | Changed |
| vr-tests/Callout.Right center.default.chromium.png | 2117 | Changed |
| vr-tests/Callout.Top right edge.default.chromium.png | 1146 | Changed |
vr-tests/Keytip 1 screenshots
| Image Name | Diff(in Pixels) | Image Type |
|---|---|---|
| vr-tests/Keytip.Disabled.default.chromium.png | 26 | Changed |
vr-tests/react-charting-AreaChart 1 screenshots
| Image Name | Diff(in Pixels) | Image Type |
|---|---|---|
| vr-tests/react-charting-AreaChart.Custom Accessibility.default.chromium.png | 11 | Changed |
vr-tests/react-charting-LineChart 2 screenshots
| Image Name | Diff(in Pixels) | Image Type |
|---|---|---|
| vr-tests/react-charting-LineChart.Events - Dark Mode.default.chromium.png | 16 | Changed |
| vr-tests/react-charting-LineChart.Events.default.chromium.png | 1 | Changed |
vr-tests/react-charting-MultiStackBarChart 3 screenshots
| Image Name | Diff(in Pixels) | Image Type |
|---|---|---|
| vr-tests/react-charting-MultiStackBarChart.Basic_Absolute.default.chromium.png | 359 | Changed |
| vr-tests/react-charting-MultiStackBarChart.Basic_PartToWhole - Dark Mode.default.chromium.png | 363 | Changed |
| vr-tests/react-charting-MultiStackBarChart.Basic_Absolute - RTL.default.chromium.png | 343 | Changed |
vr-tests/react-charting-VerticalBarChart 1 screenshots
| Image Name | Diff(in Pixels) | Image Type |
|---|---|---|
| vr-tests/react-charting-VerticalBarChart.Grouped - Wrap Labels - RTL.default.chromium.png | 3106 | Changed |
There were 2 duplicate changes discarded. Check the build logs for more information.
dmytrokirpa
force-pushed
the
base/toolbar
branch
2 times, most recently
from
1c8e908 to
45a3998
Compare
dmytrokirpa
force-pushed
the
base/toolbar
branch
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
2 times, most recently
from
faf56e4 to
d434e7f
Compare
dmytrokirpa
force-pushed
the
base/toolbar
branch
from
d434e7f to
ec6a650
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
1 participant
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.