From 97494f75ac99d7707a31e407f1d8d1a843474586 Mon Sep 17 00:00:00 2001
From: Paul Gschwendtner <paulgschwendtner@gmail.com>
Date: Sun, 9 Jul 2017 03:53:08 +0200
Subject: [PATCH] fix(select): required asterisk should use warn color (#5498)

* When the select is focused and is also required, the asterisk of the select should use the accent palette. Similar to the Material Design input specifications.

Fixes #5496
---
 src/lib/select/_select-theme.scss |  4 ++++
 src/lib/select/select.scss        |  2 +-
 src/lib/select/select.spec.ts     | 11 +++++++++++
 src/lib/select/select.ts          |  1 +
 4 files changed, 17 insertions(+), 1 deletion(-)

diff --git a/src/lib/select/_select-theme.scss b/src/lib/select/_select-theme.scss
index 4033a4716b9..f886af4bb45 100644
--- a/src/lib/select/_select-theme.scss
+++ b/src/lib/select/_select-theme.scss
@@ -52,6 +52,10 @@
     &.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,
diff --git a/src/lib/select/select.scss b/src/lib/select/select.scss
index d7ca055905d..5fd2e0b8d9b 100644
--- a/src/lib/select/select.scss
+++ b/src/lib/select/select.scss
@@ -72,7 +72,7 @@ $mat-select-panel-max-height: 256px !default;
   }
 
   // TODO: Double-check accessibility of this style
-  [aria-required=true] &::after {
+  .mat-select-required &::after {
     content: '*';
   }
 }
diff --git a/src/lib/select/select.spec.ts b/src/lib/select/select.spec.ts
index a8a7726c435..4a325420ee2 100644
--- a/src/lib/select/select.spec.ts
+++ b/src/lib/select/select.spec.ts
@@ -1572,6 +1572,17 @@ describe('MdSelect', () => {
           .toEqual('true', `Expected aria-required attr to be true for required selects.`);
       });
 
+      it('should set the mat-select-required class for required selects', () => {
+        expect(select.classList).not.toContain(
+            'mat-select-required', `Expected the mat-select-required class not to be set.`);
+
+        fixture.componentInstance.isRequired = true;
+        fixture.detectChanges();
+
+        expect(select.classList).toContain(
+          'mat-select-required', `Expected the mat-select-required class to be set.`);
+      });
+
       it('should set aria-invalid for selects that are invalid', () => {
         expect(select.getAttribute('aria-invalid'))
           .toEqual('false', `Expected aria-invalid attr to be false for valid selects.`);
diff --git a/src/lib/select/select.ts b/src/lib/select/select.ts
index 493f5522b1a..b6f44023e81 100644
--- a/src/lib/select/select.ts
+++ b/src/lib/select/select.ts
@@ -132,6 +132,7 @@ export const _MdSelectMixinBase = mixinColor(mixinDisabled(MdSelectBase), 'prima
     '[attr.aria-invalid]': '_control?.invalid || "false"',
     '[attr.aria-owns]': '_optionIds',
     '[class.mat-select-disabled]': 'disabled',
+    '[class.mat-select-required]': 'required',
     'class': 'mat-select',
     '(keydown)': '_handleClosedKeydown($event)',
     '(blur)': '_onBlur()',