Merge branch '8557' of https://github.com/ysmoradi/bitplatform into 8557

bitfoundation · Sep 14, 2024 · 379003c · 379003c
2 parents 86d8803 + 09446a9
commit 379003c
Show file tree

Hide file tree

Showing 8 changed files with 135 additions and 110 deletions.
diff --git a/src/BlazorUI/Bit.BlazorUI.Tests/Components/Utilities/Stack/BitStackTests.cs b/src/BlazorUI/Bit.BlazorUI.Tests/Components/Utilities/Stack/BitStackTests.cs
@@ -9,7 +9,7 @@ namespace Bit.BlazorUI.Tests.Components.Utilities.Stack;
 [TestClass]
 public class BitStackTests : BunitTestContext
 {
-    private const string STYLE = "flex-direction:column;align-items:flex-start;justify-content:flex-start;";
+    private const string STYLE = "flex-direction:column;gap:1rem;";
 
     private static readonly Dictionary<BitAlignment, string> _AlignmentMap = new()
     {
@@ -272,9 +272,9 @@ public void BitStackShouldRespectGap(string gap)
             parameters.Add(p => p.Gap, gap);
         });
 
-        var style = gap.HasValue() ? $"gap:{gap}" : null;
+        var style = gap.HasValue() ? $"gap:{gap}" : $"gap:1rem";
 
-        component.MarkupMatches(@$"<div style=""{STYLE}{style}"" class=""bit-stc"" id:ignore></div>");
+        component.MarkupMatches(@$"<div style=""flex-direction:column;{style}"" class=""bit-stc"" id:ignore></div>");
     }
 
     [DataTestMethod]
@@ -290,7 +290,7 @@ public void BitStackShouldRespectGapChangingAfterRender()
             parameters.Add(p => p.Gap, gap);
         });
 
-        component.MarkupMatches(@$"<div style=""{STYLE}gap:{gap};"" class=""bit-stc"" id:ignore></div>");
+        component.MarkupMatches(@$"<div style=""flex-direction:column;gap:{gap};"" class=""bit-stc"" id:ignore></div>");
     }
 
     [DataTestMethod,
@@ -371,7 +371,7 @@ public void BitStackShouldRespectHorizontal(bool horizontal)
 
         var fd = horizontal ? "row" : "column";
 
-        component.MarkupMatches(@$"<div style=""flex-direction:{fd};align-items:flex-start;justify-content:flex-start;"" class=""bit-stc"" id:ignore></div>");
+        component.MarkupMatches(@$"<div style=""flex-direction:{fd};gap:1rem"" class=""bit-stc"" id:ignore></div>");
     }
 
     [DataTestMethod]
@@ -386,7 +386,7 @@ public void BitStackShouldRespectHorizontalChangingAfterRender()
             parameters.Add(p => p.Horizontal, true);
         });
 
-        component.MarkupMatches(@$"<div style=""flex-direction:row;align-items:flex-start;justify-content:flex-start;"" class=""bit-stc"" id:ignore></div>");
+        component.MarkupMatches(@$"<div style=""flex-direction:row;gap:1rem"" class=""bit-stc"" id:ignore></div>");
     }
 
     [DataTestMethod,
@@ -408,7 +408,7 @@ public void BitStackShouldRespectHorizontalAlign(BitAlignment horizontalAlign)
 
         var ai = _AlignmentMap[horizontalAlign];
 
-        component.MarkupMatches(@$"<div style=""flex-direction:column;align-items:{ai};justify-content:flex-start;"" class=""bit-stc"" id:ignore></div>");
+        component.MarkupMatches(@$"<div style=""flex-direction:column;gap:1rem;align-items:{ai}"" class=""bit-stc"" id:ignore></div>");
     }
 
     [DataTestMethod]
@@ -423,7 +423,7 @@ public void BitStackShouldRespectHorizontalAlignChangingAfterRender()
             parameters.Add(p => p.HorizontalAlign, BitAlignment.SpaceBetween);
         });
 
