Add missing new Icon parameters to BitDropdown (#12201)

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

@@ -3,6 +3,16 @@
 @typeparam TItem
 @typeparam TValue
 
+@{
+    var chipsRemoveIconCss = BitIconInfo.From(ChipsRemoveIcon, ChipsRemoveIconName ?? "Cancel")?.GetCssClasses();
+    var clearButtonIconCss = BitIconInfo.From(ClearButtonIcon, ClearButtonIconName ?? "Cancel")?.GetCssClasses();
+    var caretDownIconCss = BitIconInfo.From(CaretDownIcon, CaretDownIconName ?? "ChevronRight bit-ico-r90")?.GetCssClasses();
+    var responsiveCloseIconCss = BitIconInfo.From(ResponsiveCloseIcon, ResponsiveCloseIconName ?? "Cancel")?.GetCssClasses();
+    var searchBoxIconCss = BitIconInfo.From(SearchBoxIcon, SearchBoxIconName ?? "Search")?.GetCssClasses();
+    var searchBoxClearIconCss = BitIconInfo.From(SearchBoxClearIcon, SearchBoxClearIconName ?? "Cancel")?.GetCssClasses();
+    var comboBoxAddButtonIconCss = BitIconInfo.From(ComboBoxAddButtonIcon, ComboBoxAddButtonIconName ?? "Add")?.GetCssClasses();
+}
+
 @if ((Options ?? ChildContent) is not null)
 {
     <CascadingValue Value="this" IsFixed="true">
@@ -69,7 +79,7 @@
                 {
                     <span style="@Styles?.Chips" class="bit-drp-chp @Classes?.Chips">
                         @GetText(item)
-                        <i style="@Styles?.ChipsRemoveIcon" class="bit-icon bit-icon--Cancel @Classes?.ChipsRemoveIcon" @onclick="() => HandleOnClickUnselectItem(item)" @onclick:stopPropagation />
+                        <i style="@Styles?.ChipsRemoveIcon" class="@chipsRemoveIconCss @Classes?.ChipsRemoveIcon" @onclick="() => HandleOnClickUnselectItem(item)" @onclick:stopPropagation />
                     </span>
                 }
             }
@@ -119,7 +129,7 @@
                     type="button"
                     style="@Styles?.ClearButton"
                     class="bit-drp-icn bit-drp-clr @Classes?.ClearButton">
-                <i class="bit-icon bit-icon--Cancel" />
+                <i class="@clearButtonIconCss" />
             </button>
         }
 
@@ -130,10 +140,9 @@
             }
             else
             {
-                var icon = BitIconInfo.From(CaretDownIcon, CaretDownIconName ?? "ChevronRight bit-ico-r90");
                 <i aria-hidden="true"
                    style="@Styles?.CaretDownIcon"
-                   class="@icon?.GetCssClasses() @Classes?.CaretDownIcon" />
+                   class="@caretDownIconCss @Classes?.CaretDownIcon" />
             }
         </span>
 
@@ -188,7 +197,7 @@
                         class="bit-drp-cls @Classes?.ResponsiveCloseButton">
                     <span>
                         <i style="@Styles?.ResponsiveCloseIcon"
-                           class="bit-icon bit-icon--Cancel @Classes?.ResponsiveCloseIcon" />
+                           class="@responsiveCloseIconCss @Classes?.ResponsiveCloseIcon" />
                     </span>
                 </button>
             </div>
@@ -208,7 +217,7 @@
                      class="bit-drp-sic @Classes?.SearchBoxIconContainer">
                     <i aria-hidden="true"
                        style="@Styles?.SearchBoxIcon"
-                       class="bit-icon bit-icon--Search @Classes?.SearchBoxIcon" />
+                       class="@searchBoxIconCss @Classes?.SearchBoxIcon" />
                 </div>
                 <input @ref="_searchInputRef" @onfocusin="HandleSearchBoxFocusIn" @onfocusout="HandleSearchBoxFocusOut" @oninput="@HandleFilterChange"
                        type="text"
@@ -233,7 +242,7 @@
                             <span>
                                 <i aria-hidden="true"
                                    style="@Styles?.SearchBoxClearIcon"
-                                   class="bit-icon bit-icon--Cancel @Classes?.SearchBoxClearIcon" />
+                                   class="@searchBoxClearIconCss @Classes?.SearchBoxClearIcon" />
                             </span>
                         </button>
                     </div>
