[Bug]: Hover, Pressed states in Menu items do not show filled icons

[stchoioutlook]

Library

React Components / v9 (@fluentui/react-components)

System Info

N/A

Are you reporting Accessibility issue?

None

Reproduction

https://react.fluentui.dev/?path=/docs/components-menu-menu--default

Bug Description

Actual Behavior

The menu item on hover and pressed states do not change the icon to the filled version. It also looks like the wrong theme colored token is being used. Below is a screenshot of the current implementation.

Expected Behavior

This is the intended behavior as shown in Fluent specs for Menu items. The icon colors are also CompoundBrandForeground1/Hover on Hover and CompoundBrandForeground1/Pressed on Pressed

Logs

No response

Requested priority

Blocking

Products/sites affected

No response

Are you willing to submit a PR to fix?

no

Validations

• Check that there isn't already an issue that reports the same bug to avoid creating a duplicate.
• The provided reproduction is a minimal reproducible example of the bug.

[khmakoto]

Hi @stchoioutlook, the icons do switch between the regular and filled versions as long as you use the bundleIcon utility that is shown in our Menu stories, for example this one.

I agree that we should add the correct color for the pressed state though, I'll make a PR to fix that.