From 199cf6c0845a217f270a7bcdec2ae6719391ea5d Mon Sep 17 00:00:00 2001
From: yspanj <ysp@quadira.com>
Date: Thu, 26 Sep 2024 18:55:37 +0200
Subject: [PATCH] Update way animation is added to the MessageBar and update
 relevant tests (#2723)

---
 .../Shared/Microsoft.FluentUI.AspNetCore.Components.xml     | 6 ++++++
 src/Core/Components/MessageBar/FluentMessageBar.razor       | 2 +-
 src/Core/Components/MessageBar/FluentMessageBar.razor.cs    | 1 -
 src/Core/Components/MessageBar/FluentMessageBar.razor.css   | 2 +-
 ...sageBarTests.FluentMessageBar_AllowDismiss.verified.html | 2 +-
 ...ntMessageBarTests.FluentMessageBar_Default.verified.html | 2 +-
 ...entMessageBarTests.FluentMessageBar_WithId.verified.html | 2 +-
 ...MessageBarService_AllowDismissAsync1.verified.razor.html | 2 +-
 ...MessageBarService_AllowDismissAsync2.verified.razor.html | 2 +-
 ...MessageBarService_AllowDismissAsync3.verified.razor.html | 2 +-
 10 files changed, 14 insertions(+), 9 deletions(-)

diff --git a/examples/Demo/Shared/Microsoft.FluentUI.AspNetCore.Components.xml b/examples/Demo/Shared/Microsoft.FluentUI.AspNetCore.Components.xml
index af10b53a4d..03e30c2fe2 100644
--- a/examples/Demo/Shared/Microsoft.FluentUI.AspNetCore.Components.xml
+++ b/examples/Demo/Shared/Microsoft.FluentUI.AspNetCore.Components.xml
@@ -6468,6 +6468,12 @@
             Default is true.
             </summary>
         </member>
+        <member name="P:Microsoft.FluentUI.AspNetCore.Components.FluentMessageBar.FadeIn">
+            <summary>
+            Gets or sets the fade in animation for the MessageBar.
+            Default is true.
+            </summary>
+        </member>
         <member name="P:Microsoft.FluentUI.AspNetCore.Components.FluentMessageBar.Link">
             <summary>
             A link can be shown after the message. 
diff --git a/src/Core/Components/MessageBar/FluentMessageBar.razor b/src/Core/Components/MessageBar/FluentMessageBar.razor
index d0898044ee..6ce33ab7dc 100644
--- a/src/Core/Components/MessageBar/FluentMessageBar.razor
+++ b/src/Core/Components/MessageBar/FluentMessageBar.razor
@@ -6,7 +6,7 @@
 
     @if (Type == MessageType.MessageBar)
     {
-        <div id="@Id" class="@ClassValue" style="@StyleValue" @onfocusin="@PauseTimeout" @onfocusout="@ResumeTimeout">
+        <div id="@Id" class="@ClassValue" style="@StyleValue" animation="@(FadeIn ? "fadein" : null)" @onfocusin="@PauseTimeout" @onfocusout="@ResumeTimeout">
 
             @* Icon *@
             <div class="fluent-messagebar-icon">
diff --git a/src/Core/Components/MessageBar/FluentMessageBar.razor.cs b/src/Core/Components/MessageBar/FluentMessageBar.razor.cs
index 81a8644639..4c93cf1245 100644
--- a/src/Core/Components/MessageBar/FluentMessageBar.razor.cs
+++ b/src/Core/Components/MessageBar/FluentMessageBar.razor.cs
@@ -19,7 +19,6 @@ 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)
diff --git a/src/Core/Components/MessageBar/FluentMessageBar.razor.css b/src/Core/Components/MessageBar/FluentMessageBar.razor.css
index f122900529..89eee7aed8 100644
--- a/src/Core/Components/MessageBar/FluentMessageBar.razor.css
+++ b/src/Core/Components/MessageBar/FluentMessageBar.razor.css
@@ -15,7 +15,7 @@
     column-gap: 8px;
 }
 
