From 581ca02dab3bbaee8f2011371aeca68b77193d63 Mon Sep 17 00:00:00 2001
From: "Steven T. Cramer" <Steven.Cramer@TimeWarp.Enterprises>
Date: Thu, 30 May 2024 23:39:13 +0700
Subject: [PATCH] [Layout] Add Id to the container div (#2123)

* Add Id to the container div in FluentLayout.razor

* Add FluentLayout_Id test to ensure Id is rendered when supplied.

* solve the following warning by fixing version
microsoft\fluentui-blazor\tests\Core\Microsoft.FluentUI.AspNetCore.Components.Tests.csproj : warning NU1603: Microsoft.FluentUI.AspNetCore.Components.Tests depends on FluentAssertions (>= 7.0.0-
tags-7.0.0-tags-7-0-0-alpha-3.1) but FluentAssertions 7.0.0-tags-7.0.0-tags-7-0-0-alpha-3.1 was not found. An approximate best match of FluentAssertions 7.0.0-tags-7-0-0-alpha-3.1 was resolved.

* Add test verification file
---
 Directory.Packages.props                            |  4 ++--
 src/Core/Components/Layout/FluentLayout.razor       |  2 +-
 ...tLayoutTests.FluentLayout_Id.verified.razor.html |  2 ++
 tests/Core/Layout/FluentLayoutTests.razor           | 13 +++++++++++++
 4 files changed, 18 insertions(+), 3 deletions(-)
 create mode 100644 tests/Core/Layout/FluentLayoutTests.FluentLayout_Id.verified.razor.html

diff --git a/Directory.Packages.props b/Directory.Packages.props
index 217163025e..cd5f42d827 100644
--- a/Directory.Packages.props
+++ b/Directory.Packages.props
@@ -31,11 +31,11 @@
     <PackageVersion Include="System.Text.Json" Version="8.0.3" />
     <!-- Test dependencies -->
     <PackageVersion Include="bunit" Version="1.28.9" />
-    <PackageVersion Include="FluentAssertions" Version="7.0.0-alpha.3" />
+    <PackageVersion Include="FluentAssertions" Version="7.0.0-tags-7.0.0-tags-7-0-0-alpha-3.1" />
     <PackageVersion Include="Microsoft.NET.Test.Sdk" Version="17.9.0" />
     <PackageVersion Include="xunit" Version="2.8.0" />
     <PackageVersion Include="xunit.runner.visualstudio" Version="2.8.0" />
     <PackageVersion Include="coverlet.msbuild" Version="6.0.0" />
     <PackageVersion Include="coverlet.collector" Version="6.0.2" />
   </ItemGroup>
-</Project>
\ No newline at end of file
+</Project>
diff --git a/src/Core/Components/Layout/FluentLayout.razor b/src/Core/Components/Layout/FluentLayout.razor
index 489df572c5..c5783d6046 100644
--- a/src/Core/Components/Layout/FluentLayout.razor
+++ b/src/Core/Components/Layout/FluentLayout.razor
@@ -2,7 +2,7 @@
 
 @inherits FluentComponentBase
 
-<div @ref=Element class="@ClassValue" style="@StyleValue" orientation="@_orientation" @attributes="AdditionalAttributes">
+<div @ref=Element id="@Id" class="@ClassValue" style="@StyleValue" orientation="@_orientation" @attributes="AdditionalAttributes">
     @ChildContent
 </div>
 
diff --git a/tests/Core/Layout/FluentLayoutTests.FluentLayout_Id.verified.razor.html b/tests/Core/Layout/FluentLayoutTests.FluentLayout_Id.verified.razor.html
new file mode 100644
index 0000000000..619e46713d
--- /dev/null
+++ b/tests/Core/Layout/FluentLayoutTests.FluentLayout_Id.verified.razor.html
@@ -0,0 +1,2 @@
+
+<div id="xxx" class="layout" b-emdrz8ckod="" blazor:elementreference="xxx"></div>
\ No newline at end of file
diff --git a/tests/Core/Layout/FluentLayoutTests.razor b/tests/Core/Layout/FluentLayoutTests.razor
index 470fd65dd9..d8f0aa6c88 100644
--- a/tests/Core/Layout/FluentLayoutTests.razor
+++ b/tests/Core/Layout/FluentLayoutTests.razor
@@ -26,6 +26,19 @@
         cut.Verify();
     }
 
+    [Fact]
+    public void FluentLayout_Id()
+    {
+        //Arrange
+        var cut = Render(@<FluentLayout Id="42" />);
+
+        //Act
+
+        //Assert
+        cut.Verify();
+    }
+
+
     [Fact]
     public void FluentLayout_AdditionalProperties()
     {