diff --git a/src/BlazorUI/Bit.BlazorUI/Components/Utilities/Label/BitLabel.cs b/src/BlazorUI/Bit.BlazorUI/Components/Utilities/Label/BitLabel.cs
new file mode 100644
index 00000000000..bb4f4600a31
--- /dev/null
+++ b/src/BlazorUI/Bit.BlazorUI/Components/Utilities/Label/BitLabel.cs
@@ -0,0 +1,373 @@
+using System.Globalization;
+using System.Diagnostics.CodeAnalysis;
+using Microsoft.AspNetCore.Components.CompilerServices;
+
+namespace Bit.BlazorUI;
+
+///
+/// Labels give a name or a title to a control or to a group of controls, including text fields, check boxes,
+/// combo boxes, radio buttons and drop-down menus.
+///
+///
+/// The component renders a native "label" element, so the browser does the binding of itself: clicking the label
+/// moves the focus to the control it names, and a screen reader announces that control by the label's text. The
+/// control is named either by , which points at the id of a control anywhere on the page, or by
+/// putting the control inside the label's own content.
+///
+/// A native label may only name a single form control, which is why is there: the caption of a
+/// group of controls - a set of radio buttons, a pair of range inputs - is not a label element but a plain element
+/// referenced by the group's aria-labelledby, and naming another tag here is what renders it as one while keeping
+/// the same look.
+///
+/// and render the necessity of the field beside the text. Only one of
+/// the two is ever rendered - a required field is not an optional one - and the default required asterisk is a
+/// decoration that assistive technologies are meant to skip, since what makes a field announced as required is the
+/// "required" (or "aria-required") attribute of the control itself, not a star in the text beside it.
+///
+public partial class BitLabel : BitComponentBase
+{
+ ///
+ /// Gets or sets the cascading parameters for the label component.
+ ///
+ ///
+ /// This property receives its value from an ancestor component via Blazor's cascading parameter mechanism.
+ ///
+ /// The intended use is to allow shared configuration or settings to be applied to multiple label components through the component.
+ ///
+ [CascadingParameter(Name = BitLabelParams.ParamName)]
+ public BitLabelParams? CascadingParameters { get; set; }
+
+
+
+ ///
+ /// The content of the label, which can be a text or any custom markup.
+ ///
+ ///
+ /// A form control put inside this content is named by the label without needing , which is the
+ /// implicit association of HTML and the one way to label a control that has no id of its own.
+ ///
+ [Parameter] public RenderFragment? ChildContent { get; set; }
+
+ ///
+ /// Custom CSS classes for the different parts of the label.
+ ///
+ [Parameter, ResetClassBuilder]
+ public BitLabelClassStyles? Classes { get; set; }
+
+ ///
+ /// The general color of the label.
+ ///
+ ///
+ /// The label inherits the color of its container while this is not set, which is what keeps it in step with the
+ /// text around it. Setting it is how a caption is given a meaning of its own - an one
+ /// beside a field that failed its validation, a one for a caption that
+ /// should sit back from the content it names.
+ ///
+ [Parameter, ResetClassBuilder]
+ public BitColor? Color { get; set; }
+
+ ///
+ /// The custom html element used for the root node. The default is "label".
+ ///
+ ///
+ /// A native label may only name one form control, so the caption of a group of controls - a set of radio buttons,
+ /// a pair of inputs making up a range - is rendered as a plain element ("div", "span", "legend", ...) that the
+ /// group points at through its own aria-labelledby, rather than as a label that would name only the first control
+ /// in it.
+ ///
+ /// The value is used as written and only while it is a name a tag can have: a letter followed by letters, digits
+ /// and the "-", "_", "." and ":" that join them. Anything else falls back to the default "label", since a name
+ /// carrying a whitespace or a "<" would write markup of its own rather than name an element.
+ ///
+ /// is only rendered while the element is a label, since the "for" attribute belongs to the label
+ /// element alone and means nothing on any other tag.
+ ///
+ [Parameter] public string? Element { get; set; }
+
+ ///
+ /// The id of the form control this label is bound to, rendered as the "for" attribute of the label element.
+ ///
+ ///
+ /// This is the explicit association of HTML: the value is the id of the control, not its name, and the control may
+ /// sit anywhere on the page. It is ignored while renders a tag other than a label.
+ ///
+ [Parameter] public string? For { get; set; }
+
+ ///
+ /// Prevents the text of the label from being selected.
+ ///
+ /// The default value is false.
+ ///
+ ///
+ /// A click on a label is forwarded to the control it names, so a double click on one - whose second click lands on
+ /// the label rather than on the control - selects the label's text instead of doing anything to the control. This
+ /// turns that selection off for the labels where it is only ever an accident, such as the one over a checkbox or a
+ /// toggle that a user is expected to click.
+ ///
+ [Parameter, ResetClassBuilder]
+ public bool NoSelect { get; set; }
+
+ ///
+ /// Keeps the label on a single line and truncates the overflow with an ellipsis.
+ ///
+ /// The default value is false.
+ ///
+ ///
+ /// The label wraps by default and breaks a word too long for its line rather than overflowing it. Truncation needs
+ /// a width to overflow: the label is a block element whichever tag renders, so it takes the
+ /// width of its container, and one given a display of its own through the style needs a width of its own for the
+ /// ellipsis to appear.
+ ///
+ [Parameter, ResetClassBuilder]
+ public bool NoWrap { get; set; }
+
+ ///
+ /// Whether the associated field is optional, which renders an indicator after the content of the label.
+ ///
+ /// The default value is false.
+ ///
+ ///
+ /// This is the other half of , for the forms where most of the fields are required and it is
+ /// the exceptions that are worth marking. It is ignored while is set, and unlike the
+ /// required asterisk the indicator is a word rather than a symbol, so it is announced by assistive technologies
+ /// along with the rest of the label.
+ ///
+ [Parameter, ResetClassBuilder]
+ public bool Optional { get; set; }
+
+ ///
+ /// The custom template of the optional indicator of the label.
+ ///
+ ///
+ /// Takes precedence over , and is only rendered while is set.
+ ///
+ [Parameter] public RenderFragment? OptionalTemplate { get; set; }
+
+ ///
+ /// The text of the optional indicator of the label. The default is "(optional)".
+ ///
+ ///
+ /// This is what a localized form replaces the English default with. It is ignored while
+ /// is set, and is only rendered while is set.
+ ///
+ [Parameter] public string? OptionalText { get; set; }
+
+ ///
+ /// Whether the associated field is required, which renders an indicator after the content of the label.
+ ///
+ /// The default value is false.
+ ///
+ ///
+ /// The indicator is an asterisk by default, and a default asterisk is hidden from assistive technologies: a star
+ /// read out in the middle of a caption says nothing about the field, and what makes a field announced as required
+ /// is the "required" or "aria-required" attribute of the control itself. An indicator given its own
+ /// or is announced with the rest of the label instead,
+ /// since a word put there deliberately is meant to be read.
+ ///
+ [Parameter, ResetClassBuilder]
+ public bool Required { get; set; }
+
+ ///
+ /// The custom template of the required indicator of the label.
+ ///
+ ///
+ /// Takes precedence over , and is only rendered while is set. The
+ /// indicator it renders is announced by assistive technologies, unlike the default asterisk.
+ ///
+ [Parameter] public RenderFragment? RequiredTemplate { get; set; }
+
+ ///
+ /// The text of the required indicator of the label. The default is "*".
+ ///
+ ///
+ /// This is what turns the asterisk into another mark or into a word ("(required)"). It is ignored while
+ /// is set, and is only rendered while is set. The indicator
+ /// it renders is announced by assistive technologies, unlike the default asterisk.
+ ///
+ [Parameter] public string? RequiredText { get; set; }
+
+ ///
+ /// The size of the label.
+ ///
+ ///
+ /// The default is the medium size, which is the one matching the labels the input components of the library render
+ /// of their own.
+ ///
+ [Parameter, ResetClassBuilder]
+ public BitSize? Size { get; set; }
+
+ ///
+ /// Custom CSS styles for the different parts of the label.
+ ///
+ [Parameter, ResetStyleBuilder]
+ public BitLabelClassStyles? Styles { get; set; }
+
+ ///
+ /// Removes the label from the page while keeping it available to assistive technologies.
+ ///
+ /// The default value is false.
+ ///
+ ///
+ /// This is the accessible way to leave a control without a visible caption: the label is still in the accessibility
+ /// tree and still names its control, which neither a nor a
+ /// label is. A visible caption is what most users need, so this belongs to
+ /// the places where the surrounding design already says what the control is - a search box with a magnifier in it,
+ /// a cell of a table whose column header names the field.
+ ///
+ [Parameter, ResetClassBuilder]
+ public bool VisuallyHidden { get; set; }
+
+
+
+ protected override string RootElementClass => "bit-lbl";
+
+ protected override void RegisterCssClasses()
+ {
+ ClassBuilder.Register(() => Classes?.Root);
+
+ ClassBuilder.Register(() => Size switch
+ {
+ BitSize.Small => "bit-lbl-sm",
+ BitSize.Medium => "bit-lbl-md",
+ BitSize.Large => "bit-lbl-lg",
+ _ => string.Empty
+ });
+
+ ClassBuilder.Register(() => Color switch
+ {
+ BitColor.Primary => "bit-lbl-pri",
+ BitColor.Secondary => "bit-lbl-sec",
+ BitColor.Tertiary => "bit-lbl-ter",
+ BitColor.Info => "bit-lbl-inf",
+ BitColor.Success => "bit-lbl-suc",
+ BitColor.Warning => "bit-lbl-wrn",
+ BitColor.SevereWarning => "bit-lbl-swr",
+ BitColor.Error => "bit-lbl-err",
+ BitColor.PrimaryBackground => "bit-lbl-pbg",
+ BitColor.SecondaryBackground => "bit-lbl-sbg",
+ BitColor.TertiaryBackground => "bit-lbl-tbg",
+ BitColor.PrimaryForeground => "bit-lbl-pfg",
+ BitColor.SecondaryForeground => "bit-lbl-sfg",
+ BitColor.TertiaryForeground => "bit-lbl-tfg",
+ BitColor.PrimaryBorder => "bit-lbl-pbr",
+ BitColor.SecondaryBorder => "bit-lbl-sbr",
+ BitColor.TertiaryBorder => "bit-lbl-tbr",
+ _ => string.Empty
+ });
+
+ ClassBuilder.Register(() => Required ? "bit-lbl-req" : (Optional ? "bit-lbl-opt" : string.Empty));
+
+ ClassBuilder.Register(() => NoWrap ? "bit-lbl-nwr" : string.Empty);
+
+ ClassBuilder.Register(() => NoSelect ? "bit-lbl-nsl" : string.Empty);
+
+ ClassBuilder.Register(() => VisuallyHidden ? "bit-lbl-vhd" : string.Empty);
+ }
+
+ protected override void RegisterCssStyles()
+ {
+ StyleBuilder.Register(() => Styles?.Root);
+ }
+
+ [DynamicDependency(DynamicallyAccessedMemberTypes.All, typeof(BitLabelParams))]
+ protected override void OnParametersSet()
+ {
+ CascadingParameters?.UpdateParameters(this);
+
+ base.OnParametersSet();
+ }
+
+ protected override void BuildRenderTree(RenderTreeBuilder builder)
+ {
+ var element = Element?.Trim();
+ if (element.HasNoValue() || IsValidElement(element!) is false)
+ {
+ element = "label";
+ }
+
+ var isLabelElement = string.Equals(element, "label", StringComparison.OrdinalIgnoreCase);
+
+ builder.OpenElement(0, element!);
+ builder.AddMultipleAttributes(1, RuntimeHelpers.TypeCheck(HtmlAttributes));
+ builder.AddAttribute(2, "id", _Id);
+ builder.AddAttribute(3, "style", StyleBuilder.Value);
+ builder.AddAttribute(4, "class", ClassBuilder.Value);
+ builder.AddAttribute(5, "dir", Dir?.ToString().ToLower(CultureInfo.InvariantCulture));
+ builder.AddAttribute(6, "aria-label", AriaLabel);
+ // A label is not focusable of itself, so the tab index is only ever written by a page that means to reach it -
+ // a "-1" for a caption the validation of a form moves the focus to, for instance.
+ builder.AddAttribute(7, "tabindex", TabIndex);
+ // The "for" attribute is defined on the label element alone: on any other tag it is markup that names nothing,
+ // and a group caption rendered through Element is pointed at by its group rather than pointing at a control.
+ builder.AddAttribute(8, "for", isLabelElement ? For : null);
+ builder.AddElementReferenceCapture(9, v => RootElement = v);
+ builder.AddContent(10, ChildContent);
+
+ // A field is either required or optional, so the two indicators are the branches of one decision rather than
+ // two independent ones: a label asked for both renders the required one, which is the stronger statement.
+ if (Required)
+ {
+ builder.OpenElement(11, "span");
+ builder.AddAttribute(12, "style", Styles?.RequiredIndicator);
+ builder.AddAttribute(13, "class", Classes?.RequiredIndicator.HasValue() is true
+ ? $"bit-lbl-rqi {Classes!.RequiredIndicator}"
+ : "bit-lbl-rqi");
+ // The default asterisk is a decoration - a screen reader that announces it at all announces a "star" in the
+ // middle of the caption, which says nothing about the field, while the "required" attribute of the control
+ // is what does. An indicator written by the page is a word put there to be read, so it is left announced.
+ builder.AddAttribute(14, "aria-hidden", RequiredTemplate is null && RequiredText.HasNoValue() ? "true" : null);
+ if (RequiredTemplate is not null)
+ {
+ builder.AddContent(15, RequiredTemplate);
+ }
+ else
+ {
+ builder.AddContent(16, RequiredText ?? "*");
+ }
+ builder.CloseElement();
+ }
+ else if (Optional)
+ {
+ builder.OpenElement(17, "span");
+ builder.AddAttribute(18, "style", Styles?.OptionalIndicator);
+ builder.AddAttribute(19, "class", Classes?.OptionalIndicator.HasValue() is true
+ ? $"bit-lbl-opi {Classes!.OptionalIndicator}"
+ : "bit-lbl-opi");
+ if (OptionalTemplate is not null)
+ {
+ builder.AddContent(20, OptionalTemplate);
+ }
+ else
+ {
+ builder.AddContent(21, OptionalText ?? "(optional)");
+ }
+ builder.CloseElement();
+ }
+
+ builder.CloseElement();
+
+ base.BuildRenderTree(builder);
+ }
+
+
+
+ // The same reading of a tag name as BitElement's: what a name is made of rather than what it must not contain,
+ // since a name the browser refuses throws where the element is built and takes the whole render batch with it.
+ private static bool IsValidElement(string element)
+ {
+ if (char.IsAsciiLetter(element[0]) is false) return false;
+
+ foreach (var @char in element)
+ {
+ if (char.IsAsciiLetterOrDigit(@char)) continue;
+
+ if (@char is '-' or '_' or '.' or ':') continue;
+
+ if (char.IsAscii(@char) is false && char.IsLetterOrDigit(@char)) continue;
+
+ return false;
+ }
+
+ return true;
+ }
+}
diff --git a/src/BlazorUI/Bit.BlazorUI/Components/Utilities/Label/BitLabel.razor b/src/BlazorUI/Bit.BlazorUI/Components/Utilities/Label/BitLabel.razor
deleted file mode 100644
index 4186ace5997..00000000000
--- a/src/BlazorUI/Bit.BlazorUI/Components/Utilities/Label/BitLabel.razor
+++ /dev/null
@@ -1,12 +0,0 @@
-@namespace Bit.BlazorUI
-@inherits BitComponentBase
-
-
diff --git a/src/BlazorUI/Bit.BlazorUI/Components/Utilities/Label/BitLabel.razor.cs b/src/BlazorUI/Bit.BlazorUI/Components/Utilities/Label/BitLabel.razor.cs
deleted file mode 100644
index d9af75ef2ed..00000000000
--- a/src/BlazorUI/Bit.BlazorUI/Components/Utilities/Label/BitLabel.razor.cs
+++ /dev/null
@@ -1,32 +0,0 @@
-namespace Bit.BlazorUI;
-
-///
-/// Labels give a name or title to a control or group of controls, including text fields, check boxes, combo boxes, radio buttons, and drop-down menus.
-///
-public partial class BitLabel : BitComponentBase
-{
- ///
- /// The content of label, It can be Any custom tag or a text
- ///
- [Parameter] public RenderFragment? ChildContent { get; set; }
-
- ///
- /// This attribute specifies which form element a label is bound to
- ///
- [Parameter] public string? For { get; set; }
-
- ///
- /// Whether the associated field is required or not, it shows a star above of it
- ///
- [Parameter, ResetClassBuilder]
- public bool Required { get; set; }
-
-
-
- protected override string RootElementClass => "bit-lbl";
-
- protected override void RegisterCssClasses()
- {
- ClassBuilder.Register(() => Required ? "bit-lbl-req" : string.Empty);
- }
-}
diff --git a/src/BlazorUI/Bit.BlazorUI/Components/Utilities/Label/BitLabel.scss b/src/BlazorUI/Bit.BlazorUI/Components/Utilities/Label/BitLabel.scss
index 685aa2e7b7c..2324afe9757 100644
--- a/src/BlazorUI/Bit.BlazorUI/Components/Utilities/Label/BitLabel.scss
+++ b/src/BlazorUI/Bit.BlazorUI/Components/Utilities/Label/BitLabel.scss
@@ -14,13 +14,67 @@
&.bit-dis {
color: $clr-fg-dis;
+ // The label itself is never disabled - only the control it names is - so the pointer over it would still
+ // promise a click that the disabled control has nothing to do with.
+ cursor: default;
}
}
-.bit-lbl-req {
- &::after {
- content: "*";
- color: $clr-req;
- margin-left: spacing(0.625);
+// Size classes follow the type ramp of the library: the unset default is the medium one, which is what keeps a
+// standalone label in step with the labels the input components render of their own.
+.bit-lbl-sm {
+ font-size: $tg-fs-xs;
+}
+
+.bit-lbl-md {
+ font-size: $tg-fs-sm;
+}
+
+.bit-lbl-lg {
+ font-size: $tg-fs-md;
+}
+
+// Role classes are generated from the shared $bit-color-roles map (see color-role-maps.scss).
+@each $role, $tokens in $bit-color-roles {
+ .bit-lbl-#{$role} {
+ color: role($tokens, main);
}
}
+
+// The necessity indicators. The margin is logical rather than left-handed, so the gap between the caption and its
+// mark stays after the caption in a right-to-left direction instead of jumping to the other side of it.
+.bit-lbl-rqi {
+ color: $clr-req;
+ margin-inline-start: spacing(0.625);
+}
+
+.bit-lbl-opi {
+ color: $clr-fg-sec;
+ font-weight: $tg-fw-regular;
+ margin-inline-start: spacing(0.625);
+}
+
+.bit-lbl-nwr {
+ overflow: hidden;
+ white-space: nowrap;
+ text-overflow: ellipsis;
+}
+
+.bit-lbl-nsl {
+ user-select: none;
+ -webkit-user-select: none; // Safari still needs the prefixed property.
+}
+
+// Out of the page but still in the accessibility tree: a zero-sized box would be dropped from it by some screen
+// readers, so the label keeps a pixel of its own and is clipped away from it.
+.bit-lbl-vhd {
+ padding: 0;
+ width: 1px;
+ height: 1px;
+ margin: -1px;
+ overflow: hidden;
+ position: absolute;
+ white-space: nowrap;
+ clip-path: inset(50%);
+ clip: rect(0 0 0 0);
+}
diff --git a/src/BlazorUI/Bit.BlazorUI/Components/Utilities/Label/BitLabelClassStyles.cs b/src/BlazorUI/Bit.BlazorUI/Components/Utilities/Label/BitLabelClassStyles.cs
new file mode 100644
index 00000000000..f2ca2621e17
--- /dev/null
+++ b/src/BlazorUI/Bit.BlazorUI/Components/Utilities/Label/BitLabelClassStyles.cs
@@ -0,0 +1,32 @@
+namespace Bit.BlazorUI;
+
+///
+/// The custom CSS classes/styles for the different parts of the component.
+///
+public class BitLabelClassStyles
+{
+ ///
+ /// Custom CSS classes/styles for the root element of the label.
+ ///
+ public string? Root { get; set; }
+
+ ///
+ /// Custom CSS classes/styles for the required indicator of the label.
+ ///
+ ///
+ /// The indicator is the element the asterisk - or whatever or
+ /// puts in its place - is rendered into, and it only exists while
+ /// is set.
+ ///
+ public string? RequiredIndicator { get; set; }
+
+ ///
+ /// Custom CSS classes/styles for the optional indicator of the label.
+ ///
+ ///
+ /// The indicator is the element the "(optional)" text - or whatever or
+ /// puts in its place - is rendered into, and it only exists while
+ /// is set and is not.
+ ///
+ public string? OptionalIndicator { get; set; }
+}
diff --git a/src/BlazorUI/Bit.BlazorUI/Components/Utilities/Label/BitLabelParams.cs b/src/BlazorUI/Bit.BlazorUI/Components/Utilities/Label/BitLabelParams.cs
new file mode 100644
index 00000000000..3d123bca42d
--- /dev/null
+++ b/src/BlazorUI/Bit.BlazorUI/Components/Utilities/Label/BitLabelParams.cs
@@ -0,0 +1,181 @@
+namespace Bit.BlazorUI;
+
+///
+/// The parameters for the component.
+///
+public class BitLabelParams : BitComponentBaseParams, IBitComponentParams
+{
+ ///
+ /// Represents the parameter name used to identify the BitLabel cascading parameters within BitParams.
+ ///
+ ///
+ /// This constant is typically used when referencing or accessing the BitLabel value in
+ /// parameterized APIs or configuration settings. Using this constant helps ensure consistency and reduces the risk
+ /// of typographical errors.
+ ///
+ public const string ParamName = $"{nameof(BitParams)}.{nameof(BitLabel)}";
+
+
+
+ public string Name => ParamName;
+
+
+
+ ///
+ /// Custom CSS classes for the different parts of the label.
+ ///
+ public BitLabelClassStyles? Classes { get; set; }
+
+ ///
+ /// The general color of the label.
+ ///
+ public BitColor? Color { get; set; }
+
+ ///
+ /// The custom html element used for the root node. The default is "label".
+ ///
+ public string? Element { get; set; }
+
+ ///
+ /// Prevents the text of the label from being selected.
+ ///
+ public bool? NoSelect { get; set; }
+
+ ///
+ /// Keeps the label on a single line and truncates the overflow with an ellipsis.
+ ///
+ public bool? NoWrap { get; set; }
+
+ ///
+ /// Whether the associated field is optional, which renders an indicator after the content of the label.
+ ///
+ public bool? Optional { get; set; }
+
+ ///
+ /// The text of the optional indicator of the label. The default is "(optional)".
+ ///
+ public string? OptionalText { get; set; }
+
+ ///
+ /// Whether the associated field is required, which renders an indicator after the content of the label.
+ ///
+ public bool? Required { get; set; }
+
+ ///
+ /// The text of the required indicator of the label. The default is "*".
+ ///
+ public string? RequiredText { get; set; }
+
+ ///
+ /// The size of the label.
+ ///
+ public BitSize? Size { get; set; }
+
+ ///
+ /// Custom CSS styles for the different parts of the label.
+ ///
+ public BitLabelClassStyles? Styles { get; set; }
+
+ ///
+ /// Removes the label from the page while keeping it available to assistive technologies.
+ ///
+ public bool? VisuallyHidden { get; set; }
+
+
+
+ ///
+ /// Updates the properties of the specified instance with any values that have been set on
+ /// this object, if those properties have not already been set on the .
+ ///
+ ///
+ /// Only properties that have a value set and have not already been set on the will be updated.
+ /// This method does not overwrite existing values on .
+ ///
+ ///
+ /// The instance whose properties will be updated. Cannot be null.
+ ///
+ public void UpdateParameters(BitLabel bitLabel)
+ {
+ if (bitLabel is null) return;
+
+ UpdateBaseParameters(bitLabel);
+
+ if (Classes is not null && bitLabel.HasNotBeenSet(nameof(Classes)))
+ {
+ bitLabel.Classes = Classes;
+
+ bitLabel.ClassBuilder.Reset();
+ }
+
+ if (Color.HasValue && bitLabel.HasNotBeenSet(nameof(Color)))
+ {
+ bitLabel.Color = Color.Value;
+
+ bitLabel.ClassBuilder.Reset();
+ }
+
+ if (Element.HasValue() && bitLabel.HasNotBeenSet(nameof(Element)))
+ {
+ bitLabel.Element = Element;
+ }
+
+ if (NoSelect.HasValue && bitLabel.HasNotBeenSet(nameof(NoSelect)))
+ {
+ bitLabel.NoSelect = NoSelect.Value;
+
+ bitLabel.ClassBuilder.Reset();
+ }
+
+ if (NoWrap.HasValue && bitLabel.HasNotBeenSet(nameof(NoWrap)))
+ {
+ bitLabel.NoWrap = NoWrap.Value;
+
+ bitLabel.ClassBuilder.Reset();
+ }
+
+ if (Optional.HasValue && bitLabel.HasNotBeenSet(nameof(Optional)))
+ {
+ bitLabel.Optional = Optional.Value;
+
+ bitLabel.ClassBuilder.Reset();
+ }
+
+ if (OptionalText.HasValue() && bitLabel.HasNotBeenSet(nameof(OptionalText)))
+ {
+ bitLabel.OptionalText = OptionalText;
+ }
+
+ if (Required.HasValue && bitLabel.HasNotBeenSet(nameof(Required)))
+ {
+ bitLabel.Required = Required.Value;
+
+ bitLabel.ClassBuilder.Reset();
+ }
+
+ if (RequiredText.HasValue() && bitLabel.HasNotBeenSet(nameof(RequiredText)))
+ {
+ bitLabel.RequiredText = RequiredText;
+ }
+
+ if (Size.HasValue && bitLabel.HasNotBeenSet(nameof(Size)))
+ {
+ bitLabel.Size = Size.Value;
+
+ bitLabel.ClassBuilder.Reset();
+ }
+
+ if (Styles is not null && bitLabel.HasNotBeenSet(nameof(Styles)))
+ {
+ bitLabel.Styles = Styles;
+
+ bitLabel.StyleBuilder.Reset();
+ }
+
+ if (VisuallyHidden.HasValue && bitLabel.HasNotBeenSet(nameof(VisuallyHidden)))
+ {
+ bitLabel.VisuallyHidden = VisuallyHidden.Value;
+
+ bitLabel.ClassBuilder.Reset();
+ }
+ }
+}
diff --git a/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Utilities/Label/BitLabelDemo.razor b/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Utilities/Label/BitLabelDemo.razor
index 43abfc4a618..94ab4bb3614 100644
--- a/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Utilities/Label/BitLabelDemo.razor
+++ b/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Utilities/Label/BitLabelDemo.razor
@@ -2,14 +2,24 @@
+ Description="Labels give a name or a title to a control or to a group of controls, including text fields, check boxes, combo boxes, radio buttons and drop-down menus." />
+
+ A label with nothing configured is a label element carrying the caption it is given, at the
+ same weight and size as the labels the input components of the library render of their own.
+ IsEnabled set to false dims it to the disabled foreground color of the theme. That is a look and not
+ a state: a label is never itself disabled, so it still names its control and a click on it still reaches
+ that control - disabling the control is what stops it from responding.
+
I'm a Label
@@ -17,7 +27,141 @@
-
+
+
+ For is the for attribute of the label element: the value is the id of the control
+ the label names, not its name, and that control may sit anywhere on the page. This is the explicit
+ association of HTML, and it is what makes clicking the caption focus the field and a screen reader read the
+ caption when the field takes focus. A control put inside the label's own content is associated implicitly
+ instead, which is the one way to name a control that has no id.
+
+
+ A Label for an input
+
+
+ A Label wrapping its own control
+
+
+
+
+
+ Required renders an indicator after the caption. The default one is an asterisk in the theme's
+ required color, and it is hidden from assistive technologies: a star announced in the middle of a caption
+ says nothing about the field, while the required attribute of the control itself is what makes
+ it announced as required. RequiredText puts another mark or a word in the asterisk's place and
+ RequiredTemplate puts any markup there - and an indicator written by the page is left announced,
+ since a word put there deliberately is meant to be read.
+
+
+ I'm a required Label
+
+ A required Label with a word instead of the asterisk
+
+
+ A required Label with a custom template
+
+
+
+
+
+
+
+
+
+ Optional is the other half of the same decision, for the forms where most of the fields are required
+ and it is the exceptions that are worth marking - marking every field of a form is noise whichever half is
+ marked. The indicator is the word "(optional)" in a lighter color and a regular weight, and unlike the
+ asterisk it is announced with the rest of the caption. OptionalText and OptionalTemplate
+ replace it, which is what a form in another language needs. A label asked for both renders the required
+ indicator, since a required field is not an optional one.
+
+
+ I'm an optional Label
+
+ An optional Label with its own text
+
+
+ An optional Label with a custom template
+
+
+
+
+
+
+
+
+
+ A native label may only name a single form control, so the caption of a group of controls - a set of
+ radio buttons, a pair of inputs making up a range - must not be one: it would name only the first control in
+ the group. Element renders the caption as any other tag while keeping the same look, so the group can
+ point at it through its own aria-labelledby - or as the legend of a
+ fieldset, which is the same association written in plain HTML. The For parameter is
+ dropped along with the label element, since the for attribute belongs to that element alone. A
+ tag name that is not one a tag can have falls back to label.
+
+
+ Favorite color
+
+
+
+
+
+
+
+
+
+
+
+
+ A label wraps by default and breaks a word too long for its line rather than overflowing it. NoWrap
+ keeps it on one line and truncates what does not fit with an ellipsis. Truncation needs a width to overflow:
+ a label is a block element whichever tag Element renders, so it takes the width of its container, and
+ only a label given a display of its own needs a width of its own.
+
+
+ A caption long enough to need more than one line at this width
+
+ A caption long enough to need more than one line at this width
+
+
+
+
+
+ A click on a label is forwarded to the control it names, so a double click on one - whose second click lands
+ on the label rather than on the control - selects the caption's text instead of doing anything to the
+ control. NoSelect turns that selection off, for the labels over a checkbox or a toggle where it is
+ only ever an accident. Try double clicking both captions below.
+
+
+ Selectable caption
+
+ Unselectable caption
+
+
+
+
+
+ VisuallyHidden clips the label out of the page while leaving it in the accessibility tree, so the
+ control it names is still announced by its caption. That is what separates it from Visibility below,
+ which takes the label away from assistive technologies along with the page. A visible caption is what most
+ users need, so this belongs to the places where the surrounding design already says what the control is.
+
+
+ Search the documentation
+
+
+
+
+
+
+ Visibility decides whether the label is rendered, invisible but still taking its space, or out of the
+ layout altogether. A hidden or a collapsed label is gone from the accessibility tree as well, so it no longer
+ names its control - VisuallyHidden above is the one that keeps naming it.
+
Visible: [ Visible Label ]
@@ -27,31 +171,80 @@
-
+
+
+ A label inherits the color of its container while Color is not set, which is what keeps it in step
+ with the text around it. Setting it gives the caption a meaning of its own - an error color beside a field
+ that failed its validation, a secondary foreground for a caption that should sit back from the content it
+ names. The required indicator keeps the theme's required color whichever color the caption takes.
+
- I'm a Label with Style
-
- I'm a Label with Class
+ Primary
+ Secondary
+ Tertiary
+ Info
+ Success
+ Warning
+ SevereWarning
+ Error
+ PrimaryForeground
+ SecondaryForeground
+ TertiaryForeground
+ PrimaryBorder
+ SecondaryBorder
+ TertiaryBorder
-
+
+
+ Size moves the caption along the type ramp of the theme. The unset default is the medium size, which
+ is the one that matches the labels the input components render of their own, so a standalone label sits next
+ to them without being resized.
+
- I'm a required Label
+ Small
+ Medium
+ Large
-
+
+
+ Style and Class land on the root element of the label, and Styles and Classes
+ reach its parts one by one: the root, the required indicator and the optional indicator. That is how the
+ necessity mark is restyled - a color, a weight, a position - without a selector reaching into the library's
+ own class names.
+
- A Label for An Input
+
Component's Style & Class:
+ I'm a Label with Style
-
+ I'm a Label with Class
+
+
Styles & Classes:
+
+ I'm a Label with Styles
+
+
+
+ I'm a Label with Classes
+
-
+
+
+ Setting Dir to BitDir.Rtl lays the label out right to left. The gap between the caption and its
+ necessity indicator is a logical one, so the mark stays after the caption - on its left in this direction -
+ rather than jumping to the other side of it.
+
من یک برچسب هستم
+
+ من یک برچسب الزامی هستم
+
+ من یک برچسب اختیاری هستم
-
\ No newline at end of file
+
diff --git a/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Utilities/Label/BitLabelDemo.razor.cs b/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Utilities/Label/BitLabelDemo.razor.cs
index 553fbc5b943..4fa753fedec 100644
--- a/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Utilities/Label/BitLabelDemo.razor.cs
+++ b/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Utilities/Label/BitLabelDemo.razor.cs
@@ -9,21 +9,296 @@ public partial class BitLabelDemo
Name = "ChildContent",
Type = "RenderFragment?",
DefaultValue = "null",
- Description = "The content of label, It can be Any custom tag or a text.",
+ Description = "The content of the label, which can be a text or any custom markup. A form control put inside it is named by the label without needing the For parameter.",
+ },
+ new()
+ {
+ Name = "Classes",
+ Type = "BitLabelClassStyles?",
+ DefaultValue = "null",
+ Description = "Custom CSS classes for the different parts of the label.",
+ LinkType = LinkType.Link,
+ Href = "#class-styles",
+ },
+ new()
+ {
+ Name = "Color",
+ Type = "BitColor?",
+ DefaultValue = "null",
+ Description = "The general color of the label. The label inherits the color of its container while this is not set.",
+ LinkType = LinkType.Link,
+ Href = "#color-enum",
+ },
+ new()
+ {
+ Name = "Element",
+ Type = "string?",
+ DefaultValue = "null",
+ Description = "The custom html element used for the root node. The default is \"label\", and a name that is not one a tag can have falls back to it.",
},
new()
{
Name = "For",
Type = "string?",
DefaultValue = "null",
- Description = "This attribute specifies which form element a label is bound to.",
+ Description = "The id of the form control this label is bound to, rendered as the \"for\" attribute of the label element. It is ignored while the Element parameter renders another tag.",
+ },
+ new()
+ {
+ Name = "NoSelect",
+ Type = "bool",
+ DefaultValue = "false",
+ Description = "Prevents the text of the label from being selected, which is what a double click on a label does instead of reaching the control it names.",
+ },
+ new()
+ {
+ Name = "NoWrap",
+ Type = "bool",
+ DefaultValue = "false",
+ Description = "Keeps the label on a single line and truncates the overflow with an ellipsis.",
+ },
+ new()
+ {
+ Name = "Optional",
+ Type = "bool",
+ DefaultValue = "false",
+ Description = "Whether the associated field is optional, which renders an indicator after the content of the label. It is ignored while Required is set.",
+ },
+ new()
+ {
+ Name = "OptionalTemplate",
+ Type = "RenderFragment?",
+ DefaultValue = "null",
+ Description = "The custom template of the optional indicator of the label. Takes precedence over OptionalText.",
+ },
+ new()
+ {
+ Name = "OptionalText",
+ Type = "string?",
+ DefaultValue = "null",
+ Description = "The text of the optional indicator of the label. The default is \"(optional)\".",
},
new()
{
Name = "Required",
Type = "bool",
DefaultValue = "false",
- Description = "Whether the associated field is required or not, it shows a star above of it.",
+ Description = "Whether the associated field is required, which renders an indicator after the content of the label. The default asterisk is hidden from assistive technologies.",
+ },
+ new()
+ {
+ Name = "RequiredTemplate",
+ Type = "RenderFragment?",
+ DefaultValue = "null",
+ Description = "The custom template of the required indicator of the label. Takes precedence over RequiredText.",
+ },
+ new()
+ {
+ Name = "RequiredText",
+ Type = "string?",
+ DefaultValue = "null",
+ Description = "The text of the required indicator of the label. The default is \"*\".",
+ },
+ new()
+ {
+ Name = "Size",
+ Type = "BitSize?",
+ DefaultValue = "null",
+ Description = "The size of the label. The default is the medium size.",
+ LinkType = LinkType.Link,
+ Href = "#size-enum",
+ },
+ new()
+ {
+ Name = "Styles",
+ Type = "BitLabelClassStyles?",
+ DefaultValue = "null",
+ Description = "Custom CSS styles for the different parts of the label.",
+ LinkType = LinkType.Link,
+ Href = "#class-styles",
+ },
+ new()
+ {
+ Name = "VisuallyHidden",
+ Type = "bool",
+ DefaultValue = "false",
+ Description = "Removes the label from the page while keeping it available to assistive technologies, so it still names its control.",
+ }
+ ];
+
+ private readonly List componentSubClasses =
+ [
+ new()
+ {
+ Id = "class-styles",
+ Title = "BitLabelClassStyles",
+ Description = "The custom CSS classes/styles for the different parts of the label.",
+ Parameters =
+ [
+ new()
+ {
+ Name = "Root",
+ Type = "string?",
+ DefaultValue = "null",
+ Description = "Custom CSS classes/styles for the root element of the label.",
+ },
+ new()
+ {
+ Name = "RequiredIndicator",
+ Type = "string?",
+ DefaultValue = "null",
+ Description = "Custom CSS classes/styles for the required indicator of the label, which only exists while Required is set.",
+ },
+ new()
+ {
+ Name = "OptionalIndicator",
+ Type = "string?",
+ DefaultValue = "null",
+ Description = "Custom CSS classes/styles for the optional indicator of the label, which only exists while Optional is set and Required is not.",
+ }
+ ]
+ }
+ ];
+
+ private readonly List componentSubEnums =
+ [
+ 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 = "size-enum",
+ Name = "BitSize",
+ Description = "Defines the sizes available in the bit BlazorUI.",
+ Items =
+ [
+ new()
+ {
+ Name= "Small",
+ Description="The small size.",
+ Value="0",
+ },
+ new()
+ {
+ Name= "Medium",
+ Description="The medium size.",
+ Value="1",
+ },
+ new()
+ {
+ Name= "Large",
+ Description="The large size.",
+ Value="2",
+ }
+ ]
}
];
@@ -34,30 +309,123 @@ public partial class BitLabelDemo
I'm a disabled Label";
private readonly string example2RazorCode = @"
+A Label for an input
+
+
+ A Label wrapping its own control";
+
+ private readonly string example3RazorCode = @"
+I'm a required Label
+
+A required Label with a word instead of the asterisk
+
+
+ A required Label with a custom template
+
+
+
+";
+
+ private readonly string example4RazorCode = @"
+I'm an optional Label
+
+An optional Label with its own text
+
+
+ An optional Label with a custom template
+
+
+
+";
+
+ private readonly string example5RazorCode = @"
+Favorite color
+
+
+
+
+
+
+";
+
+ private readonly string example6RazorCode = @"
+A caption long enough to need more than one line at this width
+
+A caption long enough to need more than one line at this width";
+
+ private readonly string example7RazorCode = @"
+ Selectable caption
+
+ Unselectable caption";
+
+ private readonly string example8RazorCode = @"
+Search the documentation
+";
+
+ private readonly string example9RazorCode = @"
Visible: [ Visible Label ]
Hidden: [ Hidden Label ]
Collapsed: [ Collapsed Label ]";
- private readonly string example3RazorCode = @"
+ private readonly string example10RazorCode = @"
+Primary
+Secondary
+Tertiary
+Info
+Success
+Warning
+SevereWarning
+Error
+PrimaryForeground
+SecondaryForeground
+TertiaryForeground
+PrimaryBorder
+SecondaryBorder
+TertiaryBorder";
+
+ private readonly string example11RazorCode = @"
+Small
+Medium
+Large";
+
+ private readonly string example12RazorCode = @"
-I'm a Label with Style
-I'm a Label with Class";
+I'm a Label with Style
+I'm a Label with Class
- private readonly string example4RazorCode = @"
-I'm a required Label";
+
+ I'm a Label with Styles
+
- private readonly string example5RazorCode = @"
-A Label for An Input
-";
+
+ I'm a Label with Classes
+";
- private readonly string example6RazorCode = @"
-من یک برچسب هستم";
+ private readonly string example13RazorCode = @"
+من یک برچسب هستم
+
+من یک برچسب الزامی هستم
+من یک برچسب اختیاری هستم";
}
diff --git a/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Utilities/Label/BitLabelDemo.razor.scss b/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Utilities/Label/BitLabelDemo.razor.scss
index 09556387780..4de5c03ceab 100644
--- a/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Utilities/Label/BitLabelDemo.razor.scss
+++ b/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Utilities/Label/BitLabelDemo.razor.scss
@@ -3,3 +3,13 @@
border: 1px solid red;
max-width: max-content;
}
+
+::deep .custom-root {
+ text-transform: uppercase;
+ letter-spacing: 0.05rem;
+}
+
+::deep .custom-optional {
+ color: mediumseagreen;
+ font-style: italic;
+}
diff --git a/src/BlazorUI/Tests/Bit.BlazorUI.Tests/Components/Utilities/Labels/BitLabelCascadingParamsTest.razor b/src/BlazorUI/Tests/Bit.BlazorUI.Tests/Components/Utilities/Labels/BitLabelCascadingParamsTest.razor
new file mode 100644
index 00000000000..3da35dce284
--- /dev/null
+++ b/src/BlazorUI/Tests/Bit.BlazorUI.Tests/Components/Utilities/Labels/BitLabelCascadingParamsTest.razor
@@ -0,0 +1,19 @@
+@* Covers BitLabelParams: the cascaded values fill in the parameters the label did not set itself,
+ and never overwrite the ones it did. *@
+
+
+ cascaded
+ own
+
diff --git a/src/BlazorUI/Tests/Bit.BlazorUI.Tests/Components/Utilities/Labels/BitLabelTests.cs b/src/BlazorUI/Tests/Bit.BlazorUI.Tests/Components/Utilities/Labels/BitLabelTests.cs
index 7af05b146c9..2a8cc6c1dcf 100644
--- a/src/BlazorUI/Tests/Bit.BlazorUI.Tests/Components/Utilities/Labels/BitLabelTests.cs
+++ b/src/BlazorUI/Tests/Bit.BlazorUI.Tests/Components/Utilities/Labels/BitLabelTests.cs
@@ -1,4 +1,5 @@
-using Microsoft.VisualStudio.TestTools.UnitTesting;
+using Microsoft.AspNetCore.Components;
+using Microsoft.VisualStudio.TestTools.UnitTesting;
using Bunit;
namespace Bit.BlazorUI.Tests.Components.Utilities.Labels;
@@ -56,9 +57,13 @@ public void BitLabelShouldRespectRequired(bool required)
parameters.Add(p => p.Required, required);
});
- var cssClass = required ? "bit-lbl bit-lbl-req" : "bit-lbl";
+ // The asterisk is an element rather than a css pseudo element, so that it can be hidden from the assistive
+ // technologies that would otherwise announce a "star" in the middle of the caption.
+ var expected = required
+ ? @""
+ : @"";
- component.MarkupMatches(@$"");
+ component.MarkupMatches(expected);
}
[TestMethod]
@@ -73,7 +78,374 @@ public void BitLabelShouldRespectRequiredChangingAfterRender()
parameters.Add(p => p.Required, true);
});
- component.MarkupMatches(@"");
+ component.MarkupMatches(@"");
+ }
+
+ [TestMethod]
+ public void BitLabelShouldRenderRequiredIndicatorAfterTheContent()
+ {
+ var component = RenderComponent(parameters =>
+ {
+ parameters.Add(p => p.Required, true);
+ parameters.AddChildContent("Bit Blazor UI");
+ });
+
+ component.MarkupMatches(@"");
+ }
+
+ [TestMethod,
+ DataRow("(required)"),
+ DataRow("**")
+ ]
+ public void BitLabelShouldRespectRequiredText(string requiredText)
+ {
+ var component = RenderComponent(parameters =>
+ {
+ parameters.Add(p => p.Required, true);
+ parameters.Add(p => p.RequiredText, requiredText);
+ });
+
+ // An indicator written by the page is a word put there to be read, so it is left announced.
+ component.MarkupMatches(@$"");
+ }
+
+ [TestMethod]
+ public void BitLabelShouldRespectRequiredTemplate()
+ {
+ var component = RenderComponent(parameters =>
+ {
+ parameters.Add(p => p.Required, true);
+ parameters.Add(p => p.RequiredText, "(required)");
+ parameters.Add(p => p.RequiredTemplate, (RenderFragment)(builder => builder.AddMarkupContent(0, "!")));
+ });
+
+ component.MarkupMatches(@"");
+ }
+
+ [TestMethod]
+ public void BitLabelShouldNotRenderRequiredIndicatorWhenNotRequired()
+ {
+ var component = RenderComponent(parameters =>
+ {
+ parameters.Add(p => p.RequiredText, "(required)");
+ parameters.Add(p => p.RequiredTemplate, (RenderFragment)(builder => builder.AddMarkupContent(0, "!")));
+ });
+
+ component.MarkupMatches(@"");
+ }
+
+ [TestMethod,
+ DataRow(true),
+ DataRow(false)
+ ]
+ public void BitLabelShouldRespectOptional(bool optional)
+ {
+ var component = RenderComponent(parameters =>
+ {
+ parameters.Add(p => p.Optional, optional);
+ });
+
+ var expected = optional
+ ? @""
+ : @"";
+
+ component.MarkupMatches(expected);
+ }
+
+ [TestMethod]
+ public void BitLabelShouldRespectOptionalChangingAfterRender()
+ {
+ var component = RenderComponent();
+
+ component.MarkupMatches(@"");
+
+ component.Render(parameters =>
+ {
+ parameters.Add(p => p.Optional, true);
+ });
+
+ component.MarkupMatches(@"");
+ }
+
+ [TestMethod]
+ public void BitLabelShouldRespectOptionalText()
+ {
+ var component = RenderComponent(parameters =>
+ {
+ parameters.Add(p => p.Optional, true);
+ parameters.Add(p => p.OptionalText, "(اختیاری)");
+ });
+
+ component.MarkupMatches(@"");
+ }
+
+ [TestMethod]
+ public void BitLabelShouldRespectOptionalTemplate()
+ {
+ var component = RenderComponent(parameters =>
+ {
+ parameters.Add(p => p.Optional, true);
+ parameters.Add(p => p.OptionalText, "(optional)");
+ parameters.Add(p => p.OptionalTemplate, (RenderFragment)(builder => builder.AddMarkupContent(0, "opt")));
+ });
+
+ component.MarkupMatches(@"");
+ }
+
+ [TestMethod]
+ public void BitLabelShouldPreferRequiredOverOptional()
+ {
+ var component = RenderComponent(parameters =>
+ {
+ parameters.Add(p => p.Required, true);
+ parameters.Add(p => p.Optional, true);
+ });
+
+ component.MarkupMatches(@"");
+ }
+
+ [TestMethod,
+ DataRow("div"),
+ DataRow("span"),
+ DataRow("legend")
+ ]
+ public void BitLabelShouldRespectElement(string element)
+ {
+ var component = RenderComponent(parameters =>
+ {
+ parameters.Add(p => p.Element, element);
+ parameters.AddChildContent("Bit Blazor UI");
+ });
+
+ component.MarkupMatches(@$"<{element} class=""bit-lbl"" id:ignore>Bit Blazor UI");
+ }
+
+ [TestMethod,
+ DataRow("not a tag name"),
+ DataRow("label!"),
+ DataRow("1div"),
+ DataRow(" "),
+ DataRow("")
+ ]
+ public void BitLabelShouldFallBackToLabelForAnInvalidElement(string element)
+ {
+ var component = RenderComponent(parameters =>
+ {
+ parameters.Add(p => p.Element, element);
+ });
+
+ component.MarkupMatches(@"");
+ }
+
+ [TestMethod]
+ public void BitLabelShouldNotRenderForOnANonLabelElement()
+ {
+ var component = RenderComponent(parameters =>
+ {
+ parameters.Add(p => p.Element, "div");
+ parameters.Add(p => p.For, "test-for");
+ });
+
+ component.MarkupMatches(@"");
+ }
+
+ [TestMethod,
+ DataRow(true),
+ DataRow(false)
+ ]
+ public void BitLabelShouldRespectNoWrap(bool noWrap)
+ {
+ var component = RenderComponent(parameters =>
+ {
+ parameters.Add(p => p.NoWrap, noWrap);
+ });
+
+ var cssClass = noWrap ? "bit-lbl bit-lbl-nwr" : "bit-lbl";
+
+ component.MarkupMatches(@$"");
+ }
+
+ [TestMethod,
+ DataRow(true),
+ DataRow(false)
+ ]
+ public void BitLabelShouldRespectNoSelect(bool noSelect)
+ {
+ var component = RenderComponent(parameters =>
+ {
+ parameters.Add(p => p.NoSelect, noSelect);
+ });
+
+ var cssClass = noSelect ? "bit-lbl bit-lbl-nsl" : "bit-lbl";
+
+ component.MarkupMatches(@$"");
+ }
+
+ [TestMethod,
+ DataRow(true),
+ DataRow(false)
+ ]
+ public void BitLabelShouldRespectVisuallyHidden(bool visuallyHidden)
+ {
+ var component = RenderComponent(parameters =>
+ {
+ parameters.Add(p => p.VisuallyHidden, visuallyHidden);
+ });
+
+ var cssClass = visuallyHidden ? "bit-lbl bit-lbl-vhd" : "bit-lbl";
+
+ component.MarkupMatches(@$"");
+ }
+
+ [TestMethod]
+ public void BitLabelShouldRespectVisuallyHiddenChangingAfterRender()
+ {
+ var component = RenderComponent();
+
+ component.MarkupMatches(@"");
+
+ component.Render(parameters =>
+ {
+ parameters.Add(p => p.VisuallyHidden, true);
+ });
+
+ component.MarkupMatches(@"");
+ }
+
+ [TestMethod,
+ DataRow(BitSize.Small, "bit-lbl-sm"),
+ DataRow(BitSize.Medium, "bit-lbl-md"),
+ DataRow(BitSize.Large, "bit-lbl-lg"),
+ DataRow(null, null)
+ ]
+ public void BitLabelShouldRespectSize(BitSize? size, string sizeClass)
+ {
+ var component = RenderComponent(parameters =>
+ {
+ parameters.Add(p => p.Size, size);
+ });
+
+ var cssClass = sizeClass is null ? "bit-lbl" : $"bit-lbl {sizeClass}";
+
+ component.MarkupMatches(@$"");
+ }
+
+ [TestMethod]
+ public void BitLabelShouldRespectSizeChangingAfterRender()
+ {
+ var component = RenderComponent();
+
+ component.MarkupMatches(@"");
+
+ component.Render(parameters =>
+ {
+ parameters.Add(p => p.Size, BitSize.Large);
+ });
+
+ component.MarkupMatches(@"");
+ }
+
+ [TestMethod,
+ DataRow(BitColor.Primary, "bit-lbl-pri"),
+ DataRow(BitColor.Secondary, "bit-lbl-sec"),
+ DataRow(BitColor.Tertiary, "bit-lbl-ter"),
+ DataRow(BitColor.Info, "bit-lbl-inf"),
+ DataRow(BitColor.Success, "bit-lbl-suc"),
+ DataRow(BitColor.Warning, "bit-lbl-wrn"),
+ DataRow(BitColor.SevereWarning, "bit-lbl-swr"),
+ DataRow(BitColor.Error, "bit-lbl-err"),
+ DataRow(BitColor.PrimaryBackground, "bit-lbl-pbg"),
+ DataRow(BitColor.SecondaryBackground, "bit-lbl-sbg"),
+ DataRow(BitColor.TertiaryBackground, "bit-lbl-tbg"),
+ DataRow(BitColor.PrimaryForeground, "bit-lbl-pfg"),
+ DataRow(BitColor.SecondaryForeground, "bit-lbl-sfg"),
+ DataRow(BitColor.TertiaryForeground, "bit-lbl-tfg"),
+ DataRow(BitColor.PrimaryBorder, "bit-lbl-pbr"),
+ DataRow(BitColor.SecondaryBorder, "bit-lbl-sbr"),
+ DataRow(BitColor.TertiaryBorder, "bit-lbl-tbr"),
+ DataRow(null, null)
+ ]
+ public void BitLabelShouldRespectColor(BitColor? color, string colorClass)
+ {
+ var component = RenderComponent(parameters =>
+ {
+ parameters.Add(p => p.Color, color);
+ });
+
+ var cssClass = colorClass is null ? "bit-lbl" : $"bit-lbl {colorClass}";
+
+ component.MarkupMatches(@$"");
+ }
+
+ [TestMethod]
+ public void BitLabelShouldRespectColorChangingAfterRender()
+ {
+ var component = RenderComponent();
+
+ component.MarkupMatches(@"");
+
+ component.Render(parameters =>
+ {
+ parameters.Add(p => p.Color, BitColor.Error);
+ });
+
+ component.MarkupMatches(@"");
+ }
+
+ [TestMethod]
+ public void BitLabelShouldRespectClasses()
+ {
+ var component = RenderComponent(parameters =>
+ {
+ parameters.Add(p => p.Required, true);
+ parameters.Add(p => p.Classes, new BitLabelClassStyles
+ {
+ Root = "custom-root",
+ RequiredIndicator = "custom-required"
+ });
+ });
+
+ component.MarkupMatches(@"");
+ }
+
+ [TestMethod]
+ public void BitLabelShouldRespectOptionalIndicatorClasses()
+ {
+ var component = RenderComponent(parameters =>
+ {
+ parameters.Add(p => p.Optional, true);
+ parameters.Add(p => p.Classes, new BitLabelClassStyles { OptionalIndicator = "custom-optional" });
+ });
+
+ component.MarkupMatches(@"");
+ }
+
+ [TestMethod]
+ public void BitLabelShouldRespectStyles()
+ {
+ var component = RenderComponent(parameters =>
+ {
+ parameters.Add(p => p.Required, true);
+ parameters.Add(p => p.Styles, new BitLabelClassStyles
+ {
+ Root = "font-style: italic",
+ RequiredIndicator = "color: blueviolet"
+ });
+ });
+
+ component.MarkupMatches(@"");
+ }
+
+ [TestMethod]
+ public void BitLabelShouldRespectOptionalIndicatorStyles()
+ {
+ var component = RenderComponent(parameters =>
+ {
+ parameters.Add(p => p.Optional, true);
+ parameters.Add(p => p.Styles, new BitLabelClassStyles { OptionalIndicator = "color: mediumseagreen" });
+ });
+
+ component.MarkupMatches(@"");
}
[TestMethod,
@@ -181,6 +553,28 @@ public void BitLabelShouldRespectFor(string @for)
}
}
+ [TestMethod,
+ DataRow("-1"),
+ DataRow("0"),
+ DataRow(null)
+ ]
+ public void BitLabelShouldRespectTabIndex(string tabIndex)
+ {
+ var component = RenderComponent(parameters =>
+ {
+ parameters.Add(p => p.TabIndex, tabIndex);
+ });
+
+ if (tabIndex.HasValue())
+ {
+ component.MarkupMatches(@$"");
+ }
+ else
+ {
+ component.MarkupMatches(@"");
+ }
+ }
+
[TestMethod,
DataRow(BitDir.Rtl),
DataRow(BitDir.Ltr),
@@ -304,4 +698,30 @@ public void BitLabelShouldRespectHtmlAttributes()
component.MarkupMatches(@"");
}
+
+ [TestMethod]
+ public void BitLabelShouldRespectCascadingParams()
+ {
+ var component = RenderComponent();
+
+ var labels = component.FindAll(".bit-lbl");
+
+ Assert.AreEqual(2, labels.Count);
+
+ // The first label takes everything from the cascading parameters.
+ Assert.AreEqual("DIV", labels[0].TagName);
+ Assert.IsTrue(labels[0].ClassList.Contains("bit-lbl-lg"));
+ Assert.IsTrue(labels[0].ClassList.Contains("bit-lbl-err"));
+ Assert.IsTrue(labels[0].ClassList.Contains("bit-lbl-nwr"));
+ Assert.IsTrue(labels[0].ClassList.Contains("cascaded"));
+ Assert.IsTrue(labels[0].ClassList.Contains("bit-lbl-req"));
+ Assert.AreEqual("(required)", labels[0].QuerySelector(".bit-lbl-rqi")!.TextContent);
+
+ // The second one sets its own size and renders a label element, which the cascading parameters must not
+ // overwrite.
+ Assert.AreEqual("LABEL", labels[1].TagName);
+ Assert.IsTrue(labels[1].ClassList.Contains("bit-lbl-sm"));
+ Assert.IsFalse(labels[1].ClassList.Contains("bit-lbl-lg"));
+ Assert.IsTrue(labels[1].ClassList.Contains("bit-lbl-err"));
+ }
}