@@ -260,7 +269,7 @@
                         type="button"
                         style="@Styles?.ResponsiveComboAddButton"
                         class="bit-drp-icn bit-drp-cai @Classes?.ResponsiveComboAddButton">
-                    <i class="bit-icon bit-icon--Add" />
+                    <i class="@comboBoxAddButtonIconCss" />
                 </button>
             </div>
         }

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

@@ -42,14 +42,14 @@ namespace Bit.BlazorUI;
     [Parameter] public bool AutoFocusSearchBox { get; set; }
 
     /// <summary>
-    /// Custom template to render as a header in the callout.
+    /// Custom template to render as a footer in the callout.
     /// </summary>
-    [Parameter] public RenderFragment? CalloutHeaderTemplate { get; set; }
+    [Parameter] public RenderFragment? CalloutFooterTemplate { get; set; }
 
     /// <summary>
-    /// Custom template to render as a footer in the callout.
+    /// Custom template to render as a header in the callout.
     /// </summary>
-    [Parameter] public RenderFragment? CalloutFooterTemplate { get; set; }
+    [Parameter] public RenderFragment? CalloutHeaderTemplate { get; set; }
 
     /// <summary>
     /// The icon of the chevron down element of the dropdown.
@@ -86,16 +86,58 @@ namespace Bit.BlazorUI;
     [Parameter, ResetClassBuilder]
     public bool Chips { get; set; }
 
+    /// <summary>
+    /// The icon of the remove button in the chips display.
+    /// Takes precedence over <see cref="ChipsRemoveIconName"/> when both are set.
+    /// Use this property to render icons from external libraries like FontAwesome, Material Icons, or Bootstrap Icons.
+    /// For built-in Fluent UI icons, use <see cref="ChipsRemoveIconName"/> instead.
+    /// </summary>
+    [Parameter] public BitIconInfo? ChipsRemoveIcon { get; set; }
+
+    /// <summary>
+    /// The icon name of the remove button in the chips display from the Fluent UI icon set.
+    /// For external icon libraries, use <see cref="ChipsRemoveIcon"/> instead.
+    /// </summary>
+    [Parameter] public string? ChipsRemoveIconName { get; set; }
+
     /// <summary>
     /// Custom CSS classes for different parts of the BitDropdown.
     /// </summary>
     [Parameter] public BitDropdownClassStyles? Classes { get; set; }
 
+    /// <summary>
+    /// The icon of the clear button of the dropdown.
+    /// Takes precedence over <see cref="ClearButtonIconName"/> when both are set.
+    /// Use this property to render icons from external libraries like FontAwesome, Material Icons, or Bootstrap Icons.
+    /// For built-in Fluent UI icons, use <see cref="ClearButtonIconName"/> instead.
+    /// </summary>
+    [Parameter] public BitIconInfo? ClearButtonIcon { get; set; }
+
+    /// <summary>
+    /// The icon name of the clear button of the dropdown from the Fluent UI icon set.
+    /// For external icon libraries, use <see cref="ClearButtonIcon"/> instead.
+    /// </summary>
+    [Parameter] public string? ClearButtonIconName { get; set; }
+
     /// <summary>
     /// Activates the ComboBox feature in BitDropDown component.
     /// </summary>
     [Parameter] public bool Combo { get; set; }
 
+    /// <summary>
+    /// The icon of the add button in the responsive ComboBox mode.
+    /// Takes precedence over <see cref="ComboBoxAddButtonIconName"/> when both are set.
+    /// Use this property to render icons from external libraries like FontAwesome, Material Icons, or Bootstrap Icons.
+    /// For built-in Fluent UI icons, use <see cref="ComboBoxAddButtonIconName"/> instead.
+    /// </summary>
+    [Parameter] public BitIconInfo? ComboBoxAddButtonIcon { get; set; }
+
+    /// <summary>
+    /// The icon name of the add button in the responsive ComboBox mode from the Fluent UI icon set.
+    /// For external icon libraries, use <see cref="ComboBoxAddButtonIcon"/> instead.
+    /// </summary>
+    [Parameter] public string? ComboBoxAddButtonIconName { get; set; }
+
     /// <summary>
     /// The default value that will be initially used to set selected item if the Value parameter is not set.
     /// </summary>
