fix(inputs): Fix floating label and char counter positions.

Recent updates to the `md-char-counter` class caused alignment
issues when the input was side-by-side with another input. The
underlying cause was that the other input uses `maring-top: auto`
instead of `margin-top: 0` which made the inputs "bottom aligned"
as the height of it's neighbors changed.

This fixes the CSS on the char counter, inputs and select to
better align and updates the inputs demo to show the select
next to an input with the char counter.

Also, I noticed a bug with the floating labels when using only
the placeholder, so this adds some additional tests and fixes
the bug.

Fixes #4872.

Author: topherfangio

src/components/input/demoBasicUsage/index.html

@@ -16,9 +16,9 @@
 
       <div layout layout-sm="column">
         <md-input-container style="width:70%">
-            <label>Company (Disabled)</label>
-            <input ng-model="user.company" disabled>
-          </md-input-container>
+          <label>Company (Disabled)</label>
+          <input ng-model="user.company" disabled>
+        </md-input-container>
 
         <md-datepicker ng-model="user.submissionDate" md-placeholder="Enter date"></md-datepicker>
       </div>
@@ -47,13 +47,30 @@
           <label>City</label>
           <input ng-model="user.city">
         </md-input-container>
+
         <md-input-container flex>
           <label>State</label>
-          <input ng-model="user.state">
+          <md-select ng-model="user.state">
+            <md-option ng-repeat="state in states" value="{{state.abbrev}}">
+              {{state.abbrev}}
+            </md-option>
+          </md-select>
         </md-input-container>
+
         <md-input-container flex>
           <label>Postal Code</label>
-          <input ng-model="user.postalCode" placeholder="12345">
+          <input name="postalCode" ng-model="user.postalCode" placeholder="12345"
+                 required ng-pattern="/^[0-9]{5}$/" md-maxlength="5">
+
+          <div ng-messages="userForm.postalCode.$error" role="alert" multiple>
+            <div ng-message="required" class="my-message">You must supply a postal code.</div>
+            <div ng-message="pattern" class="my-message">That doesn't look like a valid postal
+              code.
+            </div>
+            <div ng-message="md-maxlength" class="my-message">
+              Don't use the long version silly...we don't need to be that specific...
+            </div>
+          </div>
         </md-input-container>
       </div>
 

src/components/input/demoBasicUsage/script.js

@@ -5,21 +5,27 @@ angular
       title: 'Developer',
       email: '[email protected]',
       firstName: '',
-      lastName: '' ,
-      company: 'Google' ,
-      address: '1600 Amphitheatre Pkwy' ,
-      city: 'Mountain View' ,
-      state: 'CA' ,
+      lastName: '',
+      company: 'Google',
+      address: '1600 Amphitheatre Pkwy',
+      city: 'Mountain View',
+      state: 'CA',
       biography: 'Loves kittens, snowboarding, and can type at 130 WPM.\n\nAnd rumor has it she bouldered up Castle Craig!',
-      postalCode : '94043'
+      postalCode: '94043'
     };
+
+    $scope.states = ('AL AK AZ AR CA CO CT DE FL GA HI ID IL IN IA KS KY LA ME MD MA MI MN MS ' +
+    'MO MT NE NV NH NJ NM NY NC ND OH OK OR PA RI SC SD TN TX UT VT VA WA WV WI ' +
+    'WY').split(' ').map(function(state) {
+        return {abbrev: state};
+      })
   })
-  .config( function($mdThemingProvider){
+  .config(function($mdThemingProvider) {
 
     // Configure a dark theme with primary foreground yellow
 
     $mdThemingProvider.theme('docs-dark', 'default')
-        .primaryPalette('yellow')
-        .dark();
+      .primaryPalette('yellow')
+      .dark();
 
   });

src/components/input/input.js

@@ -426,14 +426,15 @@ function placeholderDirective($log) {
     // If there is no input container, just return
     if (!inputContainer) return;
 
-    // Add a placeholder class so we can target it in the CSS
-    inputContainer.setHasPlaceholder(true);
-
     var label = inputContainer.element.find('label');
     var hasNoFloat = angular.isDefined(inputContainer.element.attr('md-no-float'));
 
     // If we have a label, or they specify the md-no-float attribute, just return
-    if ((label && label.length) || hasNoFloat) return;
+    if ((label && label.length) || hasNoFloat) {
+      // Add a placeholder class so we can target it in the CSS
+      inputContainer.setHasPlaceholder(true);
+      return;
+    }
 
     // Otherwise, grab/remove the placeholder
     var placeholderText = attr.placeholder;

src/components/input/input.scss

@@ -137,7 +137,7 @@ md-input-container {
   .md-input {
     order: 2;
     display: block;
-    margin-top: auto;
+    margin-top: 0;
 
     background: none;
     padding-top: $input-padding-top;
@@ -166,9 +166,9 @@ md-input-container {
   }
 
   .md-char-counter {
-    position: relative;
-    text-align: right;
-    order: 3;
+    position: absolute;
+    right: $input-container-padding;
+    bottom: 7px;
   }
 
   ng-messages, data-ng-messages, x-ng-messages,
@@ -181,6 +181,7 @@ md-input-container {
       position: absolute;
       top: 0;
       right: 0;
+      bottom: auto;
     }
   }
 

src/components/input/input.spec.js

@@ -164,6 +164,26 @@ describe('md-input-container directive', function() {
     expect(label.textContent).toEqual('some placeholder');
   }));
 
+  it('should not add the md-input-has-placeholder class when the placeholder is transformed into a label', inject(function($rootScope, $compile) {
+    var el = $compile(
+      '<md-input-container><input ng-model="foo" placeholder="some placeholder"></md-input-container>'
+    )($rootScope);
+
+    expect(el.hasClass('md-input-has-placeholder')).toBe(false);
+  }));
+
+
+  it('should add the md-input-has-placeholder class when both the placeholder and label are provided', inject(function($rootScope, $compile) {
+    var el = $compile(
+      '<md-input-container>' +
+      '  <label>Hello</label>' +
+      '  <input ng-model="foo" placeholder="some placeholder" />' +
+      '</md-input-container>'
+    )($rootScope);
+
+    expect(el.hasClass('md-input-has-placeholder')).toBe(true);
+  }));
+
   it('should ignore placeholder when a label element is present', inject(function($rootScope, $compile) {
     var el = $compile(
       '<md-input-container>' +

src/components/select/select.scss

@@ -47,7 +47,7 @@ $select-max-visible-options: 5;
 }
 
 md-input-container > md-select {
-  margin: auto 0 0 0;
+  margin: 0;
   order: 2;
 }