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

examples/Demo/Shared/FluentUI.Demo.Shared.csproj

@@ -45,6 +45,12 @@
 		<AdditionalFiles Include="$(ProjectDir)/*.xml" />
 	</ItemGroup>
 
+	<ItemGroup>
+	  <Content Update="Pages\Combobox\Examples\ComboboxWithOptionTemplate.razor">
+	    <ExcludeFromSingleFile>true</ExcludeFromSingleFile>
+	  </Content>
+	</ItemGroup>
+
 	<Target Name="CopySources" BeforeTargets="BeforeBuild">
 		<ItemGroup>
 			<Sources Include="$(ProjectDir)\Pages\**\Examples\*" />

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

@@ -3807,11 +3807,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.
@@ -4158,6 +4153,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())">
+    <OptionTemplate>
+        <FluentIcon Icon="Icons.Regular.Size16.Delete" Slot="end" OnClick="@(() => DemoLogger.WriteLine($"{@context.LastName} deleted"))" />
+        @context.FirstName / @context.LastName
+    </OptionTemplate>
+</FluentCombobox>
+
+
+
+
+
+@code {
+
+}

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

@@ -0,0 +1,17 @@
+@inject DataSource Data
+
+<FluentListbox Items="@Data.People"
+               OptionValue="@(i => i.PersonId.ToString())">
+    <OptionTemplate>
+        <FluentIcon Icon="Icons.Regular.Size16.Delete" Slot="end" OnClick="@(() => DemoLogger.WriteLine($"{@context.LastName} deleted"))" />
+        @context.FirstName / @context.LastName
+    </OptionTemplate>
+</FluentListbox>
+
+
+
+
+
+@code {
+
+}

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,17 @@
+@inject DataSource Data
+
+<FluentSelect Items="@Data.People"
+               OptionValue="@(i => i.PersonId.ToString())">
+    <OptionTemplate>
+        <FluentIcon Icon="Icons.Regular.Size16.Delete" Slot="end" OnClick="@(() => DemoLogger.WriteLine($"{@context.LastName} deleted"))" />
+        @context.FirstName / @context.LastName
+    </OptionTemplate>
+</FluentSelect>
+
+
+
+
+
+@code {
+
+}

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>

src/Core/Components/List/FluentCombobox.razor

@@ -24,6 +24,24 @@
                      appearance="@Appearance.ToAttributeValue()"
                      @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)">
+                            @OptionTemplate(item)
+                    </FluentOption>
+                }
+            }
+        }
     </fluent-combobox>
 </CascadingValue>

src/Core/Components/List/FluentListbox.razor

@@ -20,7 +20,25 @@
                         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)">
+                                @OptionTemplate(item)
+                        </FluentOption>
+                    }
+                }
+            }
         </fluent-listbox>
     </div>
 </CascadingValue>

src/Core/Components/List/FluentSelect.razor

@@ -16,6 +16,24 @@
                    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)">
+                        @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.