@@ -276,6 +318,48 @@ namespace Bit.BlazorUI;
     /// </summary>
     [Parameter] public bool Responsive { get; set; }
 
+    /// <summary>
+    /// The icon of the close button in the responsive mode callout.
+    /// Takes precedence over <see cref="ResponsiveCloseIconName"/> when both are set.
+    /// Use this property to render icons from external libraries like FontAwesome, Material Icons, or Bootstrap Icons.
+    /// For built-in Fluent UI icons, use <see cref="ResponsiveCloseIconName"/> instead.
+    /// </summary>
+    [Parameter] public BitIconInfo? ResponsiveCloseIcon { get; set; }
+
+    /// <summary>
+    /// The icon name of the close button in the responsive mode callout from the Fluent UI icon set.
+    /// For external icon libraries, use <see cref="ResponsiveCloseIcon"/> instead.
+    /// </summary>
+    [Parameter] public string? ResponsiveCloseIconName { get; set; }
+
+    /// <summary>
+    /// The icon of the clear icon in the SearchBox.
+    /// Takes precedence over <see cref="SearchBoxClearIconName"/> when both are set.
+    /// Use this property to render icons from external libraries like FontAwesome, Material Icons, or Bootstrap Icons.
+    /// For built-in Fluent UI icons, use <see cref="SearchBoxClearIconName"/> instead.
+    /// </summary>
+    [Parameter] public BitIconInfo? SearchBoxClearIcon { get; set; }
+
+    /// <summary>
+    /// The icon name of the clear icon in the SearchBox from the Fluent UI icon set.
+    /// For external icon libraries, use <see cref="SearchBoxClearIcon"/> instead.
+    /// </summary>
+    [Parameter] public string? SearchBoxClearIconName { get; set; }
+
+    /// <summary>
+    /// The icon of the search icon in the SearchBox.
+    /// Takes precedence over <see cref="SearchBoxIconName"/> when both are set.
+    /// Use this property to render icons from external libraries like FontAwesome, Material Icons, or Bootstrap Icons.
+    /// For built-in Fluent UI icons, use <see cref="SearchBoxIconName"/> instead.
+    /// </summary>
+    [Parameter] public BitIconInfo? SearchBoxIcon { get; set; }
+
+    /// <summary>
+    /// The icon name of the search icon in the SearchBox from the Fluent UI icon set.
+    /// For external icon libraries, use <see cref="SearchBoxIcon"/> instead.
+    /// </summary>
+    [Parameter] public string? SearchBoxIconName { get; set; }
+
     /// <summary>
     /// The placeholder text of the SearchBox input.
     /// </summary>

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

@@ -15,8 +15,7 @@
               PublicMembers="componentPublicMembers"
               GitHubUrl="Inputs/Dropdown/BitDropdown.razor"
               GitHubDemoUrl="Inputs/Dropdown/BitDropdownDemo.razor"
-              >
-              @* IntroductionVideoUrl="https://videos.bitplatform.dev/bit%20Dropdown.mp4" *@
+              IntroductionVideoUrl="https://videos.bitplatform.dev/bit%20Dropdown.mp4">
         <NotesTemplate>
             <BitText>
                 The BitDropdown is a <BitTag Color="BitColor.SecondaryBackground">Multi-API</BitTag> component

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

@@ -1,4 +1,4 @@
-namespace Bit.BlazorUI.Demo.Client.Core.Pages.Components.Inputs.Dropdown;
+namespace Bit.BlazorUI.Demo.Client.Core.Pages.Components.Inputs.Dropdown;
 
 public partial class BitDropdownDemo
 {
@@ -13,17 +13,17 @@ public partial class BitDropdownDemo
         },
         new()
         {
-            Name = "CalloutHeaderTemplate",
+            Name = "CalloutFooterTemplate",
             Type = "RenderFragment?",
             DefaultValue = "null",
-            Description = "Custom template to render as a header in the callout.",
+            Description = "Custom template to render as a footer in the callout.",
         },
         new()
         {
-            Name = "CalloutFooterTemplate",
+            Name = "CalloutHeaderTemplate",
             Type = "RenderFragment?",
-            DefaultValue = "false",
-            Description = "Custom template to render as a footer in the callout.",
+            DefaultValue = "null",
+            Description = "Custom template to render as a header in the callout.",
         },
         new()
         {
@@ -63,6 +63,22 @@ public partial class BitDropdownDemo
             Description = "Shows the selected items like chips in the BitDropdown.",
         },
         new()
