[dev-v5] Add NewsBar with dynamic notifications#4973
Open
dvoituron wants to merge 3 commits into
Open
Conversation
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. |
Comment on lines
+33
to
+42
| // Wait until the <fluent-message-bar> custom element definition is loaded. | ||
| customElements.whenDefined('fluent-message-bar').then(() => { | ||
| const bar = document.querySelector('fluent-message-bar.demo-notification'); | ||
| if (bar && bar.shadowRoot) { | ||
| bar.shadowRoot.adoptedStyleSheets = [ | ||
| ...bar.shadowRoot.adoptedStyleSheets, | ||
| sheet | ||
| ]; | ||
| } | ||
| }); |
Comment on lines
+23
to
+29
| --- | ||
| Title: New release available | ||
| Intent: Success | ||
| --- | ||
| Version <b>RC4</b> is now available with many new components. | ||
| Check out the changelog for all the details and breaking changes. | ||
| */ |
Comment on lines
+120
to
+121
| // Keep a small SHA: the first 8 bytes are enough to detect content changes. | ||
| return Convert.ToHexString(hash, 0, 8).ToLowerInvariant(); |
Comment on lines
+68
to
+70
| catch (HttpRequestException) | ||
| { | ||
| } |
Comment on lines
+26
to
+31
| <script> | ||
| // This function overrides the default max-width of the <fluent-message-bar> component. | ||
| // It is invoked from C# when the message bar becomes visible. | ||
| window.applyDemoNotificationStyle = function () { | ||
| const sheet = new CSSStyleSheet(); | ||
| sheet.replaceSync('.content { max-width: unset; }'); |
|
✅ 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! |
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