Skip to content

feat(MultiSelect): add CloseButtonIcon parameter #5662

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 4 commits into from
Mar 19, 2025
Merged

feat(MultiSelect): add CloseButtonIcon parameter #5662

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
a4437ef
refactor: 增加 CloseButtonIcon 图标参数
ArgoZhang Mar 19, 2025
a1b1305
refactor: 更新图标
ArgoZhang Mar 19, 2025
cc4d1d3
test: 更新单元测试
ArgoZhang Mar 19, 2025
b0db74e
chore: bump version 9.5.0-beta05
ArgoZhang Mar 19, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 1 addition & 1 deletion src/BootstrapBlazor/BootstrapBlazor.csproj
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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>
Expand Down
4 changes: 2 additions & 2 deletions src/BootstrapBlazor/Components/Select/MultiSelect.razor
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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>
Expand All @@ -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)
Expand Down
16 changes: 7 additions & 9 deletions src/BootstrapBlazor/Components/Select/MultiSelect.razor.cs
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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; }
Comment on lines +59 to +63
Copy link
Contributor

@sourcery-ai sourcery-ai bot Mar 19, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

suggestion: Consider aligning the nullability annotations for the new CloseButtonIcon parameter.

Other icon parameters in the component use a [NotNull] annotation. Assess if CloseButtonIcon should be annotated similarly or if its nullability is intentional.

Suggested change
/// <summary>
/// 获得/设置 关闭按钮图标 默认为 null
/// </summary>
[Parameter]
public string? CloseButtonIcon { get; set; }
/// <summary>
/// 获得/设置 关闭按钮图标 默认为 string.Empty
/// </summary>
[Parameter]
[NotNull]
public string CloseButtonIcon { get; set; } = "";


/// <summary>
/// 获得/设置 是否显示功能按钮 默认为 false 不显示
/// </summary>
Expand Down Expand Up @@ -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; }
Expand All @@ -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();
Expand Down
8 changes: 4 additions & 4 deletions src/BootstrapBlazor/Enums/ComponentIcons.cs
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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 图标
Expand Down
4 changes: 2 additions & 2 deletions src/BootstrapBlazor/Icons/BootstrapIcons.cs
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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" },

Expand Down
4 changes: 2 additions & 2 deletions src/BootstrapBlazor/Icons/FontAwesomeIcons.cs
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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" },

Expand Down
4 changes: 2 additions & 2 deletions src/BootstrapBlazor/Icons/MaterialDesignIcons.cs
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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" },

Expand Down
5 changes: 3 additions & 2 deletions test/UnitTest/Components/MultiSelectTest.cs
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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);
Expand Down Expand Up @@ -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");
Copy link
Contributor

@sourcery-ai sourcery-ai bot Mar 19, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

suggestion (testing): Add test for CloseButtonIcon

Since this PR introduces a new CloseButtonIcon parameter, it's important to add a dedicated test case for it, similar to the existing ClearIcon_Ok test. This ensures that the new parameter functions as expected and doesn't introduce regressions.

});
Assert.DoesNotContain("fa-regular fa-circle-xmark", cut.Markup);
Assert.Contains("icon-clear-test", cut.Markup);
Expand Down