fix(form-field): rename box to fill and tweak the styles a bit

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

@@ -581,9 +581,9 @@ <h3>&lt;textarea&gt; with ngModel</h3>
       <mat-hint>Please type something here</mat-hint>
     </mat-form-field>
 
-    <mat-form-field appearance="box">
-      <mat-label>Box appearance</mat-label>
-      <input matInput [(ngModel)]="boxAppearance" required>
+    <mat-form-field appearance="fill">
+      <mat-label>Fill appearance</mat-label>
+      <input matInput [(ngModel)]="fillAppearance" required>
       <mat-error>This field is required</mat-error>
       <mat-hint>Please type something here</mat-hint>
     </mat-form-field>
@@ -606,9 +606,9 @@ <h3>&lt;textarea&gt; with ngModel</h3>
         </mat-form-field>
       </td>
       <td>
-        <mat-form-field appearance="box" style="width: 100%">
-          <mat-label>Box appearance</mat-label>
-          <input matInput [(ngModel)]="boxAppearance" required>
+        <mat-form-field appearance="fill" style="width: 100%">
+          <mat-label>Fill appearance</mat-label>
+          <input matInput [(ngModel)]="fillAppearance" required>
           <mat-error>This field is required</mat-error>
           <mat-hint>Please type something here</mat-hint>
         </mat-form-field>

src/demo-app/input/input-demo.ts

