Skip to content

Add toolbar component#98

Merged
albx merged 9 commits into
mainfrom
feature/6-toolbar-component
Jun 27, 2026
Merged

Add toolbar component#98
albx merged 9 commits into
mainfrom
feature/6-toolbar-component

Conversation

@albx

@albx albx commented Jun 27, 2026

Copy link
Copy Markdown
Owner

This pull request introduces a new BitToolbar component 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.razor and .cs: Implements the core BitToolbar container, 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.razor and .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 the ToolbarSize enum 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.

@albx albx linked an issue Jun 27, 2026 that may be closed by this pull request
@albx albx changed the title Feature/6 toolbar component Add toolbar component Jun 27, 2026
@albx albx marked this pull request as ready for review June 27, 2026 11:36
@albx albx requested a review from Copilot June 27, 2026 11:36

Copilot AI left a comment

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

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, and BitToolbarDivider components plus ToolbarSize and a shared Orientation enum.
  • 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).

Comment thread src/BitBlazor/Components/Toolbar/BitToolbarItem.razor
Comment thread src/BitBlazor/Components/Toolbar/BitToolbarItem.razor.cs
Comment thread src/BitBlazor/Components/Toolbar/BitToolbarItem.razor.cs
Comment thread src/BitBlazor/Components/Toolbar/BitToolbarItem.razor.cs
Comment thread src/BitBlazor/Components/Toolbar/BitToolbarItem.razor.cs
Comment thread src/BitBlazor/Components/Toolbar/BitToolbarDivider.razor
Comment thread docs/components/toolbar.md Outdated
Comment thread docs/components/toolbar.md Outdated
albx and others added 2 commits June 27, 2026 13:56
Co-authored-by: Copilot Autofix powered by AI <175728472+Copilot@users.noreply.github.com>
…y can be used only inside a bittoolbar component
@albx albx merged commit 48e232e into main Jun 27, 2026
5 checks passed
@albx albx deleted the feature/6-toolbar-component branch June 27, 2026 12:09
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

[FEATURE] Add the Toolbar component

2 participants