From 65cea4ca2de08f0e5c49a5935ae67305c41b18ce Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Alexandr=20H=C3=A1jek?= Date: Thu, 25 Jan 2024 10:55:55 +0100 Subject: [PATCH] Separate and adjust logic when "form-check" and "form-"switch" CSS classes are added --- .../Pages/HxCheckbox_Issue742_Test.razor | 46 +++++++++++++++++++ .../Forms/HxCheckbox.cs | 25 ++++++---- .../Forms/HxSwitch.cs | 4 +- .../Havit.Blazor.Components.Web.Bootstrap.xml | 17 ++++--- 4 files changed, 74 insertions(+), 18 deletions(-) create mode 100644 BlazorAppTest/Pages/HxCheckbox_Issue742_Test.razor diff --git a/BlazorAppTest/Pages/HxCheckbox_Issue742_Test.razor b/BlazorAppTest/Pages/HxCheckbox_Issue742_Test.razor new file mode 100644 index 00000000..da79d410 --- /dev/null +++ b/BlazorAppTest/Pages/HxCheckbox_Issue742_Test.razor @@ -0,0 +1,46 @@ +@page "/HxCheckbox_Issue742_Test" + +

Issue 742

+ +

HxSwitch

+ + + + + + + + + + + +
+ +
+ + + +

HxCheckbox

+ + + + + + + + + + + + +
+ +
+ + + +@code +{ + private string value; + private bool valueBool; +} \ No newline at end of file diff --git a/Havit.Blazor.Components.Web.Bootstrap/Forms/HxCheckbox.cs b/Havit.Blazor.Components.Web.Bootstrap/Forms/HxCheckbox.cs index 1c3de865..37462373 100644 --- a/Havit.Blazor.Components.Web.Bootstrap/Forms/HxCheckbox.cs +++ b/Havit.Blazor.Components.Web.Bootstrap/Forms/HxCheckbox.cs @@ -35,7 +35,7 @@ public class HxCheckbox : HxInputBase [Parameter] public string TextCssClass { get; set; } /// - /// Allows grouping checkboxes on the same horizontal row by rendering them inline. The default value is false. + /// Allows grouping checkboxes on the same horizontal row by rendering them inline. The default value is false. /// This only works when there is no label, no hint, and no validation message. /// [Parameter] public bool Inline { get; set; } @@ -53,13 +53,14 @@ public class HxCheckbox : HxInputBase /// private protected override string CoreCssClass => CssClassHelper.Combine( base.CoreCssClass, - NeedsFormCheckOuter ? CssClassHelper.Combine(this.CoreFormElementCssClass, Inline ? "form-check-inline" : null) : null, + NeedsInnerDiv ? null : AdditionalFormElementCssClass, + NeedsFormCheckOuter ? CssClassHelper.Combine("form-check", Inline ? "form-check-inline" : null) : null, Reverse ? "form-check-reverse" : null); /// - /// CSS class for the form-check element (e.g., allows adding form-switch in derived ). + /// CSS class that allows adding form-switch in derived . /// - private protected virtual string CoreFormElementCssClass => "form-check"; + private protected virtual string AdditionalFormElementCssClass => null; /// /// For a naked checkbox without Label/LabelTemplate, we add form-check, form-check-inline to the parent div (allows combining with CssClass etc.). @@ -69,21 +70,25 @@ public class HxCheckbox : HxInputBase /// Siblings label, input, label do not work well and there is nowhere to add form-check. /// Therefore, we wrap the input and label in the additional div. /// - private protected bool NeedsFormCheckInnerDiv => !String.IsNullOrWhiteSpace(this.Label) || (this.LabelTemplate is not null); + private protected bool NeedsInnerDiv => !string.IsNullOrWhiteSpace(this.Label) || (this.LabelTemplate is not null); + + /// + /// For checkbox without any Text/TextTemplate we do not add form-check class. + /// + private protected bool NeedsFormCheck => !string.IsNullOrWhiteSpace(this.Text) || (this.TextTemplate is not null); /// /// For checkbox without any Label/LabelTemplate and without Text/TextTemplate we do not add form-check to the parent div. /// - private protected bool NeedsFormCheckOuter => !NeedsFormCheckInnerDiv - && (!string.IsNullOrWhiteSpace(this.Text) || (this.TextTemplate is not null)); + private protected bool NeedsFormCheckOuter => !NeedsInnerDiv && NeedsFormCheck; /// protected override void BuildRenderInput(RenderTreeBuilder builder) { - if (NeedsFormCheckInnerDiv) + if (NeedsInnerDiv) { builder.OpenElement(-2, "div"); - builder.AddAttribute(-1, "class", this.CoreFormElementCssClass); + builder.AddAttribute(-1, "class", CssClassHelper.Combine(NeedsFormCheck ? "form-check" : null, AdditionalFormElementCssClass)); } EnsureInputId(); // must be called before the input is rendered @@ -109,7 +114,7 @@ protected override void BuildRenderInput(RenderTreeBuilder builder) builder.AddContent(2004, TextTemplate); builder.CloseElement(); // label - if (NeedsFormCheckInnerDiv) + if (NeedsInnerDiv) { builder.CloseElement(); // div } diff --git a/Havit.Blazor.Components.Web.Bootstrap/Forms/HxSwitch.cs b/Havit.Blazor.Components.Web.Bootstrap/Forms/HxSwitch.cs index 2ab46eda..3563534d 100644 --- a/Havit.Blazor.Components.Web.Bootstrap/Forms/HxSwitch.cs +++ b/Havit.Blazor.Components.Web.Bootstrap/Forms/HxSwitch.cs @@ -7,6 +7,6 @@ /// public class HxSwitch : HxCheckbox { - /// - private protected override string CoreFormElementCssClass => "form-check form-switch"; + /// + private protected override string AdditionalFormElementCssClass => "form-switch"; } \ No newline at end of file diff --git a/Havit.Blazor.Documentation/XmlDoc/Havit.Blazor.Components.Web.Bootstrap.xml b/Havit.Blazor.Documentation/XmlDoc/Havit.Blazor.Components.Web.Bootstrap.xml index 0edb9596..19d1342c 100644 --- a/Havit.Blazor.Documentation/XmlDoc/Havit.Blazor.Components.Web.Bootstrap.xml +++ b/Havit.Blazor.Documentation/XmlDoc/Havit.Blazor.Components.Web.Bootstrap.xml @@ -3339,7 +3339,7 @@ - Allows grouping checkboxes on the same horizontal row by rendering them inline. The default value is false. + Allows grouping checkboxes on the same horizontal row by rendering them inline. The default value is false. This only works when there is no label, no hint, and no validation message. @@ -3354,12 +3354,12 @@ - + - CSS class for the form-check element (e.g., allows adding form-switch in derived ). + CSS class that allows adding form-switch in derived . - + For a naked checkbox without Label/LabelTemplate, we add form-check, form-check-inline to the parent div (allows combining with CssClass etc.). It is expected that there is just the parent div, input, and label for Text/TextTemplate. @@ -3369,6 +3369,11 @@ Therefore, we wrap the input and label in the additional div. + + + For checkbox without any Text/TextTemplate we do not add form-check class. + + For checkbox without any Label/LabelTemplate and without Text/TextTemplate we do not add form-check to the parent div. @@ -4910,8 +4915,8 @@ Full documentation and demos: https://havit.blazor.eu/components/HxSwitch - - + +