Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

BitSearchBox component improvements (#9630) #9634

Merged
merged 3 commits into from
Jan 8, 2025
Merged

BitSearchBox component improvements (#9630) #9634

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
dec0a43
1st commit
msynk Jan 7, 2025
9a3e75b
complete demo page
msynk Jan 7, 2025
4cd1b92
fix review comment
msynk Jan 8, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
21 changes: 21 additions & 0 deletions src/BlazorUI/Bit.BlazorUI/Components/Inputs/SearchBox/BitSearchBox.razor.cs
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -22,6 +22,11 @@ public partial class BitSearchBox : BitTextInputBase<string?>, IAsyncDisposable



/// <summary>
/// The accent color kind of the search box.
/// </summary>
[Parameter] public BitColorKind? Accent { get; set; }

/// <summary>
/// Custom CSS classes for different parts of the BitSearchBox.
/// </summary>
Expand Down Expand Up @@ -77,6 +82,11 @@ public partial class BitSearchBox : BitTextInputBase<string?>, IAsyncDisposable
/// </summary>
[Parameter] public int MinSuggestTriggerChars { get; set; } = 3;

/// <summary>
/// Removes the default border of the search box.
/// </summary>
[Parameter] public bool NoBorder { get; set; }

/// <summary>
/// Callback executed when the user clears the search box by either clicking 'X' or hitting escape.
/// </summary>
Expand Down Expand Up @@ -180,6 +190,17 @@ protected override void RegisterCssClasses()
ClassBuilder.Register(() => ShowSearchButton ? "bit-srb-ssb" : string.Empty);

ClassBuilder.Register(() => HideIcon ? "bit-srb-hic" : string.Empty);

ClassBuilder.Register(() => NoBorder ? "bit-srb-nbr" : string.Empty);

ClassBuilder.Register(() => Accent switch
{
BitColorKind.Primary => "bit-srb-apri",
BitColorKind.Secondary => "bit-srb-asec",
BitColorKind.Tertiary => "bit-srb-ater",
BitColorKind.Transparent => "bit-srb-atra",
_ => string.Empty
});
}

protected override void RegisterCssStyles()
Expand Down
70 changes: 66 additions & 4 deletions src/BlazorUI/Bit.BlazorUI/Components/Inputs/SearchBox/BitSearchBox.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -105,19 +105,19 @@
}

.bit-srb-cnt {
margin: 0;
flex: 1;
margin: 0;
display: flex;
box-shadow: none;
color: $clr-fg-pri;
height: spacing(4);
align-items: stretch;
flex-flow: row nowrap;
box-sizing: border-box;
font-size: spacing(1.75);
color: $clr-fg-pri;
border-radius: $shp-border-radius;
background-color: $clr-bg-pri;
padding: spacing(0.125) 0;
background-color: $clr-bg-pri;
border-radius: $shp-border-radius;
border: $shp-border-width $shp-border-style $clr-brd-pri;

@media (hover: hover) {
Expand All @@ -133,6 +133,30 @@
}
}

.bit-srb-apri {
.bit-srb-cnt {
background-color: $clr-bg-pri;
}
}

.bit-srb-asec {
.bit-srb-cnt {
background-color: $clr-bg-sec;
}
}

.bit-srb-ater {
.bit-srb-cnt {
background-color: $clr-bg-ter;
}
}

.bit-srb-atra {
.bit-srb-cnt {
background-color: transparent;
}
}

.bit-srb-hic {
.bit-srb-cnt {
padding: 0 spacing(1);
Expand Down Expand Up @@ -349,6 +373,44 @@
}
}

.bit-srb-nbr {
.bit-srb-cnt {
border: none;
}

&.bit-srb-foc {
.bit-srb-cnt,
.bit-srb-sbn {
border: none;
}

@media (hover: hover) {
&:hover {
border: none;
}
}
}

.bit-srb-sbn {
border: none;
background-color: transparent;

i {
color: $clr-sec-text;
}

@media (hover: hover) {
&:hover {
background-color: $clr-bg-pri-hover;

i {
color: $clr-fg-pri-hover;
}
}
}
}
}

