Skip to content

fix: Setting a design token resets the FluentDesignTheme color #2546

@f2bo

Description

@f2bo

🐛 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

Metadata

Metadata

Assignees

No one assigned

    Labels

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions