feat(components/forms): add checkbox labelText input

apps/code-examples/src/app/code-examples/forms/checkbox/basic/demo.component.html

@@ -1,20 +1,15 @@
 <form [formGroup]="formGroup" (ngSubmit)="onSubmit()">
+  <label class="sky-control-label"> Contact method </label>
   <div class="sky-margin-stacked-xl">
     <ul class="sky-list-unstyled">
       <li>
-        <sky-checkbox formControlName="email">
-          <sky-checkbox-label> Email </sky-checkbox-label>
-        </sky-checkbox>
+        <sky-checkbox formControlName="email" labelText="Email" />
       </li>
       <li>
-        <sky-checkbox formControlName="phone">
-          <sky-checkbox-label> Phone </sky-checkbox-label>
-        </sky-checkbox>
+        <sky-checkbox formControlName="phone" labelText="Phone" />
       </li>
       <li>
-        <sky-checkbox formControlName="text">
-          <sky-checkbox-label> Text </sky-checkbox-label>
-        </sky-checkbox>
+        <sky-checkbox formControlName="text" labelText="Text" />
       </li>
     </ul>
   </div>

apps/playground/src/app/components/forms/checkbox/checkbox.component.html

@@ -152,16 +152,9 @@ <h3>Template-driven checkbox</h3>
       ngModel
       [indeterminate]="indeterminate"
       [required]="required"
+      labelText="Check me"
       #templateDrivenCheckbox="ngModel"
-    >
-      <sky-checkbox-label>
-        Check me
-        <sky-help-inline
-          *ngIf="showInlineHelp"
-          class="sky-control-help"
-        ></sky-help-inline>
-      </sky-checkbox-label>
-    </sky-checkbox>
+    />
   </p>
 
   <table>
@@ -187,16 +180,9 @@ <h3>Reactive checkbox</h3>
     <sky-checkbox
       [indeterminate]="indeterminate"
       [required]="required"
+      labelText="Check me"
       formControlName="reactiveCheckbox"
-    >
-      <sky-checkbox-label>
-        Check me
-        <sky-help-inline
-          *ngIf="showInlineHelp"
-          class="sky-control-help"
-        ></sky-help-inline>
-      </sky-checkbox-label>
-    </sky-checkbox>
+    />
   </form>
 
   <table>

libs/components/forms/src/lib/modules/checkbox/checkbox.component.html

@@ -51,5 +51,10 @@
       />
     </ng-template>
   </span>
-  <ng-content select="sky-checkbox-label" />
+  <ng-container *ngIf="labelText; else labelElement">
+    <sky-checkbox-label>{{ labelText }}</sky-checkbox-label>
+  </ng-container>
+  <ng-template #labelElement>
+    <ng-content select="sky-checkbox-label" />
+  </ng-template>
 </label>

libs/components/forms/src/lib/modules/checkbox/checkbox.component.spec.ts

@@ -36,6 +36,7 @@ import { SkyCheckboxModule } from './checkbox.module';
       [disabled]="isDisabled"
       [icon]="icon"
       [id]="id"
+      [labelText]="labelText"
       [(indeterminate)]="indeterminate"
       (change)="checkboxChange($event)"
     >
@@ -54,6 +55,7 @@ class SingleCheckboxComponent implements AfterViewInit {
   public isChecked: boolean | undefined = false;
   public isDisabled = false;
   public showInlineHelp = false;
+  public labelText: string | undefined;
 
   @ViewChild(SkyCheckboxComponent)
   public checkboxComponent: SkyCheckboxComponent | undefined;
@@ -92,7 +94,12 @@ class CheckboxWithFormDirectivesComponent {
   template: `
     <div>
       <form>
-        <sky-checkbox name="cb" ngModel [required]="required">
+        <sky-checkbox
+          [labelText]="labelText"
+          name="cb"
+          ngModel
+          [required]="required"
+        >
           <sky-checkbox-label>
             Be good
             <span *ngIf="showInlineHelp">Help inline</span>
@@ -105,6 +112,7 @@ class CheckboxWithFormDirectivesComponent {
 class CheckboxWithRequiredInputComponent {
   public required = true;
   public showInlineHelp = false;
+  public labelText: string | undefined;
 }
 
 /** Simple component for testing a required template-driven checkbox. */
@@ -152,6 +160,7 @@ class CheckboxWithReactiveFormComponent {
           name="cb"
           formControlName="checkbox1"
           [required]="required"
+          [labelText]="labelText"
           #wut
         >
           <sky-checkbox-label> Be good </sky-checkbox-label>
@@ -164,6 +173,7 @@ class CheckboxWithReactiveFormRequiredInputComponent {
   public checkbox1: UntypedFormControl = new UntypedFormControl(false);
   public checkboxForm = new UntypedFormGroup({ checkbox1: this.checkbox1 });
   public required = true;
+  public labelText: string | undefined;
 }
 
 /** Simple component for testing a reactive form checkbox with required validator. */
@@ -429,6 +439,7 @@ describe('Checkbox component', () => {
     });
 
     it('should project the checkbox content into the label element', () => {
+      fixture.detectChanges();
       const label = checkboxNativeElement?.querySelector(
         '.sky-checkbox-wrapper sky-checkbox-label',
       );

libs/components/forms/src/lib/modules/checkbox/checkbox.component.ts

@@ -198,6 +198,13 @@ export class SkyCheckboxComponent implements ControlValueAccessor, OnInit {
     return this.#_required;
   }
 
+  /**
+   * The text to display as the checkbox's label. Use this instead of the `sky-checkbox-label` when the label is text-only.
+   * Specifying `labelText` also enables automatic error message handling for checkbox.
+   */
+  @Input()
+  public labelText: string | undefined;
+
   /**
    * Fires when users select or deselect the checkbox.
    */