Skip to content

Commit 801393a

Browse files
msynkmsynk
authored
feat(blazorui): BitSearchBox component improvements #9630 (#9634)
1 parent 54350f6 commit 801393a

File tree

4 files changed

+192
-25
lines changed

4 files changed

+192
-25
lines changed

‎src/BlazorUI/Bit.BlazorUI/Components/Inputs/SearchBox/BitSearchBox.razor.cs

+21
Original file line numberDiff line numberDiff line change
@@ -22,6 +22,11 @@ public partial class BitSearchBox : BitTextInputBase<string?>, IAsyncDisposable
2222

2323

2424

25+
/// <summary>
26+
/// The accent color kind of the search box.
27+
/// </summary>
28+
[Parameter] public BitColorKind? Accent { get; set; }
29+
2530
/// <summary>
2631
/// Custom CSS classes for different parts of the BitSearchBox.
2732
/// </summary>
@@ -77,6 +82,11 @@ public partial class BitSearchBox : BitTextInputBase<string?>, IAsyncDisposable
7782
/// </summary>
7883
[Parameter] public int MinSuggestTriggerChars { get; set; } = 3;
7984

85+
/// <summary>
86+
/// Removes the default border of the search box.
87+
/// </summary>
88+
[Parameter] public bool NoBorder { get; set; }
89+
8090
/// <summary>
8191
/// Callback executed when the user clears the search box by either clicking 'X' or hitting escape.
8292
/// </summary>
@@ -180,6 +190,17 @@ protected override void RegisterCssClasses()
180190
ClassBuilder.Register(() => ShowSearchButton ? "bit-srb-ssb" : string.Empty);
181191

182192
ClassBuilder.Register(() => HideIcon ? "bit-srb-hic" : string.Empty);
193+
194+
ClassBuilder.Register(() => NoBorder ? "bit-srb-nbr" : string.Empty);
195+
196+
ClassBuilder.Register(() => Accent switch
197+
{
198+
BitColorKind.Primary => "bit-srb-apri",
199+
BitColorKind.Secondary => "bit-srb-asec",
200+
BitColorKind.Tertiary => "bit-srb-ater",
201+
BitColorKind.Transparent => "bit-srb-atra",
202+
_ => string.Empty
203+
});
183204
}
184205

185206
protected override void RegisterCssStyles()

‎src/BlazorUI/Bit.BlazorUI/Components/Inputs/SearchBox/BitSearchBox.scss

+66-4
Original file line numberDiff line numberDiff line change
@@ -105,19 +105,19 @@
105105
}
106106

107107
.bit-srb-cnt {
108-
margin: 0;
109108
flex: 1;
109+
margin: 0;
110110
display: flex;
111111
box-shadow: none;
112+
color: $clr-fg-pri;
112113
height: spacing(4);
113114
align-items: stretch;
114115
flex-flow: row nowrap;
115116
box-sizing: border-box;
116117
font-size: spacing(1.75);
117-
color: $clr-fg-pri;
118-
border-radius: $shp-border-radius;
119-
background-color: $clr-bg-pri;
120118
padding: spacing(0.125) 0;
119+
background-color: $clr-bg-pri;
120+
border-radius: $shp-border-radius;
121121
border: $shp-border-width $shp-border-style $clr-brd-pri;
122122

123123
@media (hover: hover) {
@@ -133,6 +133,30 @@
133133
}
134134
}
135135

136+
.bit-srb-apri {
137+
.bit-srb-cnt {
138+
background-color: $clr-bg-pri;
139+
}
140+
}
141+
142+
.bit-srb-asec {
143+
.bit-srb-cnt {
144+
background-color: $clr-bg-sec;
145+
}
146+
}
147+
148+
.bit-srb-ater {
149+
.bit-srb-cnt {
150+
background-color: $clr-bg-ter;
151+
}
152+
}
153+
154+
.bit-srb-atra {
155+
.bit-srb-cnt {
156+
background-color: transparent;
157+
}
158+
}
159+
136160
.bit-srb-hic {
137161
.bit-srb-cnt {
138162
padding: 0 spacing(1);
@@ -349,6 +373,44 @@
349373
}
350374
}
351375

