WIP

microsoft · Jan 21, 2025 · bd4dc6b · bd4dc6b
1 parent 6a49439
commit bd4dc6b
Show file tree

Hide file tree

Showing 6 changed files with 84 additions and 47 deletions.
diff --git a/...FluentUI.Demo.Client/Documentation/Components/Checkbox/Examples/CheckboxAppearances.razor b/...FluentUI.Demo.Client/Documentation/Components/Checkbox/Examples/CheckboxAppearances.razor
@@ -1,23 +1,6 @@
-
-
-<div style="display: flex; gap: 12px; margin-bottom: 24px;">
-    <FluentCheckbox Shape="@CheckboxShape.Square" Label="Square checked" @bind-Checked="@CheckedValue" />
-    <FluentCheckbox Shape="@CheckboxShape.Circular" Label="Circular checked" @bind-Checked="@CheckedValue" />
+<div style="display: flex;flex-direction: column; gap: 12px;">
+    <FluentCheckbox Shape="@CheckboxShape.Square" Label="Square checked" Checked="true" />
+    <FluentCheckbox Shape="@CheckboxShape.Circular" Label="Circular checked" Checked="true" />
+    <FluentCheckbox Shape="@CheckboxShape.Square" Label="Square unchecked" Checked="false" />
+    <FluentCheckbox Shape="@CheckboxShape.Circular" Label="Circular unchecked" Checked="false" />
 </div>
-
-<div style="display: flex; gap: 12px; margin-bottom: 24px;">
-    <FluentCheckbox Shape="@CheckboxShape.Square" Label="Square unchecked" @bind-Checked="@UncheckedValue" />
-    <FluentCheckbox Shape="@CheckboxShape.Circular" Label="Circular unchecked" @bind-Checked="@UncheckedValue" />
-</div>
-
-<div style="display: flex; gap: 12px; margin-bottom: 24px;">
-    <FluentCheckbox Shape="@CheckboxShape.Square" Label="Square indeterminate" @bind-Indeterminate="@IndeterminateValue" />
-    <FluentCheckbox Shape="@CheckboxShape.Circular" Label="Circular indeterminate" @bind-Indeterminate="@IndeterminateValue" />
-</div>
-
-@code
-{
-    bool CheckedValue = true;
-    bool UncheckedValue = false;
-    bool IndeterminateValue = true;
-}
diff --git a/...mo/FluentUI.Demo.Client/Documentation/Components/Checkbox/Examples/CheckboxDisabled.razor b/...mo/FluentUI.Demo.Client/Documentation/Components/Checkbox/Examples/CheckboxDisabled.razor
@@ -0,0 +1,7 @@
+<div style="display: flex;flex-direction: column; gap: 12px;">
+    <FluentCheckbox Shape="@CheckboxShape.Square" Label="Square disabled checked" Disabled="true" Checked="true" />
+    <FluentCheckbox Shape="@CheckboxShape.Circular" Label="Circular disabled checked" Disabled="true" Checked="true" />
+
+    <FluentCheckbox Shape="@CheckboxShape.Square" Label="Square disabled unchecked" Disabled="true" Checked="false" />
+    <FluentCheckbox Shape="@CheckboxShape.Circular" Label="Circular disabled unchecked" Disabled="true" Checked="false" />
+</div>
diff --git a/...mo/FluentUI.Demo.Client/Documentation/Components/Checkbox/Examples/CheckboxRequired.razor b/...mo/FluentUI.Demo.Client/Documentation/Components/Checkbox/Examples/CheckboxRequired.razor
@@ -0,0 +1,31 @@
+
+<h2>With required validation</h2>
+<EditForm Model="new object()">
+    <div style="display: flex;flex-direction: column; gap: 12px;">
+        <FluentCheckbox Shape="@CheckboxShape.Square"
+                        Label="Square required"
+                        Required="true" />
+
+        <FluentCheckbox Shape="@CheckboxShape.Circular"
+                        Label="Circular required"
+                        Required="true" />
+
+        <FluentButton Type="ButtonType.Submit">Submit</FluentButton>
+    </div>
+</EditForm>
+<h2>With defined required validation text</h2>
+<EditForm Model="new object()">
+    <div style="display: flex;flex-direction: column; gap: 12px;">
+        <FluentCheckbox Shape="@CheckboxShape.Square"
+                        Label="Square required with defined required validation text"
+                        RequiredLabel="This filed is required"
+                        Required="true" />
+
+        <FluentCheckbox Shape="@CheckboxShape.Circular"
+                        Label="Circular required with defined required validation text"
+                        RequiredLabel="This filed is required"
+                        Required="true" />
+
+        <FluentButton Type="ButtonType.Submit">Submit</FluentButton>
+    </div>
+</EditForm>
diff --git a/...s/Demo/FluentUI.Demo.Client/Documentation/Components/Checkbox/FluentCheckbox.md b/...s/Demo/FluentUI.Demo.Client/Documentation/Components/Checkbox/FluentCheckbox.md
@@ -24,22 +24,25 @@ Although not recommended by FluentUI, a checkbox can be rendered inline with tex
 ```
 <div>
     Name:
-    <Checkbox Style="display: inline-block;" />
+    <FluentCheckBox Style="display: inline-block;" />
 </div>
 ```
 