-        component.MarkupMatches(@$"<div style=""flex-direction:column;align-items:space-between;justify-content:flex-start;"" class=""bit-stc"" id:ignore></div>");
+        component.MarkupMatches(@$"<div style=""flex-direction:column;gap:1rem;align-items:space-between"" class=""bit-stc"" id:ignore></div>");
     }
 
     [DataTestMethod,
@@ -439,7 +439,7 @@ public void BitStackShouldRespectReversed(bool reversed)
 
         var fd = reversed ? "column-reverse" : "column";
 
-        component.MarkupMatches(@$"<div style=""flex-direction:{fd};align-items:flex-start;justify-content:flex-start;"" class=""bit-stc"" id:ignore></div>");
+        component.MarkupMatches(@$"<div style=""flex-direction:{fd};gap:1rem"" class=""bit-stc"" id:ignore></div>");
     }
 
     [DataTestMethod]
@@ -454,7 +454,7 @@ public void BitStackShouldRespectReversedChangingAfterRender()
             parameters.Add(p => p.Reversed, true);
         });
 
-        component.MarkupMatches(@$"<div style=""flex-direction:column-reverse;align-items:flex-start;justify-content:flex-start;"" class=""bit-stc"" id:ignore></div>");
+        component.MarkupMatches(@$"<div style=""flex-direction:column-reverse;gap:1rem"" class=""bit-stc"" id:ignore></div>");
     }
 
     [DataTestMethod,
@@ -476,7 +476,7 @@ public void BitStackShouldRespectBitAlignment(BitAlignment verticalAlign)
 
         var jc = _AlignmentMap[verticalAlign];
 
-        component.MarkupMatches(@$"<div style=""flex-direction:column;align-items:flex-start;justify-content:{jc};"" class=""bit-stc"" id:ignore></div>");
+        component.MarkupMatches(@$"<div style=""flex-direction:column;gap:1rem;justify-content:{jc}"" class=""bit-stc"" id:ignore></div>");
     }
 
     [DataTestMethod]
@@ -491,7 +491,7 @@ public void BitStackShouldRespectVerticalAlignChangingAfterRender()
             parameters.Add(p => p.VerticalAlign, BitAlignment.SpaceBetween);
         });
 
-        component.MarkupMatches(@$"<div style=""flex-direction:column;align-items:flex-start;justify-content:space-between;"" class=""bit-stc"" id:ignore></div>");
+        component.MarkupMatches(@$"<div style=""flex-direction:column;gap:1rem;justify-content:space-between;"" class=""bit-stc"" id:ignore></div>");
     }
 
     [DataTestMethod,
@@ -560,7 +560,7 @@ public void BitStackShouldRespectHorizontalAndReversed(bool horizontal, bool rev
 
         var fd = $"{(horizontal ? "row" : "column")}{(reversed ? "-reverse" : null)}";
 
-        component.MarkupMatches(@$"<div style=""flex-direction:{fd};align-items:flex-start;justify-content:flex-start;"" class=""bit-stc"" id:ignore></div>");
+        component.MarkupMatches(@$"<div style=""flex-direction:{fd};gap:1rem"" class=""bit-stc"" id:ignore></div>");
     }
 
     [DataTestMethod,
@@ -586,7 +586,7 @@ public void BitStackShouldRespectHorizontalAndReversedAndHorizontalAlignAndVerti
                 var ai = _AlignmentMap[horizontal ? verticalAlign : horizontalAlign];
                 var jc = _AlignmentMap[horizontal ? horizontalAlign : verticalAlign];
 
-                component.MarkupMatches(@$"<div style=""flex-direction:{fd};align-items:{ai};justify-content:{jc};"" class=""bit-stc"" id:ignore></div>");
+                component.MarkupMatches(@$"<div style=""flex-direction:{fd};gap:1rem;align-items:{ai};justify-content:{jc};"" class=""bit-stc"" id:ignore></div>");
             }
         }
     }
