From 5456a28b97b0d89a8b6e42b54f5017ea94868571 Mon Sep 17 00:00:00 2001 From: Mohammad Hossein Rastegarinia Date: Mon, 2 Oct 2023 23:44:36 +0330 Subject: [PATCH] feat(blazorui): add BitSeparator component #5451 (#5452) --- .../Components/Separator/BitSeparator.razor | 14 +++ .../Separator/BitSeparator.razor.cs | 60 +++++++++++ .../Components/Separator/BitSeparator.scss | 75 +++++++++++++ .../Separator/BitSeparatorAlignContent.cs | 8 ++ .../Bit.BlazorUI/Styles/components.scss | 1 + .../Separator/BitSeparatorDemo.razor | 64 +++++++++++ .../Separator/BitSeparatorDemo.razor.cs | 102 ++++++++++++++++++ .../Separator/BitSeparatorDemo.razor.scss | 7 ++ .../Demo/Client/Core/Shared/NavMenu.razor.cs | 1 + .../Demo/Client/Core/compilerconfig.json | 6 ++ 10 files changed, 338 insertions(+) create mode 100644 src/BlazorUI/Bit.BlazorUI/Components/Separator/BitSeparator.razor create mode 100644 src/BlazorUI/Bit.BlazorUI/Components/Separator/BitSeparator.razor.cs create mode 100644 src/BlazorUI/Bit.BlazorUI/Components/Separator/BitSeparator.scss create mode 100644 src/BlazorUI/Bit.BlazorUI/Components/Separator/BitSeparatorAlignContent.cs create mode 100644 src/BlazorUI/Demo/Client/Core/Pages/Components/Separator/BitSeparatorDemo.razor create mode 100644 src/BlazorUI/Demo/Client/Core/Pages/Components/Separator/BitSeparatorDemo.razor.cs create mode 100644 src/BlazorUI/Demo/Client/Core/Pages/Components/Separator/BitSeparatorDemo.razor.scss diff --git a/src/BlazorUI/Bit.BlazorUI/Components/Separator/BitSeparator.razor b/src/BlazorUI/Bit.BlazorUI/Components/Separator/BitSeparator.razor new file mode 100644 index 0000000000..a79486e809 --- /dev/null +++ b/src/BlazorUI/Bit.BlazorUI/Components/Separator/BitSeparator.razor @@ -0,0 +1,14 @@ +@namespace Bit.BlazorUI +@inherits BitComponentBase + +
+ @if (ChildContent is not null) + { + + } +
\ No newline at end of file diff --git a/src/BlazorUI/Bit.BlazorUI/Components/Separator/BitSeparator.razor.cs b/src/BlazorUI/Bit.BlazorUI/Components/Separator/BitSeparator.razor.cs new file mode 100644 index 0000000000..0a56024f54 --- /dev/null +++ b/src/BlazorUI/Bit.BlazorUI/Components/Separator/BitSeparator.razor.cs @@ -0,0 +1,60 @@ +namespace Bit.BlazorUI; + +public partial class BitSeparator +{ + private bool isVertical; + private BitSeparatorAlignContent separatorAlignContent = BitSeparatorAlignContent.Center; + + + + /// + /// Where the content should be aligned in the separator. + /// + [Parameter] public BitSeparatorAlignContent AlignContent + { + get => separatorAlignContent; + set + { + if (separatorAlignContent == value) return; + + separatorAlignContent = value; + ClassBuilder.Reset(); + } + } + + /// + /// The content of the Separator, it can be any custom tag or text. + /// + [Parameter] public RenderFragment? ChildContent { get; set; } + + /// + /// Whether the element is a vertical separator. + /// + [Parameter] public bool IsVertical + { + get => isVertical; + set + { + if (isVertical == value) return; + + isVertical = value; + ClassBuilder.Reset(); + } + } + + + + protected override string RootElementClass => "bit-spr"; + + protected override void RegisterCssClasses() + { + ClassBuilder.Register(() => IsVertical ? $"{RootElementClass}-vrt" : $"{RootElementClass}-hrz"); + + ClassBuilder.Register(() => AlignContent switch + { + BitSeparatorAlignContent.Start => $"{RootElementClass}-srt", + BitSeparatorAlignContent.End => $"{RootElementClass}-end", + _ => $"{RootElementClass}-ctr" + }); + } +} diff --git a/src/BlazorUI/Bit.BlazorUI/Components/Separator/BitSeparator.scss b/src/BlazorUI/Bit.BlazorUI/Components/Separator/BitSeparator.scss new file mode 100644 index 0000000000..ee0c0b1e0d --- /dev/null +++ b/src/BlazorUI/Bit.BlazorUI/Components/Separator/BitSeparator.scss @@ -0,0 +1,75 @@ +@import "../../Styles/functions.scss"; + +.bit-spr { + position: relative; +} + +.bit-spr-cnt { + position: relative; + display: inline-block; + color: $color-foreground-primary; + background: $color-background-primary; +} + +.bit-spr-hrz { + display: block; + padding: spacing(0.5) 0; + + &::before { + content: ""; + display: block; + inset: 50% 0 0; + position: absolute; + height: $shape-border-width; + background-color: $color-border-secondary; + } + + .bit-spr-cnt { + padding: 0 spacing(1.5); + } + + &.bit-spr-ctr { + text-align: center; + } + + &.bit-spr-srt { + text-align: start; + } + + &.bit-spr-end { + text-align: end; + } +} + +.bit-spr-vrt { + z-index: 1; + height: inherit; + display: table-cell; + padding: 0 spacing(0.5); + + &::after { + content: ""; + z-index: -1; + display: block; + inset: 0 0 0 50%; + position: absolute; + width: $shape-border-width; + background-color: $color-border-secondary; + } + + .bit-spr-cnt { + padding: spacing(1.5) 0; + } + + &.bit-spr-ctr { + vertical-align: middle; + } + + &.bit-spr-srt { + vertical-align: top; + } + + &.bit-spr-end { + vertical-align: bottom; + } +} \ No newline at end of file diff --git a/src/BlazorUI/Bit.BlazorUI/Components/Separator/BitSeparatorAlignContent.cs b/src/BlazorUI/Bit.BlazorUI/Components/Separator/BitSeparatorAlignContent.cs new file mode 100644 index 0000000000..390d6f9a7d --- /dev/null +++ b/src/BlazorUI/Bit.BlazorUI/Components/Separator/BitSeparatorAlignContent.cs @@ -0,0 +1,8 @@ +namespace Bit.BlazorUI; + +public enum BitSeparatorAlignContent +{ + Start, + Center, + End +} diff --git a/src/BlazorUI/Bit.BlazorUI/Styles/components.scss b/src/BlazorUI/Bit.BlazorUI/Styles/components.scss index fb9f4a245a..8b16c43963 100644 --- a/src/BlazorUI/Bit.BlazorUI/Styles/components.scss +++ b/src/BlazorUI/Bit.BlazorUI/Styles/components.scss @@ -39,6 +39,7 @@ @import "../Components/Pivot/BitPivot.scss"; @import "../Components/ProgressIndicator/BitProgressIndicator.scss"; @import "../Components/ScrollablePane/BitScrollablePane.scss"; +@import "../Components/Separator/BitSeparator.scss"; @import "../Components/Slider/BitSlider.scss"; @import "../Components/SnackBar/BitSnackBar.scss"; @import "../Components/Spinner/BitSpinner.scss"; diff --git a/src/BlazorUI/Demo/Client/Core/Pages/Components/Separator/BitSeparatorDemo.razor b/src/BlazorUI/Demo/Client/Core/Pages/Components/Separator/BitSeparatorDemo.razor new file mode 100644 index 0000000000..ef36917634 --- /dev/null +++ b/src/BlazorUI/Demo/Client/Core/Pages/Components/Separator/BitSeparatorDemo.razor @@ -0,0 +1,64 @@ +@page "/components/separator" + + + +
+ + + +
+ Empty separator + +
+ Separator with text + Text +
+ Separator with icon + +
+ + + + +
+ Item 1 + + Item 2 + + Item 3 + + Item 4 + + Item 5 +
+ + + + +
+
+ Horizontal separator with text + Center +
+ Start +
+ End +
+

+
+ Vertical separator with text +
+ Center + Start + End +
+
+ + + +
\ No newline at end of file diff --git a/src/BlazorUI/Demo/Client/Core/Pages/Components/Separator/BitSeparatorDemo.razor.cs b/src/BlazorUI/Demo/Client/Core/Pages/Components/Separator/BitSeparatorDemo.razor.cs new file mode 100644 index 0000000000..f534ea5c05 --- /dev/null +++ b/src/BlazorUI/Demo/Client/Core/Pages/Components/Separator/BitSeparatorDemo.razor.cs @@ -0,0 +1,102 @@ +namespace Bit.BlazorUI.Demo.Client.Core.Pages.Components.Separator; + +public partial class BitSeparatorDemo +{ + private readonly List componentParameters = new() + { + new() + { + Name = "AlignContent", + Type = "BitSeparatorAlignContent", + DefaultValue = "BitSeparatorAlignContent.Center", + Description = "Where the content should be aligned in the separator.", + Href = "#separator-align-enum", + LinkType = LinkType.Link + }, + new() + { + Name = "ChildContent", + Type = "RenderFragment?", + DefaultValue = "null", + Description = "The content of the Separator, it can be any custom tag or text." + }, + new() + { + Name = "IsVertical", + Type = "bool", + DefaultValue = "false", + Description = "Whether the element is a vertical separator." + } + }; + + private readonly List componentSubEnums = new() + { + new() + { + Id = "separator-align-enum", + Name = "BitSeparatorAlignContent", + Description = "", + Items = new List() + { + new() + { + Name = "Start", + Value = "0", + }, + new() + { + Name = "Center", + Value = "1", + }, + new() + { + Name = "End", + Value = "2", + }, + } + } + }; + + + + private readonly string example1RazorCode = @" + +Text +"; + + private readonly string example2RazorCode = @" + + + +
+ Item 1 + + Item 2 + + Item 3 + + Item 4 + + Item 5 +
+"; + + private readonly string example3RazorCode = @" +Center +Start +End + +Center +Start +End"; +} + + diff --git a/src/BlazorUI/Demo/Client/Core/Pages/Components/Separator/BitSeparatorDemo.razor.scss b/src/BlazorUI/Demo/Client/Core/Pages/Components/Separator/BitSeparatorDemo.razor.scss new file mode 100644 index 0000000000..0b37a7f583 --- /dev/null +++ b/src/BlazorUI/Demo/Client/Core/Pages/Components/Separator/BitSeparatorDemo.razor.scss @@ -0,0 +1,7 @@ +.custom-horizontal-layout { + gap: 1rem; + height: 3rem; + display: flex; + white-space: nowrap; + align-items: center; +} diff --git a/src/BlazorUI/Demo/Client/Core/Shared/NavMenu.razor.cs b/src/BlazorUI/Demo/Client/Core/Shared/NavMenu.razor.cs index 131d4919c0..5eb5d8e487 100644 --- a/src/BlazorUI/Demo/Client/Core/Shared/NavMenu.razor.cs +++ b/src/BlazorUI/Demo/Client/Core/Shared/NavMenu.razor.cs @@ -119,6 +119,7 @@ public partial class NavMenu : IDisposable new() { Text = "Icon", Url = "/components/icon" }, new() { Text = "Image", Url = "/components/image" }, new() { Text = "Overlay", Url = "/components/overlay" }, + new() { Text = "Separator", Url = "/components/separator" }, new() { Text = "Sticky", Url = "/components/sticky" }, }, }, diff --git a/src/BlazorUI/Demo/Client/Core/compilerconfig.json b/src/BlazorUI/Demo/Client/Core/compilerconfig.json index a604561182..e8b09814e9 100644 --- a/src/BlazorUI/Demo/Client/Core/compilerconfig.json +++ b/src/BlazorUI/Demo/Client/Core/compilerconfig.json @@ -359,6 +359,12 @@ "minify": { "enabled": false }, "options": { "sourceMap": false } }, + { + "outputFile": "Pages/Components/Separator/BitSeparatorDemo.razor.css", + "inputFile": "Pages/Components/Separator/BitSeparatorDemo.razor.scss", + "minify": { "enabled": false }, + "options": { "sourceMap": false } + }, { "outputFile": "Pages/Components/Slider/BitSliderDemo.razor.css", "inputFile": "Pages/Components/Slider/BitSliderDemo.razor.scss",