feat(form-field): add outline style (#9705)

* remove datepicker reliance on form-field's underlineRef

* add spacing and alignment rules for outline variant

* outline color & thickness

* style tweaks

* correctly position and size the gap

* address comments

Author: mmalerba

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

@@ -588,6 +588,13 @@ <h3>&lt;textarea&gt; with ngModel</h3>
       <mat-hint>Please type something here</mat-hint>
     </mat-form-field>
 
+    <mat-form-field appearance="outline">
+      <mat-label>Outline appearance</mat-label>
+      <input matInput [(ngModel)]="outlineAppearance" required>
+      <mat-error>This field is required</mat-error>
+      <mat-hint>Please type something here</mat-hint>
+    </mat-form-field>
+
     <table style="width: 100%" cellspacing="0"><tr>
       <td>
         <mat-form-field appearance="legacy" style="width: 100%">
@@ -613,6 +620,14 @@ <h3>&lt;textarea&gt; with ngModel</h3>
           <mat-hint>Please type something here</mat-hint>
         </mat-form-field>
       </td>
+      <td>
+        <mat-form-field appearance="outline" style="width: 100%">
+          <mat-label>Outline appearance</mat-label>
+          <input matInput [(ngModel)]="outlineAppearance" required>
+          <mat-error>This field is required</mat-error>
+          <mat-hint>Please type something here</mat-hint>
+        </mat-form-field>
+      </td>
     </tr></table>
   </mat-card-content>
 </mat-card>

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

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

src/lib/autocomplete/autocomplete-trigger.ts

@@ -504,7 +504,7 @@ export class MatAutocompleteTrigger implements ControlValueAccessor, OnDestroy {
   }
 
   private _getConnectedElement(): ElementRef {
-    return this._formField ? this._formField._connectionContainerRef : this._element;
+    return this._formField ? this._formField.getConnectedOverlayOrigin() : this._element;
   }
 
   /** Returns the width of the input element, so the panel width can match it. */

src/lib/datepicker/datepicker-input.ts

@@ -273,20 +273,17 @@ export class MatDatepickerInput<D> implements AfterContentInit, ControlValueAcce
     return this._validator ? this._validator(c) : null;
   }
 
-  /**
-   * Gets the element that the datepicker popup should be connected to.
-   * @return The element to connect the popup to.
-   */
+  /** @deletion-target 7.0.0 Use `getConnectedOverlayOrigin` instead */
   getPopupConnectionElementRef(): ElementRef {
-    return this._formField ? this._formField.underlineRef : this._elementRef;
+    return this.getConnectedOverlayOrigin();
   }
 
   /**
-   * Determines the offset to be used when the calendar goes into a fallback position.
-   * Primarily used to prevent the calendar from overlapping the input.
+   * Gets the element that the datepicker popup should be connected to.
+   * @return The element to connect the popup to.
    */
-  _getPopupFallbackOffset(): number {
-    return this._formField ? -this._formField._inputContainerRef.nativeElement.clientHeight : 0;
+  getConnectedOverlayOrigin(): ElementRef {
+    return this._formField ? this._formField.getConnectedOverlayOrigin() : this._elementRef;
   }
 
   // Implemented as part of ControlValueAccessor.

src/lib/datepicker/datepicker.spec.ts

@@ -273,7 +273,7 @@ describe('MatDatepicker', () => {
       });
 
       it('should attach popup to native input', () => {
-        let attachToRef = testComponent.datepickerInput.getPopupConnectionElementRef();
+        let attachToRef = testComponent.datepickerInput.getConnectedOverlayOrigin();
         expect(attachToRef.nativeElement.tagName.toLowerCase())
             .toBe('input', 'popup should be attached to native input');
       });
@@ -791,7 +791,7 @@ describe('MatDatepicker', () => {
       }));
 
       it('should attach popup to mat-form-field underline', () => {
-        let attachToRef = testComponent.datepickerInput.getPopupConnectionElementRef();
+        let attachToRef = testComponent.datepickerInput.getConnectedOverlayOrigin();
         expect(attachToRef.nativeElement.classList.contains('mat-form-field-underline'))
             .toBe(true, 'popup should be attached to mat-form-field underline');
       });

src/lib/datepicker/datepicker.ts

