Update WhatsNew

Add OptionTemplate parameter for list components + examples (#1045)
microsoft · Nov 30, 2023 · db7f818 · db7f818
1 parent d8860e4
commit db7f818
Show file tree

Hide file tree

Showing 14 changed files with 138 additions and 30 deletions.
diff --git a/WHATSNEW.md b/WHATSNEW.md
@@ -1,6 +1,7 @@
 ## V3.4.1
-- Fix [#1040](https://github.com/microsoft/fluentui-blazor/issues/1040): FluentNumberField can be changed when ReadOnly
-- Fix [#917](https://github.com/microsoft/fluentui-blazor/issues/917) Multiple Header and Footer detection in Dialog
+- Fix [#1040](https://github.com/microsoft/fluentui-blazor/issues/1040): `FluentNumberField` can be changed when `ReadOnly`
+- Fix [#917](https://github.com/microsoft/fluentui-blazor/issues/917) Multiple `Header` and `Footer` detection in Dialog
+- Fix [#939](https://github.com/microsoft/fluentui-blazor/issues/939): Add `OptionTemplate` for `FluentCombobox`, `FluentListBox` and `FluentSelect` 
 - FluentNavMenu: Add `Tooltip` parameter to `FluentNavMenuGroup` (fallback to `Title`) and `FluentNavLink`
 - FluentNavMenu: Expand the menu when collapsed and a navitem is clicked 
 - FluentInputFile: Add ProgressTemplate and a bindable ProgressPercent attribute

diff --git a/examples/Demo/Shared/Microsoft.FluentUI.AspNetCore.Components.xml b/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.

diff --git a/examples/Demo/Shared/Pages/Combobox/ComboboxPage.razor b/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" />
diff --git a/examples/Demo/Shared/Pages/Combobox/Examples/ComboboxWithOptionTemplate.razor b/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!;
+}
diff --git a/examples/Demo/Shared/Pages/Listbox/Examples/ListboxWithOptionTemplate.razor b/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!;
+}
diff --git a/examples/Demo/Shared/Pages/Listbox/ListboxPage.razor b/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"/>
diff --git a/examples/Demo/Shared/Pages/Select/Examples/SelectWithOptionTemplate.razor b/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!;
+}
diff --git a/examples/Demo/Shared/Pages/Select/SelectPage.razor b/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" />
diff --git a/examples/Demo/Shared/wwwroot/docs/WhatsNew.md b/examples/Demo/Shared/wwwroot/docs/WhatsNew.md
@@ -1,6 +1,7 @@
 ## V3.4.1
-- Fix [#1040](https://github.com/microsoft/fluentui-blazor/issues/1040): FluentNumberField can be changed when ReadOnly
-- Fix [#917](https://github.com/microsoft/fluentui-blazor/issues/917) Multiple Header and Footer detection in Dialog
+- Fix [#1040](https://github.com/microsoft/fluentui-blazor/issues/1040): `FluentNumberField` can be changed when `ReadOnly`
+- Fix [#917](https://github.com/microsoft/fluentui-blazor/issues/917) Multiple `Header` and `Footer` detection in Dialog
+- Fix [#939](https://github.com/microsoft/fluentui-blazor/issues/939): Add `OptionTemplate` for `FluentCombobox`, `FluentListBox` and `FluentSelect` 
 - FluentNavMenu: Add `Tooltip` parameter to `FluentNavMenuGroup` (fallback to `Title`) and `FluentNavLink`
 - FluentNavMenu: Expand the menu when collapsed and a navitem is clicked 
 - FluentInputFile: Add ProgressTemplate and a bindable ProgressPercent attribute

diff --git a/src/Core/Components/List/FluentAutocomplete.razor.cs b/src/Core/Components/List/FluentAutocomplete.razor.cs
@@ -30,7 +30,7 @@ public FluentAutocomplete()
     private IJSObjectReference Module { get; set; } = default!;
 
     /// <summary>
-    /// Sets the placeholder value of the element, generally used to provide a hint to the user.
+    /// Gets or sets the placeholder value of the element, generally used to provide a hint to the user.
     /// </summary>
     [Parameter]
     public string? Placeholder { get; set; }
@@ -58,7 +58,7 @@ public override bool Multiple
     }
 
     /// <summary>
-    /// Gets or sets the visual appearance. See <seealso cref="FluentUI.Appearance"/>
+    /// Gets or sets the visual appearance. See <seealso cref="AspNetCore.Components.Appearance"/>
     /// </summary>
     [Parameter]
     public Appearance? Appearance { get; set; }
@@ -103,38 +103,32 @@ public override bool Multiple
     public RenderFragment? MaximumSelectedOptionsMessage { get; set; }
 
     /// <summary>
-    /// Template for the <see cref="ListComponentBase{TOption}.Items"/> items.
-    /// </summary>
-    [Parameter]
-    public RenderFragment<TOption>? OptionTemplate { get; set; }
-
-    /// <summary>
-    /// Template for the <see cref="ListComponentBase{TOption}.SelectedOptions"/> items.
+    /// Gets or sets the template for the <see cref="ListComponentBase{TOption}.SelectedOptions"/> items.
     /// </summary>
     [Parameter]
     public RenderFragment<TOption>? SelectedOptionTemplate { get; set; }
 
 
     /// <summary>
-    /// Header content, placed at the top of the popup panel.
+    /// Gets or sets the header content, placed at the top of the popup panel.
     /// </summary>
     [Parameter]
     public RenderFragment<IEnumerable<TOption>>? HeaderContent { get; set; }
 
     /// <summary>
-    /// Footer content, placed at the bottom of the popup panel.
+    /// Gets or sets the footer content, placed at the bottom of the popup panel.
     /// </summary>
     [Parameter]
     public RenderFragment<IEnumerable<TOption>>? FooterContent { get; set; }
 
     /// <summary>
-    /// Title and Aria-Label for the Scroll to previous button.
+    /// Gets or sets the title and Aria-Label for the Scroll to previous button.
     /// </summary>
     [Parameter]
     public string TitleScrollToPrevious { get; set; } = "Previous";
 
     /// <summary>
-    /// Title and Aria-Label for the Scroll to next button.
+    /// Gets or sets the title and Aria-Label for the Scroll to next button.
     /// </summary>
     [Parameter]
     public string TitleScrollToNext { get; set; } = "Next";
@@ -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));
-    }
 }
diff --git a/src/Core/Components/List/FluentCombobox.razor b/src/Core/Components/List/FluentCombobox.razor
@@ -24,6 +24,22 @@
                      appearance="@Appearance.ToAttributeValue()"
                      @onchange="@OnChangedHandlerAsync"
                      @attributes="AdditionalAttributes">        
-        @GetListOptions(Items)
+        @if (OptionTemplate == null || Items == null)
+        {
+            @GetListOptions(Items)
+        }
+        else
+        {
+            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>
diff --git a/src/Core/Components/List/FluentListbox.razor b/src/Core/Components/List/FluentListbox.razor
@@ -20,7 +20,23 @@
                         selectedOptions="@(SelectedOptions != null && SelectedOptions.Any() ? string.Join(',', SelectedOptions.Select(i => GetOptionValue(i))) : null)"
                         @onchange="@OnChangedHandlerAsync"
                         @attributes="AdditionalAttributes">
-            @GetListOptions(Items)
+            @if (OptionTemplate == null || Items == null)
+            {
+                @GetListOptions(Items)
+            }
+            else
+            {
+                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>
diff --git a/src/Core/Components/List/FluentSelect.razor b/src/Core/Components/List/FluentSelect.razor
@@ -16,6 +16,22 @@
                    current-value="@Value"
                    @onchange="@OnChangedHandlerAsync"
                    @attributes="AdditionalAttributes">
-       @GetListOptions(Items)
+        @if (OptionTemplate == null || Items == null)
+        {
+            @GetListOptions(Items)
+        }
+        else
+        {
+            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>
diff --git a/src/Core/Components/List/ListComponentBase.cs b/src/Core/Components/List/ListComponentBase.cs
@@ -166,6 +166,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.
@@ -505,6 +510,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()
     {