Skip to content

fix: use Highlight/HighlightText for MenuItem hover - #36974

Open
Victor Genaev (mainframev) wants to merge 1 commit into
microsoft:masterfrom
mainframev:fix/menu-hc-hover
Open

Victor Genaev (mainframev) wants to merge 1 commit into
microsoft:masterfrom
mainframev:fix/menu-hc-hover

Conversation

@mainframev

@mainframev Victor Genaev (mainframev) commented Oct 22, 2026 •

Copy link
Copy Markdown
Contributor

Previous Behavior

In forced colors mode, a hovered MenuItem kept its Canvas background and only the label turned Highlight. This affects every item that shares these styles: checkbox, radio, link, switch and split. The borderColor: 'Highlight' rule did nothing, because the item has no border. The icon, checkmark, secondary content and subtext kept their token colors, which forced colors maps to CanvasText. The open-submenu state had the same problem.

New Behavior

Hovered and open-submenu items get a Highlight background, with HighlightText on the item and all of its slots.

  • The hovered item sets forcedColorAdjust: 'none'. Without it, Chromium paints a Canvas backplate behind the text and the label shows as a black box on the Highlight background. Tab and InteractionTag do the same.
  • Disabled items still show Canvas and GrayText on hover. They reset forcedColorAdjust to auto, and the checkmark and secondary content now follow GrayText too.

MenuItem hover, before/after, forced colors dark and light

Screenshots: Chromium forced-colors emulation (emulateMedia({ forcedColors: 'active' })) on the MenuList Default, Checkbox items and Nested submenus stories

@mainframev Victor Genaev (mainframev) changed the title fix: use Highlight/HighlightText for MenuItem hover and open-submenu states in forced colors mode fix: use Highlight/HighlightText for MenuItem hover Oct 22, 2026
@mainframev
Victor Genaev (mainframev) marked this pull request as ready for review October 22, 2026 01:47
@mainframev
Victor Genaev (mainframev) requested a review from a team as a code owner October 22, 2026 01:47
@github-actions

Copy link
Copy Markdown

📊 Bundle size report

Package & Exports Baseline (minified/GZIP) PR Change
react-charts
AreaChart
402.942 kB
125.854 kB
403.985 kB
126.035 kB
1.043 kB
181 B
react-charts
DeclarativeChart
756.223 kB
221.658 kB
757.264 kB
221.811 kB
1.041 kB
153 B
react-charts
DonutChart
313.421 kB
96.687 kB
314.464 kB
96.848 kB
1.043 kB
161 B
react-charts
FunnelChart
304.836 kB
93.372 kB
305.879 kB
93.54 kB
1.043 kB
168 B
react-charts
GanttChart
385.85 kB
120.344 kB
386.893 kB
120.53 kB
1.043 kB
186 B
react-charts
GaugeChart
313.382 kB
96.231 kB
314.425 kB
96.387 kB
1.043 kB
156 B
react-charts
GroupedVerticalBarChart
394.163 kB
123.176 kB
395.206 kB
123.349 kB
1.043 kB
173 B
react-charts
HeatMapChart
388.057 kB
121.294 kB
389.1 kB
121.47 kB
1.043 kB
176 B
react-charts
HorizontalBarChart
293.131 kB
89.081 kB
294.174 kB
89.253 kB
1.043 kB
172 B
react-charts
Legends
232.566 kB
69.71 kB
233.609 kB
69.902 kB
1.043 kB
192 B
react-charts
LineChart
414.183 kB
129.026 kB
415.226 kB
129.197 kB
1.043 kB
171 B
react-charts
PolarChart
341.319 kB
106.588 kB
342.362 kB
106.757 kB
1.043 kB
169 B
react-charts
ScatterChart
393.396 kB
123.028 kB
394.439 kB
123.192 kB
1.043 kB
164 B
react-charts
VerticalBarChart
430.382 kB
128.028 kB
431.425 kB
128.202 kB
1.043 kB
174 B
react-charts
VerticalStackedBarChart
399.949 kB
124.471 kB
400.992 kB
124.628 kB
1.043 kB
157 B
react-components
react-components: Accordion, Button, FluentProvider, Image, Menu, Popover
223.278 kB
67.379 kB
224.321 kB
67.541 kB
1.043 kB
162 B
react-components
react-components: entire library
1.283 MB
322.134 kB
1.284 MB
322.336 kB
1.097 kB
202 B
react-menu
Menu (including children components)
156.704 kB
49.751 kB
157.747 kB
49.916 kB
1.043 kB
165 B
react-menu
Menu (including selectable components)
159.869 kB
50.385 kB
160.912 kB
50.552 kB
1.043 kB
167 B
Unchanged fixtures
Package & Exports Size (minified/GZIP)
react-avatar
Avatar
49.166 kB
15.658 kB
react-avatar
AvatarGroup
14.126 kB
5.692 kB
react-avatar
AvatarGroupItem
58.643 kB
18.172 kB
react-breadcrumb
@fluentui/react-breadcrumb - package
103.23 kB
29.071 kB
react-charts
HorizontalBarChartWithAxis
63 B
83 B
react-charts
SankeyChart
209.067 kB
67.203 kB
react-charts
Sparkline
79.774 kB
26.585 kB
react-components
react-components: all base hooks
219.615 kB
68.539 kB
react-components
react-components: Button, FluentProvider & webLightTheme
68.214 kB
19.863 kB
react-components
react-components: FluentProvider & webLightTheme
41.444 kB
13.893 kB
react-datepicker-compat
DatePicker Compat
216.641 kB
64.398 kB
react-dialog
Dialog (including children components)
86.865 kB
26.93 kB
react-headless-components-preview
react-headless-components-preview: entire library
228.365 kB
67.574 kB
react-headless-components-preview
@fluentui/react-headless-components-preview/tag-picker
50.254 kB
16.375 kB
react-headless-components-preview
@fluentui/react-headless-components-preview/teaching-popover
33.739 kB
11.083 kB
react-overflow
hooks only
10.203 kB
3.696 kB
react-persona
Persona
56.119 kB
17.602 kB
react-popover
Popover
122.078 kB
39.348 kB
react-portal-compat
PortalCompatProvider
5.198 kB
2.104 kB
react-table
DataGrid
143.634 kB
42.543 kB
react-table
Table (Primitives only)
38.903 kB
13.017 kB
react-table
Table as DataGrid
119.146 kB
33.785 kB
react-table
Table (Selection only)
67.409 kB
19.301 kB
react-table
Table (Sort only)
66.072 kB
18.926 kB
react-tag-picker
@fluentui/react-tag-picker - package
171.164 kB
53.355 kB
react-tags
InteractionTag
13.986 kB
5.531 kB
react-tags
Tag
30.614 kB
9.763 kB
react-tags
TagGroup
69.63 kB
21.545 kB
react-teaching-popover
TeachingPopover
97.048 kB
30.59 kB
react-timepicker-compat
TimePicker
139.754 kB
45.561 kB
react-tree
FlatTree
132.701 kB
39.468 kB
react-tree
PersonaFlatTree
134.558 kB
39.973 kB
react-tree
PersonaTree
130.645 kB
38.769 kB
react-tree
Tree
128.788 kB
38.287 kB
🤖 This report was generated against 335c5de3c19538262feb63dbb9c0e2b7d3ff1b57

@github-actions

Copy link
Copy Markdown

Pull request demo site: URL

Comment thread change/@fluentui-react-menu-hc-hover-18832.json

This branch has not been deployed

No deployments
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.

1 participant