feat(blazorui): add Focused class/style to BitSearchBox #8294 (#8295)

bitfoundation · Aug 13, 2024 · 3b220de · 3b220de
1 parent 8a78bcf
commit 3b220de
Show file tree

Hide file tree

Showing 3 changed files with 24 additions and 1 deletion.
diff --git a/src/BlazorUI/Bit.BlazorUI/Components/Inputs/SearchBox/BitSearchBox.razor.cs b/src/BlazorUI/Bit.BlazorUI/Components/Inputs/SearchBox/BitSearchBox.razor.cs
@@ -165,7 +165,7 @@ protected override void RegisterCssClasses()
 
         ClassBuilder.Register(() => IsUnderlined ? "bit-srb-und" : string.Empty);
 
-        ClassBuilder.Register(() => _inputHasFocus ? $"bit-srb-{(FixedIcon ? "fic-" : string.Empty)}foc" : string.Empty);
+        ClassBuilder.Register(() => _inputHasFocus ? $"bit-srb-{(FixedIcon ? "fic-" : string.Empty)}foc {Classes?.Focused}" : string.Empty);
 
         ClassBuilder.Register(() => ShowSearchButton ? "bit-srb-ssb" : string.Empty);
 
@@ -175,6 +175,8 @@ protected override void RegisterCssClasses()
     protected override void RegisterCssStyles()
     {
         StyleBuilder.Register(() => Styles?.Root);
+
+        StyleBuilder.Register(() => _inputHasFocus ? Styles?.Focused : string.Empty);
     }
 
     protected override async Task OnInitializedAsync()
@@ -222,12 +224,14 @@ private void HandleInputFocusIn()
     {
         _inputHasFocus = true;
         ClassBuilder.Reset();
+        StyleBuilder.Reset();
     }
 
     private void HandleInputFocusOut()
     {
         _inputHasFocus = false;
         ClassBuilder.Reset();
+        StyleBuilder.Reset();
     }
 
     private async Task HandleOnSearchButtonClick()

diff --git a/src/BlazorUI/Bit.BlazorUI/Components/Inputs/SearchBox/BitSearchBoxClassStyles.cs b/src/BlazorUI/Bit.BlazorUI/Components/Inputs/SearchBox/BitSearchBoxClassStyles.cs
@@ -12,6 +12,11 @@ public class BitSearchBoxClassStyles
     /// </summary>
     public string? InputContainer { get; set; }
 
+    /// <summary>
+    /// Custom CSS classes/styles for the focus state of the BitSearchBox.
+    /// </summary>
+    public string? Focused { get; set; }
+
     /// <summary>
     /// Custom CSS classes/styles for the search box's clear button.
     /// </summary>

diff --git a/...Bit.BlazorUI.Demo.Client.Core/Pages/Components/Inputs/SearchBox/BitSearchBoxDemo.razor.cs b/...Bit.BlazorUI.Demo.Client.Core/Pages/Components/Inputs/SearchBox/BitSearchBoxDemo.razor.cs
@@ -186,6 +186,20 @@ public partial class BitSearchBoxDemo
                     Description = "Custom CSS classes/styles for the root element of the search box.",
                 },
                 new()
+                {
+                    Name = "InputContainer",
+                    Type = "string?",
+                    DefaultValue = "null",
+                    Description = "Custom CSS classes/styles for the input container of the BitSearchBox.",
+                },
+                new()
+                {
+                    Name = "Focused",
+                    Type = "string?",
+                    DefaultValue = "null",
+                    Description = "Custom CSS classes/styles for the focus state of the BitSearchBox.",
+                },
+                new()
                 {
                     Name = "ClearButton",
                     Type = "string?",