[FluentMessageBar] Add id attribute to FluentMessageBar (microsoft#2505)

Author: LuohuaRain

src/Core/Components/MessageBar/FluentMessageBar.razor

@@ -6,7 +6,7 @@
 
     @if (Type == MessageType.MessageBar)
     {
-        <div class="@ClassValue" style="@StyleValue" @onfocusin="@PauseTimeout" @onfocusout="@ResumeTimeout">
+        <div id="@Id" class="@ClassValue" style="@StyleValue" @onfocusin="@PauseTimeout" @onfocusout="@ResumeTimeout">
 
             @* Icon *@
             <div class="fluent-messagebar-icon">
@@ -71,7 +71,7 @@
     @* Notification *@
     @if (Type == MessageType.Notification)
     {
-        <div class="@ClassValue" style="@StyleValue" @onfocusin="@PauseTimeout" @onfocusout="@ResumeTimeout">
+        <div id="@Id" class="@ClassValue" style="@StyleValue" @onfocusin="@PauseTimeout" @onfocusout="@ResumeTimeout">
 
             @* Icon *@
             <div class="fluent-messagebar-notification-icon">

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

@@ -0,0 +1,17 @@
+
+<div id="uniqueId" 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.cs

@@ -27,6 +27,22 @@ public void FluentMessageBar_Default()
         cut.Verify();
     }
 
+    [Fact]
+    public void FluentMessageBar_WithId()
+    {
+        TestContext.Services.AddFluentUIComponents();
+
+        // Arrange
+        var cut = TestContext.RenderComponent<FluentMessageBar>(parameters =>
+        {
+            parameters.Add(p => p.Title, "This is a message");
+            parameters.Add(p => p.Id, "uniqueId");
+        });
+
+        // Assert
+        cut.Verify();
+    }
+
     [Fact]
     public void FluentMessageBar_AllowDismiss()
     {