@@ -378,18 +378,14 @@ export class MatDatepicker<D> implements OnDestroy {
 
   /** Create the popup PositionStrategy. */
   private _createPopupPositionStrategy(): PositionStrategy {
-    const fallbackOffset = this._datepickerInput._getPopupFallbackOffset();
-
     return this._overlay.position()
-      .connectedTo(this._datepickerInput.getPopupConnectionElementRef(),
+      .connectedTo(this._datepickerInput.getConnectedOverlayOrigin(),
         {originX: 'start', originY: 'bottom'},
         {overlayX: 'start', overlayY: 'top'}
       )
       .withFallbackPosition(
         {originX: 'start', originY: 'top'},
         {overlayX: 'start', overlayY: 'bottom'},
-        undefined,
-        fallbackOffset
       )
       .withFallbackPosition(
         {originX: 'end', originY: 'bottom'},
@@ -398,8 +394,6 @@ export class MatDatepicker<D> implements OnDestroy {
       .withFallbackPosition(
         {originX: 'end', originY: 'top'},
         {overlayX: 'end', overlayY: 'bottom'},
-        undefined,
-        fallbackOffset
       );
   }
 

src/lib/form-field/BUILD.bazel

@@ -11,6 +11,7 @@ ng_module(
     ":form_field_css",
     ":form_field_fill_css",
     ":form_field_legacy_css",
+    ":form_field_outline_css",
     ":form_field_standard_css",
     "//src/lib/input:input_css"
   ],
@@ -40,6 +41,12 @@ sass_binary(
   deps = ["//src/lib/core:core_scss_lib"],
 )
 
+sass_binary(
+  name = "form_field_outline_scss",
+  src = "form-field-outline.scss",
+  deps = ["//src/lib/core:core_scss_lib"],
+)
+
 sass_binary(
   name = "form_field_standard_scss",
   src = "form-field-standard.scss",
@@ -69,6 +76,13 @@ genrule(
   cmd = "cat $(locations :form_field_legacy_scss) > $@",
 )
 
+genrule(
+  name = "form_field_outline_css",
+  srcs = [":form_field_outline_scss"],
+  outs = ["form-field-outline.css"],
+  cmd = "cat $(locations :form_field_outline_scss) > $@",
+)
+
 genrule(
   name = "form_field_standard_css",
   srcs = [":form_field_standard_scss"],

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

@@ -60,38 +60,36 @@ $mat-form-field-fill-dedupe: 0;
   $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.
+  // The padding on top of the infix.
   $infix-padding-top: 0.25em;
+  // The padding below the infix.
   $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 fill appearance.
-  $fill-appearance-label-offset: -0.5em * $line-height;
+  // The amount we offset the label from the input text in the fill appearance.
+  $fill-appearance-label-offset: -0.5em;
 
   .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-label {
       top: $infix-margin-top + $infix-padding-top;
+      margin-top: $fill-appearance-label-offset;
     }
 
     &.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(
+        @include _mat-form-field-fill-label-floating(
                 $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(
+        @include _mat-form-field-fill-label-floating(
                 $subscript-font-scale, $infix-padding-top + $fill-appearance-label-offset,
                 $infix-margin-top);
       }
@@ -100,7 +98,7 @@ $mat-form-field-fill-dedupe: 0;
       // (used as a pure CSS stand-in for mat-form-field-should-float).
       .mat-input-server[label]:not(:label-shown) + .mat-form-field-label-wrapper
       .mat-form-field-label {
-        @include _mat-form-field-label-floating(
+        @include _mat-form-field-fill-label-floating(
                 $subscript-font-scale, $infix-padding-top + $fill-appearance-label-offset,
                 $infix-margin-top);
       }

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

@@ -0,0 +1,143 @@
+@import '../core/theming/palette';
+@import '../core/theming/theming';
+@import '../core/style/form-common';
+@import '../core/typography/typography-utils';
+
+
+// Theme styles that only apply to the outline appearance of the form-field.
+
+@mixin mat-form-field-outline-theme($theme) {
+  $primary: map-get($theme, primary);
+  $accent: map-get($theme, accent);
+  $warn: map-get($theme, warn);
+  $foreground: map-get($theme, foreground);
+  $is-dark-theme: map-get($theme, is-dark);
+
+  $label-disabled-color: mat-color($foreground, disabled-text);
+  $outline-color: mat-color($foreground, divider, if($is-dark-theme, 0.30, 0.12));
+  $outline-color-hover: mat-color($foreground, divider, if($is-dark-theme, 1, 0.87));
+  $outline-color-primary: mat-color($primary);
+  $outline-color-accent: mat-color($accent);
+  $outline-color-warn: mat-color($warn);
+  $outline-color-disabled: mat-color($foreground, divider, if($is-dark-theme, 0.15, 0.06));
+
+  .mat-form-field-appearance-outline {
+    .mat-form-field-outline {
+      color: $outline-color;
+    }
+
+    .mat-form-field-outline-thick {
+      color: $outline-color-hover;
+    }
+
+    &.mat-focused {
+      .mat-form-field-outline-thick {
+        color: $outline-color-primary;
+      }
+
+      &.mat-accent .mat-form-field-outline-thick {
+        color: $outline-color-accent;
+      }
+
+      &.mat-warn .mat-form-field-outline-thick {
+        color: $outline-color-warn;
+      }
+    }
+
+    // Class repeated so that rule is specific enough to override focused accent color case.
+    &.mat-form-field-invalid.mat-form-field-invalid {
+      .mat-form-field-outline-thick {
+        color: $outline-color-warn;
+      }
+    }
+
+    &.mat-form-field-disabled {
+      .mat-form-field-label {
+        color: $label-disabled-color;
+      }
+
+      .mat-form-field-outline {
+        color: $outline-color-disabled;
+      }
+    }
+  }
+}
+
+// Used to make instances of the _mat-form-field-label-floating mixin negligibly different,
+// 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-outline-dedupe: 0;
+
+// Applies a floating label above the form field control itself.
+@mixin _mat-form-field-outline-label-floating($font-scale, $infix-padding, $infix-margin-top) {
+  transform: translateY(-$infix-margin-top - $infix-padding + $mat-form-field-outline-dedupe)
+  scale($font-scale);
+  width: 100% / $font-scale + $mat-form-field-outline-dedupe;
+
+  $mat-form-field-fill-dedupe: $mat-form-field-outline-dedupe + 0.00001 !global;
+}
+
+@mixin mat-form-field-outline-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 above and below the infix.
+  $infix-padding: 1em;
+  // 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 space between the bottom of the .mat-form-field-flex area and the subscript wrapper.
+  // 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.
+  $subscript-margin-top: 0.5em / $subscript-font-scale;
+  // The padding applied to the form-field-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.
+  $wrapper-padding-bottom: ($subscript-margin-top + $line-height) * $subscript-font-scale;
+  // The amount we offset the label from the input text in the outline appearance.
+  $outline-appearance-label-offset: -0.25em;
+
+  .mat-form-field-appearance-outline {
+    .mat-form-field-infix {
+      padding: $infix-padding 0 $infix-padding 0;
+    }
+
+    .mat-form-field-outline {
+      // We want the bottom of the outline to start at the end of the content box, not the padding
+      // box, so we move it up by the padding amount.
+      bottom: $wrapper-padding-bottom;
+    }
+
+    .mat-form-field-label {
+      top: $infix-margin-top + $infix-padding;
+      margin-top: $outline-appearance-label-offset;
+    }
+
+    &.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-outline-label-floating(
+                $subscript-font-scale, $infix-padding + $outline-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-outline-label-floating(
+                $subscript-font-scale, $infix-padding + $outline-appearance-label-offset,
+                $infix-margin-top);
+      }
+
+      // Server-side rendered matInput with a label attribute but label not shown
+      // (used as a pure CSS stand-in for mat-form-field-should-float).
+      .mat-input-server[label]:not(:label-shown) + .mat-form-field-label-wrapper
+      .mat-form-field-label {
+        @include _mat-form-field-outline-label-floating(
+                $subscript-font-scale, $infix-padding + $outline-appearance-label-offset,
+                $infix-margin-top);
+      }
+    }
+  }
+}

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

@@ -4,6 +4,7 @@
 @import '../core/typography/typography-utils';
 @import 'form-field-fill-theme.scss';
 @import 'form-field-legacy-theme.scss';
+@import 'form-field-outline-theme.scss';
 @import 'form-field-standard-theme.scss';
 
 
@@ -95,6 +96,7 @@
   @include mat-form-field-legacy-theme($theme);
   @include mat-form-field-standard-theme($theme);
   @include mat-form-field-fill-theme($theme);
+  @include mat-form-field-outline-theme($theme);
 }
 
 // Used to make instances of the _mat-form-field-label-floating mixin negligibly different,
@@ -222,4 +224,5 @@ $mat-form-field-dedupe: 0;
   @include mat-form-field-legacy-typography($config);
   @include mat-form-field-standard-typography($config);
   @include mat-form-field-fill-typography($config);
+  @include mat-form-field-outline-typography($config);
 }