feat: fixing currentType bug, modifying error state styles

deven-org · May 22, 2023 · 9951bb4 · 9951bb4
1 parent 98e706d
commit 9951bb4
Show file tree

Hide file tree

Showing 2 changed files with 9 additions and 2 deletions.
diff --git a/packages/ui-library/src/components/text-input/index.ts b/packages/ui-library/src/components/text-input/index.ts
@@ -39,6 +39,11 @@ export class BlrTextInput extends LitElement {
 
   @state() protected currentType: InputTypes = this.type;
 
+  connectedCallback() {
+    super.connectedCallback();
+    this.currentType = this.type;
+  }
+
   toggleInputType() {
     this.currentType = this.currentType === 'password' ? 'text' : 'password';
   }
@@ -99,9 +104,9 @@ export class BlrTextInput extends LitElement {
             ? html`<blr-icon
                 class="blr-input-icon ${inputClasses}"
                 @click=${this.toggleInputType}
-                icon="${this.hasError ? 'blrInfoSm' : getPasswordIcon()}"
+                icon="${getPasswordIcon()}"
                 size="sm"
-                name="${this.hasError ? 'blrInfoSm' : getPasswordIcon()}"
+                name="${getPasswordIcon()}"
                 aria-hidden
               ></blr-icon>`
             : html``}

diff --git a/packages/ui-library/src/foundation/semantic-tokens/form.css.js b/packages/ui-library/src/foundation/semantic-tokens/form.css.js
@@ -79,10 +79,12 @@ export const form = css`
   }
 
   &.error-input {
+    background-color: ${Forms.SurfaceFill.Error.Rest};
     border-width: ${Forms.Input.Error.Rest.width};
     border-style: ${Forms.Input.Error.Rest.style};
     border-color: ${Forms.Input.Error.Rest.color};
     outline-color: ${Forms.Input.Error.Rest.color};
+    color: ${Forms.UserInput.Error.Rest};
 
     &::placeholder {
       color: ${Forms.Placeholder.Error.Rest};