From fbbacc236a79d9d1429a992189eec15038437605 Mon Sep 17 00:00:00 2001
From: Saleh Yusefnejad <msynk@outlook.com>
Date: Sat, 7 Sep 2024 19:27:42 +0330
Subject: [PATCH] feat(blazorui): add FullWidth parameter to BitSeparator #8511
 (#8542)

---
 .../Utilities/Separator/BitSeparator.razor.cs | 11 ++++++++
 .../Utilities/Separator/BitSeparator.scss     |  2 +-
 .../Separator/BitSeparatorDemo.razor          | 26 +++++++++++++------
 .../Separator/BitSeparatorDemo.razor.cs       | 15 ++++++++++-
 4 files changed, 44 insertions(+), 10 deletions(-)

diff --git a/src/BlazorUI/Bit.BlazorUI/Components/Utilities/Separator/BitSeparator.razor.cs b/src/BlazorUI/Bit.BlazorUI/Components/Utilities/Separator/BitSeparator.razor.cs
index 30884b87f6..2c0ec12372 100644
--- a/src/BlazorUI/Bit.BlazorUI/Components/Utilities/Separator/BitSeparator.razor.cs
+++ b/src/BlazorUI/Bit.BlazorUI/Components/Utilities/Separator/BitSeparator.razor.cs
@@ -13,6 +13,12 @@ public partial class BitSeparator : BitComponentBase
     /// </summary>
     [Parameter] public RenderFragment? ChildContent { get; set; }
 
+    /// <summary>
+    /// Renders the separator in full width of its container.
+    /// </summary>
+    [Parameter, ResetStyleBuilder]
+    public bool FullWidth { get; set; }
+
     /// <summary>
     /// Whether the element is a vertical separator.
     /// </summary>
@@ -34,4 +40,9 @@ protected override void RegisterCssClasses()
             _ => "bit-spr-ctr"
         });
     }
+
+    protected override void RegisterCssStyles()
+    {
+        StyleBuilder.Register(() => FullWidth ? "width:100%" : string.Empty);
+    }
 }
diff --git a/src/BlazorUI/Bit.BlazorUI/Components/Utilities/Separator/BitSeparator.scss b/src/BlazorUI/Bit.BlazorUI/Components/Utilities/Separator/BitSeparator.scss
index 7fea1b8b16..e5a409123e 100644
--- a/src/BlazorUI/Bit.BlazorUI/Components/Utilities/Separator/BitSeparator.scss
+++ b/src/BlazorUI/Bit.BlazorUI/Components/Utilities/Separator/BitSeparator.scss
@@ -6,8 +6,8 @@
 
 .bit-spr-cnt {
     position: relative;
-    display: inline-block;
     color: $clr-fg-pri;
+    display: inline-block;
     background: $clr-bg-pri;
 }
 
diff --git a/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Utilities/Separator/BitSeparatorDemo.razor b/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Utilities/Separator/BitSeparatorDemo.razor
index eb7f6e5a4d..cdb4b44946 100644
--- a/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Utilities/Separator/BitSeparatorDemo.razor
+++ b/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Utilities/Separator/BitSeparatorDemo.razor
@@ -12,18 +12,18 @@
         <ComponentExampleBox Title="Basic" RazorCode="@example1RazorCode" Id="example1">
             <ExamplePreview>
                 <div>
-                    <BitLabel>Empty separator</BitLabel>
+                    <div>Empty separator</div>
                     <BitSeparator />
                     <br />
-                    <BitLabel>Separator with text</BitLabel>
+                    <div>Separator with text</div>
                     <BitSeparator>Text</BitSeparator>
                     <br />
-                    <BitLabel>Separator with icon</BitLabel>
+                    <div>Separator with icon</div>
                     <BitSeparator><BitIcon IconName="Clock" /></BitSeparator>
                 </div>
             </ExamplePreview>
         </ComponentExampleBox>
-        <ComponentExampleBox Title="Vertical" RazorCode="@example2RazorCode" Id="example1">
+        <ComponentExampleBox Title="Vertical" RazorCode="@example2RazorCode" Id="example2">
             <ExamplePreview>
                 <div class="custom-horizontal-layout">
                     <span>Item 1</span>
