From 9474556259782f645bebb50054a05a9d96c8fb5d Mon Sep 17 00:00:00 2001
From: Dennis Duda <git@seri.tools>
Date: Tue, 3 Jul 2018 20:30:22 +0200
Subject: [PATCH 1/2] fix(select): Arrow position/animation for
 appearance="standard" (#11925)

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.
To test/compare the different appearances I added another card
to the demo-app with all of them.
---
 src/demo-app/select/select-demo.html | 53 ++++++++++++++++++++++++++++
 src/lib/select/select-animations.ts  | 13 +++++++
 src/lib/select/select.html           |  3 +-
 src/lib/select/select.scss           |  5 ++-
 src/lib/select/select.ts             |  3 +-
 5 files changed, 72 insertions(+), 5 deletions(-)

diff --git a/src/demo-app/select/select-demo.html b/src/demo-app/select/select-demo.html
index f70788bb70b9..9e22fc2e096f 100644
--- a/src/demo-app/select/select-demo.html
+++ b/src/demo-app/select/select-demo.html
@@ -144,6 +144,59 @@
     </mat-card-content>
   </mat-card>
 
+  <mat-card class=".demo-appearance-comparison">
+    <mat-card-subtitle>Appearance comparison</mat-card-subtitle>
+
+    <p>
+      <mat-form-field>
+        <mat-label>Legacy</mat-label>
+        <mat-select>
+          <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>
+          <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>
+          <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>
+          <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>
+
+  </mat-card>
+
   <div *ngIf="showSelect">
     <mat-card>
       <mat-card-subtitle>formControl</mat-card-subtitle>
diff --git a/src/lib/select/select-animations.ts b/src/lib/select/select-animations.ts
index f08e995c45fe..e11bcbe650d2 100644
--- a/src/lib/select/select-animations.ts
+++ b/src/lib/select/select-animations.ts
@@ -27,6 +27,7 @@ import {
 export const matSelectAnimations: {
   readonly transformPanel: AnimationTriggerMetadata;
   readonly fadeInContent: AnimationTriggerMetadata;
+  readonly transformArrow: AnimationTriggerMetadata;
 } = {
   /**
    * This animation transforms the select's overlay panel on and off the page.
@@ -73,6 +74,18 @@ export const matSelectAnimations: {
       style({opacity: 0}),
       animate('150ms 100ms cubic-bezier(0.55, 0, 0.55, 0.2)')
     ])
+  ]),
+
+  /**
+   * This animation moves the panel toggle arrow up whenever the select is not empty to match the
+   * visual middle. This affects only mat-selects with appearance='standard'.
+   */
+  transformArrow: trigger('transformArrow', [
+    state('empty', style({})),
+    state('showing', style({transform: 'translateY(-50%)'})),
+    transition('showing => empty', [
+      animate('400ms cubic-bezier(0.25, 0.8, 0.25, 1)')
+    ])
   ])
 };
 
diff --git a/src/lib/select/select.html b/src/lib/select/select.html
index 4e9f6cf841a8..24b6f131bdad 100644
--- a/src/lib/select/select.html
+++ b/src/lib/select/select.html
@@ -12,7 +12,8 @@
     </span>
   </div>
 
-  <div class="mat-select-arrow-wrapper"><div class="mat-select-arrow"></div></div>
+  <div class="mat-select-arrow-wrapper"
+       [@transformArrow]="empty ? 'empty' : 'showing'"><div class="mat-select-arrow"></div></div>
 </div>
 
 <ng-template
diff --git a/src/lib/select/select.scss b/src/lib/select/select.scss
index 620cd2b929fb..f08d0bd325bf 100644
--- a/src/lib/select/select.scss
+++ b/src/lib/select/select.scss
@@ -46,9 +46,8 @@ $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%);
   }
 
