[Bug]: Button styling adjustments (missing selected state, icon color, icon style)

[redongreen]

Library

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

System Info

https://fluentuipr.z22.web.core.windows.net/heads/master/public-docsite-v9/storybook/index.html?path=/docs/components-button-button--default#icon

Are you reporting Accessibility issue?

no

Reproduction

https://fluentuipr.z22.web.core.windows.net/heads/master/public-docsite-v9/storybook/index.html?path=/docs/components-button-button--default

Bug Description

1. Primary, secondary/default button variant icon change

Current: While hovered the icon changes from outlined -> filled. See hover behavior in codesandbox.

Expected: The primary and default/secondary button variant should not change from outlined to filled icon in hover, pressed, selected state.

---

2. Subtle variant icon color in hover, pressed, and selected states

Current: While in hovered, pressed, and selected state the icon is styled using neutral color.

Expected: While in hovered, pressed, and selected state the icon should be styled using brand accent color according to our design specs. Link to Subtle button spec.

---

3. Selected state missing from all menu button variants

Current: While the button is selected the styling of the button defaults to the rest state. The example below shows the default/secondary variant button, but this also applies to primary, subtle, outline, and transparent buttons.

Expected: While selected, the button should follow the styling provided by our specs. Link to spec, see token allocation under "Toggle press on" section.

Logs

https://fluentuipr.z22.web.core.windows.net/heads/master/public-docsite-v9/storybook/index.html?path=/docs/components-button-button--default

Requested priority

Normal

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.

[kkakroo]

@khmakoto , can i have a look into this

[khmakoto]

@kkakroo feel free to take a shot at fixing this!

[kkakroo]

Thanks @khmakoto.

For the 1st part of the bug, it seems to be happening as we are using bundleIcon in the story and the button has specific styling for handling those scenarios added in this PR.

So not using the bundleIcon icon and using the normal icon as is does not have those hover effects.
@khmakoto, need your thoughts on this for the approach to take in this scenario.

For the 2nd and 3rd parts of the bug, I do not have access to the Figma file (provided in the link) which might give an idea of the token it needs to be changed to.

[khmakoto]

Hi @kkakroo, I'm actually fixing the first part of the bug as part of #25479.

You're right about the second and third parts needing the Figma. Unfortunately, they are not public, so I think I'll need to work on this myself. Thank you very much for willing to contribute though!

[khmakoto]

Issues 1 and 2 are fixed by #25479. I'll create a separate PR to fix issue 3.