Regression in Theme sample after update to 4.7,1

[coderdnewbie]

This worked before the update to 4.7.1., in the theme example:

                        <FluentIcon Value="@(new Icons.Filled.Size20.RectangleLandscape())"
                                    Color="Color.Custom"
                                    CustomColor="@(@context.ToAttributeValue() != "default" ? context.ToAttributeValue() : "#036ac4" )" 
                                    />

However, now it throws an error no accessible extension method 'ToAttributeValue'.

Has ToAttributeValue been removed?

[vnbaaij]

What is your @context?. You can only use ToAttributeValue on an enum. My guess is this is not a regression. CustomColor should be supplied with an actual color value.

[AJ1000]

The code is from the demo site. In the Themes section. Here is the full code (I just used the copy button to get the code). It ran without error before the upgrade, but errors after the upgrade. No code was changed.

<FluentDesignTheme @bind-Mode="@Mode"
                   @bind-OfficeColor="@OfficeColor"
                   OnLoaded="@OnLoaded"
                   OnLuminanceChanged="@OnLuminanceChanged"
                   StorageName="theme" />

<div style="min-height: 250px;">
    <FluentGrid>
        <FluentGridItem>
            <FluentSelect Label="Theme"
                          Width="250px"
                          Items="@(Enum.GetValues<DesignThemeModes>())"
                          @bind-SelectedOption="@Mode" />
        </FluentGridItem>

        <FluentGridItem>
            <FluentSelect Label="Color"
                          Items="@(Enum.GetValues<OfficeColor>().Select(i => (OfficeColor?)i))"
                          Height="200px"
                          Width="250px"
                          @bind-SelectedOption="@OfficeColor">
                <OptionTemplate>  
                    <FluentStack>
                        <FluentIcon Value="@(new Icons.Filled.Size20.RectangleLandscape())"
                                    Color="Color.Custom"
                                    CustomColor="@(@context.ToAttributeValue() != "default" ? context.ToAttributeValue() : "#036ac4" )" />
                        <FluentLabel>@context</FluentLabel>  
                    </FluentStack>
                </OptionTemplate> 
            </FluentSelect>
            <FluentButton Appearance="Appearance.Accent" OnClick="PickRandomColor">Feeling lucky?</FluentButton>
        </FluentGridItem>
    </FluentGrid>

    <FluentStack Style="margin: 30px 0px; padding: 30px; border: 1px solid var(--accent-fill-rest);">
        <FluentIcon Value="@(new Icons.Regular.Size24.Airplane())" />
        <FluentLabel>Example of content</FluentLabel>
        <FluentButton Appearance="Appearance.Outline">Outline button</FluentButton>
        <FluentButton Appearance="Appearance.Accent">Accent button</FluentButton>
    </FluentStack>
</div>

@code
{
    public DesignThemeModes Mode { get; set; }

    public OfficeColor? OfficeColor { get; set; }

    void OnLoaded(LoadedEventArgs e)
    {
        DemoLogger.WriteLine($"Loaded: {(e.Mode == DesignThemeModes.System ? "System" : "")} {(e.IsDark ? "Dark" : "Light")}");
    }

    void OnLuminanceChanged(LuminanceChangedEventArgs e)
    {
        DemoLogger.WriteLine($"Changed: {(e.Mode == DesignThemeModes.System ? "System" : "")} {(e.IsDark ? "Dark" : "Light")}");
    }

    void PickRandomColor()
    {
        OfficeColor = OfficeColorUtilities.GetRandom();
    }
}

Before the upgrade, which still runs without error, the versions were <PackageReference Include="Microsoft.FluentUI.AspNetCore.Components" Version="4.6.1" />, 
<PackageReference Include="Microsoft.FluentUI.AspNetCore.Components.DataGrid.EntityFrameworkAdapter" Version="4.6.1" /> and 
<PackageReference Include="Microsoft.FluentUI.AspNetCore.Components.Icons" Version="4.6.1" />

After the upgrade, which has the error .. see the screenshot,  the versions were <PackageReference Include="Microsoft.FluentUI.AspNetCore.Components" Version="4.7.1" />, 
<PackageReference Include="Microsoft.FluentUI.AspNetCore.Components.DataGrid.EntityFrameworkAdapter" Version="4.7.0" /> and 
<PackageReference Include="Microsoft.FluentUI.AspNetCore.Components.Icons" Version="4.7.0" />

Please try it yourself.

[AJ1000]

Here is the screenshot of it working in Version="4.6.1"

[AJ1000]

In Version="4.7.1", I have to change the code to make it work, as in this screenshot, by removing the 'ToAttributeValue' feature:

[vnbaaij]

I think you are running into the breaking change we mentioned in the blogs, WhatsNew and upgrade guide... Extension methods are moved to a new namespace. Add that new namespace to the _Imports file and it should be fine.

[coderdnewbie]

Yes, I missed that I had to add the following namespace to the _Imports.razor file.

@using Microsoft.FluentUI.AspNetCore.Components.Extensions

It now works the same as 4.6.1.

My name is Jay Tandon, and would like to thank you for your work on this project. I will close this as completed. The Split Button I was asking for is the same as the 'Close with Comment'/''Reopen Issue' split button on this page, which is the only type of button that is missing for my upgrade from MVC to Blazor. The demo was good, and you do have a navbar, which is called Header in the Layout page of your examples. Thanks again for your work, I am unfortunately too busy, as I am the only developer in my company, to work on side projects and write a split button myself.