Add Clear button feature to BitTextField component (#11847)

[msynk]

closes #11847

Summary by CodeRabbit

• New Features
  • Added a clear button to text fields that appears when a value is present; enable via the ShowClearButton parameter and handle clear events with the OnClear callback.
  • Added customization options for clear button styling through class style properties.
  • Enhanced accessibility with improved ARIA attributes for icon elements.

_{✏️ Tip: You can customize this high-level summary in your review settings.}

[coderabbitai]

Important

Review skipped

Auto incremental reviews are disabled on this repository.

Please check the settings in the CodeRabbit UI or the .coderabbit.yaml file in this repository. To trigger a single review, invoke the @coderabbitai review command.

You can disable this status message by setting the reviews.review_status to false in the CodeRabbit configuration file.

Walkthrough

This PR adds a clear button feature to BitTextField component. The implementation introduces a ShowClearButton parameter to conditionally display a clear button, an OnClear callback for handling clear actions, associated styling, and style customization properties. Demo examples have been reordered to showcase the new feature alongside existing functionality.

Changes

Cohort / File(s)	Summary
TextField Component Markup src/BlazorUI/Bit.BlazorUI/Components/Inputs/TextField/BitTextField.razor	Added conditional rendering for a Clear button when ShowClearButton is true and a value exists; button includes onclick handler, aria attributes, and styling/class hooks. Minor structural adjustments to markup attribute ordering and icon elements; BOM removal and trailing newline added.
TextField Component Logic src/BlazorUI/Bit.BlazorUI/Components/Inputs/TextField/BitTextField.razor.cs	Added ShowClearButton boolean parameter (default false) and OnClear EventCallback parameter. Introduced HandleOnClearButtonClick handler that clears text, focuses input, and invokes OnClear callback with guards for disabled/read-only state.
TextField Styling src/BlazorUI/Bit.BlazorUI/Components/Inputs/TextField/BitTextField.scss	Added styling for clear button element (bit-tfl-cbt) with disabled variant and interactive hover states. Includes layout, sizing, typography, and color rules for the new button control.
TextField Style Classes src/BlazorUI/Bit.BlazorUI/Components/Inputs/TextField/BitTextFieldClassStyles.cs	Added two new nullable string properties: ClearButton and ClearButtonIcon to enable custom styling of the clear button and its icon.
Demo Page & Code-Behind src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Inputs/TextField/BitTextFieldDemo.razor, BitTextFieldDemo.razor.cs	Introduced new "ShowClearButton" demo example. Reordered and updated subsequent demo examples with revised reference numbers. Added documentation for OnClear and ShowClearButton parameters, plus ClearButton/ClearButtonIcon style properties.

Estimated code review effort

🎯 3 (Moderate) | ⏱️ ~20 minutes

Poem

A rabbit's gift, so clean and bright,
A little ✕ clears the field just right,
Click to reset, focus stays true,
BitTextField now does better for you! 🐰

Pre-merge checks and finishing touches

❌ Failed checks (2 warnings)

Check name	Status	Explanation	Resolution
Linked Issues check	⚠️ Warning	The PR implements most of issue #11847's requirements: clear button with conditional visibility, OnClear callback, and class styling properties. However, it uses 'ShowClearButton' parameter instead of the suggested 'Clear', and lacks the optional 'ClearIconName' parameter to customize the icon.	Consider implementing the 'ClearIconName' parameter to allow customization of the clear icon as requested in issue #11847, or document why this feature was deferred.
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 (3 passed)

Check name	Status	Explanation
Description Check	✅ Passed	Check skipped - CodeRabbit’s high-level summary is enabled.
Title check	✅ Passed	The title 'Add Clear button feature to BitTextField component (#11847)' clearly and concisely summarizes the main change - adding a clear button feature to the BitTextField component.
Out of Scope Changes check	✅ Passed	All changes are directly related to implementing the clear button feature for BitTextField and its supporting files. No out-of-scope modifications were detected.

---

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.}

[coderabbitai]

Actionable comments posted: 3

🧹 Nitpick comments (1)

src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Inputs/TextField/BitTextFieldDemo.razor (1)

145-151: Consider adding demos for OnClear callback and ClearIconName parameter.

The current demo shows basic ShowClearButton usage, which is good. However, issue #11847 mentioned two additional optional parameters that aren't demonstrated:

1. OnClear callback: Should show how to capture the current value and return a bool to block the clear action.
2. ClearIconName parameter: Should show how to customize the clear icon.

Adding these demos would help users understand the full feature set.

💡 Example demo additions

