fix(input): make input spacing match spec (#4788)

* make input match mocks better, WIP

still WIP

placeholder working, still WIP

fixed main styles, now just themes...

themes working again

icon button support

* add select to baseline demo

* fix IE bug

* address comments

* address comments

* remove forced font-size

* integrate typography system

* switch font-size to inherit

* fix non-floating placeholders

Author: mmalerba

src/demo-app/baseline/baseline-demo.html

@@ -14,6 +14,10 @@
       <input mdInput placeholder="Input" value="Text Input">
     </md-input-container>
     | Text 5 |
+    <md-select placeholder="Select">
+      <md-option value="option">Option</md-option>
+    </md-select>
+    | Text 6 |
     <md-input-container>
       <textarea mdInput placeholder="Input" mdTextareaAutosize>Textarea&#10;Line 2</textarea>
     </md-input-container>
@@ -38,6 +42,10 @@ <h1>
         <input mdInput placeholder="Input" value="Text Input">
       </md-input-container>
       | Text 5 |
+      <md-select placeholder="Select">
+        <md-option value="option">Option</md-option>
+      </md-select>
+      | Text 6 |
       <md-input-container>
         <textarea mdInput placeholder="Input" mdTextareaAutosize>Textarea&#10;Line 2</textarea>
       </md-input-container>

src/demo-app/input/input-demo.html

@@ -8,7 +8,7 @@
 
       <table style="width: 100%" cellspacing="0"><tr>
         <td>
-          <md-input-container style="width: 100%">
+          <md-input-container style="width: 100%" floatPlaceholder="never">
             <input mdInput placeholder="First name">
           </md-input-container>
         </td>
@@ -113,6 +113,13 @@ <h4>Icons</h4>
       <md-icon mdPrefix>attach_money</md-icon>
       <md-icon mdSuffix>mode_edit</md-icon>
     </md-input-container>
+
+    <h4>Icon buttons</h4>
+    <md-input-container>
+      <input mdInput placeholder="amount">
+      <button md-icon-button mdPrefix><md-icon>attach_money</md-icon></button>
+      <button md-icon-button mdSuffix><md-icon>mode_edit</md-icon></button>
+    </md-input-container>
   </md-card-content>
 </md-card>
 

src/lib/core/typography/_typography.scss

@@ -23,7 +23,9 @@
   $body-2:      mat-typography-level(14px, 24px, 500),
   $body-1:      mat-typography-level(14px, 20px, 400),
   $caption:     mat-typography-level(12px, 12px, 400),
-  $button:      mat-typography-level(14px, 14px, 500)
+  $button:      mat-typography-level(14px, 14px, 500),
+  // Line-height must be unit-less fraction of the font-size.
+  $input:       mat-typography-level(inherit, 1.125, 400)
 ) {
   @return (
     font-family: $font-family,
@@ -37,7 +39,8 @@
     body-2:      $body-2,
     body-1:      $body-1,
     caption:     $caption,
-    button:      $button
+    button:      $button,
+    input:       $input,
   );
 }
 
@@ -61,7 +64,7 @@
   }
 
   .mat-h2, #{$selector} h2 {
-    @include mat-typography-level-to-styles($config, display-2)
+    @include mat-typography-level-to-styles($config, display-2);
 
     // Note: The spec doesn't mention letter spacing. The value comes from
     // eyeballing it until it looked exactly like the spec examples.;

src/lib/input/_input-theme.scss

