Skip to content

Commit

Permalink
Merge pull request #743 from havit/issue/742
Browse files Browse the repository at this point in the history 
[HxSwitch] Classes form-check form-switch missing
  • Loading branch information
@hakenr
hakenr authored Jan 25, 2024
2 parents 7494edc + 65cea4c commit f469d14
Show file tree
Hide file tree
Showing 4 changed files with 74 additions and 18 deletions.
46 changes: 46 additions & 0 deletions BlazorAppTest/Pages/HxCheckbox_Issue742_Test.razor
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,46 @@
@page "/HxCheckbox_Issue742_Test"

<h1>Issue 742</h1>

<h2>HxSwitch</h2>

<HxSwitch @bind-Value="valueBool" />

<HxSwitch @bind-Value="valueBool" Text="Switch without label" />

<HxSwitch Label="Switch with label" @bind-Value="valueBool" />

<HxSwitch Label="Switch with label" Text="And text" @bind-Value="valueBool" />

<HxInputText Label="Input groups (template with switch)" @bind-Value="@value">
<InputGroupStartTemplate>
<div class="input-group-text">
<HxSwitch @bind-Value="@valueBool" CssClass="mt-0" />
</div>
</InputGroupStartTemplate>
</HxInputText>

<h2>HxCheckbox</h2>

<HxCheckbox @bind-Value="valueBool" />

<HxCheckbox @bind-Value="valueBool" Text="Checkbox without label" />

<HxCheckbox Label="Checkbox with label" @bind-Value="valueBool" />

<HxCheckbox Label="Checkbox with label" Text="And text" @bind-Value="valueBool" />


<HxInputText Label="Input groups (template with checkbox)" @bind-Value="@value">
<InputGroupStartTemplate>
<div class="input-group-text">
<HxCheckbox @bind-Value="@valueBool" CssClass="mt-0" />
</div>
</InputGroupStartTemplate>
</HxInputText>

@code
{
private string value;
private bool valueBool;
}
25 changes: 15 additions & 10 deletions Havit.Blazor.Components.Web.Bootstrap/Forms/HxCheckbox.cs
View file
Original file line number Diff line number Diff line change
Expand Up @@ -35,7 +35,7 @@ public class HxCheckbox : HxInputBase<bool>
[Parameter] public string TextCssClass { get; set; }

/// <summary>
/// Allows grouping checkboxes on the same horizontal row by rendering them inline. The default value is <c>false</c>.
/// Allows grouping checkboxes on the same horizontal row by rendering them inline. The default value is <c>false</c>.
/// This only works when there is no label, no hint, and no validation message.
/// </summary>
[Parameter] public bool Inline { get; set; }
Expand All @@ -53,13 +53,14 @@ public class HxCheckbox : HxInputBase<bool>
/// <inheritdoc cref="HxInputBase{TValue}.CoreCssClass" />
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);

/// <summary>
/// CSS class for the <c>form-check</c> element (e.g., allows adding <c>form-switch</c> in derived <see cref="HxSwitch"/>).
/// CSS class that allows adding <c>form-switch</c> in derived <see cref="HxSwitch"/>.
/// </summary>
private protected virtual string CoreFormElementCssClass => "form-check";
private protected virtual string AdditionalFormElementCssClass => null;

/// <summary>
/// For a naked checkbox without Label/LabelTemplate, we add form-check, form-check-inline to the parent div (allows combining with CssClass etc.).
Expand All @@ -69,21 +70,25 @@ public class HxCheckbox : HxInputBase<bool>
/// 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.
/// </summary>
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);

/// <summary>
/// For checkbox without any Text/TextTemplate we do not add form-check class.
/// </summary>
private protected bool NeedsFormCheck => !string.IsNullOrWhiteSpace(this.Text) || (this.TextTemplate is not null);

/// <summary>
/// For checkbox without any Label/LabelTemplate and without Text/TextTemplate we do not add form-check to the parent div.
/// </summary>
private protected bool NeedsFormCheckOuter => !NeedsFormCheckInnerDiv
&& (!string.IsNullOrWhiteSpace(this.Text) || (this.TextTemplate is not null));
private protected bool NeedsFormCheckOuter => !NeedsInnerDiv && NeedsFormCheck;

