feat(MultiSelect): add CloseButtonIcon parameter (#5662)

* refactor: 增加 CloseButtonIcon 图标参数

* refactor: 更新图标

* test: 更新单元测试

* chore: bump version 9.5.0-beta05

Author: ArgoZhang

src/BootstrapBlazor/BootstrapBlazor.csproj

@@ -1,7 +1,7 @@
 <Project Sdk="Microsoft.NET.Sdk.Razor">
 
   <PropertyGroup>
-    <Version>9.5.0-beta04</Version>
+    <Version>9.5.0-beta05</Version>
   </PropertyGroup>
 
   <ItemGroup>

src/BootstrapBlazor/Components/Select/MultiSelect.razor

@@ -28,7 +28,7 @@
                         <div class="multi-select-item-group">
                             <DynamicElement TagName="span" class="multi-select-close" data-bb-val="@GetValueString(item)"
                                             TriggerClick="@(!IsPopover)" OnClick="() => ToggleRow(item.Value)">
-                                <i class="@ClearIcon"></i>
+                                <i class="@CloseButtonIcon"></i>
                             </DynamicElement>
                             <span class="multi-select-item">@item.Text</span>
                         </div>
@@ -51,7 +51,7 @@
     </div>
     @if (GetClearable())
     {
-        <span class="@ClearClassString" @onclick="OnClearValue"><i class="@ClearableIcon"></i></span>
+        <span class="@ClearClassString" @onclick="OnClearValue"><i class="@ClearIcon"></i></span>
     }
     <div class="@DropdownMenuClassString">
         @if (ShowSearch)

src/BootstrapBlazor/Components/Select/MultiSelect.razor.cs

@@ -56,6 +56,12 @@ public partial class MultiSelect<TValue>
     [Parameter]
     public bool ShowCloseButton { get; set; } = true;
 
+    /// <summary>
+    /// 获得/设置 关闭按钮图标 默认为 null
+    /// </summary>
+    [Parameter]
+    public string? CloseButtonIcon { get; set; }
+
     /// <summary>
     /// 获得/设置 是否显示功能按钮 默认为 false 不显示
     /// </summary>
@@ -152,14 +158,6 @@ public partial class MultiSelect<TValue>
     [Parameter]
     [NotNull]
     public string? MinErrorMessage { get; set; }
-
-    /// <summary>
-    /// Gets or sets the right-side clear icon. Default is null.
-    /// </summary>
-    [Parameter]
-    [NotNull]
-    public string? ClearableIcon { get; set; }
-
     [Inject]
     [NotNull]
     private IStringLocalizer<MultiSelect<TValue>>? Localizer { get; set; }
@@ -184,8 +182,8 @@ protected override void OnParametersSet()
         NoSearchDataText ??= Localizer[nameof(NoSearchDataText)];
 
         DropdownIcon ??= IconTheme.GetIconByKey(ComponentIcons.MultiSelectDropdownIcon);
+        CloseButtonIcon ??= IconTheme.GetIconByKey(ComponentIcons.MultiSelectCloseIcon);
         ClearIcon ??= IconTheme.GetIconByKey(ComponentIcons.MultiSelectClearIcon);
-        ClearableIcon ??= IconTheme.GetIconByKey(ComponentIcons.MultiSelectClearableIcon);
 
         ResetItems();
         ResetRules();

src/BootstrapBlazor/Enums/ComponentIcons.cs

@@ -451,14 +451,14 @@ public enum ComponentIcons
     MultiSelectDropdownIcon,
 
     /// <summary>
-    /// MultiSelect 组件 ClearIcon 图标
+    /// MultiSelect 组件 CloseButtonIcon 图标
     /// </summary>
-    MultiSelectClearIcon,
+    MultiSelectCloseIcon,
 
     /// <summary>
-    /// MultiSelect 组件 ClearableIcon 图标
+    /// MultiSelect 组件 ClearIcon 图标
     /// </summary>
-    MultiSelectClearableIcon,
+    MultiSelectClearIcon,
 
     /// <summary>
     /// SelectTree 组件 DropdownIcon 图标

src/BootstrapBlazor/Icons/BootstrapIcons.cs

@@ -109,8 +109,8 @@ internal static class BootstrapIcons
         { ComponentIcons.RibbonTabArrowPinIcon, "bi bi-pin bi-pin-angle" },
 
         { ComponentIcons.MultiSelectDropdownIcon, "bi bi-chevron-up" },
-        { ComponentIcons.MultiSelectClearIcon, "bi bi-x" },
-        { ComponentIcons.MultiSelectClearableIcon, "bi bi-x-circle" },
+        { ComponentIcons.MultiSelectCloseIcon, "bi bi-x" },
+        { ComponentIcons.MultiSelectClearIcon, "bi bi-x-circle" },
 
         { ComponentIcons.SelectTreeDropdownIcon, "bi bi-chevron-up" },
 

src/BootstrapBlazor/Icons/FontAwesomeIcons.cs

@@ -107,8 +107,8 @@ internal static class FontAwesomeIcons
         { ComponentIcons.RibbonTabArrowPinIcon, "fa-solid fa-thumbtack fa-rotate-90" },
 
         { ComponentIcons.MultiSelectDropdownIcon, "fa-solid fa-angle-up" },
-        { ComponentIcons.MultiSelectClearIcon, "fa-solid fa-xmark" },
-        { ComponentIcons.MultiSelectClearableIcon, "fa-regular fa-circle-xmark" },
+        { ComponentIcons.MultiSelectCloseIcon, "fa-solid fa-xmark" },
+        { ComponentIcons.MultiSelectClearIcon, "fa-regular fa-circle-xmark" },
 
         { ComponentIcons.SelectTreeDropdownIcon, "fa-solid fa-angle-up" },
 

src/BootstrapBlazor/Icons/MaterialDesignIcons.cs

@@ -109,8 +109,8 @@ internal static class MaterialDesignIcons
         { ComponentIcons.RibbonTabArrowPinIcon, "mdi mdi-pin mdi-pin-off" },
 
         { ComponentIcons.MultiSelectDropdownIcon, "mdi mdi-chevron-up" },
-        { ComponentIcons.MultiSelectClearIcon, "mdi mdi-close" },
-        { ComponentIcons.MultiSelectClearableIcon, "mdi mdi-trash-can-outline" },
+        { ComponentIcons.MultiSelectCloseIcon, "mdi mdi-close" },
+        { ComponentIcons.MultiSelectClearIcon, "mdi mdi-close-circle-outline" },
 
         { ComponentIcons.SelectTreeDropdownIcon, "mdi mdi-chevron-up" },
 

test/UnitTest/Components/MultiSelectTest.cs

@@ -168,7 +168,8 @@ public async Task FlagEnum_Ok()
         Assert.Equal(2, values.Count);
 
         // 选中第四个
-        var item = cut.FindAll(".dropdown-menu .dropdown-item").Last();
+        var items = cut.FindAll(".dropdown-menu .dropdown-item");
+        var item = items[items.Count - 1];
         await cut.InvokeAsync(() => item.Click());
         values = cut.FindAll(".multi-select-items .multi-select-item");
         Assert.Equal(3, values.Count);
@@ -644,7 +645,7 @@ public void ClearIcon_Ok()
 
         cut.SetParametersAndRender(pb =>
         {
-            pb.Add(a => a.ClearableIcon, "icon-clear-test");
+            pb.Add(a => a.ClearIcon, "icon-clear-test");
         });
         Assert.DoesNotContain("fa-regular fa-circle-xmark", cut.Markup);
         Assert.Contains("icon-clear-test", cut.Markup);