Add BitModal component and interactive PA showcase#87
Open
mrdevrobot wants to merge 8 commits intoalbx:mainfrom
Open
Add BitModal component and interactive PA showcase#87mrdevrobot wants to merge 8 commits intoalbx:mainfrom
mrdevrobot wants to merge 8 commits intoalbx:mainfrom
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! |
Author
|
Ciao @albx if you have any concern let me know ;) |
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.