fix(react-toolbar): correct ToolbarDivider display style and mergeClasses order

[WolffM]

Summary

Fixes #28967: fix(react-toolbar): correct ToolbarDivider display style and mergeClasses order

Changes

This PR addresses the issue described above. Changes were developed on the fix/28967-fix-react-toolbar-correct-toolbardivider-display-s branch.

Related Issue

• Closes [Bug]: "Toolbar Far Group" story broken #28967

[github-actions]

📊 Bundle size report

Package & Exports	Baseline (minified/GZIP)	PR	Change
react-components react-components: entire library	1.292 MB 323.336 kB	1.293 MB 323.352 kB	51 B 16 B

Unchanged fixtures

Package & Exports	Size (minified/GZIP)
react-components react-components: Button, FluentProvider & webLightTheme	70.397 kB 19.96 kB
react-components react-components: Accordion, Button, FluentProvider, Image, Menu, Popover	236.62 kB 68.716 kB
react-components react-components: FluentProvider & webLightTheme	43.612 kB 14.022 kB
react-portal-compat PortalCompatProvider	8.386 kB 2.624 kB
react-timepicker-compat TimePicker	108.174 kB 35.695 kB

_{🤖 This report was generated against ec5736348028dcf9a0fbebb818a79242d23b4e1c}

[github-actions]

Pull request demo site: URL

[WolffM]

@microsoft-github-policy-service agree

[github-actions]

🕵🏾‍♀️ visual changes to review in the Visual Change Report

vr-tests-react-components/Avatar Converged 2 screenshots

Image Name	Diff(in Pixels)	Image Type
vr-tests-react-components/Avatar Converged.badgeMask.normal.chromium.png	4	Changed
vr-tests-react-components/Avatar Converged.badgeMask - RTL.normal.chromium.png	6	Changed

vr-tests-react-components/CalendarCompat 4 screenshots

Image Name	Diff(in Pixels)	Image Type
vr-tests-react-components/CalendarCompat.multiDayView - High Contrast.default.chromium.png	2267	Changed
vr-tests-react-components/CalendarCompat.multiDayView.default.chromium_1.png	670	Changed
vr-tests-react-components/CalendarCompat.multiDayView - Dark Mode.default.chromium.png	2192	Changed
vr-tests-react-components/CalendarCompat.multiDayView.default.chromium.png	667	Changed

vr-tests-react-components/Menu Converged - submenuIndicator slotted content 1 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/Positioning 2 screenshots

Image Name	Diff(in Pixels)	Image Type
vr-tests-react-components/Positioning.Positioning end.chromium.png	511	Changed
vr-tests-react-components/Positioning.Positioning end.updated 2 times.chromium.png	735	Changed

vr-tests-react-components/Skeleton converged 1 screenshots

Image Name	Diff(in Pixels)	Image Type
vr-tests-react-components/Skeleton converged.Opaque Skeleton with rectangle - Dark Mode.default.chromium.png	9	Changed

vr-tests-react-components/TagPicker 1 screenshots

Image Name	Diff(in Pixels)	Image Type
vr-tests-react-components/TagPicker.disabled.disabled input hover.chromium.png	677	Changed

There were 2 duplicate changes discarded. Check the build logs for more information.

[dmytrokirpa]

hey @WolffM, thanks for the PR! But I don't think the issue is still relevant as the example https://storybooks.fluentui.dev/react/?path=/docs/components-toolbar--docs#far-group renders correctly and switching ToolbarDivider from display: flex to display: inline-flex doesn't seem to have any visual effect

Screen.Recording.2026-03-19.at.18.02.01.mov

So I believe we could close both the PR and issue.

[WolffM]

hey @dmytrokirpa thanks for looking at this.

I think there are two separate concerns here.

You're right that inline-flex vs flex has minimal visual impact in the Storybook story. But the more significant fix is the mergeClasses ordering: in the original code, userClassName is stripped before useDividerStyles_unstable runs and never restored to the final merge, meaning any consumer who passes a custom className prop to ToolbarDivider silently loses it.

The Storybook far-group story doesn't pass a custom className, so it wouldn't surface this. Would it make sense to keep the mergeClasses fix even if we want to revisit the inline-flex change?

[dmytrokirpa]

hey @dmytrokirpa thanks for looking at this.

I think there are two separate concerns here.

You're right that inline-flex vs flex has minimal visual impact in the Storybook story. But the more significant fix is the mergeClasses ordering: in the original code, userClassName is stripped before useDividerStyles_unstable runs and never restored to the final merge, meaning any consumer who passes a custom className prop to ToolbarDivider silently loses it.

The Storybook far-group story doesn't pass a custom className, so it wouldn't surface this. Would it make sense to keep the mergeClasses fix even if we want to revisit the inline-flex change?

@WolffM Could you please provide a repro for the issue with classnames ordering you mentioned? As passing custom styles via className works for ToolbarDivider - https://stackblitz.com/edit/ieszliky?file=src%2Fexample.tsx