refactor(checkbox, radio-group, select, toggle): update variable

Author: thetaPC

core/src/components/checkbox/checkbox.tsx

@@ -127,7 +127,7 @@ export class Checkbox implements ComponentInterface {
    */
   @State() isInvalid = false;
 
-  @State() private hintTextID?: string;
+  @State() private hintTextId?: string;
 
   /**
    * Emitted when the checked property has changed as a result of a user action such as a click.
@@ -174,7 +174,7 @@ export class Checkbox implements ComponentInterface {
            * a higher priority.
            */
           Promise.resolve().then(() => {
-            this.hintTextID = this.getHintTextID();
+            this.hintTextId = this.getHintTextId();
           });
         }
       });
@@ -194,7 +194,7 @@ export class Checkbox implements ComponentInterface {
       ...inheritAriaAttributes(this.el),
     };
 
-    this.hintTextID = this.getHintTextID();
+    this.hintTextId = this.getHintTextId();
   }
 
   disconnectedCallback() {
@@ -265,7 +265,7 @@ export class Checkbox implements ComponentInterface {
     ev.stopPropagation();
   };
 
-  private getHintTextID(): string | undefined {
+  private getHintTextId(): string | undefined {
     const { helperText, errorText, helperTextId, errorTextId, isInvalid } = this;
 
     if (isInvalid && errorText) {
@@ -336,7 +336,7 @@ export class Checkbox implements ComponentInterface {
       <Host
         role="checkbox"
         aria-checked={indeterminate ? 'mixed' : `${checked}`}
-        aria-describedby={this.hintTextID}
+        aria-describedby={this.hintTextId}
         aria-invalid={this.isInvalid ? 'true' : undefined}
         aria-labelledby={hasLabelContent ? this.inputLabelId : null}
         aria-label={inheritedAttributes['aria-label'] || null}

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

@@ -29,7 +29,7 @@ export class RadioGroup implements ComponentInterface {
    */
   @State() isInvalid = false;
 
-  @State() private hintTextID?: string;
+  @State() private hintTextId?: string;
 
   /**
    * If `true`, the radios can be deselected.
@@ -156,7 +156,7 @@ export class RadioGroup implements ComponentInterface {
            * a higher priority.
            */
           Promise.resolve().then(() => {
-            this.hintTextID = this.getHintTextID();
+            this.hintTextId = this.getHintTextId();
           });
         }
       });
@@ -172,7 +172,7 @@ export class RadioGroup implements ComponentInterface {
   }
 
   componentWillLoad() {
-    this.hintTextID = this.getHintTextID();
+    this.hintTextId = this.getHintTextId();
   }
 
   disconnectedCallback() {
@@ -323,7 +323,7 @@ export class RadioGroup implements ComponentInterface {
     );
   }
 
-  private getHintTextID(): string | undefined {
+  private getHintTextId(): string | undefined {
     const { helperText, errorText, helperTextId, errorTextId, isInvalid } = this;
 
     if (isInvalid && errorText) {
@@ -347,7 +347,7 @@ export class RadioGroup implements ComponentInterface {
       <Host
         role="radiogroup"
         aria-labelledby={label ? labelId : null}
-        aria-describedby={this.hintTextID}
+        aria-describedby={this.hintTextId}
         aria-invalid={this.isInvalid ? 'true' : undefined}
         onClick={this.onClick}
         class={mode}

core/src/components/select/select.tsx

@@ -87,7 +87,7 @@ export class Select implements ComponentInterface {
    */
   @State() isInvalid = false;
 
-  @State() private hintTextID?: string;
+  @State() private?: string;
 
   /**
    * The text to display on the cancel button.
@@ -332,7 +332,7 @@ export class Select implements ComponentInterface {
            * a higher priority.
            */
           Promise.resolve().then(() => {
-            this.hintTextID = this.getHintTextID();
+            this.hintTextId = this.getHintTextId();
           });
         }
       });
@@ -350,7 +350,7 @@ export class Select implements ComponentInterface {
   componentWillLoad() {
     this.inheritedAttributes = inheritAttributes(this.el, ['aria-label']);
 
-    this.hintTextID = this.getHintTextID();
+    this.hintTextId = this.getHintTextId();
   }
 
   componentDidLoad() {
@@ -1111,7 +1111,7 @@ export class Select implements ComponentInterface {
         aria-label={this.ariaLabel}
         aria-haspopup="dialog"
         aria-expanded={`${isExpanded}`}
-        aria-describedby={this.hintTextID}
+        aria-describedby={this.hintTextId}
         aria-invalid={this.isInvalid ? 'true' : undefined}
         aria-required={`${required}`}
         onFocus={this.onFocus}
@@ -1121,7 +1121,7 @@ export class Select implements ComponentInterface {
     );
   }
 
-  private getHintTextID(): string | undefined {
+  private getHintTextId(): string | undefined {
     const { helperText, errorText, helperTextId, errorTextId, isInvalid } = this;
 
     if (isInvalid && errorText) {

core/src/components/toggle/toggle.tsx

@@ -56,7 +56,7 @@ export class Toggle implements ComponentInterface {
    */
   @State() isInvalid = false;
 
-  @State() private hintTextID?: string;
+  @State() private hintTextId?: string;
 
   /**
    * The color to use from your application's color palette.
@@ -214,7 +214,7 @@ export class Toggle implements ComponentInterface {
            * a higher priority.
            */
           Promise.resolve().then(() => {
-            this.hintTextID = this.getHintTextID();
+            this.hintTextId = this.getHintTextId();
           });
         }
       });
@@ -270,7 +270,7 @@ export class Toggle implements ComponentInterface {
       ...inheritAriaAttributes(this.el),
     };
 
-    this.hintTextID = this.getHintTextID();
+    this.hintTextId = this.getHintTextId();
   }
 
   private onStart() {
@@ -393,7 +393,7 @@ export class Toggle implements ComponentInterface {
     return this.el.textContent !== '';
   }
 
-  private getHintTextID(): string | undefined {
+  private getHintTextId(): string | undefined {
     const { helperText, errorText, helperTextId, errorTextId, isInvalid } = this;
 
     if (isInvalid && errorText) {
@@ -462,7 +462,7 @@ export class Toggle implements ComponentInterface {
       <Host
         role="switch"
         aria-checked={`${checked}`}
-        aria-describedby={this.hintTextID}
+        aria-describedby={this.hintTextId}
         aria-invalid={this.isInvalid ? 'true' : undefined}
         onClick={this.onClick}
         aria-labelledby={hasLabel ? inputLabelId : null}