-## Binding with ImmediateDelay
+## States
 
-In some cases, you may want to bind the value of the checkbox to a property of a model
-and update the model immediately after the user changes the state. This can be achieved by setting the `Immediate` and the optional `ImmediateDelay` properties.
+A checkbox can be in different states, such as `Disabled`, `Required`, and `Indeterminate`.
 
-{{ CheckboxImmediate }}
+### Disabled
 
-## States
+{{ CheckboxDisabled }}
+
+### Required
+
+{{ CheckboxRequired }}
 
-A checkbox can be in different states, such as `Disabled`, `Indeterminate`, and `Required`.
+### Indeterminate
 
-{{ CheckboxState }}
+{{ CheckboxIndeterminate }}
 
 ## Prefix and Suffix
 

diff --git a/src/Core/Components/Checkbox/FluentCheckbox.razor b/src/Core/Components/Checkbox/FluentCheckbox.razor
@@ -1,12 +1,12 @@
 @namespace Microsoft.FluentUI.AspNetCore.Components
 @using Microsoft.FluentUI.AspNetCore.Components.Extensions
-@inherits FluentInputImmediateBase<bool?>
+@inherits FluentInputBase<bool?>
 
 <fluent-field label-position="after">
-    <FluentLabel Required="@Required" for="@Id" slot="label" >
+    <label Required="@Required" for="@Id" slot="label">
         @Label
         @LabelTemplate
-    </FluentLabel>
+    </label>
 
     <fluent-checkbox id="@Id"
                      @ref="@Element"
@@ -22,6 +22,7 @@
                      @onchange="@ChangeHandlerAsync"
                      @attributes="AdditionalAttributes"
                      slot="input">
+
         @if (StartTemplate != null)
         {
             <div slot="start">
@@ -36,4 +37,12 @@
             </div>
         }
     </fluent-checkbox>
+
+    @if (!string.IsNullOrEmpty(RequiredLabel) || RequiredLabelTemplate != null)
+    {
+        <FluentLabel Required="@Required" slot="message" flag="value-missing">
+            @RequiredLabel
+            @RequiredLabelTemplate
+        </FluentLabel>
+    }
 </fluent-field>
diff --git a/src/Core/Components/Checkbox/FluentCheckbox.razor.cs b/src/Core/Components/Checkbox/FluentCheckbox.razor.cs
@@ -5,17 +5,15 @@
 using System.Diagnostics.CodeAnalysis;
 using System.Reflection.Metadata;
 using Microsoft.AspNetCore.Components;
-using Microsoft.JSInterop;
+using Microsoft.FluentUI.AspNetCore.Components.Utilities;
 
 namespace Microsoft.FluentUI.AspNetCore.Components;
 
 /// <summary>
 /// The FluentCheckbox component is used to render a checkbox input.
 /// </summary>
-public partial class FluentCheckbox : FluentInputImmediateBase<bool?>, IFluentComponentElementBase
+public partial class FluentCheckbox : FluentInputBase<bool?>, IFluentComponentElementBase
 {
-    private const string JAVASCRIPT_FILE = FluentJSModule.JAVASCRIPT_ROOT + "TextInput/FluentTextInput.razor.js";
-
     /// <inheritdoc />
     [Parameter]
     public ElementReference Element { get; set; }
@@ -44,6 +42,19 @@ public partial class FluentCheckbox : FluentInputImmediateBase<bool?>, IFluentCo
     [Parameter]
     public string? Placeholder { get; set; }
 
+    /// <summary>
+    /// Gets or sets the text to required label when the checkbox should be checked.
+    /// </summary>
+    [Parameter]
+    public string? RequiredLabel { get; set; }
+
+    /// <summary>
+    /// Gets or sets the content to required label Gets or sets the text to required label when the checkbox should be checked..
+    /// This is usually displayed just above the checkbox
+    /// </summary>
+    [Parameter]
+    public virtual RenderFragment? RequiredLabelTemplate { get; set; }
+
     /// <summary>
     /// Gets or sets the content to prefix the input component.
     /// </summary>
@@ -63,17 +74,10 @@ public partial class FluentCheckbox : FluentInputImmediateBase<bool?>, IFluentCo
     public CheckboxSize? Size { get; set; } = CheckboxSize.Medium;
 
     /// <inheritdoc />
-    protected override async Task OnAfterRenderAsync(bool firstRender)
+    protected override void OnParametersSet()
     {
-        if (firstRender)
-        {
-            // Import the JavaScript module
-            var jsModule = await JSModule.ImportJavaScriptModuleAsync(JAVASCRIPT_FILE);
-
-            // Call a function from the JavaScript module
-            // Wait for this PR to delete the code: https://github.com/microsoft/fluentui/pull/33144
-            await jsModule.InvokeVoidAsync("Microsoft.FluentUI.Blazor.TextInput.ObserveAttributeChanges", Element);
-        }
+        base.OnParametersSet();
+        Id ??= $"checkbox-{Identifier.NewId()}";
     }
 
     /// <summary>