feat(blazorui): add FullWidth parameter to BitSeparator #8511 (#8542)

bitfoundation · Sep 7, 2024 · fbbacc2 · fbbacc2
1 parent 8a8cea7
commit fbbacc2
Show file tree

Hide file tree

Showing 4 changed files with 44 additions and 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
@@ -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
@@ -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/...Bit.BlazorUI.Demo.Client.Core/Pages/Components/Utilities/Separator/BitSeparatorDemo.razor b/...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,14 +51,24 @@
                     </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>
                     </div>
                 </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>
diff --git a/....BlazorUI.Demo.Client.Core/Pages/Components/Utilities/Separator/BitSeparatorDemo.razor.cs b/....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>";
 }