@@ -54,7 +54,7 @@ export class InputDemo {
 
   legacyAppearance: string;
   standardAppearance: string;
-  boxAppearance: string;
+  fillAppearance: string;
 
   constructor() {
     setTimeout(() => this.delayedFormControl.setValue('hello'), 100);

src/lib/form-field/BUILD.bazel

@@ -9,7 +9,7 @@ ng_module(
   module_name = "@angular/material/form-field",
   assets = [
     ":form_field_css",
-    ":form_field_box_css",
+    ":form_field_fill_css",
     ":form_field_legacy_css",
     ":form_field_standard_css",
     "//src/lib/input:input_css"
@@ -29,8 +29,8 @@ sass_binary(
 )
 
 sass_binary(
-  name = "form_field_box_scss",
-  src = "form-field-box.scss",
+  name = "form_field_fill_scss",
+  src = "form-field-fill.scss",
   deps = ["//src/lib/core:core_scss_lib"],
 )
 
@@ -56,10 +56,10 @@ genrule(
 )
 
 genrule(
-  name = "form_field_box_css",
-  srcs = [":form_field_box_scss"],
-  outs = ["form-field-box.css"],
-  cmd = "cat $(locations :form_field_box_scss) > $@",
+  name = "form_field_fill_css",
+  srcs = [":form_field_fill_scss"],
+  outs = ["form-field-fill.css"],
+  cmd = "cat $(locations :form_field_fill_scss) > $@",
 )
 
 genrule(

src/lib/form-field/_form-field-box-theme.scss → src/lib/form-field/_form-field-fill-theme.scss

@@ -4,31 +4,38 @@
 @import '../core/typography/typography-utils';
 
 
-// Theme styles that only apply to the box appearance of the form-field.
+// Theme styles that only apply to the fill appearance of the form-field.
 
-@mixin mat-form-field-box-theme($theme) {
+@mixin mat-form-field-fill-theme($theme) {
   $foreground: map-get($theme, foreground);
   $is-dark-theme: map-get($theme, is-dark);
 
-  $box-background: mat-color($foreground, base, if($is-dark-theme, 0.1, 0.06));
-  $box-disabled-background: mat-color($foreground, base, if($is-dark-theme, 0.05, 0.03));
-  $underline-color: mat-color($foreground, divider, if($is-dark-theme, 0.7, 0.42));
+  $fill-background: mat-color($foreground, base, if($is-dark-theme, 0.1, 0.04));
+  $fill-disabled-background: mat-color($foreground, base, if($is-dark-theme, 0.05, 0.02));
+  $underline-color: mat-color($foreground, divider, if($is-dark-theme, 0.5, 0.42));
+  $label-disabled-color: mat-color($foreground, disabled-text);
 
-  .mat-form-field-appearance-box {
+  .mat-form-field-appearance-fill {
     .mat-form-field-flex {
-      background-color: $box-background;
+      background-color: $fill-background;
     }
 
     &.mat-form-field-disabled .mat-form-field-flex {
-      background-color: $box-disabled-background;
+      background-color: $fill-disabled-background;
     }
 
     .mat-form-field-underline::before {
       background-color: $underline-color;
     }
 
-    &.mat-form-field-disabled .mat-form-field-underline::before {
-      background-color: transparent;
+    &.mat-form-field-disabled {
+      .mat-form-field-label {
+        color: $label-disabled-color;
+      }
+
+      .mat-form-field-underline::before {
+        background-color: transparent;
+      }
     }
   }
 }
@@ -37,46 +44,55 @@
 // and prevent Google's CSS Optimizer from collapsing the declarations. This is needed because some
 // of the selectors contain pseudo-classes not recognized in all browsers. If a browser encounters
 // an unknown pseudo-class it will discard the entire rule set.
-$mat-form-field-box-dedupe: 0;
+$mat-form-field-fill-dedupe: 0;
 
 // Applies a floating label above the form field control itself.
-@mixin _mat-form-field-box-label-floating($font-scale, $infix-padding, $infix-margin-top) {
-  transform: translateY(-$infix-margin-top - $infix-padding + $mat-form-field-box-dedupe)
+@mixin _mat-form-field-fill-label-floating($font-scale, $infix-padding, $infix-margin-top) {
+  transform: translateY(-$infix-margin-top - $infix-padding + $mat-form-field-fill-dedupe)
              scale($font-scale);
-  width: 100% / $font-scale + $mat-form-field-box-dedupe;
+  width: 100% / $font-scale + $mat-form-field-fill-dedupe;
 
-  $mat-form-field-box-dedupe: $mat-form-field-box-dedupe + 0.00001 !global;
+  $mat-form-field-fill-dedupe: $mat-form-field-fill-dedupe + 0.00001 !global;
 }
 
-@mixin mat-form-field-box-typography($config) {
+@mixin mat-form-field-fill-typography($config) {
   // The unit-less line-height from the font config.
   $line-height: mat-line-height($config, input);
   // The amount to scale the font for the floating label and subscript.
   $subscript-font-scale: 0.75;
   // The padding on the infix. Mocks show half of the text size.
-  $infix-padding: 0.5em;
+  $infix-padding-top: 0.25em;
+  $infix-padding-bottom: 0.75em;
   // The margin applied to the form-field-infix to reserve space for the floating label.
   $infix-margin-top: 1em * $line-height * $subscript-font-scale;
-  // The amount we offset the label in the box appearance.
-  $box-appearance-label-offset: -0.5em * $line-height;
+  // The amount we offset the label in the fill appearance.
+  $fill-appearance-label-offset: -0.5em * $line-height;
+
+  .mat-form-field-appearance-fill {
+    .mat-form-field-infix {
+      padding: $infix-padding-top 0 $infix-padding-bottom 0;
+    }
+
+    .mat-form-field-label {
+      margin-top: $fill-appearance-label-offset;
+    }
 
-  .mat-form-field-appearance-box {
     .mat-form-field-label {
-      margin-top: $box-appearance-label-offset;
+      top: $infix-margin-top + $infix-padding-top;
     }
 
     &.mat-form-field-can-float {
       &.mat-form-field-should-float .mat-form-field-label,
       .mat-input-server:focus + .mat-form-field-label-wrapper .mat-form-field-label {
         @include _mat-form-field-label-floating(
-                $subscript-font-scale, $infix-padding + $box-appearance-label-offset,
+                $subscript-font-scale, $infix-padding-top + $fill-appearance-label-offset,
                 $infix-margin-top);
       }
 
       .mat-form-field-autofill-control:-webkit-autofill + .mat-form-field-label-wrapper
       .mat-form-field-label {
         @include _mat-form-field-label-floating(
-                $subscript-font-scale, $infix-padding + $box-appearance-label-offset,
+                $subscript-font-scale, $infix-padding-top + $fill-appearance-label-offset,
                 $infix-margin-top);
       }
 
@@ -85,7 +101,7 @@ $mat-form-field-box-dedupe: 0;
       .mat-input-server[label]:not(:label-shown) + .mat-form-field-label-wrapper
       .mat-form-field-label {
         @include _mat-form-field-label-floating(
-                $subscript-font-scale, $infix-padding + $box-appearance-label-offset,
+                $subscript-font-scale, $infix-padding-top + $fill-appearance-label-offset,
                 $infix-margin-top);
       }
     }

src/lib/form-field/_form-field-theme.scss

@@ -2,7 +2,7 @@
 @import '../core/theming/theming';
 @import '../core/style/form-common';
 @import '../core/typography/typography-utils';
-@import 'form-field-box-theme.scss';
+@import 'form-field-fill-theme.scss';
 @import 'form-field-legacy-theme.scss';
 @import 'form-field-standard-theme.scss';
 
@@ -18,7 +18,7 @@
   $is-dark-theme: map-get($theme, is-dark);
 
   // Label colors. Required is used for the `*` star shown in the label.
-  $label-color: mat-color($foreground, secondary-text);
+  $label-color: mat-color($foreground, secondary-text, if($is-dark-theme, 0.7, 0.6));
   $focused-label-color: mat-color($primary);
   $required-label-color: mat-color($accent);
 
@@ -33,7 +33,7 @@
   }
 
   .mat-hint {
-    color: mat-color($foreground, secondary-text);
+    color: $label-color;
   }
 
   .mat-focused .mat-form-field-label {
@@ -94,7 +94,7 @@
 
   @include mat-form-field-legacy-theme($theme);
   @include mat-form-field-standard-theme($theme);
-  @include mat-form-field-box-theme($theme);
+  @include mat-form-field-fill-theme($theme);
 }
 
 // Used to make instances of the _mat-form-field-label-floating mixin negligibly different,
@@ -221,5 +221,5 @@ $mat-form-field-dedupe: 0;
 
   @include mat-form-field-legacy-typography($config);
   @include mat-form-field-standard-typography($config);
-  @include mat-form-field-box-typography($config);
+  @include mat-form-field-fill-typography($config);
 }

src/lib/form-field/form-field-fill.scss

@@ -0,0 +1,59 @@
+@import '../core/style/variables';
+@import '../core/style/vendor-prefixes';
+
+
+// Styles that only apply to the fill appearance of the form-field.
+
+// The border radius for the form field fill box.
+$mat-form-field-fill-border-radius: 4px !default;
+// The height of the underline at the bottom of the form field fill box.
+$mat-form-field-fill-underline-height: 1px !default;
+// The height of the underline ripple at the bottom of the form field fill box.
+$mat-form-field-fill-underline-ripple-height: 2px !default;
+// The horizontal padding between the edge of the form field fill box and the start of the text.
+$mat-form-field-fill-side-padding: 0.75em !default;
+// The vertical padding between the edge of the form field fill box and the start of the text as
+// well as between the floating label and the value.
+$mat-form-field-fill-line-spacing: 0.75em !default;
+// The scale of the subscript and floating label text w.r.t the value text.
+$mat-form-field-fill-subscript-font-scale: 0.75 !default;
+// The horizontal padding between the edge of the subscript box and the start of the subscript text.
+$mat-form-field-fill-subscript-padding:
+    $mat-form-field-fill-side-padding / $mat-form-field-fill-subscript-font-scale;
+
+
+.mat-form-field-appearance-fill {
+  .mat-form-field-flex {
+    border-radius: $mat-form-field-fill-border-radius $mat-form-field-fill-border-radius 0 0;
+    padding: $mat-form-field-fill-line-spacing $mat-form-field-fill-side-padding 0
+             $mat-form-field-fill-side-padding;
+  }
+
+  .mat-form-field-underline::before {
+    content: '';
+    display: block;
+    position: absolute;
+    bottom: 0;
+    height: $mat-form-field-fill-underline-height;
+    width: 100%;
+  }
+
+  .mat-form-field-ripple {
+    bottom: 0;
+    height: $mat-form-field-fill-underline-ripple-height;
+  }
+
+  // Note that we need this specific of a selector because we don't want
+  // the hover effect to show when the user hovers over the hints.
+  &:not(.mat-form-field-disabled) .mat-form-field-flex:hover ~ .mat-form-field-underline {
+    .mat-form-field-ripple {
+      opacity: 1;
+      transform: none;
+      transition: opacity 600ms $swift-ease-out-timing-function;
+    }
+  }
+
+  .mat-form-field-subscript-wrapper {
+    padding: 0 $mat-form-field-fill-subscript-padding;
+  }
+}

src/lib/form-field/form-field-standard.scss

@@ -6,10 +6,8 @@
 
 // The height of the underline.
 $mat-form-field-standard-underline-height: 1px !default;
-// The bottom margin of the underline (used to push it up to align with box appearance underline).
-$mat-form-field-standard-underline-margin-bottom: 1px !default;
 // The padding between the top of the form field and the label text (used to align the standard
-// form field with the box appearance).
+// form field with the fill appearance).
 $mat-form-field-standard-padding-top: 0.5em !default;
 
 
@@ -22,11 +20,10 @@ $mat-form-field-standard-padding-top: 0.5em !default;
   // The ripple is the blue animation coming on top of it.
   .mat-form-field-underline {
     height: $mat-form-field-standard-underline-height;
-    margin-bottom: $mat-form-field-standard-underline-margin-bottom;
   }
 
   .mat-form-field-ripple {
-    top: 0;
+    bottom: 0;
     height: $mat-form-field-standard-underline-height * 2;
   }