From e539d6a30ab20a45bf4b2d18b6504a147d3c1c13 Mon Sep 17 00:00:00 2001
From: bek-bsw <bek@patorg.de>
Date: Mon, 10 Nov 2025 16:24:41 +0100
Subject: [PATCH] bek-FLOR-1908: Add customizability to dropdown button

---
 .../Stories/Dropdown/Variants.razor           | 87 +++++++++++++++++++
 BlueBlazor.sln                                |  4 +-
 BlueBlazor/Components/Dropdown/Dropdown.razor |  2 +-
 .../Components/Dropdown/Dropdown.razor.cs     | 66 ++++++++++++++
 4 files changed, 156 insertions(+), 3 deletions(-)
 create mode 100644 BlueBlazor.Docs/Stories/Dropdown/Variants.razor

diff --git a/BlueBlazor.Docs/Stories/Dropdown/Variants.razor b/BlueBlazor.Docs/Stories/Dropdown/Variants.razor
new file mode 100644
index 0000000..9826427
--- /dev/null
+++ b/BlueBlazor.Docs/Stories/Dropdown/Variants.razor
@@ -0,0 +1,87 @@
+@{
+    /*docs {
+    "description": "You can customize the dropdown button using `Variant`, `Color` and `Size`. To have full control, set `Variant` to `Variant.None` and use the `HeaderClass` property."
+    } */
+}
+@using BlueBlazor.Shared
+
+<Dropdown Label="Default">
+    <MenuItem Label="First element">
+        <Icon>☀️</Icon>
+    </MenuItem>
+    <MenuItem Label="Second element">
+        <Icon>🚀</Icon>
+    </MenuItem>
+</Dropdown>
+
+<Dropdown Label="Filled Primary" Variant="Variant.Filled" Color="Color.Primary">
+    <MenuItem Label="First element">
+        <Icon>☀️</Icon>
+    </MenuItem>
+    <MenuItem Label="Second element">
+        <Icon>🚀</Icon>
+    </MenuItem>
+</Dropdown>
+
+<Dropdown Label="Outline Danger" Variant="Variant.Outline" Color="Color.Danger">
+    <MenuItem Label="First element">
+        <Icon>☀️</Icon>
+    </MenuItem>
+    <MenuItem Label="Second element">
+        <Icon>🚀</Icon>
+    </MenuItem>
+</Dropdown>
+
+<Dropdown Label="Plain Success" Variant="Variant.Plain" Color="Color.Success">
+    <MenuItem Label="First element">
+        <Icon>☀️</Icon>
+    </MenuItem>
+    <MenuItem Label="Second element">
+        <Icon>🚀</Icon>
+    </MenuItem>
+</Dropdown>
+
+<Dropdown Label="Link" Variant="Variant.Link">
+    <MenuItem Label="First element">
+        <Icon>☀️</Icon>
+    </MenuItem>
+    <MenuItem Label="Second element">
+        <Icon>🚀</Icon>
+    </MenuItem>
+</Dropdown>
+
+<Dropdown Label="Link Warning" Variant="Variant.Link" Color="Color.Warning">
+    <MenuItem Label="First element">
+        <Icon>☀️</Icon>
+    </MenuItem>
+    <MenuItem Label="Second element">
+        <Icon>🚀</Icon>
+    </MenuItem>
+</Dropdown>
+
+<Dropdown Label="Large" Size="Size.Lg" Variant="Variant.Filled" Color="Color.Primary">
+    <MenuItem Label="First element">
+        <Icon>☀️</Icon>
+    </MenuItem>
+    <MenuItem Label="Second element">
+        <Icon>🚀</Icon>
+    </MenuItem>
+</Dropdown>
+
+<Dropdown Label="Small" Sm Variant="Variant.Filled" Color="Color.Primary">
+    <MenuItem Label="First element">
+        <Icon>☀️</Icon>
+    </MenuItem>
+    <MenuItem Label="Second element">
+        <Icon>🚀</Icon>
+    </MenuItem>
+</Dropdown>
+
+<Dropdown Label="Custom" Variant="Variant.None" HeaderClass="bg-body-secondary">
+    <MenuItem Label="First element">
+        <Icon>☀️</Icon>
+    </MenuItem>
+    <MenuItem Label="Second element">
+        <Icon>🚀</Icon>
+    </MenuItem>
+</Dropdown>
\ No newline at end of file
diff --git a/BlueBlazor.sln b/BlueBlazor.sln
index 35be5c0..c95c9a1 100644
--- a/BlueBlazor.sln
+++ b/BlueBlazor.sln
@@ -1,7 +1,7 @@
 
 Microsoft Visual Studio Solution File, Format Version 12.00
