[dev-v5] FluentStack - Add Reversed attribute

.vscode/launch.json

@@ -0,0 +1,7 @@
+{
+    // Use IntelliSense to learn about possible attributes.
+    // Hover to view descriptions of existing attributes.
+    // For more information, visit: https://go.microsoft.com/fwlink/?linkid=830387
+    "version": "0.2.0",
+    "configurations": []
+}

examples/Demo/FluentUI.Demo.Client/Documentation/Components/Stack/Examples/StackCustomized.razor

@@ -1,20 +1,24 @@
 @namespace FluentUI.Demo.Shared
 
 <p>Alignment of the Stack content elements:</p>
-<FluentStack>
+<FluentStack HorizontalGap="12px">
     <FluentSelect Label="Horizontal"
                   Items="@(Enum.GetValues<HorizontalAlignment>())"
                   @bind-Value="@Horizontal" />
     <FluentSelect Label="Vertical"
                   Items="@(Enum.GetValues<VerticalAlignment>())"
                   @bind-Value="@Vertical" />
+    <FluentSwitch Label="Reversed"
+                  LabelPosition="LabelPosition.Above"
+                  @bind-Value="@Reversed" />
 </FluentStack>
 
 <p>Result:</p>
 <FluentStack Orientation="Orientation.Vertical"
              HorizontalAlignment="@Horizontal"
              VerticalAlignment="@Vertical"
              VerticalGap="20"
+             Reversed="@Reversed"
              Style="height: 200px"
              Class="container">
     <div class="box">Vertical item 1</div>
@@ -23,7 +27,8 @@
                  HorizontalAlignment="@Horizontal"
                  VerticalAlignment="@Vertical"
                  HorizontalGap="4"
-                 class="container">
+                 Reversed="@Reversed"
+                 Class="container">
         <div class="box" style="width: 150px">Horizontal <br />item 1</div>
         <div class="box">Horizontal item 2</div>
     </FluentStack>
@@ -33,6 +38,7 @@
 {
     HorizontalAlignment Horizontal;
     VerticalAlignment Vertical;
+    bool Reversed;
 }
 
 <style>

src/Core/Components/Stack/FluentStack.razor

@@ -1,6 +1,6 @@
 @namespace Microsoft.FluentUI.AspNetCore.Components
 @inherits FluentComponentBase
 
-<div id="@Id" class="@ClassValue" style="@StyleValue" @attributes="AdditionalAttributes">
+<div id="@Id" class="@ClassValue" style="@StyleValue" @attributes="AdditionalAttributes" reverse="@Reversed">
     @ChildContent
 </div>

src/Core/Components/Stack/FluentStack.razor.cs

@@ -91,6 +91,12 @@ public partial class FluentStack : FluentComponentBase
     [Parameter]
     public string? VerticalGap { get; set; }
 
+    /// <summary>
+    /// Gets or sets a value indicating whether the stack is reversed.
+    /// </summary>
+    [Parameter]
+    public bool? Reversed { get; set; }
+
     /// <summary>
     /// Gets or sets the content to be rendered inside the component.
     /// </summary>

src/Core/Components/Stack/FluentStack.razor.css

@@ -7,3 +7,13 @@
   display: flex;
   flex-direction: row;
 }
+
+.fluent-stack-vertical[reverse] {
+  display: flex;
+  flex-direction: column-reverse;
+}
+
+.fluent-stack-horizontal[reverse] {
+  display: flex;
+  flex-direction: row-reverse;
+}

tests/Core/Components/Stack/FluentStackTests.razor

@@ -117,4 +117,20 @@
         // Assert
         Assert.Contains(expectedStyle, styles);
     }
+
+    [Theory]
+    [InlineData(true, true)]
+    [InlineData(false, false)]
+    [InlineData(null, false)]
+    public void FluentStack_Reverse(bool? reversed, bool hasExpectedAttribute)
+    {
+        // Arrange
+        var cut = Render(@<FluentStack Reversed="@reversed" />);
+
+        // Act
+        var hasAttribute = cut.Find("div").Attributes.Any(i => i.Name == "reverse");
+
+        // Assert
+        Assert.Equal(hasExpectedAttribute, hasAttribute);
+    }
 }