@@ -599,10 +599,10 @@ public void BitStackShouldRespectFull(bool full)
     {
         var component = RenderComponent<BitStack>(parameters =>
         {
-            parameters.Add(p => p.Full, full);
+            parameters.Add(p => p.AutoSize, full);
         });
 
-        var style = full ? "width:100%;height:100%;" : null;
+        var style = full ? "width:auto;height:auto;" : null;
 
         component.MarkupMatches(@$"<div style=""{STYLE}{style}"" class=""bit-stc"" id:ignore></div>");
     }
@@ -616,24 +616,24 @@ public void BitStackShouldRespectFullChangingAfterRender()
 
         component.SetParametersAndRender(parameters =>
         {
-            parameters.Add(p => p.Full, true);
+            parameters.Add(p => p.AutoSize, true);
         });
 
-        component.MarkupMatches(@$"<div style=""{STYLE}width:100%;height:100%;"" class=""bit-stc"" id:ignore></div>");
+        component.MarkupMatches(@$"<div style=""{STYLE}width:auto;height:auto;"" class=""bit-stc"" id:ignore></div>");
     }
 
     [DataTestMethod,
         DataRow(true),
         DataRow(false)
     ]
-    public void BitStackShouldRespectFullWidth(bool fullWidth)
+    public void BitStackShouldRespectFullWidth(bool autoWidth)
     {
         var component = RenderComponent<BitStack>(parameters =>
         {
-            parameters.Add(p => p.FullWidth, fullWidth);
+            parameters.Add(p => p.AutoWidth, autoWidth);
         });
 
-        var style = fullWidth ? "width:100%;" : null;
+        var style = autoWidth ? "width:auto;" : null;
 
         component.MarkupMatches(@$"<div style=""{STYLE}{style}"" class=""bit-stc"" id:ignore></div>");
     }
@@ -647,24 +647,24 @@ public void BitStackShouldRespectFullWidthChangingAfterRender()
 
         component.SetParametersAndRender(parameters =>
         {
-            parameters.Add(p => p.FullWidth, true);
+            parameters.Add(p => p.AutoWidth, true);
         });
 
-        component.MarkupMatches(@$"<div style=""{STYLE}width:100%;"" class=""bit-stc"" id:ignore></div>");
+        component.MarkupMatches(@$"<div style=""{STYLE}width:auto;"" class=""bit-stc"" id:ignore></div>");
     }
 
     [DataTestMethod,
         DataRow(true),
         DataRow(false)
     ]
-    public void BitStackShouldRespectFullHeight(bool fullHeight)
+    public void BitStackShouldRespectFullHeight(bool autoHeight)
     {
         var component = RenderComponent<BitStack>(parameters =>
         {
-            parameters.Add(p => p.FullHeight, fullHeight);
+            parameters.Add(p => p.AutoHeight, autoHeight);
         });
 
-        var style = fullHeight ? "height:100%;" : null;
+        var style = autoHeight ? "height:auto;" : null;
 
         component.MarkupMatches(@$"<div style=""{STYLE}{style}"" class=""bit-stc"" id:ignore></div>");
     }
@@ -678,10 +678,10 @@ public void BitStackShouldRespectFullHeightChangingAfterRender()
 
         component.SetParametersAndRender(parameters =>
         {
-            parameters.Add(p => p.FullHeight, true);
+            parameters.Add(p => p.AutoHeight, true);
         });
 
-        component.MarkupMatches(@$"<div style=""{STYLE}height:100%;"" class=""bit-stc"" id:ignore></div>");
+        component.MarkupMatches(@$"<div style=""{STYLE}height:auto;"" class=""bit-stc"" id:ignore></div>");
     }
 
     [DataTestMethod,
@@ -694,25 +694,25 @@ public void BitStackShouldRespectFullHeightChangingAfterRender()
         DataRow(false, false, true),
         DataRow(false, false, false)
     ]
