[List] Add an OptionTitle attribute (#4147)

* Add Option Title attribute

* Add OptionTitle

* Update Action YAML

Author: dvoituron

.github/workflows/build-core-lib.yml

@@ -134,7 +134,7 @@ jobs:
      - name: Report Generator
        uses: danielpalme/ReportGenerator-GitHub-Action@5.2.4
        with:
-         reports: '**/coverage.cobertura.xml;**/coverage.net8.0.cobertura.xml;**/coverage.net9.0.cobertura.xml;**/coverage.net10.0.cobertura.xml'
+         reports: '**/coverage.cobertura.xml;**/coverage.*.cobertura.xml'
          targetdir: 'CoverageReports'
          title: 'Unit Tests Code Coverage'
          classfilters: '-Microsoft.FluentUI.AspNetCore.Components.DesignTokens.*'

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

@@ -6298,6 +6298,11 @@
             Called whenever the selection changed.
             </summary>
         </member>
+        <member name="P:Microsoft.FluentUI.AspNetCore.Components.FluentOption`1.Title">
+            <summary>
+            Gets or sets the title tooltip of this option.
+            </summary>
+        </member>
         <member name="M:Microsoft.FluentUI.AspNetCore.Components.FluentOption`1.OnClickHandlerAsync">
             <summary />
         </member>
@@ -6481,6 +6486,12 @@
             Gets or sets the function used to determine if an option is initially selected.
             </summary>
         </member>
+        <member name="P:Microsoft.FluentUI.AspNetCore.Components.ListComponentBase`1.OptionTitle">
+            <summary>
+            Gets or sets the function used to determine the option tooltip (title).
+            If null is returned, then no title is displayed.
+            </summary>
+        </member>
         <member name="P:Microsoft.FluentUI.AspNetCore.Components.ListComponentBase`1.OptionComparer">
             <summary>
             Gets or sets the <see cref="T:System.Collections.Generic.IEqualityComparer`1"/> used to determine if an option is already added to the internal list.
@@ -6564,6 +6575,9 @@
         <member name="M:Microsoft.FluentUI.AspNetCore.Components.ListComponentBase`1.GetOptionValue(`0)">
             <summary />
         </member>
+        <member name="M:Microsoft.FluentUI.AspNetCore.Components.ListComponentBase`1.GetOptionTitle(`0)">
+            <summary />
+        </member>
         <member name="M:Microsoft.FluentUI.AspNetCore.Components.ListComponentBase`1.GetOptionText(`0)">
             <summary />
         </member>

examples/Demo/Shared/Pages/List/Listbox/Examples/ListboxManual.razor

@@ -1,5 +1,5 @@
 <FluentListbox TOption="string" ValueChanged="@(e => listboxValue = e)">
-    <FluentOption>This option has no value</FluentOption>
+    <FluentOption Title="With a tooltip">This option has no value</FluentOption>
     <FluentOption Value="Item 1" Disabled="true">This option is disabled</FluentOption>
     <FluentOption Value="Item 2">This option has a value</FluentOption>
     <FluentOption Value="Item 3">
@@ -17,4 +17,4 @@
 
 @code {
     string? listboxValue = "Item 4";
-}
+}

examples/Demo/Shared/Pages/List/Select/Examples/SelectDefault.razor

@@ -8,6 +8,7 @@
               Placeholder="Make a selection..."
               OptionValue="@(p => p.PersonId.ToString())"
               OptionText="@(p => p.LastName + ", " + p.FirstName)"
+              OptionTitle="@(p => p.LastName.Length + p.FirstName.Length > 20 ? p.LastName : null)"
               @bind-Value="@SelectedValue"
               @bind-SelectedOption="@SelectedPerson" />
 

src/Core/Components/List/FluentOption.razor

@@ -7,6 +7,7 @@
                style="@Style"
                disabled="@Disabled"
                value="@Value"
+               title="@Title"
                selected="@Selected"
                aria-selected="@(Selected ? "true" : "false")"
                @onclick="@OnClickHandlerAsync"

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

@@ -48,6 +48,12 @@ public partial class FluentOption<TOption> : FluentComponentBase, IDisposable wh
     [Parameter]
     public EventCallback<string> OnSelect { get; set; }
 
+    /// <summary>
+    /// Gets or sets the title tooltip of this option.
+    /// </summary>
+    [Parameter]
+    public string? Title { get; set; }
+
     protected override Task OnInitializedAsync()
     {
         InternalListContext.Register(this);

src/Core/Components/List/ListComponentBase.razor

@@ -28,6 +28,7 @@
             {
                 <FluentOption TOption="TOption"
                               Value="@GetOptionValue(item)"
+                              Title="@GetOptionTitle(item)"
                               Selected="@GetOptionSelected(item)"
                               Disabled="@(GetOptionDisabled(item) ?? false)"
                               OnSelect="@OnSelectCallback(item)"

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

@@ -129,6 +129,13 @@ protected string? InternalValue
     [Parameter]
     public virtual Func<TOption, bool>? OptionSelected { get; set; }
 
+    /// <summary>
+    /// Gets or sets the function used to determine the option tooltip (title).
+    /// If null is returned, then no title is displayed.
+    /// </summary>
+    [Parameter]
+    public virtual Func<TOption, string?>? OptionTitle { get; set; }
+
     /// <summary>
     /// Gets or sets the <see cref="IEqualityComparer{T}"/> used to determine if an option is already added to the internal list.
     /// ⚠️ Only available when Multiple = true.
@@ -505,6 +512,19 @@ protected virtual bool GetOptionSelected(TOption item)
         }
     }
 
+    /// <summary />
+    protected virtual string? GetOptionTitle(TOption? item)
+    {
+        if (item != null && OptionTitle != null)
+        {
+            return OptionTitle.Invoke(item);
+        }
+        else
+        {
+            return null;
+        }
+    }
+
     protected virtual bool? GetOptionDisabled(TOption? item)
     {
         if (item != null)