BitSearchBox component improvements (#9630) #9634
Conversation
|
Important Review skippedAuto incremental reviews are disabled on this repository. Please check the settings in the CodeRabbit UI or the You can disable this status message by setting the WalkthroughThe pull request introduces enhancements to the Changes
Assessment against linked issues
Poem
Thank you for using CodeRabbit. We offer it for free to the OSS community and would appreciate your support in helping us grow. If you find it useful, would you consider giving us a shout-out on your favorite social media? 🪧 TipsChatThere are 3 ways to chat with CodeRabbit:
Note: Be mindful of the bot's finite context window. It's strongly recommended to break down tasks such as reading entire modules into smaller chunks. For a focused discussion, use review comments to chat about specific files and their changes, instead of using the PR comments. CodeRabbit Commands (Invoked using PR comments)
Other keywords and placeholders
CodeRabbit Configuration File (
|
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 0
🧹 Nitpick comments (3)
src/BlazorUI/Bit.BlazorUI/Components/Inputs/SearchBox/BitSearchBox.razor.cs (1)
194-203: Consider using a dictionary for accent class mapping.The switch expression works but could be refactored to use a dictionary for better maintainability and performance.
+ private static readonly Dictionary<BitColorKind, string> AccentClasses = new() + { + { BitColorKind.Primary, "bit-srb-apri" }, + { BitColorKind.Secondary, "bit-srb-asec" }, + { BitColorKind.Tertiary, "bit-srb-ater" }, + { BitColorKind.Transparent, "bit-srb-atra" } + }; - 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 - }); + ClassBuilder.Register(() => Accent.HasValue ? AccentClasses.GetValueOrDefault(Accent.Value, string.Empty) : string.Empty);src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Inputs/SearchBox/BitSearchBoxDemo.razor (1)
51-65: Consider adding visual indicators for transparent accent.The transparent accent example might be hard to distinguish. Consider adding a background color to the container or a note about its usage.
src/BlazorUI/Bit.BlazorUI/Components/Inputs/SearchBox/BitSearchBox.scss (1)
136-158: Consider using CSS variables for background colors.The accent background colors could be defined as CSS variables for easier theming and maintenance.
+:root { + --bit-srb-bg-pri: #{$clr-bg-pri}; + --bit-srb-bg-sec: #{$clr-bg-sec}; + --bit-srb-bg-ter: #{$clr-bg-ter}; +} .bit-srb-apri { .bit-srb-cnt { - background-color: $clr-bg-pri; + background-color: var(--bit-srb-bg-pri); } }
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (4)
src/BlazorUI/Bit.BlazorUI/Components/Inputs/SearchBox/BitSearchBox.razor.cs(3 hunks)src/BlazorUI/Bit.BlazorUI/Components/Inputs/SearchBox/BitSearchBox.scss(3 hunks)src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Inputs/SearchBox/BitSearchBoxDemo.razor(7 hunks)src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Inputs/SearchBox/BitSearchBoxDemo.razor.cs(9 hunks)
🔇 Additional comments (7)
src/BlazorUI/Bit.BlazorUI/Components/Inputs/SearchBox/BitSearchBox.razor.cs (1)
25-28: LGTM! Well-documented properties.The new properties
AccentandNoBorderare properly documented with XML comments and marked with the[Parameter]attribute.Also applies to: 85-89
src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Inputs/SearchBox/BitSearchBoxDemo.razor (2)
39-49: LGTM! Clear demonstration of the NoBorder feature.The example effectively shows both enabled and disabled states of the NoBorder style.
94-100: LGTM! Comprehensive demonstration of combined features.Good coverage of NoBorder with ShowSearchButton in both enabled and disabled states.
src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Inputs/SearchBox/BitSearchBoxDemo.razor.cs (2)
269-301: LGTM! Well-structured enum definition.The BitColorKind enum is properly documented with clear descriptions for each value.
456-464: LGTM! Clear example code.The example code strings accurately reflect the component usage.
src/BlazorUI/Bit.BlazorUI/Components/Inputs/SearchBox/BitSearchBox.scss (2)
109-120: LGTM! Proper base styling.The base styles provide a solid foundation for the component's appearance.
376-412: LGTM! Comprehensive no-border styling.The NoBorder styles properly handle all states including focus, hover, and search button variations.
closes #9630
Summary by CodeRabbit
New Features
Documentation
Style