Add toggle component #68
Conversation
There was a problem hiding this comment.
Pull request overview
This pull request introduces the BitToggle component, a modern toggle switch for boolean input in the BitBlazor form library. The component provides a visual alternative to checkboxes with support for inline/grouped layouts, form validation, and comprehensive documentation.
Changes:
- Added new
BitTogglecomponent with code-behind, markup, andToggleViewModeenumeration - Comprehensive documentation including usage guide, quick reference, and enumeration docs
- Storybook stories showcasing various features and layouts
- Test suite covering behaviors and rendering scenarios
- Updated
BitCheckboxto include validation message rendering
Reviewed changes
Copilot reviewed 12 out of 12 changed files in this pull request and generated 10 comments.
Show a summary per file
| File | Description |
|---|---|
| src/BitBlazor/Form/Toggle/BitToggle.razor | Component markup implementing toggle switch with validation and accessibility |
| src/BitBlazor/Form/Toggle/BitToggle.razor.cs | Code-behind with ViewMode parameter and CSS class computation |
| src/BitBlazor/Form/Toggle/ToggleViewMode.cs | Enumeration defining Inline and Grouped display modes |
| tests/BitBlazor.Test/Form/Toggle/BitToggleTest.Behaviors.cs | Behavior test for value changes |
| tests/BitBlazor.Test/Form/Toggle/BitToggleTest.Rendering.razor | Rendering tests for markup, disabled state, view modes, and additional text |
| stories/BitBlazor.Stories/Components/Stories/Form/BitToggle.stories.razor | Storybook stories demonstrating component features |
| docs/form/toggle.md | Complete usage documentation with examples and parameters |
| docs/quick-reference.md | Quick reference examples for BitToggle |
| docs/form/form-components.md | Updated component list to include BitToggle |
| docs/enumerations.md | Documentation for ToggleViewMode enumeration |
| docs/README.md | Updated main documentation with BitToggle overview |
| src/BitBlazor/Form/Checkbox/BitCheckbox.razor | Added validation message rendering for consistency |
💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.
stories/BitBlazor.Stories/Components/Stories/Form/BitToggle.stories.razor
Show resolved
Hide resolved
stories/BitBlazor.Stories/Components/Stories/Form/BitToggle.stories.razor
Outdated
Show resolved
Hide resolved
There was a problem hiding this comment.
Pull request overview
Copilot reviewed 12 out of 12 changed files in this pull request and generated 4 comments.
💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.
There was a problem hiding this comment.
Pull request overview
Copilot reviewed 12 out of 12 changed files in this pull request and generated 1 comment.
💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.
This pull request introduces the new
BitTogglecomponent, a modern toggle switch for boolean input, to the BitBlazor form library. It includes the implementation, documentation, usage examples, storybook stories, and a comprehensive set of tests. The component provides a visual alternative to checkboxes, supports inline/grouped layouts, integrates with form validation, and is fully documented and tested.Component Implementation
BitTogglecomponent insrc/BitBlazor/Form/Toggle/BitToggle.razorand its code-behind, supporting boolean values, inline/grouped display modes via the newToggleViewModeenumeration, accessibility features, and form validation integration. [1] [2] [3]Documentation and Usage
BitTogglein the form components overview and provided a dedicated usage guide with detailed examples and parameter descriptions indocs/form/toggle.md. [1] [2] [3]BitToggleindocs/quick-reference.mdand documented the newToggleViewModeenumeration indocs/enumerations.md. [1] [2]Storybook Integration
BitToggleinstories/BitBlazor.Stories/Components/Stories/Form/BitToggle.stories.razor, showcasing its features, layouts, disabled state, and additional text support.Testing
BitToggleto ensure correct value changes, markup output, disabled state, layouts, and additional text rendering intests/BitBlazor.Test/Form/Toggle/BitToggleTest.Behaviors.csandtests/BitBlazor.Test/Form/Toggle/BitToggleTest.Rendering.razor. [1] [2]Related Improvements
BitCheckboxto render validation messages consistently, aligning with the new toggle component’s design.