[dev-v5] Add NewsBar with dynamic notifications - #4973
Merged
Denis Voituron (dvoituron) merged 6 commits intoJul 1, 2026
Conversation
Denis Voituron (dvoituron)
requested a review
from Vincent Baaij (vnbaaij)
as a code owner
June 27, 2026 10:42
Contributor
There was a problem hiding this comment.
Pull request overview
Adds a dismissible NewsBar to the Fluent UI Blazor demo site that loads its notification content dynamically from NEWS-BANNER.md on the dev-v5 branch, and remembers dismissal via a content hash stored in localStorage.
Changes:
- Introduces a new
DemoNewsBarBlazor component that fetches/parsesNEWS-BANNER.md, renders aFluentMessageBar, and persists dismissal state inlocalStorage. - Updates demo layout/CSS to reserve vertical space for the banner and adjust the main layout height accordingly.
- Adds an initial
NEWS-BANNER.mdfront-matter + content payload to drive the banner.
Reviewed changes
Copilot reviewed 5 out of 5 changed files in this pull request and generated 5 comments.
Show a summary per file
| File | Description |
|---|---|
NEWS-BANNER.md |
Adds the initial front-matter based banner content (Title/Intent + body). |
examples/Demo/FluentUI.Demo.Client/wwwroot/app.css |
Adds CSS variable-based height reservation for the notification banner and normalizes some existing formatting. |
examples/Demo/FluentUI.Demo.Client/Layout/DemoNewsBar.razor.cs |
Fetches + parses banner content, computes hash, checks/persists dismissal in localStorage. |
examples/Demo/FluentUI.Demo.Client/Layout/DemoNewsBar.razor |
Renders the message bar and defines the JS hook used to override the web component’s styling. |
examples/Demo/FluentUI.Demo.Client/Layout/DemoMainLayout.razor |
Mounts DemoNewsBar and adjusts FluentLayout height to account for banner height. |
|
✅ All tests passed successfully Details on your Workflow / Core Tests page. |
Summary - Unit Tests Code CoverageSummary
CoverageMicrosoft.FluentUI.AspNetCore.Components - 98.5%
|
Collaborator
|
This is great! |
Vincent Baaij (vnbaaij)
requested changes
Jun 30, 2026
Vincent Baaij (vnbaaij)
left a comment
Vincent Baaij (vnbaaij)
left a comment
Collaborator
There was a problem hiding this comment.
2 remarks plus copilot comments
…local storage key, and enhance SHA computation
Denis Voituron (dvoituron)
enabled auto-merge (squash)
July 1, 2026 09:31
Vincent Baaij (vnbaaij)
approved these changes
Jul 1, 2026
Denis Voituron (dvoituron)
deleted the
users/dvoituron/dev-v5/demo-notification
branch
July 1, 2026 11:36
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.
[dev-v5] Add NewsBar with dynamic notifications
Introduce the NewsBar header to display dynamic news notifications with dismiss functionality.
This change enhances user experience by allowing users to view important updates and dismiss them as needed.
NEWS-BANNER.md(dev-v5) file, which allows us to update these news items without having to republish the website, while still requiring validation via a pull requestLocalStorage, which prevents this message from reappearing until new news is published on GitHub.Info,Warning,ErrorandSuccess.On Desktop
On mobile