[MessageBar] Add an optional toggle for the fade in animation.

src/Core/Components/MessageBar/FluentMessageBar.razor.cs

@@ -1,3 +1,7 @@
+// ------------------------------------------------------------------------
+// MIT License - Copyright (c) Microsoft Corporation. All rights reserved.
+// ------------------------------------------------------------------------
+
 using Microsoft.AspNetCore.Components;
 using Microsoft.AspNetCore.Components.Web;
 using Microsoft.FluentUI.AspNetCore.Components.Utilities;
@@ -15,6 +19,7 @@ public partial class FluentMessageBar : FluentComponentBase, IDisposable
     /// <summary />
     protected string? ClassValue => new CssBuilder(Class)
         .AddClass("fluent-messagebar", () => Type == MessageType.MessageBar)
+        .AddClass("fluent-messagebar-animation", () => FadeIn)
         .AddClass("dark", () => GlobalState.Luminance == StandardLuminance.DarkMode)
         .AddClass("fluent-messagebar-notification", () => Type == MessageType.Notification)
         .AddClass("intent-info", () => Intent == MessageIntent.Info)
@@ -154,6 +159,13 @@ public DateTime? Timestamp
     [Parameter]
     public bool AllowDismiss { get; set; } = true;
 
+    /// <summary>
+    /// Gets or sets the fade in animation for the MessageBar.
+    /// Default is true.
+    /// </summary>
+    [Parameter]
+    public bool FadeIn { get; set; } = true;
+
     ///// <summary>
     ///// On app and page level a Message bar should NOT have rounded corners. On component level it should.
     ///// </summary>  

src/Core/Components/MessageBar/FluentMessageBar.razor.css

@@ -1,4 +1,4 @@
-/* OneRow */
+/* OneRow */
 
 .fluent-messagebar {
     font-family: var(--body-font);
@@ -13,6 +13,9 @@
     border-radius: calc(var(--control-corner-radius) * 1px);
     padding: 0 12px;
     column-gap: 8px;
+}
+
+.fluent-messagebar-animation {
     animation: fadein 1.5s;
 }
 
@@ -121,7 +124,6 @@
     min-height: 36px;
     padding: 0 12px;
     column-gap: 8px;
