strip down select DOM and implement MdFormFieldControl

Author: mmalerba

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

@@ -6,13 +6,15 @@
   <md-card>
     <md-card-subtitle>ngModel</md-card-subtitle>
 
-    <md-select placeholder="Drink" [color]="drinksTheme" [(ngModel)]="currentDrink" [required]="drinksRequired"
-      [disabled]="drinksDisabled" [floatPlaceholder]="floatPlaceholder" #drinkControl="ngModel">
-      <md-option>None</md-option>
-      <md-option *ngFor="let drink of drinks" [value]="drink.value" [disabled]="drink.disabled">
-        {{ drink.viewValue }}
-      </md-option>
-    </md-select>
+    <md-form-field>
+      <md-select placeholder="Drink" [color]="drinksTheme" [(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">
+          {{ drink.viewValue }}
+        </md-option>
+      </md-select>
+    </md-form-field>
     <p> Value: {{ currentDrink }} </p>
     <p> Touched: {{ drinkControl.touched }} </p>
     <p> Dirty: {{ drinkControl.dirty }} </p>
@@ -42,12 +44,14 @@
     <md-card-subtitle>Multiple selection</md-card-subtitle>
 
     <md-card-content>
-      <md-select multiple [color]="pokemonTheme" placeholder="Pokemon" [(ngModel)]="currentPokemon"
-        [required]="pokemonRequired" [disabled]="pokemonDisabled" #pokemonControl="ngModel">
-        <md-option *ngFor="let creature of pokemon" [value]="creature.value">
-          {{ creature.viewValue }}
-        </md-option>
-      </md-select>
+      <md-form-field>
+        <md-select multiple [color]="pokemonTheme" placeholder="Pokemon" [(ngModel)]="currentPokemon"
+          [required]="pokemonRequired" [disabled]="pokemonDisabled" #pokemonControl="ngModel">
+          <md-option *ngFor="let creature of pokemon" [value]="creature.value">
+            {{ creature.viewValue }}
+          </md-option>
+        </md-select>
+      </md-form-field>
       <p> Value: {{ currentPokemon }} </p>
       <p> Touched: {{ pokemonControl.touched }} </p>
       <p> Dirty: {{ pokemonControl.dirty }} </p>
@@ -68,12 +72,14 @@
   <md-card>
     <md-card-subtitle>Without Angular forms</md-card-subtitle>
 
-    <md-select placeholder="Digimon" [(value)]="currentDigimon">
-      <md-option>None</md-option>
-      <md-option *ngFor="let creature of digimon" [value]="creature.value">
-        {{ creature.viewValue }}
-      </md-option>
-    </md-select>
+    <md-form-field>
+      <md-select placeholder="Digimon" [(value)]="currentDigimon">
+        <md-option>None</md-option>
+        <md-option *ngFor="let creature of digimon" [value]="creature.value">
+          {{ creature.viewValue }}
+        </md-option>
+      </md-select>
+    </md-form-field>
 
     <p>Value: {{ currentDigimon }}</p>
 
@@ -85,14 +91,16 @@
     <md-card-subtitle>Option groups</md-card-subtitle>
 
     <md-card-content>
-      <md-select placeholder="Pokemon" [(ngModel)]="currentPokemonFromGroup">
-        <md-optgroup *ngFor="let group of pokemonGroups" [label]="group.name"
-          [disabled]="group.disabled">
-          <md-option *ngFor="let creature of group.pokemon" [value]="creature.value">
-            {{ creature.viewValue }}
-          </md-option>
-        </md-optgroup>
-      </md-select>
+      <md-form-field>
+        <md-select placeholder="Pokemon" [(ngModel)]="currentPokemonFromGroup">
+          <md-optgroup *ngFor="let group of pokemonGroups" [label]="group.name"
+            [disabled]="group.disabled">
+            <md-option *ngFor="let creature of group.pokemon" [value]="creature.value">
+              {{ creature.viewValue }}
+            </md-option>
+          </md-optgroup>
+        </md-select>
+      </md-form-field>
     </md-card-content>
   </md-card>
 
@@ -149,9 +157,11 @@
       <md-card-subtitle>Change event</md-card-subtitle>
 
       <md-card-content>
-        <md-select placeholder="Starter Pokemon" (change)="latestChangeEvent = $event">
-          <md-option *ngFor="let creature of pokemon" [value]="creature.value">{{ creature.viewValue }}</md-option>
-        </md-select>
+        <md-form-field>
+          <md-select placeholder="Starter Pokemon" (change)="latestChangeEvent = $event">
+            <md-option *ngFor="let creature of pokemon" [value]="creature.value">{{ creature.viewValue }}</md-option>
+          </md-select>
+        </md-form-field>
 
         <p> Change event value: {{ latestChangeEvent?.value }} </p>
       </md-card-content>

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

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

src/lib/input/input.ts

@@ -55,7 +55,7 @@ let nextUniqueId = 0;
     'class': 'mat-input-element mat-form-field-autofill-control',
     // Native input properties that are overwritten by Angular inputs need to be synced with
     // the native input element. Otherwise property bindings for those don't work.
-    '[id]': 'id',
+    '[attr.id]': 'id',
     '[placeholder]': 'placeholder',
     '[disabled]': 'disabled',
     '[required]': 'required',

src/lib/select/_select-theme.scss

@@ -9,10 +9,6 @@
   .mat-select-trigger, .mat-select-arrow {
     color: $color;
   }
-
-  .mat-select-underline {
-    background-color: $color;
-  }
 }
 
 @mixin mat-select-theme($theme) {
@@ -22,22 +18,12 @@
   $accent: map-get($theme, accent);
   $warn: map-get($theme, warn);
   $is-dark-theme: map-get($theme, is-dark);
-  $underline-color: mat-color($foreground, divider, if($is-dark-theme, 0.7, 0.42));
 
   .mat-select-trigger,
   .mat-select-arrow {
     color: mat-color($foreground, secondary-text);
   }
 
-  .mat-select-underline {
-    background-color: $underline-color;
-  }
-
-  [aria-disabled='true'] .mat-select-underline {
-    // Since this is a dotted line, we need to make it slightly darker to get it to stand out.
-    @include mat-control-disabled-underline($underline-color);
-  }
-
   .mat-select-disabled .mat-select-value,
   .mat-select-arrow,
   .mat-select-trigger {
@@ -66,10 +52,6 @@
     &.mat-accent {
       @include _mat-select-inner-content-theme($accent);
     }
-
-    &.mat-select-required .mat-select-placeholder::after {
-      color: mat-color($warn);
-    }
   }
 
   .mat-select:focus:not(.mat-select-disabled).mat-warn, .mat-select-invalid {

src/lib/select/public_api.ts

@@ -8,5 +8,5 @@
 
 export * from './select-module';
 export * from './select';
-export {fadeInContent, transformPanel, transformPlaceholder} from './select-animations';
+export * from './select-animations';
 export * from './mat-exports';

src/lib/select/select-animations.ts

@@ -22,25 +22,6 @@ import {
  * The values below match the implementation of the AngularJS Material md-select animation.
  */
 
-/**
- * This animation shrinks the placeholder text to 75% of its normal size and translates
- * it to either the top left corner (ltr) or top right corner (rtl) of the trigger,
- * depending on the text direction of the application.
- */
-export const transformPlaceholder: AnimationTriggerMetadata = trigger('transformPlaceholder', [
-  state('floating-ltr', style({
-    top: '-22px',
-    left: '-2px',
-    transform: 'scale(0.75)'
-  })),
-  state('floating-rtl', style({
-    top: '-22px',
-    left: '2px',
-    transform: 'scale(0.75)'
-  })),
-  transition('* => *', animate('400ms cubic-bezier(0.25, 0.8, 0.25, 1)'))
-]);
-
 /**
  * This animation transforms the select's overlay panel on and off the page.
  *

src/lib/select/select.html

@@ -1,26 +1,18 @@
 <div
-  cdk-overlay-origin
-  class="mat-select-trigger"
-  aria-hidden="true"
-  (click)="toggle()"
-  #origin="cdkOverlayOrigin"
-  #trigger>
-  <span
-    class="mat-select-placeholder"
-    [class.mat-floating-placeholder]="_hasValue()"
-    [@transformPlaceholder]="_getPlaceholderAnimationState()"
-    [style.opacity]="_getPlaceholderOpacity()"
-    [style.width.px]="_selectedValueWidth">{{ placeholder }}</span>
-
-  <span class="mat-select-value" *ngIf="_hasValue()">
-    <span class="mat-select-value-text" [ngSwitch]="!!customTrigger">
+    cdk-overlay-origin
+    class="mat-select-trigger"
+    aria-hidden="true"
+    (click)="toggle()"
+    #origin="cdkOverlayOrigin"
+    #trigger>
+  <span class="mat-select-value">
+    <span class="mat-select-value-text" *ngIf="!empty" [ngSwitch]="!!customTrigger">
       <span *ngSwitchDefault>{{ triggerValue }}</span>
       <ng-content select="md-select-trigger, mat-select-trigger" *ngSwitchCase="true"></ng-content>
     </span>
   </span>
 
   <span class="mat-select-arrow"></span>
-  <span class="mat-select-underline"></span>
 </div>
 
 <ng-template

src/lib/select/select.scss

@@ -9,7 +9,6 @@ $mat-select-trigger-min-width: 112px !default;
 $mat-select-arrow-size: 5px !default;
 $mat-select-arrow-margin: 4px !default;
 $mat-select-panel-max-height: 256px !default;
-$mat-select-trigger-underline-height: 1px !default;
 
 .mat-select {
   display: inline-block;
@@ -31,55 +30,6 @@ $mat-select-trigger-underline-height: 1px !default;
   }
 }
 
-.mat-select-underline {
-  position: absolute;
-  bottom: 0;
-  left: 0;
-  right: 0;
-  height: $mat-select-trigger-underline-height;
-
-  .mat-select:focus & {
-    height: $mat-select-trigger-underline-height * 2;
-  }
-
-  .mat-select-disabled & {
-    background-color: transparent;
-    background-position: 0 bottom;
-  }
-}
-
-.mat-select-placeholder {
-  position: relative;
-  padding: 0 2px;
-  transform-origin: left top;
-  flex-grow: 1;
-
-  // These values are duplicated from animation code in order to
-  // allow placeholders to sometimes float without animating,
-  // for example when the value is set programmatically.
-  // TODO(kara): Change when animations API supports skipping animation.
-  &.mat-floating-placeholder {
-    top: -22px;
-    left: -2px;
-    text-align: left;
-    transform: scale(0.75);
-  }
-
-  [dir='rtl'] & {
-    transform-origin: right top;
-
-    &.mat-floating-placeholder {
-      left: 2px;
-      text-align: right;
-    }
-  }
-
-  // TODO: Double-check accessibility of this style
-  .mat-select-required &::after {
-    content: ' *';
-  }
-}
-
 .mat-select-value {
   position: absolute;
   max-width: calc(100% - #{($mat-select-arrow-size + $mat-select-arrow-margin) * 2});

src/lib/select/select.spec.ts

@@ -952,7 +952,7 @@ describe('MdSelect', () => {
       spyOn(fixture.componentInstance.customAccessor, 'writeValue');
       fixture.detectChanges();
 
-      expect(fixture.componentInstance.customAccessor.select._control)
+      expect(fixture.componentInstance.customAccessor.select.ngControl)
           .toBe(null, 'Expected md-select NOT to inherit control from parent value accessor.');
       expect(fixture.componentInstance.customAccessor.writeValue).toHaveBeenCalled();
     });