fix floating placehodler and color

Author: mmalerba

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

@@ -6,8 +6,8 @@
   <md-card>
     <md-card-subtitle>ngModel</md-card-subtitle>
 
-    <md-form-field>
-      <md-select placeholder="Drink" [color]="drinksTheme" [(ngModel)]="currentDrink" [required]="drinksRequired"
+    <md-form-field [floatPlaceholder]="floatPlaceholder" [color]="drinksTheme">
+      <md-select placeholder="Drink" [(ngModel)]="currentDrink" [required]="drinksRequired"
         [disabled]="drinksDisabled" #drinkControl="ngModel">
         <md-option>None</md-option>
         <md-option *ngFor="let drink of drinks" [value]="drink.value" [disabled]="drink.disabled">
@@ -44,8 +44,8 @@
     <md-card-subtitle>Multiple selection</md-card-subtitle>
 
     <md-card-content>
-      <md-form-field>
-        <md-select multiple [color]="pokemonTheme" placeholder="Pokemon" [(ngModel)]="currentPokemon"
+      <md-form-field [color]="pokemonTheme">
+        <md-select multiple placeholder="Pokemon" [(ngModel)]="currentPokemon"
           [required]="pokemonRequired" [disabled]="pokemonDisabled" #pokemonControl="ngModel">
           <md-option *ngFor="let creature of pokemon" [value]="creature.value">
             {{ creature.viewValue }}
@@ -138,9 +138,11 @@
       <md-card-subtitle>formControl</md-card-subtitle>
 
       <md-card-content>
-        <md-select placeholder="Food i would like to eat" [formControl]="foodControl">
-          <md-option *ngFor="let food of foods" [value]="food.value"> {{ food.viewValue }}</md-option>
-        </md-select>
+        <md-form-field>
+          <md-select placeholder="Food i would like to eat" [formControl]="foodControl">
+            <md-option *ngFor="let food of foods" [value]="food.value"> {{ food.viewValue }}</md-option>
+          </md-select>
+        </md-form-field>
         <p> Value: {{ foodControl.value }} </p>
         <p> Touched: {{ foodControl.touched }} </p>
         <p> Dirty: {{ foodControl.dirty }} </p>

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