+        {
+            Name = "ChipsRemoveIcon",
+            Type = "BitIconInfo?",
+            DefaultValue = "null",
+            Description = "The icon of the remove button in the chips display. Takes precedence over ChipsRemoveIconName when both are set.",
+            LinkType = LinkType.Link,
+            Href = "#bit-icon-info",
+        },
+        new()
+        {
+            Name = "ChipsRemoveIconName",
+            Type = "string?",
+            DefaultValue = "null",
+            Description = "The icon name of the remove button in the chips display from the Fluent UI icon set.",
+        },
+        new()
         {
             Name = "Classes",
             Type = "BitDropdownClassStyles?",
@@ -72,13 +88,45 @@ public partial class BitDropdownDemo
             Href = "#class-styles"
         },
         new()
+        {
+            Name = "ClearButtonIcon",
+            Type = "BitIconInfo?",
+            DefaultValue = "null",
+            Description = "The icon of the clear button of the dropdown. Takes precedence over ClearButtonIconName when both are set.",
+            LinkType = LinkType.Link,
+            Href = "#bit-icon-info",
+        },
+        new()
+        {
+            Name = "ClearButtonIconName",
+            Type = "string?",
+            DefaultValue = "null",
+            Description = "The icon name of the clear button of the dropdown from the Fluent UI icon set.",
+        },
+        new()
         {
             Name = "Combo",
             Type = "bool",
             DefaultValue = "false",
             Description = "Activates the ComboBox feature in BitDropDown component.",
         },
         new()
+        {
+            Name = "ComboBoxAddButtonIcon",
+            Type = "BitIconInfo?",
+            DefaultValue = "null",
+            Description = "The icon of the add button in the responsive ComboBox mode. Takes precedence over ComboBoxAddButtonIconName when both are set.",
+            LinkType = LinkType.Link,
+            Href = "#bit-icon-info",
+        },
+        new()
+        {
+            Name = "ComboBoxAddButtonIconName",
+            Type = "string?",
+            DefaultValue = "null",
+            Description = "The icon name of the add button in the responsive ComboBox mode from the Fluent UI icon set.",
+        },
+        new()
         {
             Name = "DefaultValue",
             Type = "string?",
@@ -321,6 +369,54 @@ public partial class BitDropdownDemo
             Description = "Enables the responsive mode of the component for small screens.",
         },
         new()
+        {
+            Name = "ResponsiveCloseIcon",
+            Type = "BitIconInfo?",
+            DefaultValue = "null",
+            Description = "The icon of the close button in the responsive mode callout. Takes precedence over ResponsiveCloseIconName when both are set.",
+            LinkType = LinkType.Link,
+            Href = "#bit-icon-info",
+        },
+        new()
+        {
+            Name = "ResponsiveCloseIconName",
+            Type = "string?",
+            DefaultValue = "null",
+            Description = "The icon name of the close button in the responsive mode callout from the Fluent UI icon set.",
+        },
+        new()
+        {
+            Name = "SearchBoxClearIcon",
+            Type = "BitIconInfo?",
+            DefaultValue = "null",
+            Description = "The icon of the clear icon in the SearchBox. Takes precedence over SearchBoxClearIconName when both are set.",
+            LinkType = LinkType.Link,
+            Href = "#bit-icon-info",
+        },
+        new()
+        {
+            Name = "SearchBoxClearIconName",
+            Type = "string?",
+            DefaultValue = "null",
+            Description = "The icon name of the clear icon in the SearchBox from the Fluent UI icon set.",
+        },
+        new()
+        {
+            Name = "SearchBoxIcon",
+            Type = "BitIconInfo?",
+            DefaultValue = "null",
+            Description = "The icon of the search icon in the SearchBox. Takes precedence over SearchBoxIconName when both are set.",
+            LinkType = LinkType.Link,
+            Href = "#bit-icon-info",
+        },
+        new()
+        {
+            Name = "SearchBoxIconName",
+            Type = "string?",
+            DefaultValue = "null",
+            Description = "The icon name of the search icon in the SearchBox from the Fluent UI icon set.",
+        },
+        new()
         {
             Name = "SearchBoxPlaceholder",
             Type = "string?",