From 662ababd705a67fb39a789a907ef55cdc3b8eed7 Mon Sep 17 00:00:00 2001
From: Paul Gschwendtner <paulgschwendtner@gmail.com>
Date: Mon, 24 Sep 2018 11:25:51 +0200
Subject: [PATCH] fix(chips): disabled state not matching specs

* Currently if chips are disabled with the spec 2018 alignment, it's not clear whether a chip is disabled or not. The chip still has a focus effect, hover effect and pointer cursor for the `mat-chip-remove`.
* Also moves the `@include mat-elevation` to the theme (probably introduced before: https://github.com/angular/material2/pull/11344 has been merged)
---
 src/demo-app/chips/chips-demo.html |  2 +-
 src/lib/chips/_chips-theme.scss    | 19 ++++++++++++-------
 src/lib/chips/chips.scss           | 15 +++++++++++----
 3 files changed, 24 insertions(+), 12 deletions(-)

diff --git a/src/demo-app/chips/chips-demo.html b/src/demo-app/chips/chips-demo.html
index 60db4ab6d6ba..f87ec36b7369 100644
--- a/src/demo-app/chips/chips-demo.html
+++ b/src/demo-app/chips/chips-demo.html
@@ -36,7 +36,7 @@ <h4>With avatar and icons</h4>
 
 
       <mat-chip-list>
-        <mat-chip>
+        <mat-chip disabled>
           <mat-icon matChipAvatar>home</mat-icon>
           Home
           <mat-icon matChipRemove>cancel</mat-icon>
diff --git a/src/lib/chips/_chips-theme.scss b/src/lib/chips/_chips-theme.scss
index ef6a113d6e26..3fc37fb277fe 100644
--- a/src/lib/chips/_chips-theme.scss
+++ b/src/lib/chips/_chips-theme.scss
@@ -13,10 +13,6 @@ $mat-chip-remove-font-size: 18px;
     color: $foreground;
     opacity: 0.4;
   }
-
-  .mat-chip-remove:hover {
-    opacity: 0.54;
-  }
 }
 
 @mixin mat-chips-theme-color($palette) {
@@ -38,12 +34,21 @@ $mat-chip-remove-font-size: 18px;
   $unselected-background: mat-color($background, unselected-chip);
   $unselected-foreground: mat-color($foreground, text);
 
-
   .mat-chip.mat-standard-chip {
     @include mat-chips-color($unselected-foreground, $unselected-background);
 
-    &:focus {
-      @include _mat-theme-elevation(3, $theme);
+    &:not(.mat-chip-disabled) {
+      &:active {
+        @include _mat-theme-elevation(3, $theme);
+      }
+
+      .mat-chip-remove:hover {
+        opacity: 0.54;
+      }
+    }
+
+    &.mat-chip-disabled {
+      opacity: 0.4;
     }
   }
 
diff --git a/src/lib/chips/chips.scss b/src/lib/chips/chips.scss
index 607be2135da8..614c68ed109d 100644
--- a/src/lib/chips/chips.scss
+++ b/src/lib/chips/chips.scss
@@ -76,10 +76,6 @@ $mat-chip-remove-size: 18px;
     }
   }
 
-  &:active {
-    @include mat-elevation(3);
-  }
-
   @include cdk-high-contrast {
     outline: solid 1px;
 
@@ -89,6 +85,17 @@ $mat-chip-remove-size: 18px;
     }
   }
 
+  &.mat-chip-disabled {
+    &::after {
+      opacity: 0;
+    }
+
+    .mat-chip-remove,
+    .mat-chip-trailing-icon {
+      cursor: default;
+    }
+  }
+
   &.mat-chip-with-trailing-icon.mat-chip-with-avatar,
   &.mat-chip-with-avatar {
     padding-top: $mat-chip-avatar-vertical-padding;