feat(toggle): add helper and error text properties and design

Author: brandyscarney

core/api.txt

@@ -1940,6 +1940,8 @@ ion-toggle,prop,checked,boolean,false,false,false
 ion-toggle,prop,color,"danger" | "dark" | "light" | "medium" | "primary" | "secondary" | "success" | "tertiary" | "warning" | string & Record<never, never> | undefined,undefined,false,true
 ion-toggle,prop,disabled,boolean,false,false,false
 ion-toggle,prop,enableOnOffLabels,boolean | undefined,config.get('toggleOnOffLabels'),false,false
+ion-toggle,prop,errorText,string | undefined,undefined,false,false
+ion-toggle,prop,helperText,string | undefined,undefined,false,false
 ion-toggle,prop,justify,"end" | "space-between" | "start" | undefined,undefined,false,false
 ion-toggle,prop,labelPlacement,"end" | "fixed" | "stacked" | "start",'start',false,false
 ion-toggle,prop,mode,"ios" | "md",undefined,false,false
@@ -1972,8 +1974,11 @@ ion-toggle,css-prop,--track-background,ios
 ion-toggle,css-prop,--track-background,md
 ion-toggle,css-prop,--track-background-checked,ios
 ion-toggle,css-prop,--track-background-checked,md
+ion-toggle,part,error-text
 ion-toggle,part,handle
+ion-toggle,part,helper-text
 ion-toggle,part,label
+ion-toggle,part,supporting-text
 ion-toggle,part,track
 
 ion-toolbar,shadow

core/src/components.d.ts