<DemoExample Title="ShowClearButton with OnClear callback" RazorCode="@example9bRazorCode" CsharpCode="@example9bCsharpCode" Id="example9b">
    <div>Demonstrates the OnClear callback that can prevent clearing based on custom logic.</div>
    <br />
    <div class="example-box">
        <BitTextField Label="Email (requires confirmation)" 
                      @bind-Value="emailValue" 
                      ShowClearButton 
                      OnClear="HandleOnClear" />
        <div>Value: [@emailValue]</div>
        <div>Clear attempts: @clearAttempts</div>
    </div>
</DemoExample>

<DemoExample Title="ShowClearButton with custom icon" RazorCode="@example9cRazorCode" Id="example9c">
    <div>Demonstrates using a custom icon for the clear button.</div>
    <br />
    <div class="example-box">
        <BitTextField Label="Search" 
                      DefaultValue="query" 
                      ShowClearButton 
                      ClearIconName="@BitIconName.ChromeClose" />
    </div>
</DemoExample>

📜 Review details

Configuration used: Repository 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 36b3cc7 and 4a3aa06.

📒 Files selected for processing (6)

• src/BlazorUI/Bit.BlazorUI/Components/Inputs/TextField/BitTextField.razor
• src/BlazorUI/Bit.BlazorUI/Components/Inputs/TextField/BitTextField.razor.cs
• src/BlazorUI/Bit.BlazorUI/Components/Inputs/TextField/BitTextField.scss
• src/BlazorUI/Bit.BlazorUI/Components/Inputs/TextField/BitTextFieldClassStyles.cs
• src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Inputs/TextField/BitTextFieldDemo.razor
• src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Inputs/TextField/BitTextFieldDemo.razor.cs

🧰 Additional context used

🧬 Code graph analysis (1)

src/BlazorUI/Bit.BlazorUI/Components/Inputs/TextField/BitTextField.razor.cs (1)

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

• Task (207-211)
• Task (287-301)
• Task (334-342)
• Task (344-355)
• Task (357-364)
• Task (366-375)
• Task (377-435)
• Task (437-450)

⏰ 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 Bit.BlazorUI

🔇 Additional comments (9)

src/BlazorUI/Bit.BlazorUI/Components/Inputs/TextField/BitTextFieldClassStyles.cs (1)

60-68: LGTM! Well-structured styling properties.

The new ClearButton and ClearButtonIcon properties are properly documented and logically positioned alongside the reveal password styling properties.

src/BlazorUI/Bit.BlazorUI/Components/Inputs/TextField/BitTextField.razor.cs (1)

195-198: LGTM! Parameter is well-documented.

The ShowClearButton parameter is properly implemented with clear documentation.

src/BlazorUI/Bit.BlazorUI/Components/Inputs/TextField/BitTextField.scss (2)

35-42: LGTM! Consistent disabled state styling.

The disabled styling for the clear button properly handles cursor, pointer-events, and visual styling, consistent with other disabled elements in the component.

---

175-212: LGTM! Comprehensive button styling.

The clear button styling is well-structured with:

• Proper button reset and positioning
• Icon sizing and alignment
• Interactive hover states
• Consistent design language with the reveal password button

src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Inputs/TextField/BitTextFieldDemo.razor.cs (1)

136-140: LGTM! Comprehensive parameter documentation.

The documentation for OnClear, ShowClearButton, and the new class styles properties is clear, well-structured, and consistent with existing documentation patterns.

Also applies to: 233-238, 374-386

src/BlazorUI/Bit.BlazorUI/Components/Inputs/TextField/BitTextField.razor (3)

118-133: Good addition of type="button" to prevent form submission.

Adding type="button" to the reveal password button (line 121) is a good defensive practice that prevents accidental form submission. This aligns with the clear button implementation and improves overall UX consistency.

---

128-130: Excellent accessibility improvements with aria-hidden="true" on decorative icons.

Adding aria-hidden="true" to the reveal password icon (line 128) and the general icon (line 137) is the correct approach for decorative icons. This ensures screen readers don't announce redundant information since the parent elements already provide accessible context through aria-label or other attributes.

Also applies to: 137-139

---

104-104: HandleOnClearButtonClick is properly implemented.

The method exists in the code-behind file at line 438 and correctly handles all required operations: clears the text via SetCurrentValueAsStringAsync(string.Empty, true), focuses the input via InputElement.FocusAsync(), invokes the OnClear callback, and guards against disabled/read-only states with an early return check.

src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Inputs/TextField/BitTextFieldDemo.razor (1)

153-345: Excellent job maintaining consistency in example renumbering.

All subsequent examples have been correctly renumbered from example9-16 to example10-17 to accommodate the new ShowClearButton demo. The IDs, RazorCode references, and CsharpCode references are all consistent and properly updated.