Apply BitActionButton improvements (#11781)

[msynk]

closes #11781

Summary by CodeRabbit

Release Notes

• Bug Fixes

  • Improved tab index behavior for keyboard navigation when the button is disabled, enhancing accessibility compliance.

• Style

  • Enhanced keyboard focus visibility with updated focus indicator styling for better user feedback during keyboard navigation.

• Documentation

  • Expanded demo examples showcasing additional features including custom templates, button types, sizes, color variants, full-width mode, and RTL support.

_{✏️ 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

The changes correct TabIndex parameter behavior in BitActionButton by converting internal representation from int? to string?, update component styling with focus-visible states, and significantly expand the demo page with comprehensive examples including templates, button types, sizes, colors, validation forms, and RTL scenarios.

Changes

Cohort / File(s)	Summary
BitActionButton Component src/BlazorUI/Bit.BlazorUI/Components/Buttons/ActionButton/BitActionButton.razor.cs, src/BlazorUI/Bit.BlazorUI/Components/Buttons/ActionButton/BitActionButton.scss	Internal tabindex type changed from int? to string?; when disabled, tabindex set to "-1" (string) instead of -1 (int); added else branch to preserve existing _tabIndex when TabIndex not provided. Added focus-visible style block to .bit-acb with outline, border-radius, and box-shadow.
BitActionButton Demo src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Buttons/ActionButton/BitActionButtonDemo.razor, src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Buttons/ActionButton/BitActionButtonDemo.razor.samples.cs	Restructured demo sections with new templates, button types, fullwidth, size, and color demonstrations; added form validation example with DataAnnotationsValidator and ValidationMessage; expanded sample code blocks to multi-line formatting; added RTL example and complex validation form sample.
Demo Infrastructure src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Components/DemoExample.razor.scss	Added gap: 2px to .header-btn-group; adjusted end-of-file newline handling.

Estimated code review effort

🎯 3 (Moderate) | ⏱️ ~20 minutes

• BitActionButton.razor.cs: Verify string-based tabindex conversion logic handles all edge cases and that disabled/enabled state transitions work correctly
• BitActionButtonDemo.razor: Ensure all new demo sections render properly, particularly the form validation example with proper data binding and error display
• BitActionButton.scss: Confirm focus-visible styling is visually consistent and accessible across browsers

Poem

🐰 Hops through tabindex strings we go,
From int to string, watch focus flow,
Demo sections bloom anew,
With validation forms and colors true,
Focus-visible guides the way,
Brighter, clearer, every day! ✨

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 title 'Apply BitActionButton improvements' directly corresponds to the PR's primary objective of improving the BitActionButton component, as evidenced by all code changes focused on this component.
Linked Issues check	✅ Passed	The PR implements all three coding requirements from issue #11781: corrects TabIndex parameter behavior (int? to string?), updates the demo page with new examples and sections, and improves internal code organization.
Out of Scope Changes check	✅ Passed	All changes are directly related to BitActionButton improvements as specified in issue #11781; no unrelated modifications to other components or systems are present.

---

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: 0

🧹 Nitpick comments (1)

src/BlazorUI/Bit.BlazorUI/Components/Buttons/ActionButton/BitActionButton.scss (1)

106-116: Remove duplicate .bit-acb-err class definition.

The .bit-acb-err class is defined twice (lines 106-110 and 112-116) with identical properties. Remove one of these duplicate definitions to improve maintainability.

Apply this diff to remove the duplicate:

 .bit-acb-err {
     --bit-acb-clr-ico: #{$clr-err};
     --bit-acb-clr-hover: #{$clr-err-hover};
     --bit-acb-clr-active: #{$clr-err-active};
 }
-
-.bit-acb-err {
-    --bit-acb-clr-ico: #{$clr-err};
-    --bit-acb-clr-hover: #{$clr-err-hover};
-    --bit-acb-clr-active: #{$clr-err-active};
-}

📜 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 832e496 and fe7b493.

📒 Files selected for processing (5)

• src/BlazorUI/Bit.BlazorUI/Components/Buttons/ActionButton/BitActionButton.razor.cs (2 hunks)
• src/BlazorUI/Bit.BlazorUI/Components/Buttons/ActionButton/BitActionButton.scss (2 hunks)
• src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Components/DemoExample.razor.scss (2 hunks)
• src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Buttons/ActionButton/BitActionButtonDemo.razor (3 hunks)
• src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Buttons/ActionButton/BitActionButtonDemo.razor.samples.cs (2 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 Bit.BlazorUI

🔇 Additional comments (5)

src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Components/DemoExample.razor.scss (1)

27-27: LGTM!

The addition of a small gap between header buttons improves visual spacing in the demo UI.

src/BlazorUI/Bit.BlazorUI/Components/Buttons/ActionButton/BitActionButton.scss (1)

31-35: LGTM!

The focus-visible styling provides proper keyboard focus indication while maintaining design consistency. Using :focus-visible instead of :focus is the modern best practice for accessibility.

src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Buttons/ActionButton/BitActionButtonDemo.razor.samples.cs (1)

5-290: LGTM!

The demo samples have been comprehensively expanded to showcase the component's features including templates, validation forms, various colors, sizes, and RTL support. The examples are well-structured and align with the PR objectives.

src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Buttons/ActionButton/BitActionButtonDemo.razor (1)

15-325: LGTM!

The demo page has been comprehensively updated with excellent examples showcasing:

• Basic usage with various configurations (AriaLabel, IconOnly, disabled states)
• Template customization with nested content
• Form validation integration with proper state handling
• All color variants with and without icons
• Size variations
• RTL support

The examples are well-structured and align perfectly with the PR objectives to update the demo page and improve descriptions.

src/BlazorUI/Bit.BlazorUI/Components/Buttons/ActionButton/BitActionButton.razor.cs (1)

169-178: Verify type compatibility between TabIndex and _tabIndex.

The assignment at line 177 (_tabIndex = TabIndex ?? _tabIndex) requires that TabIndex is assignable to string?. If TabIndex is int? (the typical Blazor convention), this code will not compile. Ensure the property type matches _tabIndex or apply proper type conversion such as TabIndex?.ToString() ?? _tabIndex.