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. Closes #4915.

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

@@ -428,14 +428,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

@@ -187,6 +187,26 @@ describe('md-input-container directive', function() {
     });
   });
 
+  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 put placeholder into a label element', function() {
     var el = $compile('<md-input-container><input ng-model="foo" placeholder="some placeholder"></md-input-container>')(pageScope);
     var placeholder = el[0].querySelector('.md-placeholder');
@@ -197,7 +217,7 @@ describe('md-input-container directive', function() {
     expect(label.textContent).toEqual('some placeholder');
   });
 
-  it('should ignore placeholder when a label element is present', function() {
+  it('should ignore placeholder when a label element is present', inject(function($rootScope, $compile) {
     var el = $compile(
       '<md-input-container>' +
       '  <label>Hello</label>' +
@@ -210,7 +230,7 @@ describe('md-input-container directive', function() {
     expect(el.find('input')[0].hasAttribute('placeholder')).toBe(true);
     expect(label).toBeTruthy();
     expect(label.textContent).toEqual('Hello');
-  });
+  }));
 
   it('should put an aria-label on the input when no label is present', function() {
     var el = $compile('<form name="form">' +

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;
 }