feat(radio-group): add helperText and errorText properties (#30222)

Issue number: N/A

---------

## What is the current behavior?
Radio group does not support helper and error text.

## What is the new behavior?
Adds support for helper and error text.

## Does this introduce a breaking change?

- [ ] Yes
- [x] No

## Other information

- [Supporting Text:
Preview](https://ionic-framework-git-rou-11554-ionic1.vercel.app/src/components/radio-group/test/supporting-text)

---------

Co-authored-by: Brandy Smith <[email protected]>

Author: brandyscarney

core/api.txt

@@ -1352,6 +1352,8 @@ ion-radio,part,mark
 ion-radio-group,none
 ion-radio-group,prop,allowEmptySelection,boolean,false,false,false
 ion-radio-group,prop,compareWith,((currentValue: any, compareValue: any) => boolean) | null | string | undefined,undefined,false,false
+ion-radio-group,prop,errorText,string | undefined,undefined,false,false
+ion-radio-group,prop,helperText,string | undefined,undefined,false,false
 ion-radio-group,prop,name,string,this.inputId,false,false
 ion-radio-group,prop,value,any,undefined,false,false
 ion-radio-group,event,ionChange,RadioGroupChangeEventDetail<any>,true

core/src/components.d.ts

@@ -2315,6 +2315,14 @@ export namespace Components {
           * This property allows developers to specify a custom function or property name for comparing objects when determining the selected option in the ion-radio-group. When not specified, the default behavior will use strict equality (===) for comparison.
          */
         "compareWith"?: string | RadioGroupCompareFn | null;
+        /**
+          * The error text to display at the top of the radio group.
+         */
+        "errorText"?: string;
+        /**
+          * The helper text to display at the top of the radio group.
+         */
+        "helperText"?: string;
         /**
           * The name of the control, which is submitted with the form data.
          */
@@ -7111,6 +7119,14 @@ declare namespace LocalJSX {
           * This property allows developers to specify a custom function or property name for comparing objects when determining the selected option in the ion-radio-group. When not specified, the default behavior will use strict equality (===) for comparison.
          */
         "compareWith"?: string | RadioGroupCompareFn | null;
+        /**
+          * The error text to display at the top of the radio group.
+         */
+        "errorText"?: string;
+        /**
+          * The helper text to display at the top of the radio group.
+         */
+        "helperText"?: string;
         /**
           * The name of the control, which is submitted with the form data.
          */

core/src/components/radio-group/radio-group.ios.scss

@@ -0,0 +1,12 @@
+@import "../../themes/ionic.globals.ios";
+@import "./radio-group";
+@import "../item/item.ios.vars";
+
+// iOS Radio Group Top in List
+// --------------------------------------------------
+
+// Add padding to the error and helper text when used in a
+// list to align them with the list header and item text.
+ion-list .radio-group-top {
+  @include padding-horizontal($item-ios-padding-start, $item-ios-padding-end);
+}

core/src/components/radio-group/radio-group.md.scss

@@ -0,0 +1,12 @@
+@import "../../themes/ionic.globals.md";
+@import "./radio-group";
+@import "../item/item.md.vars";
+
+// Material Design Radio Group Top in List
+// --------------------------------------------------
+
+// Add padding to the error and helper text when used in a
+// list to align them with the list header and item text.
+ion-list .radio-group-top {
+  @include padding-horizontal($item-md-padding-start, $item-md-padding-end);
+}

core/src/components/radio-group/radio-group.scss

@@ -0,0 +1,44 @@
+@import "../../themes/ionic.globals";
+
+// Radio Group
+// --------------------------------------------------
+
+ion-radio-group {
+  // Prevents additional pixels from being rendered on top
+  vertical-align: top;
+}
+
+.radio-group-wrapper {
+  display: inline;
+}
+
+// Radio Group: Top
+// --------------------------------------------------
+
+.radio-group-top {
+  line-height: 1.5;
+}
+
+/**
+ * Error text should only be shown when .ion-invalid is present
+ * on the radio group. Otherwise the helper text should be shown.
+ */
+.radio-group-top .error-text {
+  display: none;
+
+  color: ion-color(danger, base);
+}
+
+.radio-group-top .helper-text {
+  display: block;
+
+  color: $text-color-step-300;
+}
+
+.ion-touched.ion-invalid .radio-group-top .error-text {
+  display: block;
+}
+
+.ion-touched.ion-invalid .radio-group-top .helper-text {
+  display: none;
+}

core/src/components/radio-group/radio-group.tsx

@@ -8,9 +8,15 @@ import type { RadioGroupChangeEventDetail, RadioGroupCompareFn } from './radio-g
 
 @Component({
   tag: 'ion-radio-group',
+  styleUrls: {
+    ios: 'radio-group.ios.scss',
+    md: 'radio-group.md.scss',
+  },
 })
 export class RadioGroup implements ComponentInterface {
   private inputId = `ion-rg-${radioGroupIds++}`;
+  private helperTextId = `${this.inputId}-helper-text`;
+  private errorTextId = `${this.inputId}-error-text`;
   private labelId = `${this.inputId}-lbl`;
   private label?: HTMLIonLabelElement | null;
 
@@ -39,6 +45,16 @@ export class RadioGroup implements ComponentInterface {
    */
   @Prop({ mutable: true }) value?: any | null;
 
+  /**
+   * The helper text to display at the top of the radio group.
+   */
+  @Prop() helperText?: string;
+
+  /**
+   * The error text to display at the top of the radio group.
+   */
+  @Prop() errorText?: string;
+
   @Watch('value')
   valueChanged(value: any | undefined) {
     this.setRadioTabindex(value);
@@ -224,13 +240,69 @@ export class RadioGroup implements ComponentInterface {
     radioToFocus?.setFocus();
   }
 
+  /**
+   * Renders the helper text or error text values
+   */
+  private renderHintText() {
+    const { helperText, errorText, helperTextId, errorTextId } = this;
+
+    const hasHintText = !!helperText || !!errorText;
+    if (!hasHintText) {
+      return;
+    }
+
+    return (
+      <div class="radio-group-top">
+        <div id={helperTextId} class="helper-text">
+          {helperText}
+        </div>
+        <div id={errorTextId} class="error-text">
+          {errorText}
+        </div>
+      </div>
+    );
+  }
+
+  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;
+  }
+
   render() {
     const { label, labelId, el, name, value } = this;
     const mode = getIonMode(this);
 
     renderHiddenInput(true, el, name, value, false);
 
-    return <Host role="radiogroup" aria-labelledby={label ? labelId : null} onClick={this.onClick} class={mode}></Host>;
+    return (
+      <Host
+        role="radiogroup"
+        aria-labelledby={label ? labelId : null}
+        aria-describedby={this.getHintTextID()}
+        aria-invalid={this.getHintTextID() === this.errorTextId}
+        onClick={this.onClick}
+        class={mode}
+      >
+        {this.renderHintText()}
+        {/*
+          TODO(FW-6279): Wrapping the slot in a div is a workaround due to a
+          Stencil issue. Without the wrapper, the children radio will fire the
+          blur event on focus, instead of waiting for them to be blurred.
+        */}
+        <div class="radio-group-wrapper">
+          <slot></slot>
+        </div>
+      </Host>
+    );
   }
 }