-    animation: fadein 1.5s;
 }
 
     .fluent-messagebar-notification.intent-info {

tests/Core/MessageBar/FluentMessageBarTests.FluentMessageBar_AllowDismiss.verified.html

@@ -1,5 +1,5 @@
 
-<div class="fluent-messagebar intent-info" blazor:onfocusin="1" blazor:onfocusout="2" b-ig2qs97tvl="">
+<div class="fluent-messagebar fluent-messagebar-animation intent-info" blazor:onfocusin="1" blazor:onfocusout="2" b-ig2qs97tvl="">
   <div class="fluent-messagebar-icon" b-ig2qs97tvl="">
     <svg style="width: 20px; fill: var(--info);" focusable="false" viewBox="0 0 20 20" aria-hidden="true" blazor:onclick="3">
       <title>info</title>
@@ -10,4 +10,4 @@
     <span class="title" b-ig2qs97tvl="">This is a message</span>
   </div>
   <div class="fluent-messagebar-container-action" b-ig2qs97tvl=""></div>
-</div>
+</div>

tests/Core/MessageBar/FluentMessageBarTests.FluentMessageBar_Default.verified.html

@@ -1,5 +1,5 @@
 
-<div class="fluent-messagebar intent-info" blazor:onfocusin="1" blazor:onfocusout="2" b-5ykbiib3u4="">
+<div class="fluent-messagebar fluent-messagebar-animation intent-info" blazor:onfocusin="1" blazor:onfocusout="2" b-5ykbiib3u4="">
   <div class="fluent-messagebar-icon" b-5ykbiib3u4="">
     <svg style="width: 20px; fill: var(--info);" focusable="false" viewBox="0 0 20 20" aria-hidden="true" blazor:onclick="3">
       <title>info</title>
@@ -14,4 +14,4 @@
       <path d="m2.59 2.72.06-.07a.5.5 0 0 1 .63-.06l.07.06L8 7.29l4.65-4.64a.5.5 0 0 1 .7.7L8.71 8l4.64 4.65c.18.17.2.44.06.63l-.06.07a.5.5 0 0 1-.63.06l-.07-.06L8 8.71l-4.65 4.64a.5.5 0 0 1-.7-.7L7.29 8 2.65 3.35a.5.5 0 0 1-.06-.63l.06-.07-.06.07Z"></path>
     </svg>
   </div>
-</div>
+</div>

tests/Core/MessageBar/FluentMessageBarTests.FluentMessageBar_DisableFadeIn.verified.html

@@ -0,0 +1,17 @@
+
+<div class="fluent-messagebar intent-info" blazor:onfocusin="1" blazor:onfocusout="2" b-ig2qs97tvl="">
+  <div class="fluent-messagebar-icon" b-ig2qs97tvl="">
+    <svg style="width: 20px; fill: var(--info);" focusable="false" viewBox="0 0 20 20" aria-hidden="true" blazor:onkeydown="3" blazor:onclick="4">
+      <title>info</title>
+      <path d="M18 10a8 8 0 1 0-16 0 8 8 0 0 0 16 0ZM9.5 8.91a.5.5 0 0 1 1 0V13.6a.5.5 0 0 1-1 0V8.9Zm-.25-2.16a.75.75 0 1 1 1.5 0 .75.75 0 0 1-1.5 0Z"></path>
+    </svg>
+  </div>
+  <div class="fluent-messagebar-message" b-ig2qs97tvl="">
+    <span class="title" b-ig2qs97tvl="">This is a message</span>
+  </div>
+  <div class="fluent-messagebar-container-action" b-ig2qs97tvl="">
+    <svg class="fluent-messagebar-close" style="width: 16px; fill: var(--neutral-foreground-rest); cursor: pointer;" focusable="false" viewBox="0 0 16 16" aria-hidden="true" blazor:onkeydown="5" blazor:onclick="6">
+      <path d="m2.59 2.72.06-.07a.5.5 0 0 1 .63-.06l.07.06L8 7.29l4.65-4.64a.5.5 0 0 1 .7.7L8.71 8l4.64 4.65c.18.17.2.44.06.63l-.06.07a.5.5 0 0 1-.63.06l-.07-.06L8 8.71l-4.65 4.64a.5.5 0 0 1-.7-.7L7.29 8 2.65 3.35a.5.5 0 0 1-.06-.63l.06-.07-.06.07Z"></path>
+    </svg>
+  </div>
+</div>

tests/Core/MessageBar/FluentMessageBarTests.FluentMessageBar_WithId.verified.html

@@ -1,5 +1,4 @@
-
-<div id="uniqueId" class="fluent-messagebar intent-info" blazor:onfocusin="1" blazor:onfocusout="2" b-ig2qs97tvl="">
+<div id="uniqueId" class="fluent-messagebar fluent-messagebar-animation intent-info" blazor:onfocusin="1" blazor:onfocusout="2" b-ig2qs97tvl="">
   <div class="fluent-messagebar-icon" b-ig2qs97tvl="">
     <svg style="width: 20px; fill: var(--info);" focusable="false" viewBox="0 0 20 20" aria-hidden="true" blazor:onkeydown="3" blazor:onclick="4">
       <title>info</title>

tests/Core/MessageBar/FluentMessageBarTests.cs

@@ -1,3 +1,7 @@
+// ------------------------------------------------------------------------
+// MIT License - Copyright (c) Microsoft Corporation. All rights reserved.
+// ------------------------------------------------------------------------
+
 using Bunit;
 using Xunit;
 
@@ -59,6 +63,22 @@ public void FluentMessageBar_AllowDismiss()
         cut.Verify();
     }
 
+    [Fact]
+    public void FluentMessageBar_DisableFadeIn()
+    {
+        TestContext.Services.AddFluentUIComponents();
+
+        // Arrange
+        var cut = TestContext.RenderComponent<FluentMessageBar>(parameters =>
+        {
+            parameters.Add(p => p.Title, "This is a message");
+            parameters.Add(p => p.FadeIn, false);
+        });
+
+        // Assert
+        cut.Verify();
+    }
+
     //[Fact]
     //public void FluentMessageBar_Body_Link()
     //{