@@ -21,7 +21,7 @@ export class SelectDemo {
   currentPokemonFromGroup: string;
   currentDigimon: string;
   latestChangeEvent: MdSelectChange;
-  floatPlaceholder: string = 'auto'; // add to form-field
+  floatPlaceholder: string = 'auto';
   foodControl = new FormControl('pizza-1');
   topHeightCtrl = new FormControl(0);
   drinksTheme = 'primary';

src/lib/form-field/form-field.ts

@@ -73,6 +73,9 @@ let nextUniqueId = 0;
     '[class.mat-input-invalid]': '_control.errorState',
     '[class.mat-form-field-invalid]': '_control.errorState',
     '[class.mat-focused]': '_control.focused',
+    '[class.mat-primary]': 'color == "primary"',
+    '[class.mat-accent]': 'color == "accent"',
+    '[class.mat-warn]': 'color == "warn"',
     '[class.ng-untouched]': '_shouldForward("untouched")',
     '[class.ng-touched]': '_shouldForward("touched")',
     '[class.ng-pristine]': '_shouldForward("pristine")',

src/lib/select/_select-theme.scss

@@ -3,13 +3,6 @@
 @import '../core/style/form-common';
 @import '../core/typography/typography-utils';
 
-@mixin _mat-select-inner-content-theme($palette) {
-  $color: mat-color($palette);
-
-  .mat-select-trigger, .mat-select-arrow {
-    color: $color;
-  }
-}
 
 @mixin mat-select-theme($theme) {
   $foreground: map-get($theme, foreground);
@@ -19,14 +12,8 @@
   $warn: map-get($theme, warn);
   $is-dark-theme: map-get($theme, is-dark);
 
-  .mat-select-trigger,
-  .mat-select-arrow {
-    color: mat-color($foreground, secondary-text);
-  }
-
   .mat-select-disabled .mat-select-value,
-  .mat-select-arrow,
-  .mat-select-trigger {
+  .mat-select-arrow {
     color: mat-color($foreground, secondary-text);
   }
 
@@ -44,23 +31,32 @@
     }
   }
 
-  .mat-select:focus:not(.mat-select-disabled) {
-    &.mat-primary {
-      @include _mat-select-inner-content-theme($primary);
+  .mat-form-field {
+    &.mat-focused {
+      &.mat-primary .mat-select-arrow {
+        color: mat-color($primary);
+      }
+
+      &.mat-accent .mat-select-arrow {
+        color: mat-color($accent);
+      }
+
+      &.mat-warn .mat-select-arrow {
+        color: mat-color($warn);
+      }
     }
 
-    &.mat-accent {
-      @include _mat-select-inner-content-theme($accent);
+    .mat-select.mat-select-invalid .mat-select-arrow {
+      color: mat-color($warn);
     }
 
-    &.mat-warn,
-    &.mat-select-invalid {
-      @include _mat-select-inner-content-theme($warn);
+    .mat-select.mat-select-disabled .mat-select-arrow {
+      color: mat-color($foreground, secondary-text);
     }
   }
 
-  .mat-select.mat-select-invalid:not(.mat-select-disabled) {
-    @include _mat-select-inner-content-theme($warn);
+  .mat-select.mat-select-disabled .mat-select-arrow {
+    color: mat-color($warn);
   }
 }
 

src/lib/select/select.scss

@@ -12,11 +12,6 @@ $mat-select-item-height: 3em !default;
 .mat-select {
   display: inline-block;
   outline: none;
-
-  // Inside of a form field we want it to expand to take the available space.
-  .mat-form-field & {
-    width: 100%;
-  }
 }
 
 .mat-select-trigger {

src/lib/select/select.ts

@@ -47,13 +47,11 @@ import {
 } from '@angular/core';
 import {ControlValueAccessor, FormGroupDirective, NgControl, NgForm} from '@angular/forms';
 import {
-  CanColor,
   CanDisable,
   HasTabIndex,
   MdOptgroup,
   MdOption,
   MdOptionSelectionChange,
-  mixinColor,
   mixinDisabled,
   mixinTabIndex,
 } from '@angular/material/core';
@@ -147,8 +145,7 @@ export class MdSelectChange {
 export class MdSelectBase {
   constructor(public _renderer: Renderer2, public _elementRef: ElementRef) {}
 }
-export const _MdSelectMixinBase =
-  mixinTabIndex(mixinColor(mixinDisabled(MdSelectBase), 'primary'));
+export const _MdSelectMixinBase = mixinTabIndex(mixinDisabled(MdSelectBase));
 
 
 /**
@@ -165,7 +162,7 @@ export class MdSelectTrigger {}
   selector: 'md-select, mat-select',
   templateUrl: 'select.html',
   styleUrls: ['select.css'],
-  inputs: ['color', 'disabled', 'tabIndex'],
+  inputs: ['disabled', 'tabIndex'],
   encapsulation: ViewEncapsulation.None,
   preserveWhitespaces: false,
   changeDetection: ChangeDetectionStrategy.OnPush,
@@ -197,7 +194,7 @@ export class MdSelectTrigger {}
   exportAs: 'mdSelect, matSelect',
 })
 export class MdSelect extends _MdSelectMixinBase implements AfterContentInit, OnDestroy, OnInit,
-    ControlValueAccessor, CanColor, CanDisable, HasTabIndex, MdFormFieldControl<any> {
+    ControlValueAccessor, CanDisable, HasTabIndex, MdFormFieldControl<any> {
   /** Whether or not the overlay panel is open. */
   private _panelOpen = false;
 
@@ -379,7 +376,6 @@ export class MdSelect extends _MdSelectMixinBase implements AfterContentInit, On
   set value(newValue: any) {
     this.writeValue(newValue);
     this._value = newValue;
-    this.stateChanges.next();
   }
   private _value: any;
 
@@ -455,6 +451,7 @@ export class MdSelect extends _MdSelectMixinBase implements AfterContentInit, On
 
   ngOnInit() {
     this._selectionModel = new SelectionModel<MdOption>(this.multiple, undefined, false);
+    this.stateChanges.next();
   }
 
   ngAfterContentInit() {
@@ -753,6 +750,7 @@ export class MdSelect extends _MdSelectMixinBase implements AfterContentInit, On
     if (correspondingOption) {
       isUserInput ? correspondingOption._selectViaInteraction() : correspondingOption.select();
       this._selectionModel.select(correspondingOption);
+      this.stateChanges.next();
     }
 
     return correspondingOption;
@@ -770,6 +768,7 @@ export class MdSelect extends _MdSelectMixinBase implements AfterContentInit, On
         option.deselect();
       }
     });
+    this.stateChanges.next();
   }
 
   private _getTriggerRect(): ClientRect {
@@ -810,6 +809,7 @@ export class MdSelect extends _MdSelectMixinBase implements AfterContentInit, On
     // TODO(crisbeto): handle blank/null options inside multi-select.
     if (this.multiple) {
       this._selectionModel.toggle(option);
+      this.stateChanges.next();
       wasSelected ? option.deselect() : option.select();
       this._sortValues();
     } else {
@@ -819,6 +819,7 @@ export class MdSelect extends _MdSelectMixinBase implements AfterContentInit, On
         this._propagateChanges(option.value);
       } else {
         this._selectionModel.select(option);
+        this.stateChanges.next();
       }
     }
 
@@ -840,6 +841,7 @@ export class MdSelect extends _MdSelectMixinBase implements AfterContentInit, On
           this._selectionModel.select(option);
         }
       });
+      this.stateChanges.next();
     }
   }