Message box

BlazorFluentUI/Components/Layout/NavMenu.razor

@@ -68,6 +68,7 @@
                 <FluentNavLink Href="compohorizontalscroll" Icon="@(new Icons.Regular.Size20.AlignSpaceEvenlyHorizontal())" IconColor="Color.Accent">HorizontalScroll</FluentNavLink>
                 <FluentNavLink Href="compomenu" Icon="@(new Icons.Regular.Size20.ListBar())" IconColor="Color.Accent">Menu</FluentNavLink>
                 <FluentNavLink Href="compomessagebar" Icon="@(new Icons.Regular.Size20.WindowArrowUp())" IconColor="Color.Accent">MessageBar</FluentNavLink>
+                <FluentNavLink Href="compomessagebox" Icon="@(new Icons.Regular.Size20.BoxArrowUp())" IconColor="Color.Accent">MessageBox</FluentNavLink>
 
             </FluentNavGroup>
         </FluentNavMenu>

BlazorFluentUI/Components/Pages/CompoMessageBox.razor

@@ -0,0 +1,95 @@
+@page "/compomessagebox"
+
+@inject IDialogService DialogService;
+
+@rendermode RenderMode.InteractiveServer
+
+<h3>MessageBox</h3>
+<FluentDivider class="mt-1 mb-3" Role="DividerRole.Separator" />
+<div>
+    The <code>FluentMessageBox</code> is a dialog that is used to display information with a specific intent to the user.
+    It uses the <code>DialogService</code> to display the dialog.
+</div>
+
+
+<h4 class="mt-4">Message Service</h4>
+<FluentCard Class="mt-3" Width="auto" Height="auto" AreaRestricted="false">
+    <FluentStack Orientation="Orientation.Vertical">
+        <FluentButton Appearance="Appearance.Accent" OnClick="@ShowSuccessAsync">Success</FluentButton>
+        <FluentButton Appearance="Appearance.Accent" OnClick="@ShowWarningAsync">Warning</FluentButton>
+        <FluentButton Appearance="Appearance.Accent" OnClick="@ShowErrorAsync">Error</FluentButton>
+        <FluentButton Appearance="Appearance.Accent" OnClick="@ShowInformationAsync">Information</FluentButton>
+        <FluentButton Appearance="Appearance.Accent" OnClick="@ShowConfirmationAsync">Confirmation</FluentButton>
+        <FluentButton Appearance="Appearance.Accent" OnClick="@ShowLongInformationAsync">Long Information</FluentButton>
+        <FluentButton Appearance="Appearance.Accent" OnClick="@ShowCustomMessageBoxAsync">Custom</FluentButton>
+    </FluentStack>
+    <p>
+        <b>Last result</b>: @(canceled == null ? "" : (canceled == true ? "❎ Canceled" : "✅ OK"))
+    </p>
+</FluentCard>
+
+@code {
+    bool? canceled;
+
+    async Task ShowSuccessAsync()
+    {
+        var dialog = await DialogService.ShowSuccessAsync("The action was a success");
+        var result = await dialog.Result;
+        canceled = result.Cancelled;
+    }
+
+    async Task ShowWarningAsync()
+    {
+        var dialog = await DialogService.ShowWarningAsync("The action was a warning");
+        var result = await dialog.Result;
+        canceled = result.Cancelled;
+    }
+
+    async Task ShowErrorAsync()
+    {
+        var dialog = await DialogService.ShowErrorAsync("The action was a error");
+        var result = await dialog.Result;
+        canceled = result.Cancelled;
+    }
+
+    async Task ShowInformationAsync()
+    {
+        var dialog = await DialogService.ShowInfoAsync("The action was a information");
+        var result = await dialog.Result;
+        canceled = result.Cancelled;
+    }
+
+    async Task ShowConfirmationAsync()
+    {
+        var dialog = await DialogService.ShowConfirmationAsync("Do you like Blazor?", "Sure!", "Nope!");
+        var result = await dialog.Result;
+        canceled = result.Cancelled;
+    }
+
+    async Task ShowLongInformationAsync()
+    {
+        var dialog = await DialogService.ShowInfoAsync("Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum");
+        var result = await dialog.Result;
+        canceled = result.Cancelled;
+    }
+
+    async Task ShowCustomMessageBoxAsync()
+    {
+        var dialog = await DialogService.ShowMessageBoxAsync(new DialogParameters<MessageBoxContent>()
+        {
+            Content = new MessageBoxContent
+            {
+                Title = "My title",
+                MarkupMessage = new MarkupString("My <strong>customized</strong> message"),
+                Icon = new Icons.Regular.Size24.Games(),
+                IconColor = Color.Success
+            },
+            PrimaryAction = "Plus",
+            SecondaryAction = "Minus",
+            Width = "300px"
+        });
+
+        var result = await dialog.Result;
+        canceled = result.Cancelled;
+    }
+}

BlazorFluentUI/Components/Pages/Components/CompoMessageBar.razor

@@ -1,14 +1,13 @@
 @page "/compomessagebar"
 
 @inject IMessageService MessageService;
-@inject IDialogService DialogService;
 
 @rendermode RenderMode.InteractiveServer
 
 <h3>MessageBar</h3>
 <FluentDivider class="mt-1 mb-3" Role="DividerRole.Separator" />
 <div>
-    <code>MessageBar</code>s are rendered by the <code>&lt;FluentMessageBarProvider /&gt;</code>.
+    <code>FluentMessageBar</code>s are rendered by the <code>&lt;FluentMessageBarProvider /&gt;</code>.
     This component needs to be added to the layout of application/site.
 </div>