Skip to content

[dev-v5] MessageBar (WIP!!) #3712

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Draft
wants to merge 2 commits into
base: dev-v5
Choose a base branch
from
Draft

[dev-v5] MessageBar (WIP!!) #3712

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
0266191
Initial MessageBar work
vnbaaij Apr 18, 2025
cf843a2
Merge branch 'dev-v5' into users/vnbaaij/dev-v5/messagebar
vnbaaij Apr 18, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
6 changes: 3 additions & 3 deletions README.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -54,7 +54,7 @@ When using [Visual Studio](https://visualstudio.microsoft.com/), you can also us
The templates will be available under the **Blazor** category.

### - Manual Install
To start using the **Fluent UI Blazor components** from scratch, you first need to install the main [Nuget package](https://www.nuget.org/packages/Microsoft.FluentUI.AspNetCore.Components/) in the project you want to use the library and its components.
To start using the **Fluent UI Blazor components** from scratch, you first need to install the main [NuGet package](https://www.nuget.org/packages/Microsoft.FluentUI.AspNetCore.Components/) in the project you want to use the library and its components.
You can use the NuGet package manager in your IDE or use the following command when using a CLI:

```shell
Expand Down Expand Up @@ -200,13 +200,13 @@ We also have a document that explains and shows how to [write and develop unit t

## 🔹Joining the Community

Looking to get answers to questions or engage with us in real-time? Our community is active on [Gitter](https://app.gitter.im/#/room/#fluentui-blazor:gitter.im) and [Discord](https://discord.gg/FcSNfg4). Submit requests
Looking to get answers to questions or engage with us in real-time? Our community is active on [Discord](https://discord.gg/FcSNfg4). Submit requests
and issues on [GitHub](https://github.com/microsoft/fluentui-blazor/issues/new/choose), or join us by contributing on [some good first issues via GitHub](https://github.com/microsoft/fluentui-blazor/labels/community:good-first-issue).

We look forward to building an amazing open source community with you!

## 🔹Contact

* Join the DotNetEvolution server and chat with us in real-time on [Discord](https://discord.gg/M5cBTfp6J2). You can also find us on [Gitter](https://app.gitter.im/#/room/#fluentui-blazor:gitter.im).
* Join the DotNetEvolution server and chat with us in real-time on [Discord](https://discord.gg/M5cBTfp6J2).
* Submit requests and issues (only) on [GitHub](https://github.com/microsoft/fluentui-blazor/issues/new/choose).
* Contribute by helping out on some of our recommended first issues on [GitHub](https://github.com/microsoft/fluentui-blazor/labels/community:good-first-issue).
96 changes: 96 additions & 0 deletions ...FluentUI.Demo.Client/Documentation/Components/MessageBar/Examples/MessageBarDefault.razor
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,96 @@
@inject IMessageService MessageService
<FluentButton OnClick="@AddInTopBarSimple" Appearance="ButtonAppearance.Primary">Add simple</FluentButton>
<FluentButton OnClick="@AddInTopBarWithOptions" Appearance="ButtonAppearance.Primary">Add with options</FluentButton>

@code
{

ActionLink<IMessageInstance> link = new()
{
Text = "Learn more",
Href = "https://bing.com",
OnClick = (e) => { Console.WriteLine($"Message 'learn more' clicked"); return Task.CompletedTask; }
};

int counter = 0;

async Task AddInTopBarSimple()
{
var message = $"This is a message bar that provides information to the user (#{counter++})";
var type = Enum.GetValues<MessageIntent>()[counter % 4];
await MessageService.ShowMessageBarAsync(message, type, App.MESSAGES_TOP);
}

async Task AddInTopBarWithOptions()
{
await MessageService.ShowMessageBarAsync(options =>
{
options.Title = $"Simple message #{counter++}";
options.Intent = Enum.GetValues<MessageIntent>()[counter % 4];
options.Link = link;
options.Section = App.MESSAGES_TOP;
});
}


// void AddInNotificationCenter()
// {
// MessageService.ShowMessageBar(options =>
// {
// options.Intent = Enum.GetValues<MessageIntent>()[counter % 4];
// options.Title = $"Simple message #{counter++}";
// options.Body = MessageBarSamples.OneRandomMessage;
// options.Link = link;
// options.Timestamp = DateTime.Now;
// options.Section = App.MESSAGES_NOTIFICATION_CENTER;
// });
// }


// async Task AddInDialog()
// {
// MessageService.ShowMessageBar(options =>
// {
// options.Intent = Enum.GetValues<MessageIntent>()[counter % 4];
// options.Title = $"Simple message #{counter++}";
// options.Body = MessageBarSamples.OneRandomMessage;
// options.Link = link;
// options.Timestamp = DateTime.Now;
// options.Section = App.MESSAGES_DIALOG;
// });

// await OpenDialogAsync();
// }

// private async Task OpenDialogAsync()
// {
// DialogParameters<SimplePerson> parameters = new()
// {
// Title = $"Hi {simplePerson.Firstname}!",
// PrimaryAction = "Yes",
// PrimaryActionEnabled = false,
// SecondaryAction = "No",
// Width = "500px",
// Height = "500px",
// Content = simplePerson,
// TrapFocus = true,
// Modal = true,
// };

// IDialogReference dialog = await DialogService.ShowDialogAsync<SimpleDialog>(simplePerson, parameters);
// DialogResult? result = await dialog.Result;
// }

// private async Task AddNonDismissibleMessage()
// {
// var message = $"Simple non-dismissible message #{counter++}";
// var type = Enum.GetValues<MessageIntent>()[counter % 4];
// await MessageService.ShowMessageBarAsync(options =>
// {
// options.Title = message;
// options.Intent = type;
// options.Section = App.MESSAGES_TOP;
// options.AllowDismiss = false;
// });
// }
}
8 changes: 8 additions & 0 deletions ...mo/FluentUI.Demo.Client/Documentation/Components/MessageBar/FluentMessageBar.md
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,8 @@
---
title: MessageBar
route: /MessageBar
---

# MessageBar

{{ MessageBarDefault }}
2 changes: 1 addition & 1 deletion examples/Demo/FluentUI.Demo.Client/Layout/DemoMainLayout.razor
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -58,7 +58,6 @@
@* ------------------- *@
@* Body *@
@* ------------------- *@

@if (IsHomePage())
{
<FluentLayoutItem Area="@LayoutArea.Content" Class="demo-home">
Expand All @@ -71,6 +70,7 @@
else
{
<FluentLayoutItem Area="@LayoutArea.Content">
<FluentMessageBarProvider Section="@App.MESSAGES_TOP" ClearAfterNavigation="true" />
@Body
</FluentLayoutItem>

Expand Down
8 changes: 8 additions & 0 deletions spelling.dic
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -51,6 +51,14 @@ tabindex
tablist
tabpanel
textarea
singleline
messagebar
NuGet
blazor
fadein
fluentui
lightgray

sourcecode
summarydata
currentcolor
Expand Down
2 changes: 1 addition & 1 deletion src/Core/Components/Dialog/Services/IDialogInstance.cs
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -5,7 +5,7 @@
namespace Microsoft.FluentUI.AspNetCore.Components;

/// <summary>
/// Interface for DialogReference
/// Interface for DialogInstance
/// </summary>
public interface IDialogInstance
{
Expand Down
142 changes: 142 additions & 0 deletions src/Core/Components/MessageBar/FluentMessageBar.razor
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,142 @@
@namespace Microsoft.FluentUI.AspNetCore.Components
@using Microsoft.FluentUI.AspNetCore.Components.Extensions
@inherits FluentComponentBase
@if (Visible)
{
@* Default *@

@if (Type == MessageType.MessageBar)
{
<fluent-message-bar id="@Id"
intent="@Message.Options.Intent.ToAttributeValue()"
class="@ClassValue"
style="@StyleValue"
animation="@(FadeIn ? "fadein" : null)"
@onfocusin="@PauseTimeout"
@onfocusout="@ResumeTimeout">
<FluentIcon Value="@Icon" Title="@(Message?.Options.Intent.ToAttributeValue())" Color="@_color" Slot="icon" />

@if (!String.IsNullOrEmpty(Message?.Options.Title))
{
<span class="title">@((MarkupString)(Message.Options.Title))</span>
}
@if (ChildContent is not null)
{
@ChildContent
}
else
{
@((MarkupString)Message!.Options.Body!)
}
@if (Link is not null)
{
<FluentLink Href="@(String.IsNullOrEmpty(Link?.Href) ? "#" : Link?.Href)"
Appearance="LinkAppearance.Default"
Target="@(Link?.Target ?? Components.LinkTarget.Blank)"
OnClick="@LinkClickedAsync"
title="Link">
@Link?.Text
</FluentLink>
}
@if (ShowPrimaryAction)
{
<FluentButton Appearance="@ButtonAppearance.Default"
OnClick="@PrimaryActionClickedAsync"
Title="Alert action"
slot="actions">
@PrimaryAction?.Text
</FluentButton>
}
@if (ShowSecondaryAction)
{
<FluentButton Appearance="@ButtonAppearance.Default"
OnClick="@SecondaryActionClickedAsync"
Title="Alert action"
slot="actions">
@SecondaryAction?.Text
</FluentButton>
}
<FluentButton slot="actions" Size="ButtonSize.Small">Action</FluentButton>
@if (AllowDismiss)
{
<FluentIcon Value="@(new CoreIcons.Regular.Size20.Dismiss())"
[email protected]
slot="dismiss"
OnClick="DismissClicked" />
}

</fluent-message-bar>
}

@* Notification *@
@if (Type == MessageType.Notification)
{
<div id="@Id" class="@ClassValue" style="@StyleValue" @onfocusin="@PauseTimeout" @onfocusout="@ResumeTimeout">

@* Icon *@
<div class="fluent-messagebar-notification-icon">
<FluentIcon Value="@Icon"
Color="@_color"
Title="@(Message?.Options.Intent?.ToAttributeValue())" />
</div>

@* Message *@
@if (!String.IsNullOrEmpty(Title))
{
<div class="fluent-messagebar-notification-message" title="@Title">
@((MarkupString)(Title))
</div>
}

@* Close *@

@if (AllowDismiss)
{
<div class="fluent-messagebar-notification-close">
<FluentIcon Value="@(new CoreIcons.Regular.Size20.Dismiss())"
[email protected]
Class="fluent-messagebar-notification-close"
OnClick="DismissClicked" />
</div>
}

@* Detailed content *@
<div class="fluent-messagebar-notification-content">
@ChildContent
@if (!String.IsNullOrEmpty(Message?.Options.Body))
{
@((MarkupString)Message.Options.Body)
}
@if (Link is not null)
{
<FluentLink Href="@(String.IsNullOrEmpty(Link?.Href) ? "#" : Link?.Href)"
Appearance="LinkAppearance.Default"
Target="@(Link?.Target ?? Components.LinkTarget.Blank)"
OnClick="@LinkClickedAsync"
title="Link">
@Link?.Text
</FluentLink>
}
@if (ShowPrimaryAction)
{
<FluentButton Appearance="ButtonAppearance.Default"
OnClick="@PrimaryActionClickedAsync"
title="Notification action"
Class="fluent-messagebar-action">
@PrimaryAction?.Text
</FluentButton>
}

</div>

@* Recorded time *@
@if (Timestamp != null)
{
<div class="fluent-messagebar-notification-time">
@((DateTime.Now - Timestamp)) @* ?.ToTimeAgo()) *@
</div>
}

</div>
}
}
Loading
Loading