-
Notifications
You must be signed in to change notification settings - Fork 459
Description
🐛 Bug Report
There's been a regression where setting the value of a design token for an component on the page impacts the settings for the current theme. While this wasn't a problem with v4.9.1, the behavior changed in v4.9.2, where setting the design token would raise a NullReferenceException. Now, in v4.9.3, the behavior has changed again and even though the exception no longer happens, setting a token resets the FluentDesignTheme's color.
💻 Repro or Code Sample
The following code sets the theme to non-default values and applies a design token for a card component on the page. Uncommenting the line that sets the NeutralBaseColor design token shows the problem. You can evaluate the different behaviors by testing this code with v4.9.1, v4.9.2, and v4.9.3.
@using Microsoft.FluentUI.AspNetCore.Components.DesignTokens
@page "/"
@rendermode RenderMode.InteractiveServer
@inject NeutralBaseColor NeutralBaseColor
<PageTitle>Home</PageTitle>
<FluentDesignTheme Mode="@themeMode"
OfficeColor="@themeColor" />
<FluentCard @ref="_card" MinimalStyle="true" Width="300px" Height="165px">
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Maecenas porttitor congue massa. Fusce posuere,
magna sed pulvinar ultricies, purus lectus malesuada libero, sit amet commodo magna eros quis urna.
</FluentCard>
@code {
private DesignThemeModes themeMode = DesignThemeModes.Light;
private OfficeColor? themeColor = OfficeColor.Booking;
private FluentCard? _card;
protected override async Task OnAfterRenderAsync(bool firstRender)
{
if (firstRender)
{
if (_card is not null)
{
// UNCOMMENT TO SEE THE ISSUE
// await NeutralBaseColor.SetValueFor(_card.Element, "#FCFCE5".ToSwatch());
}
}
}
}🤔 Expected Behavior
Setting a design token for any component should not have an impact on the page's theme.
😯 Current Behavior
Setting a token changes the theme's settings.
🌍 Your Environment
- Windows 10 PC
- Microsoft Edge
- .NET and Fluent UI Blazor library v4.9.3