Add OptionTemplate parameter for list components + examples, all for #v3 as well

examples/Demo/Shared/Microsoft.FluentUI.AspNetCore.Components.xml

@@ -3831,11 +3831,6 @@
             Gets or sets the message displayed when the <see cref="P:Microsoft.FluentUI.AspNetCore.Components.FluentAutocomplete`1.MaximumSelectedOptions"/> is reached.
             </summary>
         </member>
-        <member name="P:Microsoft.FluentUI.AspNetCore.Components.FluentAutocomplete`1.OptionTemplate">
-            <summary>
-            Gets or sets the template for the <see cref="P:Microsoft.FluentUI.AspNetCore.Components.ListComponentBase`1.Items"/> items.
-            </summary>
-        </member>
         <member name="P:Microsoft.FluentUI.AspNetCore.Components.FluentAutocomplete`1.SelectedOptionTemplate">
             <summary>
             Gets or sets the template for the <see cref="P:Microsoft.FluentUI.AspNetCore.Components.ListComponentBase`1.SelectedOptions"/> items.
@@ -4182,6 +4177,11 @@
             ⚠️ Only available for the FluentSelect and FluentListbox components.
             </summary>
         </member>
+        <member name="P:Microsoft.FluentUI.AspNetCore.Components.ListComponentBase`1.OptionTemplate">
+            <summary>
+            Gets or sets the template for the <see cref="P:Microsoft.FluentUI.AspNetCore.Components.ListComponentBase`1.Items"/> items.
+            </summary>
+        </member>
         <member name="P:Microsoft.FluentUI.AspNetCore.Components.ListComponentBase`1.SelectedOptions">
             <summary>
             Gets or sets all selected items.

examples/Demo/Shared/Pages/Combobox/ComboboxPage.razor

@@ -36,6 +36,8 @@
 
 <DemoSection Title="List examples" Component="@typeof(ComboboxList)"></DemoSection>
 
+<DemoSection Title="Option template" Component="@typeof(ComboboxWithOptionTemplate)"></DemoSection>
+
 <h2 id="documentation">Documentation</h2>
 
 <ApiDocumentation Component="typeof(FluentCombobox<>)" GenericLabel="TOption" />

examples/Demo/Shared/Pages/Combobox/Examples/ComboboxWithOptionTemplate.razor

@@ -0,0 +1,17 @@
+@inject DataSource Data
+
+<FluentCombobox Items="@Data.People"
+                OptionValue="@(i => i.PersonId.ToString())"
+                @bind-SelectedOption=@Person>
+    <OptionTemplate>
+        <FluentIcon Value="@(new Icons.Regular.Size16.Person())" Slot="end" OnClick="@(() => DemoLogger.WriteLine($"Icon for {@context.LastName} selected"))" />
+        @context.FirstName (@context.LastName)
+    </OptionTemplate>
+</FluentCombobox>
+<p>
+    Selected: @Person?.FirstName (@Person?.LastName)
+</p>
+
+@code {
+    public Person Person { get; set; } = default!;
+}

examples/Demo/Shared/Pages/Listbox/Examples/ListboxWithOptionTemplate.razor

@@ -0,0 +1,17 @@
+@inject DataSource Data
+
+<FluentListbox Items="@Data.People"
+               OptionValue="@(i => i.PersonId.ToString())"
+               @bind-SelectedOption=@Person>
+    <OptionTemplate>
+        <FluentIcon Icon="Icons.Regular.Size16.Person" Slot="end" OnClick="@(() => DemoLogger.WriteLine($"Icon for {@context.LastName} selected"))" />
+        @context.FirstName (@context.LastName)
+    </OptionTemplate>
+</FluentListbox>
+<p>
+    Selected: @Person?.FirstName (@Person?.LastName)
+</p>
+
+@code {
+    public Person Person { get; set; } = default!;
+}

examples/Demo/Shared/Pages/Listbox/ListboxPage.razor

@@ -31,6 +31,8 @@
 
 <DemoSection Title="Multiple (not working yet!!)" Component="@typeof(ListboxMultiple)"></DemoSection>
 
+<DemoSection Title="Option template" Component="@typeof(ListboxWithOptionTemplate)"></DemoSection>
+
 <h2 id="documentation">Documentation</h2>
 
 <ApiDocumentation Component="typeof(FluentListbox<>)" GenericLabel="TOption"/>

examples/Demo/Shared/Pages/Select/Examples/SelectWithOptionTemplate.razor

@@ -0,0 +1,19 @@
+@using FluentUI.Demo.Shared.SampleData
+@inject DataSource Data
+
+<FluentSelect Items="@Data.People"
+              OptionValue="@(i => i.PersonId.ToString())"
+              @bind-SelectedOption=@Person>
+    <OptionTemplate>
+        <FluentIcon Icon="Icons.Regular.Size16.Person" Slot="end" OnClick="@(() => DemoLogger.WriteLine($"Icon for {@context.LastName} selected"))" />
+        @context.FirstName (@context.LastName)
+    </OptionTemplate>
+</FluentSelect>
+
+<p>
+    Selected: @Person?.FirstName (@Person?.LastName)
+</p>
+
+@code {
+    public Person Person { get; set; } = default!;
+}

examples/Demo/Shared/Pages/Select/SelectPage.razor

@@ -31,6 +31,8 @@
 
 <DemoSection Title="Multiple items with selected and disabled options" Component="@typeof(SelectMultipleWithFunctions)"></DemoSection>
 
+<DemoSection Title="Option template" Component="@typeof(SelectWithOptionTemplate)"></DemoSection>
+
 <h2 id="documentation">Documentation</h2>
 
 <ApiDocumentation Component="typeof(FluentSelect<>)" GenericLabel="TOption" />