@@ -52,7 +52,7 @@
   }
 
   .mat-input-underline {
-    border-color: $input-underline-color;
+    background-color: $input-underline-color;
   }
 
   .mat-input-ripple {
@@ -91,20 +91,121 @@
 }
 
 @mixin mat-input-typography($config) {
+  // The unit-less line-height from the font config.
+  $mat-input-line-height: mat-line-height($config, input);
+
+  // The amount to scale the font for the floating label and subscript.
+  $mat-input-subscript-font-scale: 0.75;
+  // The amount to scale the font for the prefix and suffix icons.
+  $mat-input-prefix-suffix-icon-font-scale: 1.5;
+
+  // The amount of space between the top of the line and the top of the actual text
+  // (as a fraction of the font-size).
+  $mat-input-line-spacing: ($mat-input-line-height - 1) / 2;
+  // The padding on the infix. Mocks show half of the text size, but seem to measure from the edge
+  // of the text itself, not the edge of the line; therefore we subtract off the line spacing.
+  $mat-input-infix-padding: 0.5em - $mat-input-line-spacing;
+  // The margin applied to the input-infix to reserve space for the floating label.
+  $mat-input-infix-margin-top: 1em * $mat-input-line-height * $mat-input-subscript-font-scale;
+  // Font size to use for the label and subscript text.
+  $mat-input-subscript-font-size: $mat-input-subscript-font-scale * 100%;
+  // Font size to use for the for the prefix and suffix icons.
+  $mat-input-prefix-suffix-icon-font-size: $mat-input-prefix-suffix-icon-font-scale * 100%;
+  // The space between the bottom of the input table and the subscript container. Mocks show half of
+  // the text size, but this margin is applied to an element with the subscript text font size, so
+  // we need to divide by the scale factor to make it half of the original text size. We again need
+  // to subtract off the line spacing since the mocks measure to the edge of the text, not the  edge
+  // of the line.
+  $mat-input-subscript-margin-top:
+      0.5em / $mat-input-subscript-font-scale - $mat-input-line-spacing;
+  // The padding applied to the input-wrapper to reserve space for the subscript, since it's
+  // absolutely positioned. This is a combination of the subscript's margin and line-height, but we
+  // need to multiply by the subscript font scale factor since the wrapper has a larger font size.
+  $mat-input-wrapper-padding-bottom:
+      ($mat-input-subscript-margin-top + $mat-input-line-height) * $mat-input-subscript-font-scale;
+
+  // Applies a floating placeholder above the input itself.
+  @mixin mat-input-placeholder-floating {
+    transform: translateY(-$mat-input-infix-margin-top - $mat-input-infix-padding)
+               scale($mat-input-subscript-font-scale)
+               // We use perspecitve to fix the text blurriness as described here:
+               // http://www.useragentman.com/blog/2014/05/04/fixing-typography-inside-of-2-d-css-transforms/
+               // This results in a small jitter after the label floats on Firefox, which the
+               // translateZ fixes.
+               perspective(100px) translateZ(0.001px);
+    // The tricks above used to smooth out the animation on chrome and firefox actually make things
+    // worse on IE, so we don't include them in the IE version.
+    -ms-transform: translateY(-$mat-input-infix-margin-top - $mat-input-infix-padding)
+                   scale($mat-input-subscript-font-scale);
+
+    width: 100% / $mat-input-subscript-font-scale;
+  }
+
   .mat-input-container {
-    font-family: mat-font-family($config);
-    line-height: normal;
+    @include mat-typography-level-to-styles($config, input);
+  }
+
+  .mat-input-wrapper {
+    padding-bottom: $mat-input-wrapper-padding-bottom;
+  }
+
+  .mat-input-prefix,
+  .mat-input-suffix {
+    // Allow icons in a prefix or suffix to adapt to the correct size.
+    .mat-icon,
+    .mat-datepicker-toggle {
+      font-size: $mat-input-prefix-suffix-icon-font-size;
+    }
+
+    // Allow icon buttons in a prefix or suffix to adapt to the correct size.
+    .mat-icon-button {
+      height: $mat-input-prefix-suffix-icon-font-scale * 1em;
+      width: $mat-input-prefix-suffix-icon-font-scale * 1em;
+
+      .mat-icon {
+        line-height: $mat-input-prefix-suffix-icon-font-scale;
+      }
+    }
+  }
+
+  .mat-input-infix {
+    padding: $mat-input-infix-padding 0;
+    // Throws off the baseline if we do it as a real margin, so we do it as a border instead.
+    border-top: $mat-input-infix-margin-top solid transparent;
+  }
 
-    .mat-icon {
-      font-size: 100%;
+  .mat-input-element {
+    &:-webkit-autofill + .mat-input-placeholder-wrapper .mat-float {
+      @include mat-input-placeholder-floating;
     }
   }
 
+  .mat-input-placeholder-wrapper {
+    top: -$mat-input-infix-margin-top;
+    padding-top: $mat-input-infix-margin-top;
+  }
+
   .mat-input-placeholder {
-    font-size: 100%;
+    top: $mat-input-infix-margin-top + $mat-input-infix-padding;
+
+    // Show the placeholder above the input when it's not empty, or focused.
+    &.mat-float:not(.mat-empty), .mat-focused &.mat-float {
+      @include mat-input-placeholder-floating;
+    }
+  }
+
+  .mat-input-underline {
+    // We want the underline to start at the end of the content box, not the padding box,
+    // so we move it up by the padding amount;
+    bottom: $mat-input-wrapper-padding-bottom;
   }
 
   .mat-input-subscript-wrapper {
-    font-size: 75%;
+    font-size: $mat-input-subscript-font-size;
+    margin-top: $mat-input-subscript-margin-top;
+
+    // We want the subscript to start at the end of the content box, not the padding box,
+    // so we move it up by the padding amount (adjusted for the smaller font size);
+    top: calc(100% - #{$mat-input-wrapper-padding-bottom / $mat-input-subscript-font-scale});
   }
 }

src/lib/input/input-container.html

@@ -1,8 +1,7 @@
 <div class="mat-input-wrapper">
-  <div class="mat-input-table">
+  <div class="mat-input-flex">
     <div class="mat-input-prefix" *ngIf="_prefixChildren.length">
-      <!-- TODO(andrewseguin): remove [md-prefix] -->
-      <ng-content select="[mdPrefix], [matPrefix], [md-prefix]"></ng-content>
+      <ng-content select="[mdPrefix], [matPrefix]"></ng-content>
     </div>
 
     <div class="mat-input-infix" [class.mat-end]="align == 'end'">
@@ -24,8 +23,7 @@
     </div>
 
     <div class="mat-input-suffix" *ngIf="_suffixChildren.length">
-      <!-- TODO(andrewseguin): remove [md-suffix] -->
-      <ng-content select="[mdSuffix], [matSuffix], [md-suffix]"></ng-content>
+      <ng-content select="[mdSuffix], [matSuffix]"></ng-content>
     </div>
   </div>