@@ -3264,6 +3264,14 @@ export namespace Components {
           * Enables the on/off accessibility switch labels within the toggle.
          */
         "enableOnOffLabels": boolean | undefined;
+        /**
+          * Text that is placed under the toggle and displayed when an error is detected.
+         */
+        "errorText"?: string;
+        /**
+          * Text that is placed under the toggle and displayed when no error is detected.
+         */
+        "helperText"?: string;
         /**
           * How to pack the label and toggle within a line. `"start"`: The label and toggle will appear on the left in LTR and on the right in RTL. `"end"`: The label and toggle will appear on the right in LTR and on the left in RTL. `"space-between"`: The label and toggle will appear on opposite ends of the line with space between the two elements. Setting this property will change the toggle `display` to `block`.
          */
@@ -8127,6 +8135,14 @@ declare namespace LocalJSX {
           * Enables the on/off accessibility switch labels within the toggle.
          */
         "enableOnOffLabels"?: boolean | undefined;
+        /**
+          * Text that is placed under the toggle and displayed when an error is detected.
+         */
+        "errorText"?: string;
+        /**
+          * Text that is placed under the toggle and displayed when no error is detected.
+         */
+        "helperText"?: string;
         /**
           * How to pack the label and toggle within a line. `"start"`: The label and toggle will appear on the left in LTR and on the right in RTL. `"end"`: The label and toggle will appear on the right in LTR and on the left in RTL. `"space-between"`: The label and toggle will appear on opposite ends of the line with space between the two elements. Setting this property will change the toggle `display` to `block`.
          */

core/src/components/toggle/toggle.scss

@@ -134,47 +134,53 @@ input {
   align-items: center;
 }
 
-// Toggle Justify
-// --------------------------------------------------
+// Toggle Bottom Content
+// ----------------------------------------------------------------
+
+.toggle-bottom {
+  @include padding(5px, null, null, null);
+
+  display: flex;
 
-:host(.toggle-justify-space-between) .toggle-wrapper {
   justify-content: space-between;
-}
 
-:host(.toggle-justify-start) .toggle-wrapper {
-  justify-content: start;
+  font-size: dynamic-font(12px);
+
+  white-space: normal;
 }
 
-:host(.toggle-justify-end) .toggle-wrapper {
-  justify-content: end;
+:host(.toggle-label-placement-stacked) .toggle-bottom {
+  font-size: dynamic-font(16px);
 }
 
-// Toggle Align
-// --------------------------------------------------
+// Toggle Hint Text
+// ----------------------------------------------------------------
 
+/**
+ * Error text should only be shown when .ion-invalid is
+ * present on the checkbox. Otherwise the helper text should
+ * be shown.
+ */
+.toggle-bottom .error-text {
+  display: none;
 
-:host(.toggle-alignment-start) .toggle-wrapper {
-  align-items: start;
+  color: ion-color(danger, base);
 }
 
-:host(.toggle-alignment-center) .toggle-wrapper {
-  align-items: center;
-}
+.toggle-bottom .helper-text {
+  display: block;
 
-// Justify Content & Align Items
-// ---------------------------------------------
+  color: $text-color-step-300;
+}
 
-// The toggle should be displayed as block when either justify
-// or alignment is set; otherwise, these properties will have no
-// visible effect.
-:host(.toggle-justify-space-between),
-:host(.toggle-justify-start),
-:host(.toggle-justify-end),
-:host(.toggle-alignment-start),
-:host(.toggle-alignment-center) {
+:host(.ion-touched.ion-invalid) .toggle-bottom .error-text {
   display: block;
 }
 
+:host(.ion-touched.ion-invalid) .toggle-bottom .helper-text {
+  display: none;
+}
+
 // Toggle Label Placement - Start
 // ----------------------------------------------------------------
 
@@ -204,6 +210,8 @@ input {
  */
 :host(.toggle-label-placement-end) .toggle-wrapper {
   flex-direction: row-reverse;
+
+  justify-content: start;
 }
 
 /**
@@ -247,6 +255,8 @@ input {
  */
 :host(.toggle-label-placement-stacked) .toggle-wrapper {
   flex-direction: column;
+
+  text-align: center;
 }
 
 :host(.toggle-label-placement-stacked) .label-text-wrapper {
@@ -274,6 +284,46 @@ input {
   @include transform-origin(center, top);
 }
 
+// Toggle Justify
+// --------------------------------------------------
+
+:host(.toggle-justify-space-between) .toggle-wrapper {
+  justify-content: space-between;
+}
+
+:host(.toggle-justify-start) .toggle-wrapper {
+  justify-content: start;
+}
+
+:host(.toggle-justify-end) .toggle-wrapper {
+  justify-content: end;
+}
+
+// Toggle Align
+// --------------------------------------------------
+
+:host(.toggle-alignment-start) .toggle-wrapper {
+  align-items: start;
+}
+
+:host(.toggle-alignment-center) .toggle-wrapper {
+  align-items: center;
+}
+
+// Justify Content & Align Items
+// ---------------------------------------------
+
+// The toggle should be displayed as block when either justify
+// or alignment is set; otherwise, these properties will have no
+// visible effect.
+:host(.toggle-justify-space-between),
+:host(.toggle-justify-start),
+:host(.toggle-justify-end),
+:host(.toggle-alignment-start),
+:host(.toggle-alignment-center) {
+  display: block;
+}
+
 // Toggle Background Track: Unchecked
 // --------------------------------------------------
 

core/src/components/toggle/toggle.tsx

@@ -21,6 +21,9 @@ import type { ToggleChangeEventDetail } from './toggle-interface';
  * @part track - The background track of the toggle.
  * @part handle - The toggle handle, or knob, used to change the checked state.
  * @part label - The label text describing the toggle.
+ * @part supporting-text - Supporting text displayed beneath the toggle label.
+ * @part helper-text - Supporting text displayed beneath the toggle label when the toggle is valid.
+ * @part error-text - Supporting text displayed beneath the toggle label when the toggle is invalid and touched.
  */
 @Component({
   tag: 'ion-toggle',
@@ -32,6 +35,8 @@ import type { ToggleChangeEventDetail } from './toggle-interface';
 })
 export class Toggle implements ComponentInterface {
   private inputId = `ion-tg-${toggleIds++}`;
+  private helperTextId = `${this.inputId}-helper-text`;
+  private errorTextId = `${this.inputId}-error-text`;
   private gesture?: Gesture;
   private focusEl?: HTMLElement;
   private lastDrag = 0;
@@ -65,6 +70,16 @@ export class Toggle implements ComponentInterface {
    */
   @Prop() disabled = false;
 
+  /**
+   * Text that is placed under the toggle and displayed when an error is detected.
+   */
+  @Prop() errorText?: string;
+
+  /**
+   * Text that is placed under the toggle and displayed when no error is detected.
+   */
+  @Prop() helperText?: string;
+
   /**
    * The value of the toggle does not mean if it's checked or not, use the `checked`
    * property for that.
@@ -289,6 +304,48 @@ export class Toggle implements ComponentInterface {
     return this.el.textContent !== '';
   }
 
+  private getHintTextID(): string | undefined {
+    const { el, helperText, errorText, helperTextId, errorTextId } = this;
+
+    if (el.classList.contains('ion-touched') && el.classList.contains('ion-invalid') && errorText) {
+      return errorTextId;
+    }
+
+    if (helperText) {
+      return helperTextId;
+    }
+
+    return undefined;
+  }
+
+  /**
+   * Responsible for rendering helper text and error text.
+   * This element should only be rendered if hint text is set.
+   */
+  private renderHintText() {
+    const { helperText, errorText, helperTextId, errorTextId } = this;
+
+    /**
+     * undefined and empty string values should
+     * be treated as not having helper/error text.
+     */
+    const hasHintText = !!helperText || !!errorText;
+    if (!hasHintText) {
+      return;
+    }
+
+    return (
+      <div class="toggle-bottom">
+        <div id={helperTextId} class="helper-text" part="supporting-text helper-text">
+          {helperText}
+        </div>
+        <div id={errorTextId} class="error-text" part="supporting-text error-text">
+          {errorText}
+        </div>
+      </div>
+    );
+  }
+
   render() {
     const { activated, color, checked, disabled, el, justify, labelPlacement, inputId, name, alignment } = this;
 
@@ -327,6 +384,8 @@ export class Toggle implements ComponentInterface {
             onFocus={() => this.onFocus()}
             onBlur={() => this.onBlur()}
             ref={(focusEl) => (this.focusEl = focusEl)}
+            aria-describedby={this.getHintTextID()}
+            aria-invalid={this.getHintTextID() === this.errorTextId}
             {...this.inheritedAttributes}
           />
           <div
@@ -337,6 +396,7 @@ export class Toggle implements ComponentInterface {
             part="label"
           >
             <slot></slot>
+            {this.renderHintText()}
           </div>
           <div class="native-wrapper">{this.renderToggleControl()}</div>
         </label>

packages/angular/src/directives/proxies.ts

@@ -2473,14 +2473,14 @@ Shorthand for ionToastDidDismiss.
 
 
 @ProxyCmp({
-  inputs: ['alignment', 'checked', 'color', 'disabled', 'enableOnOffLabels', 'justify', 'labelPlacement', 'mode', 'name', 'value']
+  inputs: ['alignment', 'checked', 'color', 'disabled', 'enableOnOffLabels', 'errorText', 'helperText', 'justify', 'labelPlacement', 'mode', 'name', 'value']
 })
 @Component({
   selector: 'ion-toggle',
   changeDetection: ChangeDetectionStrategy.OnPush,
   template: '<ng-content></ng-content>',
   // eslint-disable-next-line @angular-eslint/no-inputs-metadata-property
-  inputs: ['alignment', 'checked', 'color', 'disabled', 'enableOnOffLabels', 'justify', 'labelPlacement', 'mode', 'name', 'value'],
+  inputs: ['alignment', 'checked', 'color', 'disabled', 'enableOnOffLabels', 'errorText', 'helperText', 'justify', 'labelPlacement', 'mode', 'name', 'value'],
 })
 export class IonToggle {
   protected el: HTMLElement;

packages/vue/src/proxies.ts

@@ -895,6 +895,8 @@ export const IonToggle = /*@__PURE__*/ defineContainer<JSX.IonToggle, JSX.IonTog
   'name',
   'checked',
   'disabled',
+  'errorText',
+  'helperText',
   'value',
   'enableOnOffLabels',
   'labelPlacement',