fix: Icon in default slot will not render correctly in FluentButton.razor if component is wrapped inside another

[luissalgadofreire]

🐛 Bug Report

Calling FluentButton wrapped inside another component like:

<p>With icon in default slot</p>
<WrapperFluentButton IconEnd="@(new Icons.Regular.Size16.Globe())" Title="Globe" />

does not place the icon in the default slot, but in the end slot.

💻 Repro or Code Sample

Create a WrapperFluentButton.razor with code:

<FluentButton Title="@Title"
              IconStart="@IconStart"
              IconEnd="@IconEnd"
              OnClick="@OnClick">
    @ChildContent
</FluentButton>

@code 
{

    [Parameter]
    public string? Title { get; set; }

    [Parameter]
    public Icon? IconStart { get; set; }

    [Parameter]
    public Icon? IconEnd { get; set; }

    [Parameter]
    public RenderFragment? ChildContent { get; set; }

    [Parameter]
    public EventCallback<MouseEventArgs> OnClick { get; set; }

}

Then use it similarly to the example from the Demo site:

<p>With icon in default slot</p>
<WrapperFluentButton IconEnd="@(new Icons.Regular.Size16.Globe())" Title="Globe" />

🤔 Expected Behavior

The following button should be rendered:

😯 Current Behavior

The following button will be rendered:

💁 Possible Solution

This happens, to the best of my knowledge, because the icon ends up being placed in the end slot, not the default slot. And that, to the best of my knowledge, may be happening because the conditions below in FluentButton.razor seem to always evaluate to true in this context.

In FluentButton.razor, you have the following conditions:

@ChildContent
@if (IconEnd != null)
{
    if (Loading && IconStart == null)
    {
        <FluentProgressRing slot="@(ChildContent != null ? "end" : null)" Style="@RingStyle(IconEnd)" />
    }
    else
    {
        <FluentIcon Value="@(IconEnd.InverseColor(Appearance == AspNetCore.Components.Appearance.Accent))"
                    Slot="@(ChildContent != null ? "end" : null)" />
    }
}

Both the conditions above use ChildContent != null.

If a parent component wraps FluentButton and passes an empty ChildContent to FluentButton, those conditions seem to always evaluate to true. I'm not sure why, though.

As a workaround, an if statement in the wrapper's razor file will solve it, as per the solution at the end of this issue.

🔦 Context

I'm trying to wrap the FluentButton inside my own customized button.

🌍 Your Environment

• OS & Device: MacOS
• Browser: Apple Safari
• .NET and Fluent UI Blazor library Version [8.0.2 and 4.7.2]

[luissalgadofreire]

Though I do believe the source of the problem was correctly pointed out, the potential solution I initially suggested (use ChildContent?.HasDelegate == true, instead of ChildContent != null in FluentButton.razor) apparently wouldn't compile. I ended up just using an if statement in the wrapper's razor file and it worked:

@{
    if (ChildContent != null) {
        <FluentButton 
                      IconStart="@_iconStart"
                      IconEnd="@_iconEnd"
                      Title="@Title"
                      OnClick="@OnClick"
                      @attributes="UnmatchedValues">
            @ChildContent
        </FluentButton>
    } else {
        <FluentButton 
                      IconStart="@_iconStart"
                      IconEnd="@_iconEnd"
                      Title="@Title"
                      OnClick="@OnClick"
                      @attributes="UnmatchedValues"/>
    }
}