-    public void BitStackShouldRespectFullAndFullWidthAndFullHeight(bool full, bool fullWidth, bool fullHeight)
+    public void BitStackShouldRespectFullAndFullWidthAndFullHeight(bool autoSize, bool autoWidth, bool autoHeight)
     {
         var component = RenderComponent<BitStack>(parameters =>
         {
-            parameters.Add(p => p.Full, full);
-            parameters.Add(p => p.FullWidth, fullWidth);
-            parameters.Add(p => p.FullHeight, fullHeight);
+            parameters.Add(p => p.AutoSize, autoSize);
+            parameters.Add(p => p.AutoWidth, autoWidth);
+            parameters.Add(p => p.AutoHeight, autoHeight);
         });
 
         StringBuilder style = new();
 
-        if (full || fullWidth)
+        if (autoSize || autoWidth)
         {
-            style.Append("width:100%;");
+            style.Append("width:auto;");
         }
 
-        if (full || fullHeight)
+        if (autoSize || autoHeight)
         {
-            style.Append("height:100%;");
+            style.Append("height:auto;");
         }
 
         component.MarkupMatches(@$"<div style=""{STYLE}{style}"" class=""bit-stc"" id:ignore></div>");

diff --git a/src/BlazorUI/Bit.BlazorUI/Components/Buttons/BitButton/BitButton.razor.cs b/src/BlazorUI/Bit.BlazorUI/Components/Buttons/BitButton/BitButton.razor.cs
@@ -58,6 +58,12 @@ public partial class BitButton : BitComponentBase
     [Parameter, ResetClassBuilder]
     public BitColor? Color { get; set; }
 
+    /// <summary>
+    /// Preserves the foreground color of the button through hover and focus.
+    /// </summary>
+    [Parameter, ResetClassBuilder]
+    public bool FixedColor { get; set; }
+
     /// <summary>
     /// The value of the href attribute of the link rendered by the button. If provided, the component will be rendered as an anchor tag instead of button.
     /// </summary>
@@ -203,6 +209,8 @@ protected override void RegisterCssClasses()
         });
 
         ClassBuilder.Register(() => ReversedIcon ? "bit-btn-rvi" : string.Empty);
+
+        ClassBuilder.Register(() => FixedColor ? "bit-btn-ftc" : string.Empty);
     }
 
     protected override void RegisterCssStyles()

diff --git a/src/BlazorUI/Bit.BlazorUI/Components/Buttons/BitButton/BitButton.scss b/src/BlazorUI/Bit.BlazorUI/Components/Buttons/BitButton/BitButton.scss
@@ -151,6 +151,10 @@
     }
 }
 