.bit-srb-hvl {
@media (hover: hover) {
&:hover {
Expand Down
50 changes: 41 additions & 9 deletions ...nt/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Inputs/SearchBox/BitSearchBoxDemo.razor
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -36,7 +36,35 @@
</ExamplePreview>
</ComponentExampleBox>

<ComponentExampleBox Title="Icon" RazorCode="@example3RazorCode" Id="example3">
<ComponentExampleBox Title="NoBorder" RazorCode="@example3RazorCode" Id="example3">
<ExamplePreview>
<div>Demonstrating the no-border style of BitSearchBox in both enabled and disabled states.</div>
<br /><br />
<div class="example-box">
<BitSearchBox Placeholder="Search" NoBorder/>
<br /><br />
<BitSearchBox Placeholder="Disabled" IsEnabled="false" NoBorder/>
</div>
</ExamplePreview>
</ComponentExampleBox>

<ComponentExampleBox Title="Accent" RazorCode="@example4RazorCode" Id="example4">
<ExamplePreview>
<div>Demonstrating the accent colors of BitSearchBox.</div>
<br /><br />
<div class="example-box">
<BitSearchBox Placeholder="Primary" Accent="BitColorKind.Primary" NoBorder/>
<br /><br />
<BitSearchBox Placeholder="Secondary" Accent="BitColorKind.Secondary" NoBorder/>
<br /><br />
<BitSearchBox Placeholder="Tertiary" Accent="BitColorKind.Tertiary" NoBorder/>
<br /><br />
<BitSearchBox Placeholder="Transparent" Accent="BitColorKind.Transparent" NoBorder/>
</div>
</ExamplePreview>
</ComponentExampleBox>

<ComponentExampleBox Title="Icon" RazorCode="@example5RazorCode" Id="example5">
<ExamplePreview>
<div>Examples of BitSearchBox with various icon configurations such as fixed icon, no animation, custom icon, and no icon.</div>
<br /><br />
Expand All @@ -52,7 +80,7 @@
</ExamplePreview>
</ComponentExampleBox>

<ComponentExampleBox Title="Search Button" RazorCode="@example4RazorCode" Id="example4">
<ComponentExampleBox Title="Search Button" RazorCode="@example6RazorCode" Id="example6">
<ExamplePreview>
<div>Showcasing BitSearchBox with a search button in various configurations, including custom button icon and disabled state.</div>
<br /><br />
Expand All @@ -61,16 +89,20 @@
<br /><br />
<BitSearchBox Placeholder="SearchButtonIconName" ShowSearchButton SearchButtonIconName="PageListFilter" />
<br /><br />
<BitSearchBox Placeholder="Underlined" Underlined ShowSearchButton />
<br /><br />
<BitSearchBox Placeholder="Disabled" IsEnabled="false" ShowSearchButton />
<br /><br />
<BitSearchBox Placeholder="Underlined" Underlined ShowSearchButton />
<br /><br />
<BitSearchBox Placeholder="Disabled Underlined" IsEnabled="false" Underlined ShowSearchButton />
<br /><br />
<BitSearchBox Placeholder="NoBorder" NoBorder ShowSearchButton />
<br /><br />
<BitSearchBox Placeholder="Disabled NoBorder" IsEnabled="false" NoBorder ShowSearchButton />
</div>
</ExamplePreview>
</ComponentExampleBox>

<ComponentExampleBox Title="Style & Class" RazorCode="@example5RazorCode" Id="example5">
<ComponentExampleBox Title="Style & Class" RazorCode="@example7RazorCode" Id="example7">
<ExamplePreview>
<div>Explore styling and class customization for BitSearchBox, including component styles, custom classes, and detailed styles.</div>
<br /><br />
Expand Down Expand Up @@ -99,7 +131,7 @@
</ExamplePreview>
</ComponentExampleBox>

<ComponentExampleBox Title="Binding" RazorCode="@example6RazorCode" CsharpCode="@example6CsharpCode" Id="example6">
<ComponentExampleBox Title="Binding" RazorCode="@example8RazorCode" CsharpCode="@example8CsharpCode" Id="example8">
<ExamplePreview>
<div>Binding examples for BitSearchBox including two-way binding, OnChange, and OnSearch events.</div>
<br /><br /><br />
Expand Down Expand Up @@ -131,7 +163,7 @@
</ExamplePreview>
</ComponentExampleBox>

<ComponentExampleBox Title="Validation" RazorCode="@example7RazorCode" CsharpCode="@example7CsharpCode" Id="example7">
<ComponentExampleBox Title="Validation" RazorCode="@example9RazorCode" CsharpCode="@example9CsharpCode" Id="example9">
<ExamplePreview>
<div>Demonstrating validation of BitSearchBox using data annotations.</div>
<br />
Expand All @@ -147,7 +179,7 @@
</ExamplePreview>
</ComponentExampleBox>

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

<ComponentExampleBox Title="RTL" RazorCode="@example9RazorCode" Id="example9">
<ComponentExampleBox Title="RTL" RazorCode="@example11RazorCode" Id="example11">
<ExamplePreview>
<div>Use the BitSearchBox component in right-to-left (RTL).</div>
<br /><br />
Expand Down
Loading
Loading