[FluentGrid] Add FluentGridItem with no breakpoints (#862)

* Add FluentGridItem with no breakpoints

* Add Unit Tests

examples/Demo/Shared/Pages/Grid/Examples/GridDefault.razor

@@ -3,7 +3,8 @@
               TOption="JustifyContent"
               Position="SelectPosition.Below"
               @bind-SelectedOption="@Justification" />
-<br /><br />
+<br />
+<br />
 
 <FluentGrid Spacing="3" Justify="@Justification" Style="background-color: var(--neutral-layer-3);">
     <FluentGridItem xs="12">

examples/Demo/Shared/Pages/Grid/Examples/GridMessage.razor

@@ -0,0 +1,12 @@
+<FluentGrid Justify="JustifyContent.FlexEnd"
+            Style="background-color: var(--neutral-layer-3); overflow: auto; resize: horizontal;">
+    <FluentGridItem Style="min-width: 200px;">
+        <FluentLabel>
+            Views must be setup in the Admin Portal to use this client application hosted by my company.
+        </FluentLabel>
+    </FluentGridItem>
+    <FluentGridItem Justify="JustifyContent.FlexEnd" Gap="10px">
+        <FluentButton Appearance="Appearance.Neutral">Setup</FluentButton>
+        <FluentButton Appearance="Appearance.Neutral">Documentation</FluentButton>
+    </FluentGridItem>
+</FluentGrid>

examples/Demo/Shared/Pages/Grid/GridPage.razor

@@ -29,6 +29,17 @@
 
 <DemoSection Title="Default" Component="@typeof(GridDefault)" />
 
+<DemoSection Title="No breakpoints" Component="@typeof(GridMessage)">
+    <Description>
+        <p>You can resize the panel using the slider in the bottom right-hand corner.</p>
+        <p>
+            If no <strong>Breakpoints</strong> or if <code>xs="0"</code> is defined for a <code>FluentGridItem</code> component,
+            this style will be applied: <code>flex: 1; max-width: fit-content;</code>.<br />
+            In this example, the first item (the message) cannot be lower than 200px <code>min-width: 200px;</code>.
+            To avoid that, the second item (the buttons) will be moved to the next line.
+        </p>
+    </Description>
+</DemoSection>
 
 @code
 {

src/Core/Components/Grid/FluentGrid.razor.css

@@ -118,6 +118,11 @@
         flex-basis: 0;
     }
 
+    .fluent-grid ::deep > div[xs="0"] {
+        flex: 1;
+        max-width: fit-content;
+    }
+
     .fluent-grid ::deep > div[xs="1"] {
         flex-grow: 0;
         max-width: 8.33333333333333%;
@@ -207,6 +212,11 @@
         flex-basis: 0;
     }
 
+    .fluent-grid ::deep > div[sm="0"] {
+        flex: 1;
+        max-width: fit-content;
+    }
+
     .fluent-grid ::deep > div[sm="1"] {
         flex-grow: 0;
         max-width: 8.33333333333333%;
@@ -296,6 +306,11 @@
         flex-basis: 0;
     }
 
+    .fluent-grid ::deep > div[md="0"] {
+        flex: 1;
+        max-width: fit-content;
+    }
+
     .fluent-grid ::deep > div[md="1"] {
         flex-grow: 0;
         max-width: 8.33333333333333%;
@@ -385,6 +400,11 @@
         flex-basis: 0;
     }
 
+    .fluent-grid ::deep > div[lg="0"] {
+        flex: 1;
+        max-width: fit-content;
+    }
+
     .fluent-grid ::deep > div[lg="1"] {
         flex-grow: 0;
         max-width: 8.33333333333333%;
@@ -474,6 +494,11 @@
         flex-basis: 0;
     }
 
+    .fluent-grid ::deep > div[xl="0"] {
+        flex: 1;
+        max-width: fit-content;
+    }
+
     .fluent-grid ::deep > div[xl="1"] {
         flex-grow: 0;
         max-width: 8.33333333333333%;
@@ -563,6 +588,11 @@
         flex-basis: 0;
     }
 
+    .fluent-grid ::deep > div[xxl="0"] {
+        flex: 1;
+        max-width: fit-content;
+    }
+
     .fluent-grid ::deep > div[xxl="1"] {
         flex-grow: 0;
         max-width: 8.33333333333333%;

src/Core/Components/Grid/FluentGridItem.razor

@@ -1,6 +1,6 @@
 @namespace Microsoft.Fast.Components.FluentUI
 @inherits FluentComponentBase
 
-<div class="@ClassValue" style="@StyleValue" xs=@xs sm=@sm md=@md lg=@lg xl=@xl xxl=@xxl @attributes="AdditionalAttributes">
+<div class="@ClassValue" style="@StyleValue" xs="@(NoBreakpointsDefined() ? 0 : xs)" sm=@sm md=@md lg=@lg xl=@xl xxl=@xxl @attributes="AdditionalAttributes">
     @ChildContent
 </div>

src/Core/Components/Grid/FluentGridItem.razor.cs

@@ -33,12 +33,40 @@ public partial class FluentGridItem : FluentComponentBase
 #pragma warning restore SA1300
 #pragma warning restore IDE1006
 
+    /// <summary>
+    /// Defines how the browser distributes space between and around content items.
+    /// </summary>
+    [Parameter]
+    public JustifyContent? Justify { get; set; }
+
+    /// <summary>
+    /// Defines the gaps (gutters) between rows and columns.
+    /// See https://developer.mozilla.org/en-US/docs/Web/CSS/gap
+    /// </summary>
+    [Parameter]
+    public string? Gap { get; set; }
+
     [Parameter]
     public RenderFragment? ChildContent { get; set; }
 
     /// <summary />
     protected string? ClassValue => new CssBuilder(Class).Build();
 
     /// <summary />
-    protected string? StyleValue => new StyleBuilder(Style).Build();
+    protected string? StyleValue => new StyleBuilder(Style)
+        .AddStyle("justify-content", Justify.ToAttributeValue(), when: Justify is not null)
+        .AddStyle("display", "flex", when: Justify is not null)
+        .AddStyle("gap", Gap, when: !string.IsNullOrEmpty(Gap))
+        .Build();
+
+    /// <summary />
+    private bool NoBreakpointsDefined()
+    {
+        return xs is null
+            && sm is null
+            && md is null
+            && lg is null
+            && xl is null
+            && xxl is null;
+    }
 }

tests/Core/_ToDo/Grid/FluentGridTests.FluentGrid_Default.verified.html → tests/Core/Grid/FluentGridTests.FluentGrid_Default.verified.razor.html

@@ -1,4 +1,2 @@
 
-<div class="fluent-grid" style="justify-content: flex-start;" spacing="0" b-ljlkesaj3r="">
-  <b>render me</b>
-</div>
+<div class="fluent-grid" style="justify-content: flex-start;" spacing="3" b-ljlkesaj3r="">My content</div>

tests/Core/Grid/FluentGridTests.FluentGrid_Items_AllBreakpoints.verified.razor.html

@@ -0,0 +1,4 @@
+
+<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>

tests/Core/Grid/FluentGridTests.FluentGrid_Items_Default.verified.razor.html

@@ -0,0 +1,5 @@
+
+<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>

tests/Core/Grid/FluentGridTests.FluentGrid_Items_JustifyGap.verified.razor.html

@@ -0,0 +1,4 @@
+
+<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>

tests/Core/Grid/FluentGridTests.FluentGrid_Items_NoBreapoint.verified.razor.html

@@ -0,0 +1,4 @@
+
+<div class="fluent-grid" style="justify-content: flex-start;" spacing="3" b-ljlkesaj3r="">
+  <div style="min-width: 200px;" xs="0">My cell</div>
+</div>

tests/Core/Grid/FluentGridTests.FluentGrid_SpacingJustify.verified.razor.html

@@ -0,0 +1,2 @@
+
+<div class="fluent-grid" style="justify-content: center;" spacing="5" b-ljlkesaj3r="">My content</div>

tests/Core/Grid/FluentGridTests.razor

@@ -0,0 +1,77 @@
+@using Xunit;
+@inherits TestContext
+@code
+{
+    [Fact]
+    public void FluentGrid_Default()
+    {
+        // Arrange && Act
+        var cut = Render(@<FluentGrid>My content</FluentGrid>);
+
+        // Assert
+        cut.Verify();
+    }
+
+    [Fact]
+    public void FluentGrid_SpacingJustify()
+    {
+        // Arrange && Act
+        var cut = Render(@<FluentGrid Spacing="5" Justify="JustifyContent.Center">My content</FluentGrid>);
+
+        //Assert
+        cut.Verify();
+    }
+
+    [Fact]
+    public void FluentGrid_Items_Default()
+    {
+        // Arrange && Act
+        var cut = Render(
+            @<FluentGrid>
+                <FluentGridItem xs="6" md="6">Cell 1</FluentGridItem>
+                <FluentGridItem xs="6" md="6">Cell 2</FluentGridItem>
+            </FluentGrid>);
+
+        //Assert
+        cut.Verify();
+    }
+
+    [Fact]
+    public void FluentGrid_Items_AllBreakpoints()
+    {
+        // Arrange && Act
+        var cut = Render(
+            @<FluentGrid>
+                <FluentGridItem xs="1" sm="2" md="3" lg="4" xl="5" xxl="6">My cell</FluentGridItem>
+            </FluentGrid>);
+
+        //Assert
+        cut.Verify();
+    }
+
+    [Fact]
+    public void FluentGrid_Items_JustifyGap()
+    {
+        // Arrange && Act
+        var cut = Render(
+            @<FluentGrid>
+                <FluentGridItem xs="1" Justify="JustifyContent.Center" Gap="10px">My cell</FluentGridItem>
+            </FluentGrid>);
+
+        //Assert
+        cut.Verify();
+    }
+
+    [Fact]
+    public void FluentGrid_Items_NoBreapoint()
+    {
+        // Arrange && Act
+        var cut = Render(
+            @<FluentGrid>
+                <FluentGridItem Style="min-width: 200px;">My cell</FluentGridItem>
+            </FluentGrid>);
+
+        //Assert
+        cut.Verify();
+    }
+}