search

microsoft / fluentui-blazor

Microsoft Fluent UI Blazor components library. For use with ASP.NET Core Blazor applications
https://www.fluentui-blazor.net
MIT License
3.88k stars 377 forks source link

fix: Incorrect Tab close color in FluentTab #2922

Closed Quinn-L closed 1 week ago

Quinn-L commented 1 week ago

🐛 Bug Report

FluentTabs has a ShowClose="true" setting, but the close icon appears in 'accent' color instead of '--neutral-fill-strong-active', and does not change color when hovered over.

💻 Repro or Code Sample

See the 'Dynamic' section in https://www.fluentui-blazor.net/Tabs

🤔 Expected Behavior

Close icon should be 'neutral' and also change color when hovered over.

😯 Current Behavior

Close icon persists in accent color.

The tab's close icon's 'fill' is defined in the css https://github.com/microsoft/fluentui-blazor/blob/bb1075066e887d5d6793512ec4ff80bfdd669361/src/Core/Components/Tabs/FluentTab.razor.css#L27-L37

However, because FluentTab uses FluentIcon for its close icon, the style 'fill' is set directly on the style so takes higher priority: https://github.com/microsoft/fluentui-blazor/blob/bb1075066e887d5d6793512ec4ff80bfdd669361/src/Core/Components/Icons/FluentIcon.razor.cs#L21-L26

💁 Possible Solution

Adding !important to the css, or maybe FluentIcon needs a way to opt out of setting 'fill' for this case.

🔦 Context

🌍 Your Environment