Skip to content

Commit 41bc41b

Browse files
msynkmsynk
committed
add new Icon parameter to BitDropdown #12086 
1 parent 23cf7fe commit 41bc41b

19 files changed

+855
-148
lines changed

‎src/BlazorUI/Bit.BlazorUI/Components/Inputs/Dropdown/BitDropdown.razor‎

Lines changed: 3 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
@namespace Bit.BlazorUI
1+
@namespace Bit.BlazorUI
22
@inherits BitInputBase<TValue>
33
@typeparam TItem
44
@typeparam TValue
@@ -131,9 +131,10 @@
131131
}
132132
else
133133
{
134+
var icon = BitIconInfo.From(CaretDownIcon, CaretDownIconName ?? "ChevronRight bit-ico-r90");
134135
<i aria-hidden="true"
135136
style="@Styles?.CaretDownIcon"
136-
class="bit-icon bit-icon--@(CaretDownIconName ?? "ChevronRight bit-ico-r90") @Classes?.CaretDownIcon" />
137+
class="@icon?.GetCssClasses() @Classes?.CaretDownIcon" />
137138
}
138139
</span>
139140

‎src/BlazorUI/Bit.BlazorUI/Components/Inputs/Dropdown/BitDropdown.razor.cs‎

Lines changed: 53 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
using System.Text;
1+
using System.Text;
22
using System.Linq.Expressions;
33
using System.Diagnostics.CodeAnalysis;
44

@@ -52,7 +52,21 @@ namespace Bit.BlazorUI;
5252
[Parameter] public RenderFragment? CalloutFooterTemplate { get; set; }
5353

5454
/// <summary>
55-
/// The icon name of the chevron down element of the dropdown.
55+
/// The icon of the chevron down element of the dropdown.
56+
/// Takes precedence over <see cref="CaretDownIconName"/> when both are set.
57+
/// Use this property to render icons from external libraries like FontAwesome, Material Icons, or Bootstrap Icons.
58+
/// For built-in Fluent UI icons, use <see cref="CaretDownIconName"/> instead.
59+
/// </summary>
60+
/// <example>
61+
/// Bootstrap: CaretDownIcon="BitIconInfo.Bi("chevron-down")"
62+
/// FontAwesome: CaretDownIcon="BitIconInfo.Fa("solid chevron-down")"
63+
/// Custom CSS: CaretDownIcon="BitIconInfo.Css("my-chevron-class")"
64+
/// </example>
65+
[Parameter] public BitIconInfo? CaretDownIcon { get; set; }
66+
67+
/// <summary>
68+
/// The icon name of the chevron down element of the dropdown from the Fluent UI icon set.
69+
/// For external icon libraries, use <see cref="CaretDownIcon"/> instead.
5670
/// </summary>
5771
[Parameter] public string? CaretDownIconName { get; set; }
5872

@@ -737,6 +751,43 @@ internal BitDropdownItemType GetItemType(TItem item)
737751
return item.GetValueFromProperty<string?>(NameSelectors.Title.Name);
738752
}
739753

