fix(input): fix material design success/error highlighting on inputs

references #6040 references #5052
ionic-team · May 21, 2016 · 702a882 · 702a882
1 parent 5498a36
commit 702a882
Show file tree

Hide file tree

Showing 2 changed files with 50 additions and 18 deletions.
diff --git a/src/components/input/input.md.scss b/src/components/input/input.md.scss
@@ -19,6 +19,8 @@ $text-input-md-input-clear-icon-color:      #5b5b5b !default;
 $text-input-md-input-clear-icon-svg:        "<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'><polygon fill='" + $text-input-md-input-clear-icon-color + "' points='405,136.798 375.202,107 256,226.202 136.798,107 107,136.798 226.202,256 107,375.202 136.798,405 256,285.798 375.202,405 405,375.202 285.798,256'/></svg>" !default;
 $text-input-md-input-clear-icon-size:       22px !default;
 
+$text-input-md-show-success-highlight:      true !default;
+$text-input-md-show-error-highlight:        true !default;
 
 
 // Material Design Default Input
@@ -44,7 +46,7 @@ $text-input-md-input-clear-icon-size:       22px !default;
 // Material Design Highlighted Input
 // --------------------------------------------------
 
-ion-input::after {
+.item-input::after {
   position: absolute;
   right: 0;
   bottom: 0;
@@ -56,16 +58,32 @@ ion-input::after {
   content: "";
 }
 
-.input-has-focus::after {
+.item-input.input-has-focus::after {
   border-bottom-color: $text-input-md-highlight-color;
 }
 
-ion-input.ng-valid.input-has-value::after {
-  border-bottom-color: $text-input-md-hightlight-color-valid;
+@if($text-input-md-show-success-highlight) {
+  .item-input.ng-valid.input-has-value {
+    &::after {
+      border-bottom-color: $text-input-md-hightlight-color-valid;
+    }
+
+    &.input-has-focus::after {
+      border-bottom-color: $text-input-md-highlight-color;
+    }
+  }
 }
 
-ion-input.ng-invalid.ng-touched::after {
-  border-bottom-color: $text-input-md-hightlight-color-invalid;
+@if($text-input-md-show-error-highlight) {
+  .item-input.ng-invalid.ng-touched {
+    &::after {
+      border-bottom-color: $text-input-md-hightlight-color-invalid;
+    }
+
+    &.input-has-focus::after {
+      border-bottom-color: $text-input-md-highlight-color;
+    }
+  }
 }
 
 

diff --git a/src/components/input/test/form-inputs/index.ts b/src/components/input/test/form-inputs/index.ts
@@ -1,30 +1,44 @@
 import {App} from '../../../../../src';
-import {FormBuilder, Validators} from '@angular/common';
+import {FormBuilder, Validators, Control} from '@angular/common';
 
 
 @App({
   templateUrl: 'main.html'
 })
 class E2EApp {
+  loginForm: any;
+
+  login = {
+    email: 'help@ionic.io',
+    username: 'admin'
+  };
+
+  user = {
+    username: 'asdf',
+    password: '82'
+  };
+
+  submitted: boolean = false;
+  isTextAreaDisabled: boolean;
+
   constructor(fb: FormBuilder) {
     this.loginForm = fb.group({
-      email: ["", Validators.required],
+      email: ["", Validators.compose([
+        Validators.required,
+        this.emailValidator
+      ])],
       username: [""],
       password: ["", Validators.required],
       comments: ["", Validators.required]
     });
+  }
 
-    this.login = {
-      email: 'help@ionic.io',
-      username: 'admin'
-    };
-
-    this.user = {
-      username: 'asdf',
-      password: '82'
-    };
+  emailValidator(control) {
+    var EMAIL_REGEXP = /^[a-z0-9!#$%&'*+\/=?^_`{|}~.-]+@[a-z0-9]([a-z0-9-]*[a-z0-9])?(\.[a-z0-9]([a-z0-9-]*[a-z0-9])?)*$/i;
 
-    this.submitted = false;
+    if (!EMAIL_REGEXP.test(control.value)) {
+      return {invalidEmail: true};
+    }
   }
 
   submit(ev, value) {