From ddf1198fe7c7a5f2c344dced368da4b5f4e13d20 Mon Sep 17 00:00:00 2001
From: Ryan Schmukler <rschmukler@gmail.com>
Date: Wed, 25 Mar 2015 17:01:01 -0400
Subject: [PATCH] feat(select): add styles for invalid

closes #1843, references #1722, references #1581
---
 src/components/input/input-theme.scss           |  4 ++++
 src/components/input/input.scss                 |  4 ++--
 .../select/demoValidations/index.html           | 17 +++++++++++++++++
 src/components/select/demoValidations/script.js |  9 +++++++++
 src/components/select/demoValidations/style.css | 14 ++++++++++++++
 src/components/select/select-theme.scss         |  6 ++++++
 src/components/select/select.scss               |  6 ++++++
 7 files changed, 58 insertions(+), 2 deletions(-)
 create mode 100755 src/components/select/demoValidations/index.html
 create mode 100755 src/components/select/demoValidations/script.js
 create mode 100644 src/components/select/demoValidations/style.css

diff --git a/src/components/input/input-theme.scss b/src/components/input/input-theme.scss
index 56b4daf9476..60faaa587bd 100644
--- a/src/components/input/input-theme.scss
+++ b/src/components/input/input-theme.scss
@@ -16,6 +16,10 @@ md-input-container.md-THEME_NAME-theme {
     color: '{{foreground-3}}';
   }
 
+  div[ng-messages] {
+    color: '{{warn-500}}'
+  }
+
 
   &:not(.md-input-invalid) {
     &.md-input-has-value {
diff --git a/src/components/input/input.scss b/src/components/input/input.scss
index 4b064b16c33..e472bec43f1 100644
--- a/src/components/input/input.scss
+++ b/src/components/input/input.scss
@@ -63,7 +63,7 @@ md-input-container {
   }
 
   label:not(.md-no-float),
-  .md-placeholder {
+  .md-placeholder:not(.md-select-label) {
     order: 1;
     pointer-events: none;
     -webkit-font-smoothing: antialiased;
@@ -73,7 +73,7 @@ md-input-container {
     transform-origin: left top;
     transition: transform $swift-ease-out-timing-function 0.25s;
   }
-  .md-placeholder {
+  .md-placeholder:not(.md-select-label) {
     position: absolute;
     top: 0;
     opacity: 0;
diff --git a/src/components/select/demoValidations/index.html b/src/components/select/demoValidations/index.html
new file mode 100755
index 00000000000..5f450f87672
--- /dev/null
+++ b/src/components/select/demoValidations/index.html
@@ -0,0 +1,17 @@
+<div ng-app="selectDemoBasic" ng-controller="AppCtrl" layout="column" layout-align="center center" style="min-height: 300px;">
+  <form name="myForm">
+    <p>Note that invalid styling only applies if invalid and dirty</p>
+    <md-input-container>
+      <md-select name="myModel" placeholder="Pick" ng-model="myModel" required>
+        <md-option value="1">One</md-option>
+        <md-option value="2">Two</md-option>
+      </md-select>
+      <div class="errors" ng-messages="myForm.myModel.$error" ng-if="myForm.$dirty">
+        <div ng-message="required">Required</div>
+      </div>
+    </md-input-container>
+    <div layout="row">
+      <md-button ng-click="clearValue()" ng-disabled="!myModel" style="margin-right: 20px;">Clear</md-button>
+      <md-button ng-click="save()" ng-disabled="myForm.$invalid" class="md-primary" layout layout-align="center end">Save</md-button>
+    </div>
+</div>
diff --git a/src/components/select/demoValidations/script.js b/src/components/select/demoValidations/script.js
new file mode 100755
index 00000000000..60401a4aabb
--- /dev/null
+++ b/src/components/select/demoValidations/script.js
@@ -0,0 +1,9 @@
+angular.module('selectDemoBasic', ['ngMaterial', 'ngMessages'])
+.controller('AppCtrl', function($scope) {
+  $scope.clearValue = function() {
+    $scope.myModel = undefined;
+  };
+  $scope.save = function() {
+    alert('Form was valid!');
+  };
+});
diff --git a/src/components/select/demoValidations/style.css b/src/components/select/demoValidations/style.css
new file mode 100644
index 00000000000..179b2aa9b4c
--- /dev/null
+++ b/src/components/select/demoValidations/style.css
@@ -0,0 +1,14 @@
+p {
+  padding: 0 20px;
+  text-align: center;
+}
+
+p.result {
+  font-size: 0.8em;
+  color: #777;
+}
+
+
+.demo-content  {
+    min-height: 348px;
+}
diff --git a/src/components/select/select-theme.scss b/src/components/select/select-theme.scss
index 412d2b21e64..0ea8074ead8 100644
--- a/src/components/select/select-theme.scss
+++ b/src/components/select/select-theme.scss
@@ -1,4 +1,10 @@
 md-select.md-THEME_NAME-theme {
+  &.ng-invalid.ng-dirty {
+    .md-select-label {
+      color: '{{warn-500}}' !important;
+      border-bottom-color: '{{warn-500}}' !important;
+    }
+  }
   &:not([disabled]):focus {
     .md-select-label {
       border-bottom-color: '{{primary-color}}';
diff --git a/src/components/select/select.scss b/src/components/select/select.scss
index 6d8b5e0d6fd..26c26a66fbf 100755
--- a/src/components/select/select.scss
+++ b/src/components/select/select.scss
@@ -56,6 +56,12 @@ md-select {
     &:hover {
       cursor: pointer
     }
+    &.ng-invalid.ng-dirty {
+      .md-select-label {
+        padding-bottom: 7px;
+        border-bottom: 2px solid;
+      }
+    }
     &:focus {
       .md-select-label {
         border-bottom: 2px solid;