-# Visual Studio Version 18
-VisualStudioVersion = 18.0.11121.172
+# Visual Studio Version 17
+VisualStudioVersion = 17.14.36518.9 d17.14
 MinimumVisualStudioVersion = 10.0.40219.1
 Project("{9A19103F-16F7-4668-BE54-9A1E7A4F7556}") = "BlueBlazor.Docs", "BlueBlazor.Docs\BlueBlazor.Docs.csproj", "{0D314BF4-DACC-4BF3-BA8B-8754152EBCCA}"
 	ProjectSection(ProjectDependencies) = postProject
diff --git a/BlueBlazor/Components/Dropdown/Dropdown.razor b/BlueBlazor/Components/Dropdown/Dropdown.razor
index b8af9ce..db68f9e 100644
--- a/BlueBlazor/Components/Dropdown/Dropdown.razor
+++ b/BlueBlazor/Components/Dropdown/Dropdown.razor
@@ -1,6 +1,6 @@
 @namespace BlueBlazor.Components
 
-<button type="button" popovertarget="@_id" id="@HeaderId" class="blue-anchor blue-menu-item btn @HeaderClass"
+<button type="button" popovertarget="@_id" id="@HeaderId" class="blue-anchor btn @_headerClass"
     style="--blue-anchor-name: --anchor-@_id; @HeaderStyle">
     @if (Icon != null)
     {
diff --git a/BlueBlazor/Components/Dropdown/Dropdown.razor.cs b/BlueBlazor/Components/Dropdown/Dropdown.razor.cs
index e6771d7..a435c0c 100644
--- a/BlueBlazor/Components/Dropdown/Dropdown.razor.cs
+++ b/BlueBlazor/Components/Dropdown/Dropdown.razor.cs
@@ -1,6 +1,8 @@
+using BlueBlazor.Shared;
 using Microsoft.AspNetCore.Components;
 using Microsoft.AspNetCore.Components.Routing;
 using Microsoft.JSInterop;
+using System.Security.Claims;
 
 namespace BlueBlazor.Components;
 
@@ -19,6 +21,7 @@ public partial class Dropdown : IDisposable
     private ElementReference _element;
     private IJSObjectReference? _module;
     private string _id = $"Dropdown_{Guid.NewGuid()}";
+    private string _headerClass = "";
 
     [Parameter]
     public RenderFragment? ChildContent { get; set; }
@@ -68,6 +71,30 @@ public partial class Dropdown : IDisposable
     [Parameter]
     public string? LabelClass { get; set; }
 
+    [Parameter]
+    public Variant Variant { get; set; } = Variant.MenuItem;
+
+    [Parameter]
+    public Color Color { get; set; } = Shared.Color.Secondary;
+
+    /// <summary>
+    /// You can also use properties `Sm` or `Lg` as shortcuts to set the size.
+    /// </summary>
+    [Parameter]
+    public Size? Size { get; set; }
+
+    /// <summary>
+    /// Shortcut for `Size="BlueBlazor.Shared.Size.Sm"`
+    /// </summary>
+    [Parameter]
+    public bool Sm { get; set; }
+
+    /// <summary>
+    /// Shortcut for `Size="BlueBlazor.Shared.Size.Lg"`
+    /// </summary>
+    [Parameter]
+    public bool Lg { get; set; }
+
     /// <summary>
     /// Should be set as active.
     /// </summary>
@@ -115,6 +142,45 @@ private async Task HidePopover()
         await _module.InvokeVoidAsync("hidePopover", _element);
     }
 
+    protected override void OnParametersSet()
+    {
+        buildClass();
+    }
+
+    private string GetHeaderVariantClass(Variant variant, Color buttonColor)
+    {
+        string color = buttonColor.ToString().ToLower();
+        
+        switch (variant)
+        {
+            case Variant.Soft:
+                return $"blue-btn-soft-{color}";
+            case Variant.Plain:
+                return $"blue-btn-plain-{color}";
+            case Variant.Outline:
+                return $"btn-outline-{color}";
+            case Variant.Link:
+                return $"btn-link link-{color} link-offset-2";
+            case Variant.MenuItem:
+                return "blue-menu-item";
+            case Variant.None:
+                return "";
+            default:
+                return $"btn-{color}";
+        }
+    }
+
+    private void buildClass()
+    {
+        _headerClass = new CssBuilder(HeaderClass)
+            .AddClass(GetHeaderVariantClass(Variant, Color), Variant != Variant.None)
+            .AddClass($"btn-{Size?.ToString().ToLower()}", Size != null)
+            .AddClass("btn-sm", Sm)
+            .AddClass("btn-lg", Lg)
+            .Build()!;
+    }
+
+
     public void Dispose()
     {
         NavigationManager.LocationChanged -= OnLocationChanged;