-.fluent-messagebar-animation {
+.fluent-messagebar[animation="fadein"] {
     animation: fadein 1.5s;
 }
 
diff --git a/tests/Core/MessageBar/FluentMessageBarTests.FluentMessageBar_AllowDismiss.verified.html b/tests/Core/MessageBar/FluentMessageBarTests.FluentMessageBar_AllowDismiss.verified.html
index 7319077b63..0bc530cbaa 100644
--- a/tests/Core/MessageBar/FluentMessageBarTests.FluentMessageBar_AllowDismiss.verified.html
+++ b/tests/Core/MessageBar/FluentMessageBarTests.FluentMessageBar_AllowDismiss.verified.html
@@ -1,5 +1,5 @@
 
-<div class="fluent-messagebar fluent-messagebar-animation intent-info" blazor:onfocusin="1" blazor:onfocusout="2" b-ig2qs97tvl="">
+<div class="fluent-messagebar intent-info" animation="fadein" 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>
diff --git a/tests/Core/MessageBar/FluentMessageBarTests.FluentMessageBar_Default.verified.html b/tests/Core/MessageBar/FluentMessageBarTests.FluentMessageBar_Default.verified.html
index 4f3696b344..5a874f9805 100644
--- a/tests/Core/MessageBar/FluentMessageBarTests.FluentMessageBar_Default.verified.html
+++ b/tests/Core/MessageBar/FluentMessageBarTests.FluentMessageBar_Default.verified.html
@@ -1,5 +1,5 @@
 
-<div class="fluent-messagebar fluent-messagebar-animation intent-info" blazor:onfocusin="1" blazor:onfocusout="2" b-5ykbiib3u4="">
+<div class="fluent-messagebar intent-info" animation="fadein" 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>
diff --git a/tests/Core/MessageBar/FluentMessageBarTests.FluentMessageBar_WithId.verified.html b/tests/Core/MessageBar/FluentMessageBarTests.FluentMessageBar_WithId.verified.html
index 91b4e5eb1f..36984a80b7 100644
--- a/tests/Core/MessageBar/FluentMessageBarTests.FluentMessageBar_WithId.verified.html
+++ b/tests/Core/MessageBar/FluentMessageBarTests.FluentMessageBar_WithId.verified.html
@@ -1,4 +1,4 @@
-<div id="uniqueId" class="fluent-messagebar fluent-messagebar-animation intent-info" blazor:onfocusin="1" blazor:onfocusout="2" b-ig2qs97tvl="">
+<div id="uniqueId" class="fluent-messagebar intent-info" animation="fadein" 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>
diff --git a/tests/Core/MessageBar/MessageServiceTests.FluentMessageBarService_AllowDismissAsync1.verified.razor.html b/tests/Core/MessageBar/MessageServiceTests.FluentMessageBarService_AllowDismissAsync1.verified.razor.html
index 53381f021d..4c6ad1cf9d 100644
--- a/tests/Core/MessageBar/MessageServiceTests.FluentMessageBarService_AllowDismissAsync1.verified.razor.html
+++ b/tests/Core/MessageBar/MessageServiceTests.FluentMessageBarService_AllowDismissAsync1.verified.razor.html
@@ -1,6 +1,6 @@
 
 <div class="fluent-messagebar-provider " b-aw4knpwcro="">
-    <div class="fluent-messagebar fluent-messagebar-animation intent-info" blazor:onfocusin="1" blazor:onfocusout="2" b-ig2qs97tvl="">
+    <div class="fluent-messagebar intent-info" animation="fadein" 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>
diff --git a/tests/Core/MessageBar/MessageServiceTests.FluentMessageBarService_AllowDismissAsync2.verified.razor.html b/tests/Core/MessageBar/MessageServiceTests.FluentMessageBarService_AllowDismissAsync2.verified.razor.html
index b433855376..ca1ad5c1b9 100644
--- a/tests/Core/MessageBar/MessageServiceTests.FluentMessageBarService_AllowDismissAsync2.verified.razor.html
+++ b/tests/Core/MessageBar/MessageServiceTests.FluentMessageBarService_AllowDismissAsync2.verified.razor.html
@@ -1,6 +1,6 @@
 
 <div class="fluent-messagebar-provider " b-aw4knpwcro="">
-  <div class="fluent-messagebar fluent-messagebar-animation intent-warning" blazor:onfocusin="1" blazor:onfocusout="2" b-ig2qs97tvl="">
+  <div class="fluent-messagebar intent-warning" animation="fadein" blazor:onfocusin="1" blazor:onfocusout="2" b-ig2qs97tvl="">
     <div class="fluent-messagebar-icon" b-ig2qs97tvl="">
       <svg style="width: 20px; fill: var(--warning);" focusable="false" viewBox="0 0 20 20" aria-hidden="true" blazor:onclick="3">
         <title>warning</title>
diff --git a/tests/Core/MessageBar/MessageServiceTests.FluentMessageBarService_AllowDismissAsync3.verified.razor.html b/tests/Core/MessageBar/MessageServiceTests.FluentMessageBarService_AllowDismissAsync3.verified.razor.html
index b433855376..ca1ad5c1b9 100644
--- a/tests/Core/MessageBar/MessageServiceTests.FluentMessageBarService_AllowDismissAsync3.verified.razor.html
+++ b/tests/Core/MessageBar/MessageServiceTests.FluentMessageBarService_AllowDismissAsync3.verified.razor.html
@@ -1,6 +1,6 @@
 
 <div class="fluent-messagebar-provider " b-aw4knpwcro="">
-  <div class="fluent-messagebar fluent-messagebar-animation intent-warning" blazor:onfocusin="1" blazor:onfocusout="2" b-ig2qs97tvl="">
+  <div class="fluent-messagebar intent-warning" animation="fadein" blazor:onfocusin="1" blazor:onfocusout="2" b-ig2qs97tvl="">
     <div class="fluent-messagebar-icon" b-ig2qs97tvl="">
       <svg style="width: 20px; fill: var(--warning);" focusable="false" viewBox="0 0 20 20" aria-hidden="true" blazor:onclick="3">
         <title>warning</title>