diff --git a/src/lib/select/select.ts b/src/lib/select/select.ts
index d60bb6dc207d..79f0c0b1837a 100644
--- a/src/lib/select/select.ts
+++ b/src/lib/select/select.ts
@@ -209,7 +209,8 @@ export class MatSelectTrigger {}
   },
   animations: [
     matSelectAnimations.transformPanel,
-    matSelectAnimations.fadeInContent
+    matSelectAnimations.fadeInContent,
+    matSelectAnimations.transformArrow
   ],
   providers: [
     {provide: MatFormFieldControl, useExisting: MatSelect},

From 4df3243db60c6f4890a01e4d2f4c6802ca120245 Mon Sep 17 00:00:00 2001
From: Dennis Duda <git@seri.tools>
Date: Sun, 8 Jul 2018 13:24:07 +0200
Subject: [PATCH 2/2] select-arrow: Replaced angular animation with simple css
 animation

---
 src/demo-app/select/select-demo.html | 94 ++++++++++++++--------------
 src/demo-app/select/select-demo.ts   |  5 ++
 src/lib/select/select-animations.ts  | 13 ----
 src/lib/select/select.html           |  3 +-
 src/lib/select/select.scss           | 16 +++++
 src/lib/select/select.ts             |  4 +-
 6 files changed, 72 insertions(+), 63 deletions(-)

diff --git a/src/demo-app/select/select-demo.html b/src/demo-app/select/select-demo.html
index 9e22fc2e096f..2b2cf07d1e1c 100644
--- a/src/demo-app/select/select-demo.html
+++ b/src/demo-app/select/select-demo.html
@@ -144,57 +144,59 @@
     </mat-card-content>
   </mat-card>
 
-  <mat-card class=".demo-appearance-comparison">
+  <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>
-        <mat-label>Legacy</mat-label>
-        <mat-select>
-          <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>
-          <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>
-          <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>
-          <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">
diff --git a/src/demo-app/select/select-demo.ts b/src/demo-app/select/select-demo.ts
index b399954f9b39..56f0305af7c5 100644
--- a/src/demo-app/select/select-demo.ts
+++ b/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;
+  }
 }
diff --git a/src/lib/select/select-animations.ts b/src/lib/select/select-animations.ts
index e11bcbe650d2..f08e995c45fe 100644
--- a/src/lib/select/select-animations.ts
+++ b/src/lib/select/select-animations.ts
@@ -27,7 +27,6 @@ import {
 export const matSelectAnimations: {
   readonly transformPanel: AnimationTriggerMetadata;
   readonly fadeInContent: AnimationTriggerMetadata;
-  readonly transformArrow: AnimationTriggerMetadata;
 } = {
   /**
    * This animation transforms the select's overlay panel on and off the page.
@@ -74,18 +73,6 @@ export const matSelectAnimations: {
       style({opacity: 0}),
       animate('150ms 100ms cubic-bezier(0.55, 0, 0.55, 0.2)')
     ])
-  ]),
-
-  /**
-   * This animation moves the panel toggle arrow up whenever the select is not empty to match the
-   * visual middle. This affects only mat-selects with appearance='standard'.
-   */
-  transformArrow: trigger('transformArrow', [
-    state('empty', style({})),
-    state('showing', style({transform: 'translateY(-50%)'})),
-    transition('showing => empty', [
-      animate('400ms cubic-bezier(0.25, 0.8, 0.25, 1)')
-    ])
   ])
 };
 
diff --git a/src/lib/select/select.html b/src/lib/select/select.html
index 24b6f131bdad..4e9f6cf841a8 100644
--- a/src/lib/select/select.html
+++ b/src/lib/select/select.html
@@ -12,8 +12,7 @@
     </span>
   </div>
 
-  <div class="mat-select-arrow-wrapper"
-       [@transformArrow]="empty ? 'empty' : 'showing'"><div class="mat-select-arrow"></div></div>
+  <div class="mat-select-arrow-wrapper"><div class="mat-select-arrow"></div></div>
 </div>
 
 <ng-template
diff --git a/src/lib/select/select.scss b/src/lib/select/select.scss
index f08d0bd325bf..5f1898207938 100644
--- a/src/lib/select/select.scss
+++ b/src/lib/select/select.scss
@@ -55,6 +55,22 @@ $mat-select-placeholder-arrow-space: 2 * ($mat-select-arrow-size + $mat-select-a
   .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 {
diff --git a/src/lib/select/select.ts b/src/lib/select/select.ts
index 79f0c0b1837a..f39c850077c6 100644
--- a/src/lib/select/select.ts
+++ b/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()',
@@ -209,8 +210,7 @@ export class MatSelectTrigger {}
   },
   animations: [
     matSelectAnimations.transformPanel,
-    matSelectAnimations.fadeInContent,
-    matSelectAnimations.transformArrow
+    matSelectAnimations.fadeInContent
   ],
   providers: [
     {provide: MatFormFieldControl, useExisting: MatSelect},