fix(form-field): correct prefix & suffix icons as well as select arrow for various form field appearances (#9743)

Author: mmalerba

src/demo-app/input/input-demo.scss

@@ -10,6 +10,10 @@
 
 .demo-card {
   margin: 16px;
+
+  mat-card-content {
+    font-size: 16px;
+  }
 }
 
 .demo-text-align-end {

src/lib/button/button.scss

@@ -67,6 +67,19 @@
   }
 }
 
+// Align icon-buttons correctly inside of standard, fill, and outline form-field appearances.
+.mat-form-field:not(.mat-form-field-appearance-legacy) {
+  .mat-form-field-prefix,
+  .mat-form-field-suffix {
+    .mat-icon-button {
+      display: block;
+      font-size: inherit;
+      width: 2.5em;
+      height: 2.5em;
+    }
+  }
+}
+
 // The text and icon should be vertical aligned inside a button
 .mat-button, .mat-raised-button, .mat-icon-button, .mat-fab, .mat-mini-fab {
   color: currentColor;

src/lib/chips/chip-list.ts

@@ -11,7 +11,6 @@ import {Directionality} from '@angular/cdk/bidi';
 import {coerceBooleanProperty} from '@angular/cdk/coercion';
 import {SelectionModel} from '@angular/cdk/collections';
 import {BACKSPACE} from '@angular/cdk/keycodes';
-import {startWith} from 'rxjs/operators/startWith';
 import {
   AfterContentInit,
   ChangeDetectionStrategy,
@@ -21,7 +20,6 @@ import {
   DoCheck,
   ElementRef,
   EventEmitter,
-  Inject,
   Input,
   OnDestroy,
   OnInit,
@@ -31,16 +29,12 @@ import {
   Self,
   ViewEncapsulation,
 } from '@angular/core';
-import {
-  ControlValueAccessor,
-  FormGroupDirective,
-  NgControl,
-  NgForm
-} from '@angular/forms';
-import {ErrorStateMatcher, mixinErrorState, CanUpdateErrorState} from '@angular/material/core';
+import {ControlValueAccessor, FormGroupDirective, NgControl, NgForm} from '@angular/forms';
+import {CanUpdateErrorState, ErrorStateMatcher, mixinErrorState} from '@angular/material/core';
 import {MatFormFieldControl} from '@angular/material/form-field';
 import {Observable} from 'rxjs/Observable';
 import {merge} from 'rxjs/observable/merge';
+import {startWith} from 'rxjs/operators/startWith';
 import {Subscription} from 'rxjs/Subscription';
 import {MatChip, MatChipEvent, MatChipSelectionChange} from './chip';
 import {MatChipInput} from './chip-input';

src/lib/datepicker/datepicker-toggle.scss

@@ -1,6 +1,23 @@
-.mat-datepicker-toggle-default-icon {
-  .mat-form-field-prefix &,
-  .mat-form-field-suffix & {
-    width: 1em;
+.mat-form-field-appearance-legacy {
+  .mat-form-field-prefix,
+  .mat-form-field-suffix {
+    .mat-datepicker-toggle-default-icon {
+      width: 1em;
+    }
+  }
+}
+
+.mat-form-field:not(.mat-form-field-appearance-legacy) {
+  .mat-form-field-prefix,
+  .mat-form-field-suffix {
+    .mat-datepicker-toggle-default-icon {
+      display: block;
+      width: 1.5em;
+      height: 1.5em;
+    }
+
+    .mat-icon-button .mat-datepicker-toggle-default-icon {
+      margin: auto;
+    }
   }
 }

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

@@ -14,7 +14,7 @@
   $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: mat-color($foreground, divider, if($is-dark-theme, 0.3, 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);

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

@@ -14,6 +14,24 @@ $mat-form-field-legacy-underline-height: 1px !default;
     -ms-transform: none;
   }
 
+  .mat-form-field-prefix,
+  .mat-form-field-suffix {
+    // Allow icons in a prefix or suffix to adapt to the correct size.
+    .mat-icon {
+      width: 1em;
+    }
+
+    // Allow icon buttons in a prefix or suffix to adapt to the correct size.
+    .mat-icon-button {
+      font: inherit;
+      vertical-align: baseline;
+
+      .mat-icon {
+        font-size: inherit;
+      }
+    }
+  }
+
   // The underline is what's shown under the control, its prefix and its suffix.
   // The ripple is the blue animation coming on top of it.
   .mat-form-field-underline {

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

@@ -33,6 +33,11 @@ $mat-form-field-outline-subscript-padding:
     margin-top: -$mat-form-field-outline-label-overlap;
   }
 
+  .mat-form-field-prefix,
+  .mat-form-field-suffix {
+    top: $mat-form-field-outline-label-overlap;
+  }
+
   .mat-form-field-outline {
     display: flex;
     position: absolute;
@@ -52,7 +57,7 @@ $mat-form-field-outline-subscript-padding:
     border-radius: $mat-form-field-outline-border-radius 0 0 $mat-form-field-outline-border-radius;
     border-right-style: none;
 
-    [dir="rtl"] & {
+    [dir='rtl'] & {
       border-right-style: solid;
       border-left-style: none;
       border-radius: 0 $mat-form-field-outline-border-radius $mat-form-field-outline-border-radius
@@ -65,7 +70,7 @@ $mat-form-field-outline-subscript-padding:
     border-left-style: none;
     flex-grow: 1;
 
-    [dir="rtl"] & {
+    [dir='rtl'] & {
       border-left-style: solid;
       border-right-style: none;
       border-radius: $mat-form-field-outline-border-radius 0 0

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

@@ -43,21 +43,7 @@ $mat-form-field-default-infix-width: 180px !default;
 .mat-form-field-suffix {
   white-space: nowrap;
   flex: none;
-
-  // Allow icons in a prefix or suffix to adapt to the correct size.
-  .mat-icon {
-    width: 1em;
-  }
-
-  // Allow icon buttons in a prefix or suffix to adapt to the correct size.
-  .mat-icon-button {
-    font: inherit;
-    vertical-align: baseline;
-
-    .mat-icon {
-      font-size: inherit;
-    }
-  }
+  position: relative;
 }
 
 .mat-form-field-infix {

src/lib/icon/icon.scss

@@ -11,3 +11,16 @@ $mat-icon-size: 24px !default;
   height: $mat-icon-size;
   width: $mat-icon-size;
 }
+
+.mat-form-field:not(.mat-form-field-appearance-legacy) {
+  .mat-form-field-prefix,
+  .mat-form-field-suffix {
+    .mat-icon {
+      display: block;
+    }
+
+    .mat-icon-button .mat-icon {
+      margin: auto;
+    }
+  }
+}

src/lib/select/select.scss

@@ -46,10 +46,16 @@ $mat-select-placeholder-arrow-space: 2 * ($mat-select-arrow-size + $mat-select-a
   display: table-cell;
   vertical-align: middle;
 
-  // When used in a box appearance form-field the arrow should be centered in the box.
-  .mat-form-field-appearance-fill & {
+  // When used in a box or standard appearance form-field the arrow should be shifted up 50%.
+  .mat-form-field-appearance-fill &,
+  .mat-form-field-appearance-standard & {
     transform: translateY(-50%);
   }
+
+  // When used in a outline form-field the arrow should be shifted up 25%.
+  .mat-form-field-appearance-outline & {
+    transform: translateY(-25%);
+  }
 }
 
 .mat-select-arrow {