reflect error prop in text-input for styling (#1255)

department-of-veterans-affairs · Aug 6, 2024 · fefcd5e · fefcd5e
1 parent a661a56
commit fefcd5e
Show file tree

Hide file tree

Showing 2 changed files with 8 additions and 23 deletions.
diff --git a/packages/web-components/src/components/va-statement-of-truth/va-statement-of-truth.tsx b/packages/web-components/src/components/va-statement-of-truth/va-statement-of-truth.tsx
@@ -20,9 +20,6 @@ import {
   shadow: true,
 })
 export class VaStatementOfTruth {
-  private inputField: HTMLElement;
-  private checkboxField: HTMLElement;
-
   /**
    * An optional custom header for the component
    */
@@ -110,19 +107,6 @@ export class VaStatementOfTruth {
     this.vaCheckboxChange.emit({ checked });
   };
 
-  /**
-  without this step the va-text-input and va-checkbox components will not
-  have an error attribute, which is used for styling.
-  */
-  componentDidRender() {
-    if (this.inputError) {
-      this.inputField.setAttribute('error', this.inputError);
-    }
-    if (this.checkboxError) {
-      this.checkboxField.setAttribute('error', this.checkboxError);
-    }
-  }
-
   render() {
     const {
       heading,
@@ -131,6 +115,8 @@ export class VaStatementOfTruth {
       inputMessageAriaDescribedby,
       checked,
       inputValue,
+      inputError,
+      checkboxError,
     } = this;
     return (
       <Host>
@@ -150,7 +136,6 @@ export class VaStatementOfTruth {
               <va-icon
                 class="privacy-policy-icon"
                 icon="launch"
-                size={2}
               ></va-icon>
               <span class="usa-sr-only">opens in a new window</span>
             </a>
@@ -163,18 +148,18 @@ export class VaStatementOfTruth {
             value={inputValue}
             message-aria-describedby={inputMessageAriaDescribedby}
             required
+            error={inputError}
             onInput={this.handleInputChange}
             onBlur={this.handleInputBlur}
-            ref={field => (this.inputField = field)}
           />
           <va-checkbox
             id="veteran-certify"
             name="veteran-certify"
             label={checkboxLabel}
             required
             checked={checked}
+            error={checkboxError}
             onVaChange={this.handleCheckboxChange}
-            ref={field => (this.checkboxField = field)}
           />
         </article>
       </Host>

diff --git a/packages/web-components/src/components/va-text-input/va-text-input.tsx b/packages/web-components/src/components/va-text-input/va-text-input.tsx
@@ -54,7 +54,7 @@ export class VaTextInput {
   /**
    * The error message to render.
    */
-  @Prop() error?: string;
+  @Prop({ reflect: true }) error?: string;
 
   /**
    * Whether or not to add usa-input--error as class if error message is outside of component
@@ -310,7 +310,7 @@ export class VaTextInput {
   private getInputmode(): string {
     if (this.currency) {
       return 'numeric';
-    } 
+    }
     return this.inputmode ? this.inputmode : undefined
   }
 
@@ -454,7 +454,7 @@ export class VaTextInput {
             {currency && <div id="symbol">$</div>}
             {inputPrefix && <div class="usa-input-prefix" part="input-prefix">{inputPrefix.substring(0, 25)}</div>}
             {inputIconPrefix && <div class="usa-input-prefix" part="input-prefix"><va-icon icon={inputIconPrefix} size={3} part="icon"></va-icon></div>}
-            
+
             <input
               class={inputClass}
               id="inputField"
@@ -498,4 +498,4 @@ export class VaTextInput {
       </Host>
     );
   }
-}
+}