From c58d68c3199fddf7139040a2b7599b4967de2dc1 Mon Sep 17 00:00:00 2001
From: Denis Voituron <dvoituron@outlook.com>
Date: Wed, 6 Mar 2024 12:55:26 +0100
Subject: [PATCH] [FluentGrid] Fix the Grid "external margins" (#1646)

* Fix the Grid margin

* Update Gap to Spacing
---
 .../Pages/Grid/Examples/GridDefault.razor     | 23 +++++++++++--------
 .../Pages/Grid/Examples/GridMessage.razor     |  6 ++---
 src/Core/Components/Grid/FluentGrid.razor     |  8 ++++---
 src/Core/Components/Grid/FluentGrid.razor.cs  |  2 --
 ...sts.FluentGrid_Default.verified.razor.html |  4 +++-
 ...d_Items_AllBreakpoints.verified.razor.html |  6 +++--
 ...uentGrid_Items_Default.verified.razor.html |  8 ++++---
 ...tGrid_Items_JustifyGap.verified.razor.html |  6 +++--
 ...Grid_Items_NoBreapoint.verified.razor.html |  6 +++--
 ...entGrid_SpacingJustify.verified.razor.html |  4 +++-
 10 files changed, 45 insertions(+), 28 deletions(-)

diff --git a/examples/Demo/Shared/Pages/Grid/Examples/GridDefault.razor b/examples/Demo/Shared/Pages/Grid/Examples/GridDefault.razor
index e3474c24d6..23fb0fc999 100644
--- a/examples/Demo/Shared/Pages/Grid/Examples/GridDefault.razor
+++ b/examples/Demo/Shared/Pages/Grid/Examples/GridDefault.razor
@@ -1,12 +1,16 @@
-<FluentSelect Items=@(Enum.GetValues<JustifyContent>())
-              OptionValue="@(c => c.ToAttributeValue())"
-              TOption="JustifyContent"
-              Position="SelectPosition.Below"
-              @bind-SelectedOption="@Justification" />
-<br />
-<br />
+<FluentStack Style="margin-bottom: 24px;" VerticalAlignment="VerticalAlignment.Center">
+    <FluentLabel>Justify</FluentLabel>
+    <FluentSelect Items=@(Enum.GetValues<JustifyContent>())
+                  OptionValue="@(c => c.ToAttributeValue())"
+                  TOption="JustifyContent"
+                  Position="SelectPosition.Below"
+                  @bind-SelectedOption="@Justification" />
 
-<FluentGrid Spacing="3" OnBreakpointEnter="@OnBreakpointEnterHandler" Justify="@Justification" Style="background-color: var(--neutral-layer-3);">
+    <FluentLabel>Spacing</FluentLabel>
+    <FluentSlider @bind-Value="@Spacing" Min="0" Max="10" Step="1" Style="max-width: 300px; margin-top: 18px;" />
+</FluentStack>
+
+<FluentGrid Spacing="@Spacing" OnBreakpointEnter="@OnBreakpointEnterHandler" Justify="@Justification" Style="background-color: var(--neutral-layer-3); padding: 4px; ">
     <FluentGridItem xs="12">
         <div class="card">
             xs="12"
@@ -52,10 +56,11 @@
 @code
 {
     JustifyContent Justification = JustifyContent.FlexStart;
+    int Spacing = 3;
 
     void OnBreakpointEnterHandler(GridItemSize size)
     {
         Console.WriteLine($"Page Size: {size}");
         DemoLogger.WriteLine($"Page Size: {size}");
     }
-}
\ No newline at end of file
+}
diff --git a/examples/Demo/Shared/Pages/Grid/Examples/GridMessage.razor b/examples/Demo/Shared/Pages/Grid/Examples/GridMessage.razor
index 04bcdeda99..c9f686fdb9 100644
--- a/examples/Demo/Shared/Pages/Grid/Examples/GridMessage.razor
+++ b/examples/Demo/Shared/Pages/Grid/Examples/GridMessage.razor
@@ -1,5 +1,5 @@
-<FluentGrid Justify="JustifyContent.FlexEnd"
-            Style="background-color: var(--neutral-layer-3); overflow: auto; resize: horizontal;">
+<FluentGrid Justify="JustifyContent.FlexEnd"
+            Style="background-color: var(--neutral-layer-3); overflow: hidden; resize: horizontal; padding: 4px;">
     <FluentGridItem Style="min-width: 200px;">
         <FluentLabel>
             Views must be setup in the Admin Portal to use this client application hosted by my company.