376+
.bit-srb-nbr {
377+
.bit-srb-cnt {
378+
border: none;
379+
}
380+
381+
&.bit-srb-foc {
382+
.bit-srb-cnt,
383+
.bit-srb-sbn {
384+
border: none;
385+
}
386+
387+
@media (hover: hover) {
388+
&:hover {
389+
border: none;
390+
}
391+
}
392+
}
393+
394+
.bit-srb-sbn {
395+
border: none;
396+
background-color: transparent;
397+
398+
i {
399+
color: $clr-sec-text;
400+
}
401+
402+
@media (hover: hover) {
403+
&:hover {
404+
background-color: $clr-bg-pri-hover;
405+
406+
i {
407+
color: $clr-fg-pri-hover;
408+
}
409+
}
410+
}
411+
}
412+
}
413+
352414
.bit-srb-hvl {
353415
@media (hover: hover) {
354416
&:hover {

‎src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Inputs/SearchBox/BitSearchBoxDemo.razor

+41-9
Original file line numberDiff line numberDiff line change
@@ -36,7 +36,35 @@
3636
</ExamplePreview>
3737
</ComponentExampleBox>
3838

39-
<ComponentExampleBox Title="Icon" RazorCode="@example3RazorCode" Id="example3">
39+
<ComponentExampleBox Title="NoBorder" RazorCode="@example3RazorCode" Id="example3">
40+
<ExamplePreview>
41+
<div>Demonstrating the no-border style of BitSearchBox in both enabled and disabled states.</div>
42+
<br /><br />
43+
<div class="example-box">
44+
<BitSearchBox Placeholder="Search" NoBorder/>
45+
<br /><br />
46+
<BitSearchBox Placeholder="Disabled" IsEnabled="false" NoBorder/>
47+
</div>
48+
</ExamplePreview>
49+
</ComponentExampleBox>
50+
51+
<ComponentExampleBox Title="Accent" RazorCode="@example4RazorCode" Id="example4">
52+
<ExamplePreview>
53+
<div>Demonstrating the accent colors of BitSearchBox.</div>
54+
<br /><br />
55+
<div class="example-box">
56+
<BitSearchBox Placeholder="Primary" Accent="BitColorKind.Primary" NoBorder/>
57+
<br /><br />
58+
<BitSearchBox Placeholder="Secondary" Accent="BitColorKind.Secondary" NoBorder/>
59+
<br /><br />
60+
<BitSearchBox Placeholder="Tertiary" Accent="BitColorKind.Tertiary" NoBorder/>
61+
<br /><br />
62+
<BitSearchBox Placeholder="Transparent" Accent="BitColorKind.Transparent" NoBorder/>
63+
</div>
64+
</ExamplePreview>
65+
</ComponentExampleBox>
66+
67+
<ComponentExampleBox Title="Icon" RazorCode="@example5RazorCode" Id="example5">
4068
<ExamplePreview>
4169
<div>Examples of BitSearchBox with various icon configurations such as fixed icon, no animation, custom icon, and no icon.</div>
4270
<br /><br />
@@ -52,7 +80,7 @@
5280
</ExamplePreview>
5381
</ComponentExampleBox>
5482

55-
<ComponentExampleBox Title="Search Button" RazorCode="@example4RazorCode" Id="example4">
83+
<ComponentExampleBox Title="Search Button" RazorCode="@example6RazorCode" Id="example6">
5684
<ExamplePreview>
5785
<div>Showcasing BitSearchBox with a search button in various configurations, including custom button icon and disabled state.</div>
5886
<br /><br />
@@ -61,16 +89,20 @@
6189
<br /><br />
6290
<BitSearchBox Placeholder="SearchButtonIconName" ShowSearchButton SearchButtonIconName="PageListFilter" />
6391
<br /><br />
64-
<BitSearchBox Placeholder="Underlined" Underlined ShowSearchButton />
65-
<br /><br />
6692
<BitSearchBox Placeholder="Disabled" IsEnabled="false" ShowSearchButton />
6793
<br /><br />
94+
<BitSearchBox Placeholder="Underlined" Underlined ShowSearchButton />
95+
<br /><br />
6896
<BitSearchBox Placeholder="Disabled Underlined" IsEnabled="false" Underlined ShowSearchButton />
97+
<br /><br />
98+
<BitSearchBox Placeholder="NoBorder" NoBorder ShowSearchButton />
99+
<br /><br />
100+
<BitSearchBox Placeholder="Disabled NoBorder" IsEnabled="false" NoBorder ShowSearchButton />
69101
</div>
70102
</ExamplePreview>
71103
</ComponentExampleBox>
72104

73-
<ComponentExampleBox Title="Style & Class" RazorCode="@example5RazorCode" Id="example5">
105+
<ComponentExampleBox Title="Style & Class" RazorCode="@example7RazorCode" Id="example7">
74106
<ExamplePreview>
75107
<div>Explore styling and class customization for BitSearchBox, including component styles, custom classes, and detailed styles.</div>
76108
<br /><br />
@@ -99,7 +131,7 @@
99131
</ExamplePreview>
100132
</ComponentExampleBox>
101133

102-
<ComponentExampleBox Title="Binding" RazorCode="@example6RazorCode" CsharpCode="@example6CsharpCode" Id="example6">
134+
<ComponentExampleBox Title="Binding" RazorCode="@example8RazorCode" CsharpCode="@example8CsharpCode" Id="example8">
103135
<ExamplePreview>
104136
<div>Binding examples for BitSearchBox including two-way binding, OnChange, and OnSearch events.</div>
105137
<br /><br /><br />
@@ -131,7 +163,7 @@
131163
</ExamplePreview>
132164
</ComponentExampleBox>
133165

134-
<ComponentExampleBox Title="Validation" RazorCode="@example7RazorCode" CsharpCode="@example7CsharpCode" Id="example7">
166+
<ComponentExampleBox Title="Validation" RazorCode="@example9RazorCode" CsharpCode="@example9CsharpCode" Id="example9">
135167
<ExamplePreview>
136168
<div>Demonstrating validation of BitSearchBox using data annotations.</div>
137169
<br />
@@ -147,7 +179,7 @@
147179
</ExamplePreview>
148180
</ComponentExampleBox>
149181

150-
<ComponentExampleBox Title="Suggestion (AutoComplete)" RazorCode="@example8RazorCode" CsharpCode="@example8CsharpCode" Id="example8">
182+
<ComponentExampleBox Title="Suggestion (AutoComplete)" RazorCode="@example10RazorCode" CsharpCode="@example10CsharpCode" Id="example10">
151183
<ExamplePreview>
152184
<div>Examples of BitSearchBox with suggestion list, including custom filtering, minimum trigger characters, and more.</div>
153185
<br /><br /><br />
@@ -207,7 +239,7 @@
207239
</ExamplePreview>
208240
</ComponentExampleBox>
209241

210-
<ComponentExampleBox Title="RTL" RazorCode="@example9RazorCode" Id="example9">
242+
<ComponentExampleBox Title="RTL" RazorCode="@example11RazorCode" Id="example11">
211243
<ExamplePreview>
212244
<div>Use the BitSearchBox component in right-to-left (RTL).</div>
213245
<br /><br />

0 commit comments

Comments
 (0)