diff --git a/src/Core/Components/MessageBar/FluentMessageBar.razor.cs b/src/Core/Components/MessageBar/FluentMessageBar.razor.cs index 820bdb01d2..81a8644639 100644 --- a/src/Core/Components/MessageBar/FluentMessageBar.razor.cs +++ b/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 /// 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; + /// + /// Gets or sets the fade in animation for the MessageBar. + /// Default is true. + /// + [Parameter] + public bool FadeIn { get; set; } = true; + ///// ///// On app and page level a Message bar should NOT have rounded corners. On component level it should. ///// diff --git a/src/Core/Components/MessageBar/FluentMessageBar.razor.css b/src/Core/Components/MessageBar/FluentMessageBar.razor.css index f31fb6fdf7..f122900529 100644 --- a/src/Core/Components/MessageBar/FluentMessageBar.razor.css +++ b/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 { diff --git a/tests/Core/MessageBar/FluentMessageBarTests.FluentMessageBar_AllowDismiss.verified.html b/tests/Core/MessageBar/FluentMessageBarTests.FluentMessageBar_AllowDismiss.verified.html index c6294c9177..7319077b63 100644 --- a/tests/Core/MessageBar/FluentMessageBarTests.FluentMessageBar_AllowDismiss.verified.html +++ b/tests/Core/MessageBar/FluentMessageBarTests.FluentMessageBar_AllowDismiss.verified.html @@ -1,5 +1,5 @@ -
+
This is a message
-
\ No newline at end of file +
diff --git a/tests/Core/MessageBar/FluentMessageBarTests.FluentMessageBar_Default.verified.html b/tests/Core/MessageBar/FluentMessageBarTests.FluentMessageBar_Default.verified.html index 2d9d64bca1..4f3696b344 100644 --- a/tests/Core/MessageBar/FluentMessageBarTests.FluentMessageBar_Default.verified.html +++ b/tests/Core/MessageBar/FluentMessageBarTests.FluentMessageBar_Default.verified.html @@ -1,5 +1,5 @@ -
+
-
\ No newline at end of file +
diff --git a/tests/Core/MessageBar/FluentMessageBarTests.FluentMessageBar_DisableFadeIn.verified.html b/tests/Core/MessageBar/FluentMessageBarTests.FluentMessageBar_DisableFadeIn.verified.html new file mode 100644 index 0000000000..768ec31594 --- /dev/null +++ b/tests/Core/MessageBar/FluentMessageBarTests.FluentMessageBar_DisableFadeIn.verified.html @@ -0,0 +1,17 @@ + +
+
+ +
+
+ This is a message +
+
+ +
+
diff --git a/tests/Core/MessageBar/FluentMessageBarTests.FluentMessageBar_WithId.verified.html b/tests/Core/MessageBar/FluentMessageBarTests.FluentMessageBar_WithId.verified.html index 039a95af97..91b4e5eb1f 100644 --- a/tests/Core/MessageBar/FluentMessageBarTests.FluentMessageBar_WithId.verified.html +++ b/tests/Core/MessageBar/FluentMessageBarTests.FluentMessageBar_WithId.verified.html @@ -1,5 +1,4 @@ - -
+
-
-
- +
+
+ +
+
+ This is a message +
+
-
- This is a message -
-
-
-
\ No newline at end of file +
diff --git a/tests/Core/MessageBar/MessageServiceTests.FluentMessageBarService_AllowDismissAsync2.verified.razor.html b/tests/Core/MessageBar/MessageServiceTests.FluentMessageBarService_AllowDismissAsync2.verified.razor.html index 49aea331f7..b433855376 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 @@
-
+
-
\ No newline at end of file +
diff --git a/tests/Core/MessageBar/MessageServiceTests.FluentMessageBarService_AllowDismissAsync3.verified.razor.html b/tests/Core/MessageBar/MessageServiceTests.FluentMessageBarService_AllowDismissAsync3.verified.razor.html index 49aea331f7..b433855376 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 @@
-
+
-
\ No newline at end of file +