+.bit-btn-ftc {
+    color: var(--bit-btn-clr-txt);
+}
+
 
 .bit-btn-pri {
     --bit-btn-clr: #{$clr-pri};

diff --git a/src/BlazorUI/Bit.BlazorUI/Components/Layouts/Stack/BitStack.cs b/src/BlazorUI/Bit.BlazorUI/Components/Layouts/Stack/BitStack.cs
@@ -4,6 +4,24 @@ namespace Bit.BlazorUI;
 
 public partial class BitStack : BitComponentBase
 {
+    /// <summary>
+    /// Make the height of the stack auto.
+    /// </summary>
+    [Parameter, ResetStyleBuilder]
+    public bool AutoHeight { get; set; }
+
+    /// <summary>
+    /// Make the width and height of the stack auto.
+    /// </summary>
+    [Parameter, ResetStyleBuilder]
+    public bool AutoSize { get; set; }
+
+    /// <summary>
+    /// Make the width of the stack auto.
+    /// </summary>
+    [Parameter, ResetStyleBuilder]
+    public bool AutoWidth { get; set; }
+
     /// <summary>
     /// The content of the stack.
     /// </summary>
@@ -42,25 +60,7 @@ public partial class BitStack : BitComponentBase
     /// Defines whether to render Stack children horizontally.
     /// </summary>
     [Parameter, ResetStyleBuilder]
-    public BitAlignment HorizontalAlign { get; set; }
-
-    /// <summary>
-    /// Make the width and height of the stack 100%.
-    /// </summary>
-    [Parameter, ResetStyleBuilder]
-    public bool Full { get; set; }
-
-    /// <summary>
-    /// Make the height of the stack 100%.
-    /// </summary>
-    [Parameter, ResetStyleBuilder]
-    public bool FullHeight { get; set; }
-
-    /// <summary>
-    /// Make the width of the stack 100%.
-    /// </summary>
-    [Parameter, ResetStyleBuilder]
-    public bool FullWidth { get; set; }
+    public BitAlignment? HorizontalAlign { get; set; }
 
     /// <summary>
     /// Defines whether to render Stack children in the opposite direction (bottom-to-top if it's a vertical Stack and right-to-left if it's a horizontal Stack).
@@ -72,7 +72,7 @@ public partial class BitStack : BitComponentBase
     /// Defines whether to render Stack children vertically.
     /// </summary>
     [Parameter, ResetStyleBuilder]
-    public BitAlignment VerticalAlign { get; set; }
+    public BitAlignment? VerticalAlign { get; set; }
 
     /// <summary>
     /// Defines whether Stack children should wrap onto multiple rows or columns when they are about to overflow the size of the Stack.
@@ -88,18 +88,24 @@ protected override void RegisterCssStyles()
     {
         StyleBuilder.Register(() => $"flex-direction:{(Horizontal ? "row" : "column")}{(Reversed ? "-reverse" : string.Empty)}");
 
-        StyleBuilder.Register(() => $"align-items:{_AlignmentMap[Horizontal ? VerticalAlign : HorizontalAlign]}");
+        StyleBuilder.Register(() => $"gap:{Gap ?? "1rem"}");
 
-        StyleBuilder.Register(() => $"justify-content:{_AlignmentMap[Horizontal ? HorizontalAlign : VerticalAlign]}");
+        StyleBuilder.Register(() =>
+            (Horizontal && VerticalAlign is not null) || (Horizontal is false && HorizontalAlign is not null)
+                ? $"align-items:{_AlignmentMap[Horizontal ? VerticalAlign!.Value : HorizontalAlign!.Value]}"
+                : string.Empty);
 
-        StyleBuilder.Register(() => Gap.HasValue() ? $"gap:{Gap}" : string.Empty);
+        StyleBuilder.Register(() =>
+            (Horizontal && HorizontalAlign is not null) || (Horizontal is false && VerticalAlign is not null)
+                ? $"justify-content:{_AlignmentMap[Horizontal ? HorizontalAlign!.Value : VerticalAlign!.Value]}"
+                : string.Empty);
 
         StyleBuilder.Register(() => (Grow.HasValue() || Grows) ? $"flex-grow:{(Grow.HasValue() ? Grow : "1")}" : string.Empty);
 
         StyleBuilder.Register(() => Wrap ? "flex-wrap:wrap" : string.Empty);
 
-        StyleBuilder.Register(() => (Full || FullWidth) ? "width:100%" : string.Empty);
-        StyleBuilder.Register(() => (Full || FullHeight) ? "height:100%" : string.Empty);
+        StyleBuilder.Register(() => (AutoSize || AutoWidth) ? "width:auto" : string.Empty);
+        StyleBuilder.Register(() => (AutoSize || AutoHeight) ? "height:auto" : string.Empty);
     }
 
     protected override void BuildRenderTree(RenderTreeBuilder builder)

diff --git a/src/BlazorUI/Bit.BlazorUI/Components/Layouts/Stack/BitStack.scss b/src/BlazorUI/Bit.BlazorUI/Components/Layouts/Stack/BitStack.scss
@@ -1,10 +1,10 @@
 @import "../../../Styles/functions.scss";
 
 .bit-stc {
-    width: auto;
-    height: auto;
+    width: 100%;
+    height: 100%;
     display: flex;
+    align-items: center;
     box-sizing: border-box;
-    align-items: flex-start;
-    justify-content: flex-start;
+    justify-content: center;
 }
diff --git a/...Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Buttons/BitButtonDemo.razor.cs b/...Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Buttons/BitButtonDemo.razor.cs
@@ -67,6 +67,13 @@ public partial class BitButtonDemo
             Href = "#color-enum",
         },
         new()
+        {
+            Name = "FixedColor",
+            Type = "bool",
+            DefaultValue = "false",
+            Description = "Preserves the foreground color of the button through hover and focus.",
+        },
+        new()
         {
             Name = "Href",
             Type = "string?",