[Bug]: Invalid ToggleButton styles
kamilkazmierczakMtab opened this issue · comments
Library
React Components / v9 (@fluentui/react-components)
System Info
System:
OS: macOS 14.5
CPU: (10) arm64 Apple M2 Pro
Memory: 284.42 MB / 32.00 GB
Shell: 5.9 - /bin/zsh
Browsers:
Brave Browser: 124.1.65.133
Chrome: 125.0.6422.61
Safari: 17.5
Are you reporting Accessibility issue?
None
Reproduction
https://react.fluentui.dev/?path=/docs/components-toolbar--default#subtle
Bug Description
Actual Behavior
Subtle ToggleButton is always blue
Expected Behavior
Don't make it blue - restore previous behavior
Cause of bug:
https://github.com/microsoft/fluentui/pull/30775/files
Bug introduced by:
@khmakoto
Logs
No response
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.
<ToggleButton appearance="subtle" />
now appliescolorNeutralForeground2BrandSelected
to the icon color no matter whether the toggle button is checked or not. @khmakoto is that intentional? (The design spec is not clear to me).<ToolbarToggleButton />
overrides the color tocolorBrandForeground1
when the button is checked but that has no effect asToggleButton
applies the color directly to the icon vs theToolbarToggleButton
sets it on the button:
![image](https://private-user-images.githubusercontent.com/9615899/341587855-5a0dfcd0-4855-43a2-903f-b5abc35aaa14.png?jwt=eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpc3MiOiJnaXRodWIuY29tIiwiYXVkIjoicmF3LmdpdGh1YnVzZXJjb250ZW50LmNvbSIsImtleSI6ImtleTUiLCJleHAiOjE3MTk0NjQ1NjQsIm5iZiI6MTcxOTQ2NDI2NCwicGF0aCI6Ii85NjE1ODk5LzM0MTU4Nzg1NS01YTBkZmNkMC00ODU1LTQzYTItOTAzZi1iNWFiYzM1YWFhMTQucG5nP1gtQW16LUFsZ29yaXRobT1BV1M0LUhNQUMtU0hBMjU2JlgtQW16LUNyZWRlbnRpYWw9QUtJQVZDT0RZTFNBNTNQUUs0WkElMkYyMDI0MDYyNyUyRnVzLWVhc3QtMSUyRnMzJTJGYXdzNF9yZXF1ZXN0JlgtQW16LURhdGU9MjAyNDA2MjdUMDQ1NzQ0WiZYLUFtei1FeHBpcmVzPTMwMCZYLUFtei1TaWduYXR1cmU9OGEwN2Q4ZTdkOWUwZTMwZDBkMzc5M2M3ODUxNDQ4ZDQ0NDc3YWZhNjk1OWY3ZjgwZjc3YjZhYmQwNGFjNjU3YSZYLUFtei1TaWduZWRIZWFkZXJzPWhvc3QmYWN0b3JfaWQ9MCZrZXlfaWQ9MCZyZXBvX2lkPTAifQ.bsC93B_MkCy-Wo4QoCjXt3kIR2yiqDZ23ZTOuEanQ24)
Once we confirm the current styles in ToggleButton
are correct, we should override the colors in ToolbarToggleButton
and make sure the overrides win over the ToggleButton
styles.
@miroslavstastny I think we just need to add the checked
check before we apply the styles. I'll spin a PR up shortly.
PR in #31789.