Add IconDismiss adn IconSearch (#1573)

Co-authored-by: Vincent Baaij <[email protected]>
microsoft · Feb 26, 2024 · 75bfb5e · 75bfb5e
1 parent c28d107
commit 75bfb5e
Show file tree

Hide file tree

Showing 3 changed files with 40 additions and 12 deletions.
diff --git a/examples/Demo/Shared/Microsoft.FluentUI.AspNetCore.Components.xml b/examples/Demo/Shared/Microsoft.FluentUI.AspNetCore.Components.xml
@@ -4238,6 +4238,16 @@
             Gets or sets the title and Aria-Label for the Scroll to next button.
             </summary>
         </member>
+        <member name="P:Microsoft.FluentUI.AspNetCore.Components.FluentAutocomplete`1.IconDismiss">
+            <summary>
+            Gets or sets the icon used for the Clear button. By default: Dismiss icon.
+            </summary>
+        </member>
+        <member name="P:Microsoft.FluentUI.AspNetCore.Components.FluentAutocomplete`1.IconSearch">
+            <summary>
+            Gets or sets the icon used for the Search button. By default: Search icon.
+            </summary>
+        </member>
         <member name="P:Microsoft.FluentUI.AspNetCore.Components.FluentAutocomplete`1.ListStyleValue">
             <summary />
         </member>

diff --git a/src/Core/Components/List/FluentAutocomplete.razor b/src/Core/Components/List/FluentAutocomplete.razor
@@ -68,21 +68,27 @@
             {
                 if (this.SelectedOptions?.Any() == true || !string.IsNullOrEmpty(_valueText))
                 {
-                    <FluentIcon Value="@(new CoreIcons.Regular.Size16.Dismiss())"
-                                Width="12px"
-                                Style="cursor: pointer;"
-                                Slot="end"
-                                Title="Clear"
-                                OnClick="@OnClearAsync" />
+                    if (IconDismiss != null)
+                    {
+                        <FluentIcon Value="@IconDismiss"
+                                    Width="12px"
+                                    Style="cursor: pointer;"
+                                    Slot="end"
+                                    Title="Clear"
+                                    OnClick="@OnClearAsync" />
+                    }
                 }
                 else
                 {
-                    <FluentIcon Value="@(new CoreIcons.Regular.Size16.Search())"
-                                Width="16px"
-                                Style="cursor: pointer;"
-                                Slot="end"
-                                Title="Search"
-                                OnClick="@OnDropDownExpandedAsync" />
+                    if (IconSearch != null)
+                    {
+                        <FluentIcon Value="@IconSearch"
+                                    Width="16px"
+                                    Style="cursor: pointer;"
+                                    Slot="end"
+                                    Title="Search"
+                                    OnClick="@OnDropDownExpandedAsync" />
+                    }
                 }
             }
         </FluentTextField>

diff --git a/src/Core/Components/List/FluentAutocomplete.razor.cs b/src/Core/Components/List/FluentAutocomplete.razor.cs
@@ -143,6 +143,18 @@ public override bool Multiple
     [Parameter]
     public string TitleScrollToNext { get; set; } = "Next";
 
+    /// <summary>
+    /// Gets or sets the icon used for the Clear button. By default: Dismiss icon.
+    /// </summary>
+    [Parameter]
+    public Icon? IconDismiss { get; set; } = new CoreIcons.Regular.Size16.Dismiss();
+
+    /// <summary>
+    /// Gets or sets the icon used for the Search button. By default: Search icon.
+    /// </summary>
+    [Parameter]
+    public Icon? IconSearch { get; set; } = new CoreIcons.Regular.Size16.Search();
+
     /// <summary />
     private string? ListStyleValue => new StyleBuilder()
         .AddStyle("width", Width, when: !string.IsNullOrEmpty(Width))