feat(select): BREAKING: allow md-input-container label and remove

md-select-label

closes #2684, closes #1586, closes #3307

BREAKING: `md-select-label` is no longer uses. The select will now
always display the selected value as the text in the `md-option`. This
makes for a better UX for users, as otherwise it was possible to
confuse them.

`md-select` still supports using the `placeholder` attribute outside of
an `md-input-container` but the preferred way of using `md-select` is
now as follows:

```html
<md-input-container>
  <label>State</label>
  <md-select ng-model="selectedState">
    <md-option value="{{state}}" ng-repeat="state in states">
  </md-select>
</md-input-container>
```

Author: MagicIndustries

src/components/input/input.js

@@ -168,7 +168,7 @@ function inputTextareaDirective($mdUtil, $window, $mdAria) {
 
     if ( !containerCtrl ) return;
     if (containerCtrl.input) {
-      throw new Error("<md-input-container> can only have *one* <input> or <textarea> child element!");
+      throw new Error("<md-input-container> can only have *one* <input>, <textarea> or <md-select> child element!");
     }
     containerCtrl.input = element;
 
@@ -327,7 +327,6 @@ function mdMaxlengthDirective($animate) {
 }
 
 function placeholderDirective($log) {
-  var blackListElements = ['MD-SELECT'];
   return {
     restrict: 'A',
     require: '^^?mdInputContainer',
@@ -337,7 +336,6 @@ function placeholderDirective($log) {
 
   function postLink(scope, element, attr, inputContainer) {
     if (!inputContainer) return;
-    if (blackListElements.indexOf(element[0].nodeName) != -1) return;
     if (angular.isDefined(inputContainer.element.attr('md-no-float'))) return;
 
     var placeholderText = attr.placeholder;
@@ -348,7 +346,7 @@ function placeholderDirective($log) {
 
       inputContainer.element.addClass('md-icon-float');
       inputContainer.element.prepend(placeholder);
-    } else {
+    } else if (element[0].nodeName != 'MD-SELECT') {
       $log.warn("The placeholder='" + placeholderText + "' will be ignored since this md-input-container has a child label element.");
     }
 

src/components/input/input.scss

@@ -80,7 +80,7 @@ md-input-container {
 
 
   label:not(.md-no-float),
-  .md-placeholder:not(.md-select-label) {
+  .md-placeholder {
     order: 1;
     pointer-events: none;
     -webkit-font-smoothing: antialiased;
@@ -91,12 +91,15 @@ md-input-container {
 
     @include rtl(transform-origin, left top, right top);
   }
-  .md-placeholder:not(.md-select-label) {
+  .md-placeholder {
     position: absolute;
     top: 0;
     opacity: 0;
     transition-property: opacity, transform;
     transform: translate3d(0, $input-placeholder-offset + $baseline-grid * 0.75, 0);
+    &.md-static {
+      position: static;
+    }
   }
   &.md-input-focused .md-placeholder {
     opacity: 1;

src/components/select/demoBasicUsage/index.html

@@ -10,9 +10,12 @@ <h1 class="md-title">Enter an address</h1>
         <label>City</label>
         <input type="text"/>
       </md-input-container>
-      <md-select placeholder="State" ng-model="ctrl.userState">
-        <md-option ng-repeat="state in ctrl.states" value="{{state.abbrev}}">{{state.abbrev}}</md-option>
-      </md-select>
+      <md-input-container>
+        <label>State</label>
+        <md-select ng-model="ctrl.userState">
+          <md-option ng-repeat="state in ctrl.states" value="{{state.abbrev}}">{{state.abbrev}}</md-option>
+        </md-select>
+      </md-input-container>
     </div>
   </div>
 </div>

src/components/select/demoOptionGroups/index.html

@@ -2,17 +2,23 @@
   <div>
     <h1 class="md-title">Pick your pizza below</h1>
     <div layout="row">
-      <md-select ng-model="size" placeholder="Size">
-        <md-option ng-repeat="size in sizes" value="{{size}}">{{size}}</md-option>
-      </md-select>
-      <md-select ng-model="topping" placeholder="Topping">
-        <md-optgroup label="Meats">
-          <md-option ng-value="topping.name" ng-repeat="topping in toppings | filter: {category: 'meat' }">{{topping.name}}</md-option>
-        </md-optgroup>
-        <md-optgroup label="Veggies">
-          <md-option ng-value="topping.name" ng-repeat="topping in toppings | filter: {category: 'veg' }">{{topping.name}}</md-option>
-        </md-optgroup>
-      </md-select>
+      <md-input-container>
+        <label>Size</label>
+        <md-select ng-model="size">
+          <md-option ng-repeat="size in sizes" value="{{size}}">{{size}}</md-option>
+        </md-select>
+      </md-input-container>
+      <md-input-container>
+        <label>Topping</label>
+        <md-select ng-model="topping">
+          <md-optgroup label="Meats">
+            <md-option ng-value="topping.name" ng-repeat="topping in toppings | filter: {category: 'meat' }">{{topping.name}}</md-option>
+          </md-optgroup>
+          <md-optgroup label="Veggies">
+            <md-option ng-value="topping.name" ng-repeat="topping in toppings | filter: {category: 'veg' }">{{topping.name}}</md-option>
+          </md-optgroup>
+        </md-select>
+      </md-input-container>
     </div>
     <p ng-if="topping">You ordered a {{size.toLowerCase()}} pizza with {{topping.toLowerCase()}}.</p>
   </div>

src/components/select/demoOptionsWithAsyncSearch/index.html

@@ -1,8 +1,7 @@
 <div ng-controller="SelectAsyncController" layout="column" layout-align="center center" style="padding:40px">
   <p>Select can call an arbitrary function on show. If this function returns a promise, it will display a loading indicator while it is being resolved:</p>
   <div layout="column" layout-align="center center" style="height: 100px;">
-    <md-select ng-model="user" md-on-open="loadUsers()" style="min-width: 200px;">
-      <md-select-label>{{ user ? user.name : 'Assign to user' }}</md-select-label>
+    <md-select placeholder="Assign to user" ng-model="user" md-on-open="loadUsers()" style="min-width: 200px;">
       <md-option ng-value="user" ng-repeat="user in users">{{user.name}}</md-option>
     </md-select>
     <p class="md-caption">You have assigned the task to: {{ user ? user.name : 'No one yet' }}</p>

src/components/select/demoValidations/index.html

@@ -2,7 +2,8 @@
   <form name="myForm">
     <p>Note that invalid styling only applies if invalid and dirty</p>
     <md-input-container>
-      <md-select name="myModel" placeholder="Pick" ng-model="myModel" required>
+      <label>Favorite Number</label>
+      <md-select name="myModel" ng-model="myModel" required>
         <md-option value="1">One</md-option>
         <md-option value="2">Two</md-option>
       </md-select>

src/components/select/select-theme.scss

@@ -1,39 +1,39 @@
 md-select.md-THEME_NAME-theme {
+  .md-select-value {
+    &.md-select-placeholder {
+      color: '{{foreground-3}}';
+    }
+    border-bottom-color: '{{foreground-4}}';
+  }
   &.ng-invalid.ng-dirty {
     .md-select-label {
       color: '{{warn-500}}' !important;
       border-bottom-color: '{{warn-500}}' !important;
     }
   }
   &:not([disabled]):focus {
-    .md-select-label {
+    .md-select-value {
       border-bottom-color: '{{primary-color}}';
       color: '{{ foreground-1 }}';
-      &.md-placeholder {
+      &.md-select-placeholder {
         color: '{{ foreground-1 }}';
       }
     }
-    &.md-accent .md-select-label {
+    &.md-accent .md-select-value {
       border-bottom-color: '{{accent-color}}';
     }
-    &.md-warn .md-select-label {
+    &.md-warn .md-select-value {
       border-bottom-color: '{{warn-color}}';
     }
   }
   &[disabled] {
-    .md-select-label {
+    .md-select-value {
       color: '{{foreground-3}}';
-      &.md-placeholder {
+      &.md-select-placeholder {
         color: '{{foreground-3}}';
       }
     }
   }
-  .md-select-label {
-    &.md-placeholder {
-      color: '{{foreground-2}}';
-    }
-    border-bottom-color: '{{foreground-4}}';
-  }
 }
 
 md-select-menu.md-THEME_NAME-theme {