754+
internal BitIconInfo? GetIcon(TItem item)
755+
{
756+
if (item is BitDropdownItem<TValue> dropdownItem)
757+
{
758+
return BitIconInfo.From(dropdownItem.Icon, dropdownItem.IconName);
759+
}
760+
761+
if (item is BitDropdownOption<TValue> dropdownOption)
762+
{
763+
return BitIconInfo.From(dropdownOption.Icon, dropdownOption.IconName);
764+
}
765+
766+
if (NameSelectors is null) return null;
767+
768+
BitIconInfo? icon = null;
769+
if (NameSelectors.Icon.Selector is not null)
770+
{
771+
icon = NameSelectors.Icon.Selector!(item);
772+
}
773+
else
774+
{
775+
icon = item.GetValueFromProperty<BitIconInfo?>(NameSelectors.Icon.Name);
776+
}
777+
778+
string? iconName = null;
779+
if (NameSelectors.IconName.Selector is not null)
780+
{
781+
iconName = NameSelectors.IconName.Selector!(item);
782+
}
783+
else
784+
{
785+
iconName = item.GetValueFromProperty<string?>(NameSelectors.IconName.Name);
786+
}
787+
788+
return BitIconInfo.From(icon, iconName);
789+
}
790+
740791
internal TValue? GetValue(TItem? item)
741792
{
742793
if (item is null) return default;

‎src/BlazorUI/Bit.BlazorUI/Components/Inputs/Dropdown/BitDropdown.scss‎

Lines changed: 3 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
@import "../../../Styles/functions.scss";
1+
@import "../../../Styles/functions.scss";
22
@import "../../../Styles/media-queries.scss";
33

44
.bit-drp {
@@ -661,12 +661,14 @@
661661
.bit-drp-itm {
662662
width: 100%;
663663
display: flex;
664+
gap: spacing(1);
664665
cursor: pointer;
665666
overflow: hidden;
666667
font-weight: 400;
667668
text-align: start;
668669
user-select: none;
669670
position: relative;
671+
color: $clr-fg-pri;
670672
white-space: nowrap;
671673
align-items: center;
672674
height: spacing(4.5);
@@ -678,7 +680,6 @@
678680
font-size: spacing(1.875);
679681
line-height: spacing(2.5);
680682
background-color: transparent;
681-
color: $clr-fg-pri;
682683
border: $shp-border-width $shp-border-style transparent;
683684

684685
@media (hover: hover) {

‎src/BlazorUI/Bit.BlazorUI/Components/Inputs/Dropdown/BitDropdownClassStyles.cs‎

Lines changed: 6 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
namespace Bit.BlazorUI;
1+
namespace Bit.BlazorUI;
22

33
public class BitDropdownClassStyles
44
{
@@ -142,6 +142,11 @@ public class BitDropdownClassStyles
142142
/// </summary>
143143
public string? ItemCheckIcon { get; set; }
144144

145+
/// <summary>
146+
/// Custom CSS classes/styles for the item icon of the BitDropdown.
147+
/// </summary>
148+
public string? ItemIcon { get; set; }
149+
145150
/// <summary>
146151
/// Custom CSS classes/styles for the item text of the BitDropdown.
147152
/// </summary>

‎src/BlazorUI/Bit.BlazorUI/Components/Inputs/Dropdown/BitDropdownItem.cs‎

Lines changed: 15 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
namespace Bit.BlazorUI;
1+
namespace Bit.BlazorUI;
22

33
public class BitDropdownItem<TValue>
44
{
@@ -12,6 +12,20 @@ public class BitDropdownItem<TValue>
1212
/// </summary>
1313
public string? Class { get; set; }
1414

15+
/// <summary>
16+
/// The icon to display using custom CSS classes for external icon libraries.
17+
/// Takes precedence over <see cref="IconName"/> when both are set.
18+
/// Use this property to render icons from external libraries like FontAwesome, Material Icons, or Bootstrap Icons.
19+
/// For built-in Fluent UI icons, use <see cref="IconName"/> instead.
20+
/// </summary>
21+
public BitIconInfo? Icon { get; set; }
22+
23+
/// <summary>
24+
/// The icon name from the Fluent UI icon set to display for the dropdown item.
25+
/// For external icon libraries, use <see cref="Icon"/> instead.
26+
/// </summary>
27+
public string? IconName { get; set; }
28+
1529
/// <summary>
1630
/// The id for the dropdown item.
1731
/// </summary>

‎src/BlazorUI/Bit.BlazorUI/Components/Inputs/Dropdown/BitDropdownNameSelectors.cs‎

Lines changed: 11 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
namespace Bit.BlazorUI;
1+
namespace Bit.BlazorUI;
22

33
public class BitDropdownNameSelectors<TItem, TValue>
44
{
@@ -12,6 +12,16 @@ public class BitDropdownNameSelectors<TItem, TValue>
1212
/// </summary>
1313
public BitNameSelectorPair<TItem, string?> Class { get; set; } = new(nameof(BitDropdownItem<TValue>.Class));
1414

15+
/// <summary>
16+
/// The Icon field name and selector of the custom input class.
17+
/// </summary>
18+
public BitNameSelectorPair<TItem, BitIconInfo?> Icon { get; set; } = new(nameof(BitDropdownItem<TValue>.Icon));
19+
20+
/// <summary>
21+
/// The IconName field name and selector of the custom input class.
22+
/// </summary>
23+
public BitNameSelectorPair<TItem, string?> IconName { get; set; } = new(nameof(BitDropdownItem<TValue>.IconName));
24+
1525
/// <summary>
1626
/// The Id field name and selector of the custom input class.
1727
/// </summary>

‎src/BlazorUI/Bit.BlazorUI/Components/Inputs/Dropdown/BitDropdownOption.cs‎

Lines changed: 15 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
namespace Bit.BlazorUI;
1+
namespace Bit.BlazorUI;
22

33
public partial class BitDropdownOption<TValue> : ComponentBase, IDisposable
44
{
@@ -17,6 +17,20 @@ public partial class BitDropdownOption<TValue> : ComponentBase, IDisposable
1717
/// </summary>
1818
[Parameter] public string? Class { get; set; }
1919

20+
/// <summary>
21+
/// The icon to display using custom CSS classes for external icon libraries.
22+
/// Takes precedence over <see cref="IconName"/> when both are set.
23+
/// Use this property to render icons from external libraries like FontAwesome, Material Icons, or Bootstrap Icons.
24+
/// For built-in Fluent UI icons, use <see cref="IconName"/> instead.
25+
/// </summary>
26+
[Parameter] public BitIconInfo? Icon { get; set; }
27+
28+
/// <summary>
29+
/// The icon name from the Fluent UI icon set to display for the dropdown option.
30+
/// For external icon libraries, use <see cref="Icon"/> instead.
31+
/// </summary>
32+
[Parameter] public string? IconName { get; set; }
33+
2034
/// <summary>
2135
/// The id for the dropdown option.
2236
/// </summary>

‎src/BlazorUI/Bit.BlazorUI/Components/Inputs/Dropdown/_BitDropdownItem.razor‎

Lines changed: 10 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -53,6 +53,11 @@
5353
}
5454
else
5555
{
56+
var itemIcon = Dropdown.GetIcon(Item);
57+
@if (itemIcon is not null)
58+
{
59+
<i style="@Dropdown.Styles?.ItemIcon" class="bit-drp-iic @itemIcon.GetCssClasses() @Dropdown.Classes?.ItemIcon" />
60+
}
5661
<span style="@Dropdown.Styles?.ItemText"
5762
class="bit-drp-itx @Dropdown.Classes?.ItemText">
5863
@text
@@ -83,6 +88,11 @@
8388
}
8489
else
8590
{
91+
var itemIcon = Dropdown.GetIcon(Item);
92+
@if (itemIcon is not null)
93+
{
94+
<i style="@Dropdown.Styles?.ItemIcon" class="bit-drp-iic @itemIcon.GetCssClasses() @Dropdown.Classes?.ItemIcon" />
95+
}
8696
<span style="@Dropdown.Styles?.ItemText"
8797
class="@Dropdown.Classes?.ItemText">
8898
@text

‎src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Inputs/Dropdown/BitDropdownDemo.razor‎

Lines changed: 3 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
@page "/components/dropdown"
1+
@page "/components/dropdown"
22
@inherits AppComponentBase
33

44
<PageOutlet Url="components/dropdown"
@@ -15,7 +15,8 @@
1515
PublicMembers="componentPublicMembers"
1616
GitHubUrl="Inputs/Dropdown/BitDropdown.razor"
1717
GitHubDemoUrl="Inputs/Dropdown/BitDropdownDemo.razor"
18-
IntroductionVideoUrl="https://videos.bitplatform.dev/bit%20Dropdown.mp4">
18+
>
19+
@* IntroductionVideoUrl="https://videos.bitplatform.dev/bit%20Dropdown.mp4" *@
1920
<NotesTemplate>
2021
<BitText>
2122
The BitDropdown is a <BitTag Color="BitColor.SecondaryBackground">Multi-API</BitTag> component

0 commit comments

Comments
 (0)