fix(select): Ensure md-no-asterisk attribute works. (#9347)

After a recent change to the asterisk colors, the `md-no-asterisk`
option was no longer working.

 - Update code to add a new `.md-no-asterisk` CSS class and fix styles.
 - Add appropriate tests.
 - Add `md-no-asterisk="false"` to demo so users can easily turn it on
   and test the fixed functionality.

Fixes #9339.

Author: topherfangio

src/components/select/demoBasicUsage/index.html

@@ -60,7 +60,7 @@
 
       <div layout="row" layout-align="space-between center">
         <span>What armor do you wear?</span>
-        <md-select ng-model="armor" placeholder="Armor" class="md-no-underline" required>
+        <md-select ng-model="armor" placeholder="Armor" class="md-no-underline" required md-no-asterisk="false">
           <md-option value="cloth">Cloth</md-option>
           <md-option value="leather">Leather</md-option>
           <md-option value="chain">Chainmail</md-option>

src/components/select/select.js

@@ -77,7 +77,8 @@ angular.module('material.components.select', [
  * @param {expression=} md-selected-text Expression to be evaluated that will return a string
  * to be displayed as a placeholder in the select input box when it is closed.
  * @param {string=} placeholder Placeholder hint text.
- * @param md-no-asterisk {boolean=} When set to true, an asterisk will not be appended to the floating label.
+ * @param md-no-asterisk {boolean=} When set to true, an asterisk will not be appended to the
+ * floating label. **Note:** This attribute is only evaluated once; it is not watched.
  * @param {string=} aria-label Optional label for accessibility. Only necessary if no placeholder or
  * explicit label is present.
  * @param {string=} md-container-class Class list to get applied to the `.md-select-menu-container`
@@ -276,6 +277,10 @@ function SelectDirective($mdSelect, $mdUtil, $mdConstant, $mdTheming, $mdAria, $
       var isReadonly = angular.isDefined(attr.readonly);
       var disableAsterisk = $mdUtil.parseAttributeBoolean(attr.mdNoAsterisk);
 
+      if (disableAsterisk) {
+        element.addClass('md-no-asterisk');
+      }
+
       if (containerCtrl) {
         var isErrorGetter = containerCtrl.isErrorGetter || function() {
           return ngModelCtrl.$invalid && (ngModelCtrl.$touched || (formCtrl && formCtrl.$submitted));
@@ -319,7 +324,6 @@ function SelectDirective($mdSelect, $mdUtil, $mdConstant, $mdTheming, $mdAria, $
         inputCheckValue();
       };
 
-
       attr.$observe('placeholder', ngModelCtrl.$render);
 
       if (containerCtrl && containerCtrl.label) {

src/components/select/select.scss

@@ -82,7 +82,7 @@ md-input-container > md-select {
 // NOTE: When the input has a value and uses a floating label, the floating label will show the
 // asterisk denoting that it is required
 md-input-container:not(.md-input-has-value) {
-  md-select[required], md-select.ng-required {
+  md-select[required]:not(.md-no-asterisk), md-select.ng-required:not(.md-no-asterisk) {
     .md-select-value span:first-child:after {
       content: ' *';
       font-size: 13px;
@@ -105,7 +105,7 @@ md-select {
   margin: 2.5*$baseline-grid 0 3*$baseline-grid + 2 0;
 
   &[required], &.ng-required {
-    &.ng-invalid {
+    &.ng-invalid:not(.md-no-asterisk) {
       .md-select-value span:first-child:after {
         content: ' *';
         font-size: 13px;

src/components/select/select.spec.js

@@ -1023,6 +1023,26 @@ describe('<md-select>', function() {
         expect(label).not.toHaveClass('md-required');
       }));
 
+      it('correctly adds the .md-no-asterisk class if the attribute is empty', function() {
+        var el = setupSelect('ng-required="isRequired" md-no-asterisk ng-model="someModel"');
+        var select = el.find('md-select');
+
+        expect(select).toHaveClass('md-no-asterisk');
+      });
+
+      it('correctly adds the .md-no-asterisk class if the attribute is true', function() {
+        var el = setupSelect('ng-required="isRequired" md-no-asterisk ng-model="someModel"');
+        var select = el.find('md-select');
+
+        expect(select).toHaveClass('md-no-asterisk');
+      });
+
+      it('correctly removes the .md-no-asterisk class if the attribute is false', function() {
+        var el = setupSelect('ng-required="isRequired" md-no-asterisk="false" ng-model="someModel"');
+        var select = el.find('md-select');
+
+        expect(select).not.toHaveClass('md-no-asterisk');
+      });
     });
 
     describe('view->model', function() {