@@ -9,4 +9,4 @@
         <FluentButton Appearance="Appearance.Neutral">Setup</FluentButton>
         <FluentButton Appearance="Appearance.Neutral">Documentation</FluentButton>
     </FluentGridItem>
-</FluentGrid>
\ No newline at end of file
+</FluentGrid>
diff --git a/src/Core/Components/Grid/FluentGrid.razor b/src/Core/Components/Grid/FluentGrid.razor
index 88d0aedb1d..9aa1e4e685 100644
--- a/src/Core/Components/Grid/FluentGrid.razor
+++ b/src/Core/Components/Grid/FluentGrid.razor
@@ -1,6 +1,8 @@
 @namespace Microsoft.Fast.Components.FluentUI
 @inherits FluentComponentBase
 
-<div id="@GetId()" class="@ClassValue" style="@StyleValue" spacing="@Spacing" @attributes="AdditionalAttributes">
-    @ChildContent
-</div>
\ No newline at end of file
+<div class="@ClassValue" style="@StyleValue" @attributes="AdditionalAttributes">
+    <div id="@GetId()" class="fluent-grid" style="@($"justify-content: {Justify.ToAttributeValue()};")" spacing="@Spacing">
+        @ChildContent
+    </div>
+</div>
diff --git a/src/Core/Components/Grid/FluentGrid.razor.cs b/src/Core/Components/Grid/FluentGrid.razor.cs
index bff4acc284..619a8c288d 100644
--- a/src/Core/Components/Grid/FluentGrid.razor.cs
+++ b/src/Core/Components/Grid/FluentGrid.razor.cs
@@ -57,12 +57,10 @@ public FluentGrid()
 
     /// <summary />
     protected string? ClassValue => new CssBuilder(Class)
-        .AddClass($"fluent-grid")
         .Build();
 
     /// <summary />
     protected string? StyleValue => new StyleBuilder(Style)
-        .AddStyle("justify-content", Justify.ToAttributeValue())
         .Build();
 
     protected async override Task OnAfterRenderAsync(bool firstRender)
diff --git a/tests/Core/Grid/FluentGridTests.FluentGrid_Default.verified.razor.html b/tests/Core/Grid/FluentGridTests.FluentGrid_Default.verified.razor.html
index 3ac587bfe8..5f57d61fe4 100644
--- a/tests/Core/Grid/FluentGridTests.FluentGrid_Default.verified.razor.html
+++ b/tests/Core/Grid/FluentGridTests.FluentGrid_Default.verified.razor.html
@@ -1,2 +1,4 @@
 
-<div class="fluent-grid" style="justify-content: flex-start;" spacing="3" b-ljlkesaj3r="">My content</div>
\ No newline at end of file
+<div b-9fxwfzgab8="">
+  <div id="xxx" class="fluent-grid" style="justify-content: flex-start;" spacing="3" b-9fxwfzgab8="">My content</div>
+</div>
\ No newline at end of file
diff --git a/tests/Core/Grid/FluentGridTests.FluentGrid_Items_AllBreakpoints.verified.razor.html b/tests/Core/Grid/FluentGridTests.FluentGrid_Items_AllBreakpoints.verified.razor.html
index 8aabfa0198..a29977b215 100644
--- a/tests/Core/Grid/FluentGridTests.FluentGrid_Items_AllBreakpoints.verified.razor.html
+++ b/tests/Core/Grid/FluentGridTests.FluentGrid_Items_AllBreakpoints.verified.razor.html
@@ -1,4 +1,6 @@
 
-<div class="fluent-grid" style="justify-content: flex-start;" spacing="3" b-ljlkesaj3r="">
-  <div xs="1" sm="2" md="3" lg="4" xl="5" xxl="6">My cell</div>
+<div b-9fxwfzgab8="">
+  <div id="xxx" class="fluent-grid" style="justify-content: flex-start;" spacing="3" b-9fxwfzgab8="">
+    <div xs="1" sm="2" md="3" lg="4" xl="5" xxl="6">My cell</div>
+  </div>
 </div>
