Modified the RadzenSplitButton to allow customizing its dropdown icon. (#1530)

Kasunjalitha · web-flow · commit 5cf12fced5aa · 2024-05-29T15:49:41.000+03:00
* Modified the RadzenSplitButton to allow customizing its dropdown icon.

* Changed the text in demo page.
diff --git a/Radzen.Blazor/RadzenSplitButton.razor b/Radzen.Blazor/RadzenSplitButton.razor
@@ -40,8 +40,9 @@
                     }
                 }
             }
-        </button><button tabindex="-1" disabled="@IsDisabled" onclick="@OpenPopupScript()" class="@getPopupButtonCss()" type="button" aria-label="@OpenAriaLabel">
-            <span aria-hidden="true" class="rz-button-icon-left rzi rzi-chevron-down"></span><span class="rz-button-text"></span>
+        </button>
+        <button tabindex="-1" disabled="@IsDisabled" onclick="@OpenPopupScript()" class="@getPopupButtonCss()" type="button" aria-label="@OpenAriaLabel">
+            <RadzenIcon Icon="@DropDownIcon" />
         </button>
         <div id="@PopupID" class="rz-splitbutton-menu">
             <ul class="rz-menu-list">
diff --git a/Radzen.Blazor/RadzenSplitButton.razor.cs b/Radzen.Blazor/RadzenSplitButton.razor.cs
@@ -139,6 +139,12 @@ private string getButtonSize()
         [Parameter]
         public string OpenAriaLabel { get; set; } = "Open";
 
+        /// <summary>
+        /// Gets or sets the icon of the drop down.
+        /// </summary>
+        [Parameter]
+        public string DropDownIcon { get; set; } = "arrow_drop_down";
+
         /// <summary>
         /// Gets or sets the click callback.
         /// </summary>
diff --git a/RadzenBlazorDemos/Pages/SplitButtonDropDownIcon.razor b/RadzenBlazorDemos/Pages/SplitButtonDropDownIcon.razor
@@ -0,0 +1,42 @@
+@inject NotificationService NotificationService
+<div class="container-fluid splitbutton-demo">
+    <div class="row mb-4">
+        <div class="col">
+            <RadzenText TextStyle="TextStyle.H6" TagName="TagName.H3">DropDown Icon</RadzenText>
+            <RadzenSplitButton Click=@(args => OnClick(args, "Opened SplitButton")) Text="SplitButton" DropDownIcon="keyboard_double_arrow_down">
+                <ChildContent>
+                    <RadzenSplitButtonItem Text="Item1" Value="1" />
+                    <RadzenSplitButtonItem Text="Item2" Value="2" />
+                </ChildContent>
+            </RadzenSplitButton>
+            
+            <RadzenSplitButton Click=@(args => OnClick(args, "Opened SplitButton")) Text="SplitButton" DropDownIcon="expand_circle_down">
+                <ChildContent>
+                    <RadzenSplitButtonItem Text="Item1" Value="1" />
+                    <RadzenSplitButtonItem Text="Item2" Value="2" />
+                </ChildContent>
+            </RadzenSplitButton>
+            
+            <RadzenSplitButton Click=@(args => OnClick(args, "Opened SplitButton")) Text="SplitButton" DropDownIcon="keyboard_arrow_down">
+                <ChildContent>
+                    <RadzenSplitButtonItem Text="Item1" Value="1" />
+                    <RadzenSplitButtonItem Text="Item2" Value="2" />
+                </ChildContent>
+            </RadzenSplitButton>
+        </div>
+    </div>
+</div>
+
+@code {
+    void OnClick(RadzenSplitButtonItem item, string buttonName)
+    {
+        if (item != null)
+        {
+            NotificationService.Notify(new NotificationMessage { Severity = NotificationSeverity.Info, Summary = "SplitButton Item Clicked", Detail = $"{buttonName}, item with value {item.Value} clicked" });
+        }
+        else
+        {
+            NotificationService.Notify(new NotificationMessage { Severity = NotificationSeverity.Info, Summary = "SplitButton Clicked", Detail = $"{buttonName} clicked" });
+        }
+    }
+}
diff --git a/RadzenBlazorDemos/Pages/SplitButtonPage.razor b/RadzenBlazorDemos/Pages/SplitButtonPage.razor
@@ -95,6 +95,16 @@
     <SplitButtonAlwaysOpenPopup />
 </RadzenExample>
 
+<RadzenText Anchor="splitbutton#customize-dropdown-icon"  TextStyle="TextStyle.H5" TagName="TagName.H2" class="rz-pt-12">
+    DropDown icon of SplitButton
+</RadzenText>
+<RadzenText TextStyle="TextStyle.Body1" class="rz-mb-8">
+    Customize the dropdown icon of SplitButton. Use <code>DropDownIcon</code> parameter to set the icon.
+</RadzenText>
+<RadzenExample ComponentName="SplitButton" Example="CustomizeSplitButtonDropDownIcon">
+    <SplitButtonDropDownIcon />
+</RadzenExample>
+
 <RadzenText Anchor="splitbutton#keyboard-navigation" TextStyle="TextStyle.H5" TagName="TagName.H2" class="rz-pt-12">
     Keyboard Navigation
 </RadzenText>

Original file line number	Diff line number	Diff line change
`@@ -40,8 +40,9 @@`
`40`	`40`	`}`
`41`	`41`	`}`
`42`	`42`	`}`
`43`		`- </button><button tabindex="-1" disabled="@IsDisabled" onclick="@OpenPopupScript()" class="@getPopupButtonCss()" type="button" aria-label="@OpenAriaLabel">`
`44`		`- <span aria-hidden="true" class="rz-button-icon-left rzi rzi-chevron-down"></span><span class="rz-button-text"></span>`
	`43`	`+ </button>`
	`44`	`+ <button tabindex="-1" disabled="@IsDisabled" onclick="@OpenPopupScript()" class="@getPopupButtonCss()" type="button" aria-label="@OpenAriaLabel">`
	`45`	`+ <RadzenIcon Icon="@DropDownIcon" />`
`45`	`46`	`</button>`
`46`	`47`	`<div id="@PopupID" class="rz-splitbutton-menu">`
`47`	`48`	`<ul class="rz-menu-list">`