@@ -38,11 +38,11 @@
                 </div>
             </ExamplePreview>
         </ComponentExampleBox>
-        <ComponentExampleBox Title="AlignContent" RazorCode="@example3RazorCode" Id="example1">
+        <ComponentExampleBox Title="AlignContent" RazorCode="@example3RazorCode" Id="example3">
             <ExamplePreview>
                 <div style="height: 28rem">
                     <div>
-                        <BitLabel>Horizontal separator with text</BitLabel>
+                        <div>Horizontal separator with text</div>
                         <BitSeparator AlignContent="@BitSeparatorAlignContent.Center">Center</BitSeparator>
                         <br />
                         <BitSeparator AlignContent="@BitSeparatorAlignContent.Start">Start</BitSeparator>
@@ -51,8 +51,7 @@
                     </div>
                     <br /><br />
                     <div style="height: 13rem">
-                        <BitLabel>Vertical separator with text</BitLabel>
-                        <br />
+                        <div>Vertical separator with text</div><br />
                         <BitSeparator Vertical AlignContent="@BitSeparatorAlignContent.Center">Center</BitSeparator>
                         <BitSeparator Vertical AlignContent="@BitSeparatorAlignContent.Start">Start</BitSeparator>
                         <BitSeparator Vertical AlignContent="@BitSeparatorAlignContent.End">End</BitSeparator>
@@ -60,5 +59,16 @@
                 </div>
             </ExamplePreview>
         </ComponentExampleBox>
+        <ComponentExampleBox Title="FullWidth" RazorCode="@example4RazorCode" Id="example4">
+            <ExamplePreview>
+                <div>While using inside a flex container with align-items css style:</div>
+                <br /><br />
+                <div style="display:flex;flex-direction:column;align-items:center">
+                    <BitSeparator>Normal</BitSeparator>
+                    <br />
+                    <BitSeparator FullWidth>FullWidth</BitSeparator>
+                </div>
+            </ExamplePreview>
+        </ComponentExampleBox>
     </ComponentDemo>
 </div>
\ No newline at end of file
diff --git a/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Utilities/Separator/BitSeparatorDemo.razor.cs b/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Utilities/Separator/BitSeparatorDemo.razor.cs
index 8dee391d19..1aa79b922e 100644
--- a/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Utilities/Separator/BitSeparatorDemo.razor.cs
+++ b/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Utilities/Separator/BitSeparatorDemo.razor.cs
@@ -10,8 +10,8 @@ public partial class BitSeparatorDemo
             Type = "BitSeparatorAlignContent",
             DefaultValue = "BitSeparatorAlignContent.Center",
             Description = "Where the content should be aligned in the separator.",
+            LinkType = LinkType.Link,
             Href = "#separator-align-enum",
-            LinkType = LinkType.Link
         },
         new()
         {
@@ -21,6 +21,13 @@ public partial class BitSeparatorDemo
             Description = "The content of the Separator, it can be any custom tag or text."
         },
         new()
+        {
+            Name = "FullWidth",
+            Type = "bool",
+            DefaultValue = "false",
+            Description = "Renders the separator in full width of its container."
+        },
+        new()
         {
             Name = "Vertical",
             Type = "bool",
@@ -97,6 +104,12 @@ public partial class BitSeparatorDemo
 <BitSeparator Vertical AlignContent=""@BitSeparatorAlignContent.Center"">Center</BitSeparator>
 <BitSeparator Vertical AlignContent=""@BitSeparatorAlignContent.Start"">Start</BitSeparator>
 <BitSeparator Vertical AlignContent=""@BitSeparatorAlignContent.End"">End</BitSeparator>";
+
+    private readonly string example4RazorCode = @"
+<div style=""display:flex;flex-direction:column;align-items:center"">
+    <BitSeparator>Normal</BitSeparator>
+    <BitSeparator FullWidth>FullWidth</BitSeparator>
+</div>";
 }