Add BitModal component and interactive PA showcase#87
Merged
Conversation
- Add BitModal razor component with Bootstrap Italia modal styles - Support all documented sizes (Small, Large, ExtraLarge) via ModalSize enum - Support positioning (Default, Centered, Left, Right) via ModalPosition enum - Support variants (Default, Alert, LinkList, Popconfirm) via ModalType enum - Support backdrop behavior (Default, Static, None) via ModalBackdrop enum - Allow custom header, body, and footer via RenderFragment parameters - Support two-way binding on IsVisible parameter - Expose ARIA attributes (aria-labelledby, aria-label, aria-describedby) - Include fade animation toggle, scrollable content, footer shadow options - Add XML documentation for all public parameters - Add unit tests (rendering + behavior) covering all variants and use cases - Add BlazingStory stories for interactive documentation - Add docs/components/modal.md reference documentation
- Replace boilerplate sample with interactive PA portal concept - Bootstrap Italia themed layout: portal header, sidebar nav with icons - Home: dashboard with stats cards, quick access grid, recent alerts - Servizi: service catalog with BitCard grid (Anagrafe, Tributi, Edilizia) - Modulistica: full form showcase (BitTextField, BitSelect, BitRadio, BitCheckbox, BitToggle, BitDatepicker, BitTimepicker, BitNumberField) - Comunicazioni: dismissible alerts list with BitBadge category chips - Sportello: BitModal showcase with 8+ variants (sizes, positions, types, backdrop modes) and KPI dashboard
- Add wwwroot/css/fonts.css to BitBlazor library with @font-face rules for Titillium Web (300/400/600/700), Lora (400/700) and Roboto Mono (400/700) — all weights include italic variants - Font paths point to _content/BitBlazor/bootstrap-italia/fonts/ so no extra assets need to be copied by consumers - Add optional fonts link to README Getting Started section - Include fonts.css in Stories IFramePage.razor (canvas views) - Include fonts.css in Sample App.razor; set Titillium Web as default font-family in app.css
- Replace hardcoded IsVisible=true with @bind-IsVisible + trigger button - Add ViewModel with a bool property per story to track open/close state - All close actions (footer buttons, X button, backdrop) now properly update the bound state via two-way binding - Add new 'Backdrop - Static' story to demonstrate non-dismissible modal - Footer buttons in stories without ShowCloseButton explicitly set the bool to false to close the modal
Contributor
There was a problem hiding this comment.
Pull request overview
This PR adds a new BitModal component to the BitBlazor component library (Bootstrap Italia–styled), along with documentation, Storybook examples, and sample app pages demonstrating practical UI patterns. It also introduces an optional bundled font stylesheet to align typography with Bootstrap Italia defaults.
Changes:
- Added
BitModalcomponent (plus related enums) and accompanying unit tests. - Added Storybook stories and docs page describing
BitModalusage and accessibility. - Updated sample/stories apps to include Bootstrap Italia default fonts and added new interactive showcase pages/layout.
Reviewed changes
Copilot reviewed 24 out of 24 changed files in this pull request and generated 1 comment.
Show a summary per file
| File | Description |
|---|---|
| tests/BitBlazor.Test/Components/Modal/BitModalTest.Rendering.razor | bUnit rendering coverage for modal structure, classes, aria attributes, header/footer/backdrop rendering. |
| tests/BitBlazor.Test/Components/Modal/BitModalTest.Behaviors.cs | bUnit behavior coverage for close/backdrop click interactions and callbacks. |
| stories/BitBlazor.Stories/Components/Stories/Components/BitModal.stories.razor | Storybook scenarios demonstrating modal variants (size, position, type, backdrop, fade). |
| stories/BitBlazor.Stories/Components/Pages/IFramePage.razor | Loads the new fonts stylesheet in the stories host page. |
| src/BitBlazor/wwwroot/css/fonts.css | Adds Bootstrap Italia font-face declarations for Titillium Web, Lora, Roboto Mono. |
| src/BitBlazor/Components/Modal/ModalType.cs | New enum for modal visual variants. |
| src/BitBlazor/Components/Modal/ModalSize.cs | New enum for modal sizing variants. |
| src/BitBlazor/Components/Modal/ModalPosition.cs | New enum for modal positioning variants. |
| src/BitBlazor/Components/Modal/ModalBackdrop.cs | New enum for backdrop behavior. |
| src/BitBlazor/Components/Modal/BitModal.razor.cs | BitModal component logic: parameters, class computation, close/backdrop handlers, id generation. |
| src/BitBlazor/Components/Modal/BitModal.razor | BitModal markup: backdrop, dialog, header/body/footer rendering with aria attributes. |
| samples/BitBlazor.Sample/BitBlazor.Sample/wwwroot/app.css | Updates sample typography and adds a form-group spacing override for Bootstrap Italia. |
| samples/BitBlazor.Sample/BitBlazor.Sample/Components/Pages/Servizi.razor | New “Servizi” catalog page for the sample portal experience. |
| samples/BitBlazor.Sample/BitBlazor.Sample/Components/Pages/Home.razor | Replaces default template with a “Dashboard” page showcasing cards and alerts. |
| samples/BitBlazor.Sample/BitBlazor.Sample/Components/Layout/NavMenu.razor.css | Sidebar styling tweaks for Bootstrap Italia link-list navigation. |
| samples/BitBlazor.Sample/BitBlazor.Sample/Components/Layout/NavMenu.razor | Replaces template nav with Bootstrap Italia sidebar link-list + account section. |
| samples/BitBlazor.Sample/BitBlazor.Sample/Components/Layout/MainLayout.razor.css | New portal layout styling (header/sidebar/content) for the sample. |
| samples/BitBlazor.Sample/BitBlazor.Sample/Components/Layout/MainLayout.razor | New portal header/sidebar layout and localized error UI text. |
| samples/BitBlazor.Sample/BitBlazor.Sample/Components/App.razor | Includes the new _content/BitBlazor/css/fonts.css stylesheet in the sample app. |
| samples/BitBlazor.Sample/BitBlazor.Sample.Client/Pages/Sportello.razor | New interactive “Sportello Digitale” page showcasing multiple BitModal variants. |
| samples/BitBlazor.Sample/BitBlazor.Sample.Client/Pages/Modulistica.razor | New “Modulistica” page demonstrating forms and related BitBlazor form components. |
| samples/BitBlazor.Sample/BitBlazor.Sample.Client/Pages/Comunicazioni.razor | New interactive communications page demonstrating dismissible alerts and archive. |
| docs/components/modal.md | New documentation page for BitModal (parameters, enums, examples, accessibility notes). |
| README.md | Documents optional inclusion of the Bootstrap Italia default fonts stylesheet. |
💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.
You can also share your feedback on Copilot code review. Take the survey.
Co-authored-by: Copilot Autofix powered by AI <175728472+Copilot@users.noreply.github.com>
Owner
|
@mrdevrobot hi and thanks for the PR 🥳 . I'll review it in the following days! |
Contributor
Author
|
Ciao @albx if you have any concern let me know ;) |
Owner
|
Ciao @mrdevrobot! Sorry busy week...I will review the PR soon 🤞 |
albx
reviewed
Mar 23, 2026
Owner
albx
left a comment
albx
left a comment
There was a problem hiding this comment.
@mrdevrobot first of all thank you very much! I think it's a great job 🙂
I leave some comments in tests just to keep @bind-Visible approach explicit.
I have to finish review for component itself and documentation
tests/BitBlazor.Test/Components/Modal/BitModalTest.Behaviors.cs
Outdated
Show resolved
Hide resolved
tests/BitBlazor.Test/Components/Modal/BitModalTest.Behaviors.cs
Outdated
Show resolved
Hide resolved
tests/BitBlazor.Test/Components/Modal/BitModalTest.Behaviors.cs
Outdated
Show resolved
Hide resolved
tests/BitBlazor.Test/Components/Modal/BitModalTest.Rendering.razor
Outdated
Show resolved
Hide resolved
tests/BitBlazor.Test/Components/Modal/BitModalTest.Rendering.razor
Outdated
Show resolved
Hide resolved
tests/BitBlazor.Test/Components/Modal/BitModalTest.Rendering.razor
Outdated
Show resolved
Hide resolved
tests/BitBlazor.Test/Components/Modal/BitModalTest.Rendering.razor
Outdated
Show resolved
Hide resolved
tests/BitBlazor.Test/Components/Modal/BitModalTest.Rendering.razor
Outdated
Show resolved
Hide resolved
tests/BitBlazor.Test/Components/Modal/BitModalTest.Rendering.razor
Outdated
Show resolved
Hide resolved
tests/BitBlazor.Test/Components/Modal/BitModalTest.Rendering.razor
Outdated
Show resolved
Hide resolved
- Use @bind-IsVisible (two-way binding) in all BitModalTest.Rendering tests - Use .Bind() instead of separate .Add() for IsVisible/IsVisibleChanged in BitModalTest.Behaviors - Fix fonts.css font URL paths to use relative paths (../bootstrap-italia/fonts/) instead of absolute _content/BitBlazor paths
Contributor
Author
Hi @albx I've fixed the binding meanwhile. Looking forward for the full Review ;) |
albx
requested changes
Mar 26, 2026
Owner
albx
left a comment
albx
left a comment
There was a problem hiding this comment.
hi @mrdevrobot , just two things before approve and merge this PR:
- For the stories switch to english just to stay consistent with the other components
- Add a quick reference to the modal.md documentation in the README.md file inside the docs/ folder
After this two things, I will merge the PR and the modal will be part of the 0.3.0 version of BitBlazor 🥳
Add a Modal entry to docs/README.md and translate BitModal story content from Italian to English. Update story texts (titles, button labels, body copy, aria labels), tidy attribute formatting, and adjust story structure/spacing in stories/BitBlazor.Stories/Components/Stories/Components/BitModal.stories.razor for consistency.
Contributor
Author
|
@albx all corrections done ;) |
albx
approved these changes
Mar 31, 2026
Owner
|
@mrdevrobot merged! |
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 significant improvements to the documentation and sample usage of the BitBlazor component library, focusing on Bootstrap Italia integration and modal/dialog functionality. The main changes include adding a comprehensive usage guide for the
BitModalcomponent, updating the documentation to clarify font usage, and providing a new sample page demonstrating notification and alert patterns.Documentation Enhancements:
BitModalcomponent, including parameter tables, accessibility notes, usage examples, and references to Bootstrap Italia and WAI-ARIA best practices.README.mdto recommend including the default Bootstrap Italia fonts via an additional stylesheet link, improving visual consistency.Sample Application Improvements:
Comunicazioni.razor) that demonstrates interactive notification cards, filtering, dismissible alerts, and an archive of past communications, showcasing practical use of BitBlazor components such asBitModal,BitAlert,BitBadge, andBitCard.