/// <inheritdoc />
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
Expand All @@ -109,7 +114,7 @@ protected override void BuildRenderInput(RenderTreeBuilder builder)
builder.AddContent(2004, TextTemplate);
builder.CloseElement(); // label

if (NeedsFormCheckInnerDiv)
if (NeedsInnerDiv)
{
builder.CloseElement(); // div
}
Expand Down
4 changes: 2 additions & 2 deletions Havit.Blazor.Components.Web.Bootstrap/Forms/HxSwitch.cs
View file
Original file line number Diff line number Diff line change
Expand Up @@ -7,6 +7,6 @@
/// </summary>
public class HxSwitch : HxCheckbox
{
/// <inheritdoc cref="HxCheckbox.CoreFormElementCssClass" />
private protected override string CoreFormElementCssClass => "form-check form-switch";
/// <inheritdoc cref="HxCheckbox.AdditionalFormElementCssClass" />
private protected override string AdditionalFormElementCssClass => "form-switch";
}
17 changes: 11 additions & 6 deletions Havit.Blazor.Documentation/XmlDoc/Havit.Blazor.Components.Web.Bootstrap.xml
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3339,7 +3339,7 @@
</member>
<member name="P:Havit.Blazor.Components.Web.Bootstrap.HxCheckbox.Inline">
<summary>
Allows grouping checkboxes on the same horizontal row by rendering them inline. The default value is <c>false</c>.
Allows grouping checkboxes on the same horizontal row by rendering them inline. The default value is <c>false</c>.
This only works when there is no label, no hint, and no validation message.
</summary>
</member>
Expand All @@ -3354,12 +3354,12 @@
<member name="P:Havit.Blazor.Components.Web.Bootstrap.HxCheckbox.CoreCssClass">
<inheritdoc cref="P:Havit.Blazor.Components.Web.Bootstrap.HxInputBase`1.CoreCssClass" />
</member>
<member name="P:Havit.Blazor.Components.Web.Bootstrap.HxCheckbox.CoreFormElementCssClass">
<member name="P:Havit.Blazor.Components.Web.Bootstrap.HxCheckbox.AdditionalFormElementCssClass">
<summary>
CSS class for the <c>form-check</c> element (e.g., allows adding <c>form-switch</c> in derived <see cref="T:Havit.Blazor.Components.Web.Bootstrap.HxSwitch"/>).
CSS class that allows adding <c>form-switch</c> in derived <see cref="T:Havit.Blazor.Components.Web.Bootstrap.HxSwitch"/>.
</summary>
</member>
<member name="P:Havit.Blazor.Components.Web.Bootstrap.HxCheckbox.NeedsFormCheckInnerDiv">
<member name="P:Havit.Blazor.Components.Web.Bootstrap.HxCheckbox.NeedsInnerDiv">
<summary>
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.
Expand All @@ -3369,6 +3369,11 @@
Therefore, we wrap the input and label in the additional div.
</summary>
</member>
<member name="P:Havit.Blazor.Components.Web.Bootstrap.HxCheckbox.NeedsFormCheck">
<summary>
For checkbox without any Text/TextTemplate we do not add form-check class.
</summary>
</member>
<member name="P:Havit.Blazor.Components.Web.Bootstrap.HxCheckbox.NeedsFormCheckOuter">
<summary>
For checkbox without any Label/LabelTemplate and without Text/TextTemplate we do not add form-check to the parent div.
Expand Down Expand Up @@ -4910,8 +4915,8 @@
Full documentation and demos: <see href="https://havit.blazor.eu/components/HxSwitch">https://havit.blazor.eu/components/HxSwitch</see>
</summary>
</member>
<member name="P:Havit.Blazor.Components.Web.Bootstrap.HxSwitch.CoreFormElementCssClass">
<inheritdoc cref="P:Havit.Blazor.Components.Web.Bootstrap.HxCheckbox.CoreFormElementCssClass" />
<member name="P:Havit.Blazor.Components.Web.Bootstrap.HxSwitch.AdditionalFormElementCssClass">
<inheritdoc cref="P:Havit.Blazor.Components.Web.Bootstrap.HxCheckbox.AdditionalFormElementCssClass" />
</member>
<member name="T:Havit.Blazor.Components.Web.Bootstrap.HxValidationMessage`1">
<summary>
Expand Down

0 comments on commit f469d14

Please sign in to comment.