diff --git a/src/BlazorUI/Bit.BlazorUI/Components/Utilities/Separator/BitSeparator.razor b/src/BlazorUI/Bit.BlazorUI/Components/Utilities/Separator/BitSeparator.razor index 96f947c6ddf..8fcc57e8b6e 100644 --- a/src/BlazorUI/Bit.BlazorUI/Components/Utilities/Separator/BitSeparator.razor +++ b/src/BlazorUI/Bit.BlazorUI/Components/Utilities/Separator/BitSeparator.razor @@ -1,16 +1,19 @@ -@namespace Bit.BlazorUI +@namespace Bit.BlazorUI @inherits BitComponentBase
@if (ChildContent is not null) { - \ No newline at end of file +
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 a4ec665f6a5..18947fe88cc 100644 --- a/src/BlazorUI/Bit.BlazorUI/Components/Utilities/Separator/BitSeparator.razor.cs +++ b/src/BlazorUI/Bit.BlazorUI/Components/Utilities/Separator/BitSeparator.razor.cs @@ -1,10 +1,35 @@ -namespace Bit.BlazorUI; +namespace Bit.BlazorUI; /// /// A Separator is a component that visually separates content into groups. /// +/// +/// The line runs horizontally across its container unless stands it up, and any +/// - a label, an icon - sits on the line where puts +/// it, nudged from the edge by . +/// The line itself is drawn by the theme and restyled through , +/// and , while and keep it on the neutral +/// surface tiers. +///
+/// To assistive technologies the root reports itself as a separator, named by its content or by an +/// ; a separator that is only visual sugar opts out of being +/// announced at all through . +/// public partial class BitSeparator : BitComponentBase { + private string _contentId => $"{_Id}-cnt"; + + private string? _role => Decorative ? "none" : "separator"; + + // aria-orientation implicitly defaults to horizontal on the separator role, so only vertical needs saying. + private string? _ariaOrientation => Decorative is false && Vertical ? "vertical" : null; + + // The children of a separator are presentational to assistive technologies, so the content names the + // separator through aria-labelledby rather than being read out of it - unless an AriaLabel already does. + private string? _ariaLabelledby => ChildContent is not null && Decorative is false && AriaLabel.HasNoValue() ? _contentId : null; + + + /// /// Where the content should be aligned in the separator. /// @@ -14,29 +39,112 @@ public partial class BitSeparator : BitComponentBase /// /// Renders the separator with auto width or height. /// + /// + /// A horizontal separator is as wide as its container and a vertical one as tall; this lets it size to + /// its content instead, which is what a separator stretched by a flex container's align-items wants. + /// [Parameter, ResetStyleBuilder] public bool AutoSize { get; set; } /// - /// The color kind of the background of the separator. + /// The color kind of the background of the content of the separator. /// + /// + /// The content sits on the line and masks it with this background, so it matches the surface the + /// separator is drawn on - a separator on a secondary-colored panel wants a secondary background, and + /// one over a picture wants a transparent one. + /// [Parameter, ResetClassBuilder] public BitColorKind? Background { get; set; } /// - /// The color kind of the border of the separator. + /// The color kind of the line of the separator, out of the neutral border tiers of the theme. /// + /// + /// This picks between the neutral strengths of the theme; paints the line in one of + /// the theme's roles instead, and wins where both are set. + /// [Parameter, ResetClassBuilder] public BitColorKind? Border { get; set; } /// /// The content of the Separator, it can be any custom tag or text. /// + /// + /// It sits on the line where puts it, and it also names the separator to + /// assistive technologies - the children of a separator are presentational, so the name is wired through + /// aria-labelledby rather than read out of the line. + /// [Parameter] public RenderFragment? ChildContent { get; set; } + /// + /// Custom CSS classes for different parts of the separator. + /// + [Parameter, ResetClassBuilder] + public BitSeparatorClassStyles? Classes { get; set; } + + /// + /// The general color of the line of the separator. + /// + /// + /// Setting it paints the line in one of the roles of the theme instead of in the neutral border colors, + /// so every preset and both schemes re-skin it. It wins over , which picks between + /// the neutral tiers. + /// + [Parameter, ResetClassBuilder] + public BitColor? Color { get; set; } + + /// + /// The offset of the content from the edge of the line it is aligned to, as any CSS length. + /// + /// + /// It only means anything while is Start or End - centered content has no + /// edge to be offset from. It is direction-aware on a horizontal separator, and on a vertical one it + /// pushes the content down from the top or up from the bottom. + /// + [Parameter, ResetStyleBuilder] + public string? ContentOffset { get; set; } + + /// + /// Removes the separator from the accessibility tree, for a separator that is purely visual. + /// + /// + /// A page can carry many rules that mean nothing - each announced as "separator" is noise to a screen + /// reader. A decorative separator keeps its looks and reports itself as none; one that genuinely splits + /// content into groups is left announced, and content given to a decorative separator is read as plain + /// text in the flow rather than as the name of anything. + /// + [Parameter] public bool Decorative { get; set; } + + /// + /// The style the line of the separator is drawn in: solid, dashed or dotted. + /// + [Parameter, ResetClassBuilder] + public BitSeparatorLineStyle? LineStyle { get; set; } + + /// + /// Custom CSS styles for different parts of the separator. + /// + [Parameter, ResetStyleBuilder] + public BitSeparatorClassStyles? Styles { get; set; } + + /// + /// The thickness of the line of the separator, as any CSS length. + /// + /// + /// Leaving it unset keeps the hairline the theme draws every divider at. A heavier rule used as a + /// section break is what this is for - and the dots of a one-pixel dotted line barely read without it. + /// + [Parameter, ResetStyleBuilder] + public string? Thickness { get; set; } + /// /// Whether the element is a vertical separator. /// + /// + /// A vertical separator takes its height from its container, so give the container a height - or stand + /// it in a flex row, where lets the row's alignment stretch it. + /// [Parameter, ResetClassBuilder, ResetStyleBuilder] public bool Vertical { get; set; } @@ -46,6 +154,8 @@ public partial class BitSeparator : BitComponentBase protected override void RegisterCssClasses() { + ClassBuilder.Register(() => Classes?.Root); + ClassBuilder.Register(() => AlignContent switch { BitSeparatorAlignContent.Start => "bit-spr-srt", @@ -53,21 +163,53 @@ protected override void RegisterCssClasses() _ => "bit-spr-ctr" }); + // The background and the border kind classes carry a leading "b" so that the whole per-role vocabulary + // of the theme (pri, pbg, pbr, ...) stays free for the Color parameter below, the same way BitCard + // names the two apart. ClassBuilder.Register(() => Background switch { - BitColorKind.Primary => "bit-spr-pbg", - BitColorKind.Secondary => "bit-spr-sbg", - BitColorKind.Tertiary => "bit-spr-tbg", - BitColorKind.Transparent => "bit-spr-rbg", + BitColorKind.Primary => "bit-spr-bpg", + BitColorKind.Secondary => "bit-spr-bsg", + BitColorKind.Tertiary => "bit-spr-btg", + BitColorKind.Transparent => "bit-spr-brg", _ => null }); ClassBuilder.Register(() => Border switch { - BitColorKind.Primary => "bit-spr-pbr", - BitColorKind.Secondary => "bit-spr-sbr", - BitColorKind.Tertiary => "bit-spr-tbr", - BitColorKind.Transparent => "bit-spr-rbr", + BitColorKind.Primary => "bit-spr-bpr", + BitColorKind.Secondary => "bit-spr-bsr", + BitColorKind.Tertiary => "bit-spr-btr", + BitColorKind.Transparent => "bit-spr-brr", + _ => null + }); + + ClassBuilder.Register(() => Color switch + { + BitColor.Primary => "bit-spr-pri", + BitColor.Secondary => "bit-spr-sec", + BitColor.Tertiary => "bit-spr-ter", + BitColor.Info => "bit-spr-inf", + BitColor.Success => "bit-spr-suc", + BitColor.Warning => "bit-spr-wrn", + BitColor.SevereWarning => "bit-spr-swr", + BitColor.Error => "bit-spr-err", + BitColor.PrimaryBackground => "bit-spr-pbg", + BitColor.SecondaryBackground => "bit-spr-sbg", + BitColor.TertiaryBackground => "bit-spr-tbg", + BitColor.PrimaryForeground => "bit-spr-pfg", + BitColor.SecondaryForeground => "bit-spr-sfg", + BitColor.TertiaryForeground => "bit-spr-tfg", + BitColor.PrimaryBorder => "bit-spr-pbr", + BitColor.SecondaryBorder => "bit-spr-sbr", + BitColor.TertiaryBorder => "bit-spr-tbr", + _ => null + }); + + ClassBuilder.Register(() => LineStyle switch + { + BitSeparatorLineStyle.Dashed => "bit-spr-dsh", + BitSeparatorLineStyle.Dotted => "bit-spr-dot", _ => null }); @@ -76,6 +218,12 @@ protected override void RegisterCssClasses() protected override void RegisterCssStyles() { + StyleBuilder.Register(() => Styles?.Root); + StyleBuilder.Register(() => AutoSize ? (Vertical ? "height:auto" : "width:auto") : string.Empty); + + StyleBuilder.Register(() => Thickness.HasNoValue() ? null : $"--bit-spr-siz:{Thickness}"); + + StyleBuilder.Register(() => ContentOffset.HasNoValue() ? null : $"--bit-spr-ofs:{ContentOffset}"); } } diff --git a/src/BlazorUI/Bit.BlazorUI/Components/Utilities/Separator/BitSeparator.scss b/src/BlazorUI/Bit.BlazorUI/Components/Utilities/Separator/BitSeparator.scss index 6bb0ea5f79a..9948a972802 100644 --- a/src/BlazorUI/Bit.BlazorUI/Components/Utilities/Separator/BitSeparator.scss +++ b/src/BlazorUI/Bit.BlazorUI/Components/Utilities/Separator/BitSeparator.scss @@ -1,7 +1,9 @@ -@import "../../../Styles/functions.scss"; +@import "../../../Styles/functions.scss"; .bit-spr { position: relative; + --bit-spr-stl: solid; + --bit-spr-siz: #{$siz-divider}; --bit-spr-bg: #{$clr-bg-pri}; --bit-spr-brd: #{$clr-brd-sec}; } @@ -20,11 +22,12 @@ &::before { content: ""; + height: 0; display: block; inset: 50% 0 0; position: absolute; - height: $siz-divider; - background-color: var(--bit-spr-brd); + transform: translateY(-50%); + border-top: var(--bit-spr-siz) var(--bit-spr-stl) var(--bit-spr-brd); } .bit-spr-cnt { @@ -37,10 +40,18 @@ &.bit-spr-srt { text-align: start; + + .bit-spr-cnt { + margin-inline-start: var(--bit-spr-ofs, 0); + } } &.bit-spr-end { text-align: end; + + .bit-spr-cnt { + margin-inline-end: var(--bit-spr-ofs, 0); + } } } @@ -52,12 +63,13 @@ &::after { content: ""; + width: 0; z-index: -1; display: block; inset: 0 0 0 50%; position: absolute; - width: $siz-divider; - background-color: var(--bit-spr-brd); + transform: translateX(-50%); + border-left: var(--bit-spr-siz) var(--bit-spr-stl) var(--bit-spr-brd); } .bit-spr-cnt { @@ -70,43 +82,129 @@ &.bit-spr-srt { vertical-align: top; + + .bit-spr-cnt { + margin-top: var(--bit-spr-ofs, 0); + } } &.bit-spr-end { vertical-align: bottom; + + .bit-spr-cnt { + margin-bottom: var(--bit-spr-ofs, 0); + } } } -.bit-spr-pbg { +.bit-spr-dsh { + --bit-spr-stl: dashed; +} + +.bit-spr-dot { + --bit-spr-stl: dotted; +} + + +.bit-spr-bpg { --bit-spr-bg: #{$clr-bg-pri}; } -.bit-spr-sbg { +.bit-spr-bsg { --bit-spr-bg: #{$clr-bg-sec}; } -.bit-spr-tbg { +.bit-spr-btg { --bit-spr-bg: #{$clr-bg-ter}; } -.bit-spr-rbg { +.bit-spr-brg { --bit-spr-bg: transparent; } -.bit-spr-pbr { +.bit-spr-bpr { --bit-spr-brd: #{$clr-brd-pri}; } -.bit-spr-sbr { +.bit-spr-bsr { --bit-spr-brd: #{$clr-brd-sec}; } -.bit-spr-tbr { +.bit-spr-btr { --bit-spr-brd: #{$clr-brd-ter}; } -.bit-spr-rbr { +.bit-spr-brr { --bit-spr-brd: transparent; } + + +.bit-spr-pri { + --bit-spr-brd: #{$clr-pri}; +} + +.bit-spr-sec { + --bit-spr-brd: #{$clr-sec}; +} + +.bit-spr-ter { + --bit-spr-brd: #{$clr-ter}; +} + +.bit-spr-inf { + --bit-spr-brd: #{$clr-inf}; +} + +.bit-spr-suc { + --bit-spr-brd: #{$clr-suc}; +} + +.bit-spr-wrn { + --bit-spr-brd: #{$clr-wrn}; +} + +.bit-spr-swr { + --bit-spr-brd: #{$clr-swr}; +} + +.bit-spr-err { + --bit-spr-brd: #{$clr-err}; +} + +.bit-spr-pbg { + --bit-spr-brd: #{$clr-bg-pri}; +} + +.bit-spr-sbg { + --bit-spr-brd: #{$clr-bg-sec}; +} + +.bit-spr-tbg { + --bit-spr-brd: #{$clr-bg-ter}; +} + +.bit-spr-pfg { + --bit-spr-brd: #{$clr-fg-pri}; +} + +.bit-spr-sfg { + --bit-spr-brd: #{$clr-fg-sec}; +} + +.bit-spr-tfg { + --bit-spr-brd: #{$clr-fg-ter}; +} + +.bit-spr-pbr { + --bit-spr-brd: #{$clr-brd-pri}; +} + +.bit-spr-sbr { + --bit-spr-brd: #{$clr-brd-sec}; +} + +.bit-spr-tbr { + --bit-spr-brd: #{$clr-brd-ter}; +} diff --git a/src/BlazorUI/Bit.BlazorUI/Components/Utilities/Separator/BitSeparatorAlignContent.cs b/src/BlazorUI/Bit.BlazorUI/Components/Utilities/Separator/BitSeparatorAlignContent.cs index 390d6f9a7d3..230e1f4ccfd 100644 --- a/src/BlazorUI/Bit.BlazorUI/Components/Utilities/Separator/BitSeparatorAlignContent.cs +++ b/src/BlazorUI/Bit.BlazorUI/Components/Utilities/Separator/BitSeparatorAlignContent.cs @@ -1,8 +1,22 @@ -namespace Bit.BlazorUI; +namespace Bit.BlazorUI; +/// +/// Where the content of the sits along its line. +/// public enum BitSeparatorAlignContent { + /// + /// The content sits at the start of the line - the top of a vertical separator. + /// Start, + + /// + /// The content sits at the middle of the line, which is the default. + /// Center, + + /// + /// The content sits at the end of the line - the bottom of a vertical separator. + /// End } diff --git a/src/BlazorUI/Bit.BlazorUI/Components/Utilities/Separator/BitSeparatorClassStyles.cs b/src/BlazorUI/Bit.BlazorUI/Components/Utilities/Separator/BitSeparatorClassStyles.cs new file mode 100644 index 00000000000..ad943ca86cf --- /dev/null +++ b/src/BlazorUI/Bit.BlazorUI/Components/Utilities/Separator/BitSeparatorClassStyles.cs @@ -0,0 +1,18 @@ +namespace Bit.BlazorUI; + +/// +/// Custom CSS classes/styles for the different parts of the component. +/// +public class BitSeparatorClassStyles +{ + /// + /// Custom CSS classes/styles for the root element of the separator. + /// + public string? Root { get; set; } + + /// + /// Custom CSS classes/styles for the element wrapping the ChildContent of the separator, which is + /// only rendered while the separator has content. + /// + public string? Content { get; set; } +} diff --git a/src/BlazorUI/Bit.BlazorUI/Components/Utilities/Separator/BitSeparatorLineStyle.cs b/src/BlazorUI/Bit.BlazorUI/Components/Utilities/Separator/BitSeparatorLineStyle.cs new file mode 100644 index 00000000000..c61f7beec14 --- /dev/null +++ b/src/BlazorUI/Bit.BlazorUI/Components/Utilities/Separator/BitSeparatorLineStyle.cs @@ -0,0 +1,22 @@ +namespace Bit.BlazorUI; + +/// +/// The style the line of the is drawn in. +/// +public enum BitSeparatorLineStyle +{ + /// + /// A continuous line, which is the default. + /// + Solid, + + /// + /// A line of short dashes. + /// + Dashed, + + /// + /// A line of dots. + /// + Dotted +} 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 4686c6c4f06..ba5a98470da 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 @@ -1,17 +1,23 @@ -@page "/components/separator" +@page "/components/separator" + Description="A Separator is a component that visually separates content into groups, as a horizontal or vertical line that can carry a label and is restyled through the theme." />
+
+ On its own, a separator draws the theme's hairline across the full width of its container. Anything + given as its content - a run of text, an icon, any markup - sits on the line, masking the part of it + underneath, and also names the separator to assistive technologies. +
Simple Separator
@@ -25,6 +31,10 @@ +
+ Vertical stands the line up between items laid out side by side. A vertical separator takes its + height from its container, so the container needs a height of its own - here a fixed-height flex row. +
Item 1 @@ -39,6 +49,11 @@ +
+ AlignContent puts the content at the start, the middle or the end of the line. The alignment is + direction-aware on a horizontal separator - start and end follow the reading direction - and on a + vertical one it means the top, the middle or the bottom. +
Horizontal

Center

@@ -54,7 +69,32 @@
- + +
+ ContentOffset pushes the content away from the edge of the line it is aligned to, as any CSS + length - on a horizontal separator a percentage measures against the length of the line. It only means + anything while AlignContent is Start or End, since centered content has no edge to be offset + from, and it is direction-aware: in RTL, a start-aligned offset pushes from the right. +
+
Horizontal

+ Start, 2rem +

+ End, 10% +


+
Vertical

+
+ Start + End +
+ + + +
+ A horizontal separator is as wide as its container. Inside a flex container whose + align-items is not stretch, that width collapses to the content instead - + AutoSize embraces this and sizes the separator to its content (its height, for a vertical one), + where the default keeps forcing the full length. +
While using inside a flex container with align-items css style:


@@ -64,15 +104,85 @@
- -
Background:

- Primary + +
+ LineStyle draws the line solid, dashed or dotted. The default is solid; a dashed or dotted rule + reads as a softer break than a solid one, and pairs well with Thickness when the dots of a + hairline are too small to see. +
+
+ Solid +

+ Dashed +

+ Dotted +

+
+ Item 1 + + Item 2 + + Item 3 +
+
+ + + +
+ Thickness sets the weight of the line, as any CSS length. Leaving it unset keeps the hairline + the theme draws every divider at; a heavier rule marks a stronger break in the content. +
+
+ Default +

+ 3px +

+ 0.5rem +

+ Dotted 3px +
+ + + +
+ A separator reports itself to assistive technologies with the separator role, so a screen + reader announces the boundary between groups. A page can also carry many rules that mean nothing - + each announced as "separator" is noise - and Decorative removes such a separator from the + accessibility tree while keeping its looks. The two below are visually identical; only what a screen + reader hears differs. +
+
+
Announced (role="separator")
+ +

+
Decorative (not announced)
+ +
+ + + +
+ Color paints the line in one of the theme's roles rather than in a literal color, so every + preset and both schemes re-skin it. Border instead picks between the neutral border tiers of + the theme (and loses to Color where both are set), while Background colors the patch the + content sits on - it masks the line, so it should match the surface the separator is drawn on. +
+
Color:

+ Primary
- Secondary + Secondary
- Tertiary + Tertiary
- Transparent + Info +
+ Success +
+ Warning +
+ SevereWarning +
+ Error


Border:

Primary @@ -82,6 +192,53 @@ Tertiary
Transparent +


+
Background:

+ Primary +
+ Secondary +
+ Tertiary +
+ Transparent + + + +
+ Style and Class reach the root element - a max-width with an auto margin, + for one, shortens the line the way a length prop would - and Styles and Classes reach + each part of the component by name: the Root and the Content the label renders in. The + classed example below restyles the line itself into a gradient through the root class. +
+
+
Component's Style & Class:

+ Styled +

+ Classed +


+
Styles & Classes:

+ + Styles + +

+ Classes +
+ + + +
+ Dir renders the separator in a right-to-left direction, and with it the meaning of start and + end flips: content aligned to the start of the line sits on the right. The direction is also cascaded, + so a separator inside an RTL container inherits it. +
+
+ جداکننده +

+ ابتدا +

+ انتها +
-
\ 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 7b99357d4c3..888da47591e 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 @@ -1,4 +1,4 @@ -namespace Bit.BlazorUI.Demo.Client.Core.Pages.Components.Utilities.Separator; +namespace Bit.BlazorUI.Demo.Client.Core.Pages.Components.Utilities.Separator; public partial class BitSeparatorDemo { @@ -7,9 +7,9 @@ public partial class BitSeparatorDemo new() { Name = "AlignContent", - Type = "BitSeparatorAlignContent", - DefaultValue = "BitSeparatorAlignContent.Center", - Description = "Where the content should be aligned in the separator.", + Type = "BitSeparatorAlignContent?", + DefaultValue = "null", + Description = "Where the content should be aligned in the separator. Defaults to the center of the line.", LinkType = LinkType.Link, Href = "#separator-align-enum", }, @@ -18,14 +18,14 @@ public partial class BitSeparatorDemo Name = "AutoSize", Type = "bool", DefaultValue = "false", - Description = "Renders the separator with auto width or height." + Description = "Renders the separator with auto width or height, sizing it to its content instead of its container." }, new() { Name = "Background", Type = "BitColorKind?", DefaultValue = "null", - Description = "The color kind of the background of the separator.", + Description = "The color kind of the background of the content of the separator, which masks the line underneath it.", LinkType = LinkType.Link, Href = "#color-kind-enum", }, @@ -34,7 +34,7 @@ public partial class BitSeparatorDemo Name = "Border", Type = "BitColorKind?", DefaultValue = "null", - Description = "The color kind of the border of the separator.", + Description = "The color kind of the line of the separator, out of the neutral border tiers of the theme.", LinkType = LinkType.Link, Href = "#color-kind-enum", }, @@ -43,44 +43,269 @@ public partial class BitSeparatorDemo Name = "ChildContent", Type = "RenderFragment?", DefaultValue = "null", - Description = "The content of the Separator, it can be any custom tag or text." + Description = "The content of the Separator, it can be any custom tag or text. It sits on the line and also names the separator to assistive technologies." + }, + new() + { + Name = "Classes", + Type = "BitSeparatorClassStyles?", + DefaultValue = "null", + Description = "Custom CSS classes for different parts of the separator.", + LinkType = LinkType.Link, + Href = "#separator-class-styles", + }, + new() + { + Name = "Color", + Type = "BitColor?", + DefaultValue = "null", + Description = "The general color of the line of the separator, painting it in one of the roles of the theme. Wins over Border.", + LinkType = LinkType.Link, + Href = "#color-enum", + }, + new() + { + Name = "ContentOffset", + Type = "string?", + DefaultValue = "null", + Description = "The offset of the content from the edge of the line it is aligned to, as any CSS length. Only takes effect while AlignContent is Start or End." + }, + new() + { + Name = "Decorative", + Type = "bool", + DefaultValue = "false", + Description = "Removes the separator from the accessibility tree, for a separator that is purely visual and should not be announced." + }, + new() + { + Name = "LineStyle", + Type = "BitSeparatorLineStyle?", + DefaultValue = "null", + Description = "The style the line of the separator is drawn in: solid, dashed or dotted.", + LinkType = LinkType.Link, + Href = "#separator-line-style-enum", + }, + new() + { + Name = "Styles", + Type = "BitSeparatorClassStyles?", + DefaultValue = "null", + Description = "Custom CSS styles for different parts of the separator.", + LinkType = LinkType.Link, + Href = "#separator-class-styles", + }, + new() + { + Name = "Thickness", + Type = "string?", + DefaultValue = "null", + Description = "The thickness of the line of the separator, as any CSS length. Defaults to the theme's divider hairline." }, new() { Name = "Vertical", Type = "bool", DefaultValue = "false", - Description = "Whether the element is a vertical separator." + Description = "Whether the element is a vertical separator. A vertical separator takes its height from its container." } ]; + private readonly List componentSubClasses = + [ + new() + { + Id = "separator-class-styles", + Title = "BitSeparatorClassStyles", + Description = "", + Parameters = + [ + new() + { + Name = "Root", + Type = "string?", + DefaultValue = "null", + Description = "Custom CSS classes/styles for the root element of the separator.", + }, + new() + { + Name = "Content", + Type = "string?", + DefaultValue = "null", + Description = "Custom CSS classes/styles for the element wrapping the ChildContent of the separator, which is only rendered while the separator has content.", + }, + ] + }, + ]; + private readonly List componentSubEnums = [ new() { Id = "separator-align-enum", Name = "BitSeparatorAlignContent", - Description = "", + Description = "Where the content of the separator sits along its line.", Items = [ new() { Name = "Start", + Description = "The content sits at the start of the line - the top of a vertical separator.", Value = "0", }, new() { Name = "Center", + Description = "The content sits at the middle of the line, which is the default.", Value = "1", }, new() { Name = "End", + Description = "The content sits at the end of the line - the bottom of a vertical separator.", + Value = "2", + }, + ] + }, + new() + { + Id = "separator-line-style-enum", + Name = "BitSeparatorLineStyle", + Description = "The style the line of the separator is drawn in.", + Items = + [ + new() + { + Name = "Solid", + Description = "A continuous line, which is the default.", + Value = "0", + }, + new() + { + Name = "Dashed", + Description = "A line of short dashes.", + Value = "1", + }, + new() + { + Name = "Dotted", + Description = "A line of dots.", Value = "2", }, ] }, new() + { + Id = "color-enum", + Name = "BitColor", + Description = "Defines the general colors available in the bit BlazorUI.", + Items = + [ + new() + { + Name = "Primary", + Description = "Primary general color.", + Value = "0", + }, + new() + { + Name = "Secondary", + Description = "Secondary general color.", + Value = "1", + }, + new() + { + Name = "Tertiary", + Description = "Tertiary general color.", + Value = "2", + }, + new() + { + Name = "Info", + Description = "Info general color.", + Value = "3", + }, + new() + { + Name = "Success", + Description = "Success general color.", + Value = "4", + }, + new() + { + Name = "Warning", + Description = "Warning general color.", + Value = "5", + }, + new() + { + Name = "SevereWarning", + Description = "SevereWarning general color.", + Value = "6", + }, + new() + { + Name = "Error", + Description = "Error general color.", + Value = "7", + }, + new() + { + Name = "PrimaryBackground", + Description = "Primary background color.", + Value = "8", + }, + new() + { + Name = "SecondaryBackground", + Description = "Secondary background color.", + Value = "9", + }, + new() + { + Name = "TertiaryBackground", + Description = "Tertiary background color.", + Value = "10", + }, + new() + { + Name = "PrimaryForeground", + Description = "Primary foreground color.", + Value = "11", + }, + new() + { + Name = "SecondaryForeground", + Description = "Secondary foreground color.", + Value = "12", + }, + new() + { + Name = "TertiaryForeground", + Description = "Tertiary foreground color.", + Value = "13", + }, + new() + { + Name = "PrimaryBorder", + Description = "Primary border color.", + Value = "14", + }, + new() + { + Name = "SecondaryBorder", + Description = "Secondary border color.", + Value = "15", + }, + new() + { + Name = "TertiaryBorder", + Description = "Tertiary border color.", + Value = "16", + }, + ] + }, + new() { Id = "color-kind-enum", Name = "BitColorKind", diff --git a/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Utilities/Separator/BitSeparatorDemo.razor.samples.cs b/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Utilities/Separator/BitSeparatorDemo.razor.samples.cs index 27e54cfdbd0..576d61f46ac 100644 --- a/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Utilities/Separator/BitSeparatorDemo.razor.samples.cs +++ b/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Utilities/Separator/BitSeparatorDemo.razor.samples.cs @@ -1,4 +1,4 @@ -namespace Bit.BlazorUI.Demo.Client.Core.Pages.Components.Utilities.Separator; +namespace Bit.BlazorUI.Demo.Client.Core.Pages.Components.Utilities.Separator; public partial class BitSeparatorDemo { @@ -44,19 +44,104 @@ public partial class BitSeparatorDemo "; private readonly string example4RazorCode = @" +Start, 2rem +End, 10% + +
+ Start + End +
"; + + private readonly string example5RazorCode = @"
Default AutoSize
"; - private readonly string example5RazorCode = @" -Primary -Secondary -Tertiary -Transparent + private readonly string example6RazorCode = @" + + + +Solid +Dashed +Dotted + +
+ Item 1 + + Item 2 + + Item 3 +
"; + + private readonly string example7RazorCode = @" +Default +3px +0.5rem +Dotted 3px"; + + private readonly string example8RazorCode = @" + +"; + + private readonly string example9RazorCode = @" +Primary +Secondary +Tertiary +Info +Success +Warning +SevereWarning +Error Primary Secondary Tertiary -Transparent"; +Transparent + +Primary +Secondary +Tertiary +Transparent"; + + private readonly string example10RazorCode = @" + + + +Styled +Classed + + + Styles + +Classes"; + + private readonly string example11RazorCode = @" +
+ جداکننده + ابتدا + انتها +
"; } diff --git a/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Utilities/Separator/BitSeparatorDemo.razor.scss b/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Utilities/Separator/BitSeparatorDemo.razor.scss index 0b37a7f5831..05b3db844d0 100644 --- a/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Utilities/Separator/BitSeparatorDemo.razor.scss +++ b/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Utilities/Separator/BitSeparatorDemo.razor.scss @@ -1,7 +1,24 @@ -.custom-horizontal-layout { +.custom-horizontal-layout { gap: 1rem; height: 3rem; display: flex; white-space: nowrap; align-items: center; } + +// The classes below are passed to the component as parameters and land on markup the component itself +// writes, so they need ::deep to escape this stylesheet's scope. +::deep { + .custom-class::before { + border: none; + height: 3px; + background: linear-gradient(90deg, transparent, dodgerblue, transparent); + } + + .custom-content { + color: white; + padding: 0.25rem 1rem; + border-radius: 1rem; + background: linear-gradient(90deg, mediumorchid, dodgerblue); + } +} diff --git a/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Shared/MainLayout.razor.NavItems.cs b/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Shared/MainLayout.razor.NavItems.cs index 9ea656732e4..812f65c7639 100644 --- a/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Shared/MainLayout.razor.NavItems.cs +++ b/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Shared/MainLayout.razor.NavItems.cs @@ -150,7 +150,7 @@ public partial class MainLayout new() { Text = "Overlay", Url = "/components/overlay" }, new() { Text = "Params", Url = "/components/params" }, new() { Text = "PullToRefresh", Url = "/components/pulltorefresh" }, - new() { Text = "Separator", Url = "/components/separator" }, + new() { Text = "Separator", Url = "/components/separator", Description = "Divider" }, new() { Text = "Sticky", Url = "/components/sticky" }, new() { Text = "SwipeTrap", Url = "/components/swipetrap" }, new() { Text = "Text", Url = "/components/text" }, diff --git a/src/BlazorUI/Tests/Bit.BlazorUI.Tests/Components/Utilities/Separator/BitSeparatorTests.cs b/src/BlazorUI/Tests/Bit.BlazorUI.Tests/Components/Utilities/Separator/BitSeparatorTests.cs index 8ff28fe6d25..6e54d59c9e0 100644 --- a/src/BlazorUI/Tests/Bit.BlazorUI.Tests/Components/Utilities/Separator/BitSeparatorTests.cs +++ b/src/BlazorUI/Tests/Bit.BlazorUI.Tests/Components/Utilities/Separator/BitSeparatorTests.cs @@ -1,4 +1,4 @@ -using Microsoft.VisualStudio.TestTools.UnitTesting; +using Microsoft.VisualStudio.TestTools.UnitTesting; using Bunit; namespace Bit.BlazorUI.Tests.Components.Utilities.Separator; @@ -11,7 +11,7 @@ public void BitSeparatorShouldRenderExpectedElement() { var component = RenderComponent(); - component.MarkupMatches(@"
"); + component.MarkupMatches(@"
"); } [TestMethod, @@ -27,7 +27,7 @@ public void BitSeparatorShouldRespectIsEnabled(bool isEnabled) var cssClass = isEnabled ? null : " bit-dis"; - component.MarkupMatches(@$"
"); + component.MarkupMatches(@$"
"); } [TestMethod] @@ -35,14 +35,14 @@ public void BitSeparatorShouldRespectIsEnabledChangingAfterRender() { var component = RenderComponent(); - component.MarkupMatches(@"
"); + component.MarkupMatches(@"
"); component.Render(parameters => { parameters.Add(p => p.IsEnabled, false); }); - component.MarkupMatches(@"
"); + component.MarkupMatches(@"
"); } [TestMethod, @@ -59,11 +59,11 @@ public void BitSeparatorShouldRespectStyle(string style) if (style.HasValue()) { - component.MarkupMatches(@$"
"); + component.MarkupMatches(@$"
"); } else { - component.MarkupMatches(@"
"); + component.MarkupMatches(@"
"); } } @@ -72,7 +72,7 @@ public void BitSeparatorShouldRespectStyleChangingAfterRender() { var component = RenderComponent(); - component.MarkupMatches(@"
"); + component.MarkupMatches(@"
"); var style = "padding: 1rem;"; component.Render(parameters => @@ -80,7 +80,7 @@ public void BitSeparatorShouldRespectStyleChangingAfterRender() parameters.Add(p => p.Style, style); }); - component.MarkupMatches(@$"
"); + component.MarkupMatches(@$"
"); } [TestMethod, @@ -96,7 +96,7 @@ public void BitSeparatorShouldRespectClass(string @class) var cssClass = @class.HasValue() ? $" {@class}" : null; - component.MarkupMatches(@$"
"); + component.MarkupMatches(@$"
"); } [TestMethod] @@ -104,7 +104,7 @@ public void BitSeparatorShouldRespectClassChangingAfterRender() { var component = RenderComponent(); - component.MarkupMatches(@"
"); + component.MarkupMatches(@"
"); var cssClass = "test-class"; @@ -113,7 +113,7 @@ public void BitSeparatorShouldRespectClassChangingAfterRender() parameters.Add(p => p.Class, cssClass); }); - component.MarkupMatches(@$"
"); + component.MarkupMatches(@$"
"); } [TestMethod, @@ -129,7 +129,7 @@ public void BitSeparatorShouldRespectId(string id) var expectedId = id.HasValue() ? id : component.Instance.UniqueId.ToString(); - component.MarkupMatches(@$"
"); + component.MarkupMatches(@$"
"); } [TestMethod, @@ -148,11 +148,11 @@ public void BitSeparatorShouldRespectDir(BitDir? dir) if (dir.HasValue) { var cssClass = dir is BitDir.Rtl ? " bit-rtl" : null; - component.MarkupMatches(@$"
"); + component.MarkupMatches(@$"
"); } else { - component.MarkupMatches(@"
"); + component.MarkupMatches(@"
"); } } @@ -161,14 +161,14 @@ public void BitSeparatorShouldRespectDirChangingAfterRender() { var component = RenderComponent(); - component.MarkupMatches(@"
"); + component.MarkupMatches(@"
"); component.Render(parameters => { parameters.Add(p => p.Dir, BitDir.Ltr); }); - component.MarkupMatches(@"
"); + component.MarkupMatches(@"
"); } [TestMethod, @@ -186,13 +186,13 @@ public void BitSeparatorShouldRespectVisibility(BitVisibility visibility) switch (visibility) { case BitVisibility.Visible: - component.MarkupMatches(@"
"); + component.MarkupMatches(@"
"); break; case BitVisibility.Hidden: - component.MarkupMatches(@"
"); + component.MarkupMatches(@"
"); break; case BitVisibility.Collapsed: - component.MarkupMatches(@"
"); + component.MarkupMatches(@"
"); break; } } @@ -202,14 +202,14 @@ public void BitSeparatorShouldRespectVisibilityChangingAfterRender() { var component = RenderComponent(); - component.MarkupMatches(@"
"); + component.MarkupMatches(@"
"); component.Render(parameters => { parameters.Add(p => p.Visibility, BitVisibility.Collapsed); }); - component.MarkupMatches(@"
"); + component.MarkupMatches(@"
"); } [TestMethod, @@ -225,11 +225,11 @@ public void BitSeparatorShouldRespectAriaLabel(string ariaLabel) if (ariaLabel.HasValue()) { - component.MarkupMatches(@$"
"); + component.MarkupMatches(@$"
"); } else { - component.MarkupMatches(@"
"); + component.MarkupMatches(@"
"); } } @@ -250,25 +250,48 @@ public void BitSeparatorShouldRespectChildContent(string childContent) if (childContent is not null) { - component.MarkupMatches(@$"
-
+ var contentId = $"{component.Instance.UniqueId}-cnt"; + + component.MarkupMatches(@$"
+
{childContent}
"); } else { - component.MarkupMatches(@"
"); + component.MarkupMatches(@"
"); } } + [TestMethod] + public void BitSeparatorShouldNotRenderAriaLabelledbyWhenAriaLabelIsSet() + { + var component = RenderComponent(parameters => + { + parameters.Add(p => p.AriaLabel, "Bit Blazor UI"); + parameters.AddChildContent("Bit Blazor UI"); + }); + + var contentId = $"{component.Instance.UniqueId}-cnt"; + + component.MarkupMatches(@$"
+
+ Bit Blazor UI +
+
"); + } + [TestMethod] public void BitSeparatorShouldRespectHtmlAttributes() { var component = RenderComponent(); - component.MarkupMatches(@"
-
+ var separator = component.FindComponent(); + var contentId = $"{separator.Instance.UniqueId}-cnt"; + + component.MarkupMatches(@$"
+
I'm a separator
"); @@ -293,7 +316,7 @@ public void BitSeparatorShouldRespectAlignContent(BitSeparatorAlignContent align _ => "bit-spr-ctr" }; - component.MarkupMatches(@$"
"); + component.MarkupMatches(@$"
"); } [TestMethod, @@ -308,11 +331,12 @@ public void BitSeparatorShouldRespectVertical(bool vertical) parameters.AddChildContent("Bit Blazor UI"); }); + var contentId = $"{component.Instance.UniqueId}-cnt"; var cssClass = vertical ? "bit-spr-vrt" : "bit-spr-hrz"; - var ariaOrientation = vertical ? "vertical" : "horizontal"; + var ariaOrientation = vertical ? @" aria-orientation=""vertical""" : null; - component.MarkupMatches(@$"
-
+ component.MarkupMatches(@$"
+
Bit Blazor UI
"); @@ -326,8 +350,10 @@ public void BitSeparatorShouldRespectVerticalChangingAfterRender() parameters.AddChildContent("Bit Blazor UI"); }); - component.MarkupMatches(@"
-
+ var contentId = $"{component.Instance.UniqueId}-cnt"; + + component.MarkupMatches(@$"
+
Bit Blazor UI
"); @@ -337,13 +363,49 @@ Bit Blazor UI parameters.Add(p => p.Vertical, true); }); - component.MarkupMatches(@"
-
+ component.MarkupMatches(@$"
+
Bit Blazor UI
"); } + [TestMethod, + DataRow(true), + DataRow(false) + ] + public void BitSeparatorShouldRespectDecorative(bool decorative) + { + var component = RenderComponent(parameters => + { + parameters.Add(p => p.Decorative, decorative); + }); + + var role = decorative ? "none" : "separator"; + + component.MarkupMatches(@$"
"); + } + + [TestMethod] + public void BitSeparatorShouldNotRenderAriaAttributesWhenDecorative() + { + var component = RenderComponent(parameters => + { + parameters.Add(p => p.Decorative, true); + parameters.Add(p => p.Vertical, true); + parameters.Add(p => p.AriaLabel, "Bit Blazor UI"); + parameters.AddChildContent("Bit Blazor UI"); + }); + + var contentId = $"{component.Instance.UniqueId}-cnt"; + + component.MarkupMatches(@$"
+
+ Bit Blazor UI +
+
"); + } + [TestMethod, DataRow(true), DataRow(false) @@ -357,11 +419,11 @@ public void BitSeparatorShouldRespectAutoSize(bool autoSize) if (autoSize) { - component.MarkupMatches(@"
"); + component.MarkupMatches(@"
"); } else { - component.MarkupMatches(@"
"); + component.MarkupMatches(@"
"); } } @@ -370,14 +432,54 @@ public void BitSeparatorShouldRespectAutoSizeChangingAfterRender() { var component = RenderComponent(); - component.MarkupMatches(@"
"); + component.MarkupMatches(@"
"); component.Render(parameters => { parameters.Add(p => p.AutoSize, true); }); - component.MarkupMatches(@"
"); + component.MarkupMatches(@"
"); + } + + [TestMethod, + DataRow(true), + DataRow(false) + ] + public void BitSeparatorShouldRespectAutoSizeInVertical(bool autoSize) + { + var component = RenderComponent(parameters => + { + parameters.Add(p => p.AutoSize, autoSize); + parameters.Add(p => p.Vertical, true); + }); + + if (autoSize) + { + component.MarkupMatches(@"
"); + } + else + { + component.MarkupMatches(@"
"); + } + } + + [TestMethod] + public void BitSeparatorShouldRespectAutoSizeChangingAfterRenderInVertical() + { + var component = RenderComponent(parameters => + { + parameters.Add(p => p.Vertical, true); + }); + + component.MarkupMatches(@"
"); + + component.Render(parameters => + { + parameters.Add(p => p.AutoSize, true); + }); + + component.MarkupMatches(@"
"); } [TestMethod, @@ -396,14 +498,14 @@ public void BitSeparatorShouldRespectBackground(BitColorKind? background) var cssClass = background switch { - BitColorKind.Primary => "bit-spr-pbg", - BitColorKind.Secondary => "bit-spr-sbg", - BitColorKind.Tertiary => "bit-spr-tbg", - BitColorKind.Transparent => "bit-spr-rbg", + BitColorKind.Primary => "bit-spr-bpg", + BitColorKind.Secondary => "bit-spr-bsg", + BitColorKind.Tertiary => "bit-spr-btg", + BitColorKind.Transparent => "bit-spr-brg", _ => null }; - component.MarkupMatches(@$"
"); + component.MarkupMatches(@$"
"); } [TestMethod] @@ -411,14 +513,14 @@ public void BitSeparatorShouldRespectBackgroundChangingAfterRender() { var component = RenderComponent(); - component.MarkupMatches(@"
"); + component.MarkupMatches(@"
"); component.Render(parameters => { parameters.Add(p => p.Background, BitColorKind.Secondary); }); - component.MarkupMatches(@"
"); + component.MarkupMatches(@"
"); } [TestMethod, @@ -437,14 +539,14 @@ public void BitSeparatorShouldRespectBorder(BitColorKind? border) var cssClass = border switch { - BitColorKind.Primary => "bit-spr-pbr", - BitColorKind.Secondary => "bit-spr-sbr", - BitColorKind.Tertiary => "bit-spr-tbr", - BitColorKind.Transparent => "bit-spr-rbr", + BitColorKind.Primary => "bit-spr-bpr", + BitColorKind.Secondary => "bit-spr-bsr", + BitColorKind.Tertiary => "bit-spr-btr", + BitColorKind.Transparent => "bit-spr-brr", _ => null }; - component.MarkupMatches(@$"
"); + component.MarkupMatches(@$"
"); } [TestMethod] @@ -452,53 +554,211 @@ public void BitSeparatorShouldRespectBorderChangingAfterRender() { var component = RenderComponent(); - component.MarkupMatches(@"
"); + component.MarkupMatches(@"
"); component.Render(parameters => { parameters.Add(p => p.Border, BitColorKind.Secondary); }); - component.MarkupMatches(@"
"); + component.MarkupMatches(@"
"); } [TestMethod, - DataRow(true), - DataRow(false) + DataRow(null), + DataRow(BitColor.Primary), + DataRow(BitColor.Secondary), + DataRow(BitColor.Tertiary), + DataRow(BitColor.Info), + DataRow(BitColor.Success), + DataRow(BitColor.Warning), + DataRow(BitColor.SevereWarning), + DataRow(BitColor.Error), + DataRow(BitColor.PrimaryBackground), + DataRow(BitColor.SecondaryBackground), + DataRow(BitColor.TertiaryBackground), + DataRow(BitColor.PrimaryForeground), + DataRow(BitColor.SecondaryForeground), + DataRow(BitColor.TertiaryForeground), + DataRow(BitColor.PrimaryBorder), + DataRow(BitColor.SecondaryBorder), + DataRow(BitColor.TertiaryBorder) ] - public void BitSeparatorShouldRespectAutoSizeInVertical(bool autoSize) + public void BitSeparatorShouldRespectColor(BitColor? color) { var component = RenderComponent(parameters => { - parameters.Add(p => p.AutoSize, autoSize); - parameters.Add(p => p.Vertical, true); + parameters.Add(p => p.Color, color); }); - if (autoSize) + var cssClass = color switch + { + BitColor.Primary => "bit-spr-pri", + BitColor.Secondary => "bit-spr-sec", + BitColor.Tertiary => "bit-spr-ter", + BitColor.Info => "bit-spr-inf", + BitColor.Success => "bit-spr-suc", + BitColor.Warning => "bit-spr-wrn", + BitColor.SevereWarning => "bit-spr-swr", + BitColor.Error => "bit-spr-err", + BitColor.PrimaryBackground => "bit-spr-pbg", + BitColor.SecondaryBackground => "bit-spr-sbg", + BitColor.TertiaryBackground => "bit-spr-tbg", + BitColor.PrimaryForeground => "bit-spr-pfg", + BitColor.SecondaryForeground => "bit-spr-sfg", + BitColor.TertiaryForeground => "bit-spr-tfg", + BitColor.PrimaryBorder => "bit-spr-pbr", + BitColor.SecondaryBorder => "bit-spr-sbr", + BitColor.TertiaryBorder => "bit-spr-tbr", + _ => null + }; + + component.MarkupMatches(@$"
"); + } + + [TestMethod] + public void BitSeparatorShouldRespectColorChangingAfterRender() + { + var component = RenderComponent(); + + component.MarkupMatches(@"
"); + + component.Render(parameters => + { + parameters.Add(p => p.Color, BitColor.Success); + }); + + component.MarkupMatches(@"
"); + } + + [TestMethod, + DataRow(null), + DataRow(BitSeparatorLineStyle.Solid), + DataRow(BitSeparatorLineStyle.Dashed), + DataRow(BitSeparatorLineStyle.Dotted) + ] + public void BitSeparatorShouldRespectLineStyle(BitSeparatorLineStyle? lineStyle) + { + var component = RenderComponent(parameters => + { + parameters.Add(p => p.LineStyle, lineStyle); + }); + + var cssClass = lineStyle switch + { + BitSeparatorLineStyle.Dashed => "bit-spr-dsh ", + BitSeparatorLineStyle.Dotted => "bit-spr-dot ", + _ => null + }; + + component.MarkupMatches(@$"
"); + } + + [TestMethod] + public void BitSeparatorShouldRespectLineStyleChangingAfterRender() + { + var component = RenderComponent(); + + component.MarkupMatches(@"
"); + + component.Render(parameters => + { + parameters.Add(p => p.LineStyle, BitSeparatorLineStyle.Dashed); + }); + + component.MarkupMatches(@"
"); + } + + [TestMethod, + DataRow("3px"), + DataRow("0.5rem"), + DataRow(null) + ] + public void BitSeparatorShouldRespectThickness(string thickness) + { + var component = RenderComponent(parameters => { - component.MarkupMatches(@"
"); + parameters.Add(p => p.Thickness, thickness); + }); + + if (thickness.HasValue()) + { + component.MarkupMatches(@$"
"); } else { - component.MarkupMatches(@"
"); + component.MarkupMatches(@"
"); } } [TestMethod] - public void BitSeparatorShouldRespectAutoSizeChangingAfterRenderInVertical() + public void BitSeparatorShouldRespectThicknessChangingAfterRender() + { + var component = RenderComponent(); + + component.MarkupMatches(@"
"); + + component.Render(parameters => + { + parameters.Add(p => p.Thickness, "3px"); + }); + + component.MarkupMatches(@"
"); + } + + [TestMethod, + DataRow("2rem"), + DataRow("10%"), + DataRow(null) + ] + public void BitSeparatorShouldRespectContentOffset(string contentOffset) { var component = RenderComponent(parameters => { - parameters.Add(p => p.Vertical, true); + parameters.Add(p => p.ContentOffset, contentOffset); }); - component.MarkupMatches(@"
"); + if (contentOffset.HasValue()) + { + component.MarkupMatches(@$"
"); + } + else + { + component.MarkupMatches(@"
"); + } + } + + [TestMethod] + public void BitSeparatorShouldRespectContentOffsetChangingAfterRender() + { + var component = RenderComponent(); + + component.MarkupMatches(@"
"); component.Render(parameters => { - parameters.Add(p => p.AutoSize, true); + parameters.Add(p => p.ContentOffset, "2rem"); }); - component.MarkupMatches(@"
"); + component.MarkupMatches(@"
"); + } + + [TestMethod] + public void BitSeparatorShouldRespectClassStyles() + { + var component = RenderComponent(parameters => + { + parameters.Add(p => p.Classes, new BitSeparatorClassStyles { Root = "custom-root", Content = "custom-content" }); + parameters.Add(p => p.Styles, new BitSeparatorClassStyles { Root = "margin: 1rem;", Content = "color: red;" }); + parameters.AddChildContent("Bit Blazor UI"); + }); + + var contentId = $"{component.Instance.UniqueId}-cnt"; + + component.MarkupMatches(@$"
+
+ Bit Blazor UI +
+
"); } }