\ No newline at end of file
diff --git a/tests/Core/Grid/FluentGridTests.FluentGrid_Items_Default.verified.razor.html b/tests/Core/Grid/FluentGridTests.FluentGrid_Items_Default.verified.razor.html
index 657c8e1c80..12231fc119 100644
--- a/tests/Core/Grid/FluentGridTests.FluentGrid_Items_Default.verified.razor.html
+++ b/tests/Core/Grid/FluentGridTests.FluentGrid_Items_Default.verified.razor.html
@@ -1,5 +1,7 @@
 
-<div class="fluent-grid" style="justify-content: flex-start;" spacing="3" b-ljlkesaj3r="">
-  <div xs="6" md="6">Cell 1</div>
-  <div xs="6" md="6">Cell 2</div>
+<div b-9fxwfzgab8="">
+  <div id="xxx" class="fluent-grid" style="justify-content: flex-start;" spacing="3" b-9fxwfzgab8="">
+    <div xs="6" md="6">Cell 1</div>
+    <div xs="6" md="6">Cell 2</div>
+  </div>
 </div>
\ No newline at end of file
diff --git a/tests/Core/Grid/FluentGridTests.FluentGrid_Items_JustifyGap.verified.razor.html b/tests/Core/Grid/FluentGridTests.FluentGrid_Items_JustifyGap.verified.razor.html
index 9a59bf7bd7..116962343e 100644
--- a/tests/Core/Grid/FluentGridTests.FluentGrid_Items_JustifyGap.verified.razor.html
+++ b/tests/Core/Grid/FluentGridTests.FluentGrid_Items_JustifyGap.verified.razor.html
@@ -1,4 +1,6 @@
 
-<div class="fluent-grid" style="justify-content: flex-start;" spacing="3" b-ljlkesaj3r="">
-  <div style="justify-content: center; display: flex; gap: 10px;" xs="1">My cell</div>
+<div b-9fxwfzgab8="">
+  <div id="xxx" class="fluent-grid" style="justify-content: flex-start;" spacing="3" b-9fxwfzgab8="">
+    <div style="justify-content: center; display: flex; gap: 10px;" xs="1">My cell</div>
+  </div>
 </div>
\ No newline at end of file
diff --git a/tests/Core/Grid/FluentGridTests.FluentGrid_Items_NoBreapoint.verified.razor.html b/tests/Core/Grid/FluentGridTests.FluentGrid_Items_NoBreapoint.verified.razor.html
index 73a2d343c8..2135fa4af1 100644
--- a/tests/Core/Grid/FluentGridTests.FluentGrid_Items_NoBreapoint.verified.razor.html
+++ b/tests/Core/Grid/FluentGridTests.FluentGrid_Items_NoBreapoint.verified.razor.html
@@ -1,4 +1,6 @@
 
-<div class="fluent-grid" style="justify-content: flex-start;" spacing="3" b-ljlkesaj3r="">
-  <div style="min-width: 200px;" xs="0">My cell</div>
+<div b-9fxwfzgab8="">
+  <div id="xxx" class="fluent-grid" style="justify-content: flex-start;" spacing="3" b-9fxwfzgab8="">
+    <div style="min-width: 200px;" xs="0">My cell</div>
+  </div>
 </div>
\ No newline at end of file
diff --git a/tests/Core/Grid/FluentGridTests.FluentGrid_SpacingJustify.verified.razor.html b/tests/Core/Grid/FluentGridTests.FluentGrid_SpacingJustify.verified.razor.html
index 40b8abf70c..dfe465779a 100644
--- a/tests/Core/Grid/FluentGridTests.FluentGrid_SpacingJustify.verified.razor.html
+++ b/tests/Core/Grid/FluentGridTests.FluentGrid_SpacingJustify.verified.razor.html
@@ -1,2 +1,4 @@
 
-<div class="fluent-grid" style="justify-content: center;" spacing="5" b-ljlkesaj3r="">My content</div>
\ No newline at end of file
+<div b-9fxwfzgab8="">
+  <div id="xxx" class="fluent-grid" style="justify-content: center;" spacing="5" b-9fxwfzgab8="">My content</div>
+</div>
\ No newline at end of file