Refactor to use TAC methodology

uswds · Oct 23, 2024 · e944100 · e944100
1 parent 1083608
commit e944100
Show file tree

Hide file tree

Showing 2 changed files with 34 additions and 41 deletions.
diff --git a/src/components/usa-text-input/index.js b/src/components/usa-text-input/index.js
@@ -9,14 +9,13 @@ import styles from "./usa-text-input.css.js";
  * @cssprop --theme-input-line-height - Sets the line-height of input element
  * @cssprop --theme-input-max-width - Sets the max width of the input element
  * @cssprop --theme-input-state-border-width - Sets the border width of error and success states.
+ * 
+ * @prop State - Controls state variants
  *
  * @tagname usa-text-input
  */
 export class UsaTextInput extends LitElement {
   static styles = [styles];
-  static properties = {
-    state: { type: String, reflect: true },
-  };
 
   connectedCallback() {
     super.connectedCallback();
@@ -37,26 +36,6 @@ export class UsaTextInput extends LitElement {
       this.input.classList.add("usa-input");
     }
 
-    if (this.state == "success") {
-      this.input?.classList.add("usa-input--success");
-    } else {
-      this.input?.classList.remove("usa-input--success");
-    }
-
-    if (this.state == "error") {
-      this.label?.classList.add("usa-label--error");
-      this.input?.classList.add("usa-input--error");
-    } else {
-      this.label?.classList.remove("usa-label--error");
-      this.input?.classList.remove("usa-input--error");
-    }
-
-    if (this.state == "disabled") {
-      this.input?.setAttribute("disabled", "");
-    } else {
-      this.input?.removeAttribute("disabled");
-    }
-
     return html` ${this.label} ${this.input} `;
   }
 }

diff --git a/src/components/usa-text-input/usa-text-input.css.js b/src/components/usa-text-input/usa-text-input.css.js
@@ -11,7 +11,7 @@ export default css`
       var(--usa-system-unit-1) - vcar(--theme-input-state-border-width)
     );
 
-    .usa-input {
+    input {
       box-sizing: border-box;
       background: var(--usa-theme-page-background-color);
       border-width: 1px;
@@ -39,21 +39,6 @@ export default css`
       line-height: var(--theme-input-line-height);
     }
 
-    .usa-input--error,
-    .usa-input--success {
-      border-width: var(--theme-input-state-border-width);
-      padding-top: var(--theme-input-state-border-negative-margin);
-      padding-bottom: var(--theme-input-state-border-negative-margin);
-    }
-
-    .usa-input--error {
-      border-color: var(--usa-theme-color-error-dark);
-    }
-
-    .usa-input--success {
-      border-color: var(--usa-system-color-green-cool-40v);
-    }
-
     input:not([disabled]):focus,
     textarea:not([disabled]):focus {
       outline-width: var(--usa-theme-focus-width);
@@ -68,7 +53,7 @@ export default css`
       cursor: not-allowed;
     }
 
-    .usa-label {
+    label {
       color: var(--usa-theme-text-color);
       font-family:
         Source Sans Pro Web,
@@ -84,10 +69,39 @@ export default css`
       margin-top: var(--usa-system-unit-3);
       max-width: var(--usa-system-unit-mobile-lg);
     }
+  }
 
-    .usa-label--error {
+  :host([state=success]),
+  :host([state=error]) {
+    input {
+      border-width: var(--theme-input-state-border-width);
+      padding-top: var(--theme-input-state-border-negative-margin);
+      padding-bottom: var(--theme-input-state-border-negative-margin);
+    }
+  }
+
+  :host([state=success]) {
+    input {
+      border-color: var(--usa-system-color-green-cool-40v);
+    }
+  }
+
+  :host([state=error]) {
+    input {
+      border-color: var(--usa-theme-color-error-dark);
+    }
+
+    label {
       font-weight: 700;
       margin-top: 0;
     }
   }
+
+  :host([state=disabled]) {
+    input {
+      background-color: var(--usa-theme-color-disabled-lighter);
+      color: var(--usa-theme-color-disabled-dark);
+      cursor: not-allowed;
+    }
+  }
 `;