fix(select): theme not being transferred to the panel (#7342)

* Fixes the theme from the form field not being transferred to the panel, causing the options to have the wrong color. This seems to have happened during the switch to the form field, but interestingly AoT didn't catch us not having a `color` anymore (possible because it's in a binding expression).
* Moves a test to another test suite since it doesn't belong with the theming tests.

Author: crisbeto

src/lib/select/select.html

@@ -34,7 +34,7 @@
   (detach)="close()">
 
   <div
-    class="mat-select-panel {{ 'mat-' + color }}"
+    class="mat-select-panel {{ _getPanelTheme() }}"
     [ngClass]="panelClass"
     [@transformPanel]="multiple ? 'showing-multiple' : 'showing'"
     (@transformPanel.done)="_onPanelDone()"

src/lib/select/select.spec.ts

@@ -2275,6 +2275,19 @@ describe('MatSelect', () => {
 
       expect(() => fixture.componentInstance.select.triggerValue).not.toThrow();
     });
+
+    it('should allow the user to customize the label', () => {
+      const fixture = TestBed.createComponent(SelectWithCustomTrigger);
+      fixture.detectChanges();
+
+      fixture.componentInstance.control.setValue('pizza-1');
+      fixture.detectChanges();
+
+      const label = fixture.debugElement.query(By.css('.mat-select-value')).nativeElement;
+
+      expect(label.textContent).toContain('azziP',
+          'Expected the displayed text to be "Pizza" in reverse.');
+    });
   });
 
   describe('change event', () => {
@@ -2622,30 +2635,21 @@ describe('MatSelect', () => {
 
   describe('theming', () => {
     let fixture: ComponentFixture<BasicSelectWithTheming>;
-    let testInstance: BasicSelectWithTheming;
-    let selectElement: HTMLElement;
 
     beforeEach(async(() => {
       fixture = TestBed.createComponent(BasicSelectWithTheming);
-      testInstance = fixture.componentInstance;
       fixture.detectChanges();
-
-      selectElement = fixture.debugElement.query(By.css('.mat-select')).nativeElement;
     }));
 
-    it('should allow the user to customize the label', () => {
-      fixture.destroy();
-
-      const labelFixture = TestBed.createComponent(SelectWithCustomTrigger);
-      labelFixture.detectChanges();
-
-      labelFixture.componentInstance.control.setValue('pizza-1');
-      labelFixture.detectChanges();
+    it('should transfer the theme to the select panel', () => {
+      fixture.componentInstance.theme = 'warn';
+      fixture.detectChanges();
 
-      const label = labelFixture.debugElement.query(By.css('.mat-select-value')).nativeElement;
+      fixture.componentInstance.select.open();
+      fixture.detectChanges();
 
-      expect(label.textContent).toContain('azziP',
-          'Expected the displayed text to be "Pizza" in reverse.');
+      const panel = overlayContainerElement.querySelector('.mat-select-panel')! as HTMLElement;
+      expect(panel.classList).toContain('mat-warn');
     });
   });
 

src/lib/select/select.ts

@@ -55,7 +55,7 @@ import {
   mixinDisabled,
   mixinTabIndex,
 } from '@angular/material/core';
-import {MatFormFieldControl} from '@angular/material/form-field';
+import {MatFormField, MatFormFieldControl} from '@angular/material/form-field';
 import {Observable} from 'rxjs/Observable';
 import {merge} from 'rxjs/observable/merge';
 import {Subject} from 'rxjs/Subject';
@@ -410,6 +410,7 @@ export class MatSelect extends _MatSelectMixinBase implements AfterContentInit,
     @Optional() private _dir: Directionality,
     @Optional() private _parentForm: NgForm,
     @Optional() private _parentFormGroup: FormGroupDirective,
+    @Optional() private _parentFormField: MatFormField,
     @Self() @Optional() public ngControl: NgControl,
     @Attribute('tabindex') tabIndex: string,
     @Inject(MAT_SELECT_SCROLL_STRATEGY) private _scrollStrategyFactory) {
@@ -641,6 +642,11 @@ export class MatSelect extends _MatSelectMixinBase implements AfterContentInit,
     this._setScrollTop();
   }
 
+  /** Returns the theme to be used on the panel. */
+  _getPanelTheme(): string {
+    return this._parentFormField ? `mat-${this._parentFormField.color}` : '';
+  }
+
   /** Whether the select has a value. */
   get empty(): boolean {
     return !this._selectionModel || this._selectionModel.isEmpty();