examples/Demo/Shared/wwwroot/docs/UpgradeGuide.md

@@ -3,6 +3,7 @@ The most obvious breaking change of course is namespace change from
 `Microsoft.Fast.Components.FluentUI` to `Microsoft.FluentUI.AspNetCore.Components`. 
 This means you will need to change all `usings` in your code, change your `_Imports.razor`, etc.
 
+- You no longer need to specify any `HostingModel` in the `AddFluentUIComponents()` service collection extension. If it is still in there, remove it.
 - AfterBindValue has been replaced with the native @bind-Value:after
 - FluentToast: Timeout is now in milliseconds
 - FluentToastContainer renamed to FluentToastProvider

src/Core/Components/List/FluentAutocomplete.razor.cs

@@ -102,12 +102,6 @@ public override bool Multiple
     [Parameter]
     public RenderFragment? MaximumSelectedOptionsMessage { get; set; }
 
-    /// <summary>
-    /// Gets or sets the template for the <see cref="ListComponentBase{TOption}.Items"/> items.
-    /// </summary>
-    [Parameter]
-    public RenderFragment<TOption>? OptionTemplate { get; set; }
-
     /// <summary>
     /// Gets or sets the template for the <see cref="ListComponentBase{TOption}.SelectedOptions"/> items.
     /// </summary>
@@ -356,9 +350,4 @@ private async Task DisplayLastSelectedItemAsync()
             await Module.InvokeVoidAsync("displayLastSelectedItem", Id);
         }
     }
-
-    private EventCallback<string> OnSelectCallback(TOption? item)
-    {
-        return EventCallback.Factory.Create<string>(this, (e) => OnSelectedItemChangedHandlerAsync(item));
-    }
 }

src/Core/Components/List/FluentCombobox.razor

@@ -24,6 +24,25 @@
                      appearance="@Appearance.ToAttributeValue()"
                      @onchange="@OnChangedHandlerAsync"
                      @attributes="AdditionalAttributes">        
-        @GetListOptions(Items)
+        @if (OptionTemplate == null || Items == null)
+        {
+            @GetListOptions(Items)
+        }
+        else
+        {
+            @if (Items != null)
+            {
+                foreach (TOption item in Items)
+                {
+                    <FluentOption TOption="TOption"
+                                  Value="@GetOptionValue(item)"
+                                  Selected="@GetOptionSelected(item)"
+                                  Disabled="@(GetOptionDisabled(item) ?? false)"
+                                  OnSelect="@OnSelectCallback(item)">
+                            @OptionTemplate(item)
+                    </FluentOption>
+                }
+            }
+        }
     </fluent-combobox>
 </CascadingValue>

src/Core/Components/List/FluentListbox.razor

@@ -20,7 +20,26 @@
                         selectedOptions="@(SelectedOptions != null && SelectedOptions.Any() ? string.Join(',', SelectedOptions.Select(i => GetOptionValue(i))) : null)"
                         @onchange="@OnChangedHandlerAsync"
                         @attributes="AdditionalAttributes">
-            @GetListOptions(Items)
+            @if (OptionTemplate == null)
+            {
+                @GetListOptions(Items)
+            }
+            else
+            {
+                @if (Items != null)
+                {
+                    foreach (TOption item in Items)
+                    {
+                        <FluentOption TOption="TOption"
+                                      Value="@GetOptionValue(item)"
+                                      Selected="@GetOptionSelected(item)"
+                                      Disabled="@(GetOptionDisabled(item) ?? false)"
+                                      OnSelect="@OnSelectCallback(item)">
+                                @OptionTemplate(item)
+                        </FluentOption>
+                    }
+                }
+            }
         </fluent-listbox>
     </div>
 </CascadingValue>

src/Core/Components/List/FluentSelect.razor

@@ -16,6 +16,25 @@
                    current-value="@Value"
                    @onchange="@OnChangedHandlerAsync"
                    @attributes="AdditionalAttributes">
-       @GetListOptions(Items)
+        @if (OptionTemplate == null)
+        {
+            @GetListOptions(Items)
+        }
+        else
+        {
+            @if (Items != null)
+            {
+                foreach (TOption item in Items)
+                {
+                    <FluentOption TOption="TOption"
+                                  Value="@GetOptionValue(item)"
+                                  Selected="@GetOptionSelected(item)"
+                                  Disabled="@(GetOptionDisabled(item) ?? false)"
+                                  OnSelect="@OnSelectCallback(item)">
+                        @OptionTemplate(item)
+                    </FluentOption>
+                }
+            }
+        }
     </fluent-select>
 </CascadingValue>

src/Core/Components/List/ListComponentBase.cs

@@ -165,6 +165,11 @@ protected string? InternalValue
     [Parameter]
     public virtual bool Multiple { get; set; }
 
+    /// <summary>
+    /// Gets or sets the template for the <see cref="ListComponentBase{TOption}.Items"/> items.
+    /// </summary>
+    [Parameter]
+    public virtual RenderFragment<TOption>? OptionTemplate { get; set; }
 
     /// <summary>
     /// Gets or sets all selected items.
@@ -504,6 +509,11 @@ protected virtual void AddSelectedItem(TOption? item)
         _selectedOptions.Add(item);
     }
 
+    protected EventCallback<string> OnSelectCallback(TOption? item)
+    {
+        return EventCallback.Factory.Create<string>(this, (e) => OnSelectedItemChangedHandlerAsync(item));
+    }
+
     /// <summary />
     protected internal string? GetAriaLabel()
     {