Add toolbar component#98
Merged
Merged
Conversation
Contributor
There was a problem hiding this comment.
Pull request overview
This pull request adds a new BitToolbar component suite to the BitBlazor UI kit (Bootstrap Italia-styled), along with documentation, stories, samples, and tests to support toolbar layouts, item states, and badge rendering.
Changes:
- Introduces
BitToolbar,BitToolbarItem, andBitToolbarDividercomponents plusToolbarSizeand a sharedOrientationenum. - Adds storybook stories, docs pages, and quick-reference/README updates for the new toolbar suite.
- Adds bUnit rendering/behavior tests and integrates a usage example into the sample app page.
Reviewed changes
Copilot reviewed 16 out of 16 changed files in this pull request and generated 9 comments.
Show a summary per file
| File | Description |
|---|---|
| tests/BitBlazor.Test/Components/Toolbar/BitToolbarTest.Rendering.razor | New bUnit rendering coverage for toolbar markup variants (sizes, divider, badges, disabled, orientation). |
| tests/BitBlazor.Test/Components/Toolbar/BitToolbarTest.Behaviors.cs | New behavior tests for click/keyboard activation and navigation behaviors. |
| stories/BitBlazor.Stories/Components/Stories/Components/BitToolbar.stories.razor | Storybook stories demonstrating toolbar sizes, states, badges, divider, and vertical orientation. |
| src/BitBlazor/Orientation.cs | Adds a shared Orientation enum used by components for horizontal/vertical layout. |
| src/BitBlazor/Components/Toolbar/ToolbarSize.cs | Adds ToolbarSize enum for default/medium/small variants. |
| src/BitBlazor/Components/Toolbar/BitToolbarItem.razor.css | Adds scoped styling for toolbar item link cursor behavior. |
| src/BitBlazor/Components/Toolbar/BitToolbarItem.razor.cs | Implements toolbar item parameters/behavior (active/disabled, href navigation, click callback, badges). |
| src/BitBlazor/Components/Toolbar/BitToolbarItem.razor | Renders toolbar item markup (icon, label, badges) and hooks click/keyboard handlers. |
| src/BitBlazor/Components/Toolbar/BitToolbarDivider.razor | Adds divider markup intended as a semantic separator between items. |
| src/BitBlazor/Components/Toolbar/BitToolbar.razor.cs | Implements toolbar container parameters and CSS class composition (size + orientation). |
| src/BitBlazor/Components/Toolbar/BitToolbar.razor | Renders the toolbar <nav><ul> container and cascades the toolbar to children. |
| samples/BitBlazor.Sample/BitBlazor.Sample/Components/Pages/Pratiche.razor | Integrates the new toolbar into a sample page to demonstrate real usage. |
| ROADMAP.md | Minor formatting correction in the roadmap heading. |
| docs/README.md | Adds toolbar to the docs component list. |
| docs/quick-reference.md | Adds a quick-reference section with toolbar usage snippets. |
| docs/components/toolbar.md | New full documentation page for BitToolbar suite (parameters, behaviors, examples). |
Co-authored-by: Copilot Autofix powered by AI <175728472+Copilot@users.noreply.github.com>
…y can be used only inside a bittoolbar component
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
This pull request introduces a new
BitToolbarcomponent suite to the BitBlazor library, providing a flexible and accessible toolbar UI based on Bootstrap Italia styles. The toolbar supports horizontal and vertical layouts, multiple size variants, badge counts/labels, and interactive navigation features. The PR also includes comprehensive documentation, usage examples, and integration into sample pages.New Toolbar Component Suite:
src/BitBlazor/Components/Toolbar/BitToolbar.razorand.cs: Implements the coreBitToolbarcontainer, supporting orientation, size, and custom CSS classes. ([[1]](https://github.com/albx/bitblazor/pull/98/files#diff-25e5faea6b1d780ac1f477fe35e7a2df3883c581e572d30b3a41cc9526a32cc2R1-R11),[[2]](https://github.com/albx/bitblazor/pull/98/files#diff-7199d3a9eb1e8ceb3be759362a4a60a29caab377efdb2a5460853f366d35cf22R1-R68))src/BitBlazor/Components/Toolbar/BitToolbarItem.razorand.cs: Defines toolbar items with icon, label, active/disabled states, navigation (Href), click callbacks, badge counts, and badge labels. Handles both SSR and interactive rendering. ([[1]](https://github.com/albx/bitblazor/pull/98/files#diff-03b7f8c5d6ccc578efd7182ebbfdcb9df1677b134fa5fac1ec43447580f24404R1-R33),[[2]](https://github.com/albx/bitblazor/pull/98/files#diff-94127b26b22626c967a12c078fa031eb2546b6e6574e88aed62abb0b161e0880R1-R147))src/BitBlazor/Components/Toolbar/BitToolbarDivider.razor: Adds a divider sub-component for visual separation between toolbar items. ([src/BitBlazor/Components/Toolbar/BitToolbarDivider.razorR1-R3](https://github.com/albx/bitblazor/pull/98/files#diff-0fd7e928b7b4bbf87fc2a9ea9efa03f9583d6456cd2798834eacca0364db5c19R1-R3))src/BitBlazor/Components/Toolbar/ToolbarSize.cs: Introduces theToolbarSizeenum for size variants (Default, Medium, Small). ([src/BitBlazor/Components/Toolbar/ToolbarSize.csR1-R22](https://github.com/albx/bitblazor/pull/98/files#diff-cf75e02e7f0637a5ab4846e6f04e7754b61c86530e989809518c22bcca33dd21R1-R22))src/BitBlazor/Components/Toolbar/BitToolbarItem.razor.css: Adds basic styling for toolbar item links. ([src/BitBlazor/Components/Toolbar/BitToolbarItem.razor.cssR1-R3](https://github.com/albx/bitblazor/pull/98/files#diff-f80c996d1a97a6498520a823b92615f0b083182077773b941d760e580d13baa4R1-R3))Documentation and Usage Examples:
docs/components/toolbar.md: Adds full documentation for the new toolbar components, including parameter tables, behavioral notes (SSR/SPA), and extensive usage examples. ([docs/components/toolbar.mdR1-R190](https://github.com/albx/bitblazor/pull/98/files#diff-93c045e416b7306d89ef565de742f295b147f7ada2d50d6f979ff1501b2802fcR1-R190))docs/README.md,docs/quick-reference.md: Updates the component list and quick reference guide to include the new toolbar, with example code snippets. ([[1]](https://github.com/albx/bitblazor/pull/98/files#diff-0b5ca119d2be595aa307d34512d9679e49186307ef94201e4b3dfa079aa89938R79-R85),[[2]](https://github.com/albx/bitblazor/pull/98/files#diff-6982b31af20a1fe3816dff6e80bf7a027c970fd7b584deb89d59538b129af5aaR113-R136))Sample Integration:
samples/BitBlazor.Sample/BitBlazor.Sample/Components/Pages/Pratiche.razor: Demonstrates the new toolbar in a real-world page, with interactive actions, badge counts, and active state management. ([[1]](https://github.com/albx/bitblazor/pull/98/files#diff-9f5f7e72dadc37e3a1b4e99e46127e8c0c0b7ea715d53ecb3f45d0ef989cd121R17-R41),[[2]](https://github.com/albx/bitblazor/pull/98/files#diff-9f5f7e72dadc37e3a1b4e99e46127e8c0c0b7ea715d53ecb3f45d0ef989cd121R131),[[3]](https://github.com/albx/bitblazor/pull/98/files#diff-9f5f7e72dadc37e3a1b4e99e46127e8c0c0b7ea715d53ecb3f45d0ef989cd121R172-R195))Other:
ROADMAP.md: Minor formatting fix in the roadmap file. ([ROADMAP.mdL1-R1](https://github.com/albx/bitblazor/pull/98/files#diff-683343bdf93f55ed3cada86151abb8051282e1936e58d4e0a04beca95dff6e51L1-R1))This PR significantly enhances BitBlazor's navigation and action UI capabilities with a highly customizable, accessible, and documented toolbar component family.