fix(select): arrow position/animation for appearance="standard" (#12045)

This commit aims to fix the arrow positioning of mat-selects
with appearance="standard". Since the label moves down whenever
the selected value is empty, the arrow looks out of place.
I added an animation that matches the speed of the label
animation:
Going from filled to empty transitions the arrow down so that it
sits level with the label.
Going from empty to filled snaps the arrow back up, matching the
label's behavior.

Author: seritools

src/demo-app/select/select-demo.html

@@ -144,6 +144,61 @@
     </mat-card-content>
   </mat-card>
 
+  <mat-card>
+    <mat-card-subtitle>Appearance comparison</mat-card-subtitle>
+    <mat-card-content>
+      <p>
+        <mat-form-field>
+          <mat-label>Legacy</mat-label>
+          <mat-select [(value)]="currentAppearanceValue">
+            <mat-option>None</mat-option>
+            <mat-option *ngFor="let creature of digimon" [value]="creature.value">
+              {{ creature.viewValue }}
+            </mat-option>
+          </mat-select>
+        </mat-form-field>
+      </p>
+
+      <p>
+        <mat-form-field appearance="standard">
+          <mat-label>Standard</mat-label>
+          <mat-select [(value)]="currentAppearanceValue">
+            <mat-option>None</mat-option>
+            <mat-option *ngFor="let creature of digimon" [value]="creature.value">
+              {{ creature.viewValue }}
+            </mat-option>
+          </mat-select>
+        </mat-form-field>
+      </p>
+
+      <p>
+        <mat-form-field appearance="fill">
+          <mat-label>Fill</mat-label>
+          <mat-select [(value)]="currentAppearanceValue">
+            <mat-option>None</mat-option>
+            <mat-option *ngFor="let creature of digimon" [value]="creature.value">
+              {{ creature.viewValue }}
+            </mat-option>
+          </mat-select>
+        </mat-form-field>
+      </p>
+
+      <p>
+        <mat-form-field appearance="outline">
+          <mat-label>Outline</mat-label>
+          <mat-select [(value)]="currentAppearanceValue">
+            <mat-option>None</mat-option>
+            <mat-option *ngFor="let creature of digimon" [value]="creature.value">
+              {{ creature.viewValue }}
+            </mat-option>
+          </mat-select>
+        </mat-form-field>
+      </p>
+
+      <button mat-button (click)="toggleSelected()">TOGGLE SELECTED</button>
+    </mat-card-content>
+  </mat-card>
+
   <div *ngIf="showSelect">
     <mat-card>
       <mat-card-subtitle>formControl</mat-card-subtitle>

src/demo-app/select/select-demo.ts

@@ -29,6 +29,7 @@ export class SelectDemo {
   currentPokemon: string[];
   currentPokemonFromGroup: string;
   currentDigimon: string;
+  currentAppearanceValue: string | null;
   latestChangeEvent: MatSelectChange;
   floatLabel = 'auto';
   foodControl = new FormControl('pizza-1');
@@ -135,4 +136,8 @@ export class SelectDemo {
   compareByReference(o1: any, o2: any) {
     return o1 === o2;
   }
+
+  toggleSelected() {
+    this.currentAppearanceValue = this.currentAppearanceValue ? null : this.digimon[0].value;
+  }
 }

src/lib/select/select.scss

@@ -46,16 +46,31 @@ $mat-select-placeholder-arrow-space: 2 * ($mat-select-arrow-size + $mat-select-a
   display: table-cell;
   vertical-align: middle;
 
-  // 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 & {
+  // When used in a box appearance form-field the arrow should be shifted up 50%.
+  .mat-form-field-appearance-fill & {
     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%);
   }
+
+  // When used in a standard appearance form-field the arrow should be shifted up 50%,
+  // but only if it's not empty
+  .mat-form-field-appearance-standard .mat-select:not(.mat-select-empty) & {
+    transform: translateY(-50%);
+  }
+
+  // Animate the arrow position, but only when the transitioning to empty (animate the arrow down)
+  // This is in line with the mat-form-field label animation
+  .mat-form-field-appearance-standard .mat-select.mat-select-empty & {
+    transition: transform $swift-ease-out-duration $swift-ease-out-timing-function;
+  }
+
+  ._mat-animation-noopable.mat-form-field-appearance-standard .mat-select.mat-select-empty & {
+    transition: none;
+  }
 }
 
 .mat-select-arrow {

src/lib/select/select.ts

@@ -202,6 +202,7 @@ export class MatSelectTrigger {}
     '[class.mat-select-disabled]': 'disabled',
     '[class.mat-select-invalid]': 'errorState',
     '[class.mat-select-required]': 'required',
+    '[class.mat-select-empty]': 'empty',
     'class': 'mat-select',
     '(keydown)': '_handleKeydown($event)',
     '(focus)': '_onFocus()',