Add FixedCalloutWidth parameter to BitSearchBox (#11511)

[msynk]

closes #11511

Summary by CodeRabbit

• New Features

  • SearchBox component now includes FixedCalloutWidth parameter, allowing you to force the suggestion dropdown width to align with the component's width for improved visual consistency.

• Documentation

  • Enhanced SearchBox demo with new configuration examples showcasing FixedCalloutWidth and added diagnostic displays for better component testing and verification.

[coderabbitai]

Walkthrough

A new FixedCalloutWidth parameter was added to the BitSearchBox component to allow the suggest callout to render with a fixed width matching the component's width. The feature is wired into the callout invocation logic, with demonstration pages and sample code added to showcase its usage alongside existing parameters.

Changes

Cohort / File(s)	Summary
Core Component Enhancement src/BlazorUI/Bit.BlazorUI/Components/Inputs/SearchBox/BitSearchBox.razor.cs	Added public FixedCalloutWidth parameter with XML documentation. Wired the parameter into BitCalloutToggleCallout invocation to control callout width behavior.
Demo Pages src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Inputs/SearchBox/BitSearchBoxDemo.razor	Added new demonstration block showing BitSearchBox with FixedCalloutWidth configuration alongside Immediate and SuggestItems parameters.
Demo Configuration src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Inputs/SearchBox/BitSearchBoxDemo.razor.cs	Added FixedCalloutWidth parameter entry to componentParameters collection with boolean type and description.
Demo Samples src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Inputs/SearchBox/BitSearchBoxDemo.razor.samples.cs	Added new BitSearchBox sample leveraging FixedCalloutWidth and SuggestItems. Introduced GetLongSuggestedItems() helper method to generate extended suggestion list.

Estimated code review effort

🎯 2 (Simple) | ⏱️ ~10 minutes

• Parameter addition follows existing patterns and conventions
• Changes are primarily additive across demo and sample files
• Minimal logic changes; mostly configuration and example code
• No breaking changes or complex interactions introduced

Poem

🐰 A fixed-width callout, oh what delight!
No more dancing suggestions left and right,
The SearchBox now stands proud and true,
With boxes aligned to the component's view! ✨

Pre-merge checks and finishing touches

❌ Failed checks (1 warning)

Check name	Status	Explanation	Resolution
Docstring Coverage	⚠️ Warning	Docstring coverage is 0.00% which is insufficient. The required threshold is 80.00%.	You can run @coderabbitai generate docstrings to improve docstring coverage.

✅ Passed checks (4 passed)

Check name	Status	Explanation
Description Check	✅ Passed	Check skipped - CodeRabbit’s high-level summary is enabled.
Title Check	✅ Passed	The PR title "Add FixedCalloutWidth parameter to BitSearchBox (#11511)" is concise, specific, and directly summarizes the main change in the pull request. It clearly communicates that a new parameter is being added to the BitSearchBox component, which aligns perfectly with all the changes present in the changeset. The title is descriptive enough that teammates reviewing the git history would immediately understand the primary objective without being vague or generic.
Linked Issues Check	✅ Passed	The pull request successfully addresses the objective from issue #11511, which requested a feature to allow the BitSearchBox callout to be rendered with a fixed width matching the component width. The implementation adds the FixedCalloutWidth parameter to the BitSearchBox component [11511], wires it into the callout invocation logic, and includes demonstration code and documentation showing the parameter in use. All code changes directly implement the requested functionality to force the callout width to match the component width rather than being calculated automatically based on content.
Out of Scope Changes Check	✅ Passed	All changes in the pull request are directly related to implementing the FixedCalloutWidth feature specified in issue #11511. The modifications include the core parameter addition to BitSearchBox, parameter documentation and wiring in the component code, demo components showing the feature usage, helper methods supporting the examples, and documentation entries in the demo component parameters. There are no unrelated changes, refactoring of unrelated code, or modifications addressing different requirements present in this changeset.

✨ Finishing touches

• 📝 Generate docstrings

🧪 Generate unit tests (beta)

• Create PR with unit tests
• Post copyable unit tests in a comment

---

📜 Recent review details

Configuration used: CodeRabbit UI

Review profile: CHILL

Plan: Pro

Knowledge base: Disabled due to Reviews -> Disable Knowledge Base setting

📥 Commits

Reviewing files that changed from the base of the PR and between 0b4a67f and 77806be.

📒 Files selected for processing (4)

• src/BlazorUI/Bit.BlazorUI/Components/Inputs/SearchBox/BitSearchBox.razor.cs (2 hunks)
• src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Inputs/SearchBox/BitSearchBoxDemo.razor (1 hunks)
• src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Inputs/SearchBox/BitSearchBoxDemo.razor.cs (2 hunks)
• src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Inputs/SearchBox/BitSearchBoxDemo.razor.samples.cs (3 hunks)

⏰ Context from checks skipped due to timeout of 90000ms. You can increase the timeout in your CodeRabbit configuration to a maximum of 15 minutes (900000ms). (1)

• GitHub Check: build and test

🔇 Additional comments (9)

src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Inputs/SearchBox/BitSearchBoxDemo.razor (1)

226-231: LGTM! Good demonstration of the new feature.

The new FixedCalloutWidth demo effectively showcases the feature using long suggestion items. The configuration is appropriate and follows the established demo patterns.

src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Inputs/SearchBox/BitSearchBoxDemo.razor.cs (2)

58-63: LGTM! Parameter documentation is complete and accurate.

The parameter entry correctly documents the new FixedCalloutWidth feature with appropriate type, default value, and description.

---

656-668: LGTM! Helper method effectively supports the demo.

The GetLongSuggestedItems() method provides appropriately long suggestion strings to demonstrate the fixed callout width feature.

src/BlazorUI/Bit.BlazorUI/Components/Inputs/SearchBox/BitSearchBox.razor.cs (2)

60-63: LGTM! Parameter declaration follows best practices.

The new FixedCalloutWidth parameter is properly declared with appropriate attributes, type, and documentation. The default false value ensures backward compatibility.

---

543-543: LGTM! Parameter correctly wired into callout behavior.

The FixedCalloutWidth parameter is properly passed to the JavaScript interop call, enabling the fixed-width callout when set to true while maintaining existing behavior when false.

src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Inputs/SearchBox/BitSearchBoxDemo.razor.samples.cs (4)

100-100: LGTM! SearchValue displays enhance sample clarity.

The added <div>SearchValue: @variable</div> lines improve the sample code by demonstrating how to display bound values in the UI, making the examples more educational.

Also applies to: 108-108, 116-116, 124-124, 132-132

---

147-153: LGTM! FixedCalloutWidth sample code is accurate.

The new sample code correctly demonstrates the FixedCalloutWidth feature with long suggestion items and matches the actual demo implementation.

---

164-174: LGTM! Formatting improvements enhance readability.

The reformatted GetSuggestedItems() code improves consistency and readability without changing functionality.

---

176-188: LGTM! Sample code accurately represents the helper method.

The GetLongSuggestedItems() sample code correctly shows the implementation used for demonstrating the fixed callout width feature.

---

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share

• X
• Mastodon
• Reddit
• LinkedIn

_{Comment @coderabbitai help to get the list of available commands and usage tips.}