fix(chips): update to latest Material Design spec (2017) updates

- use the `md-cancel` button instead of the `md-close` button
- `$chip-font-size` reduced to `13px` from `16px`
- `$chip-remove-padding-right` increased to `28px` from `22px`
- in light mode, remove chip icon should be black w/ 87% opacity
- update custom remove chip template demo
  - show remove icon on hover/focus only
  - remove unnecessary CSS
  - update to new size guidelines and remove color on hover/focus
  - fix remove chip icon color when chip is focused

Fixes #9883

BREAKING CHANGE: Chips have been updated to latest Material Design spec (2017). `$chip-font-size` was reduced to `13px` from `16px`. `$chip-remove-padding-right` was increased to `28px` from `22px`. These changes may cause your chips to have a smaller, denser layout now. In certain scenarios, this may require minor changes to your app's layout. You can change these variables back to their old values if your app consumes Sass. Additionally, the remove chip icon has been changed, but you can use the custom chip template demo as a guide to changing back to the old icon, if desired.

Author: Splaktar

src/components/chips/chips-theme.scss

@@ -37,11 +37,13 @@ md-chips.md-THEME_NAME-theme {
       color: '{{background-800}}';
     }
   }
-  md-chip-remove {
-    .md-button {
-      md-icon {
-        path {
-          fill: '{{background-500}}';
+  .md-chip-remove-container {
+    button {
+      &md-chip-remove,
+      &.md-chip-remove {
+        md-icon {
+          color: '{{foreground-2}}';
+          fill: '{{foreground-2}}';
         }
       }
     }

src/components/chips/chips.scss

@@ -1,8 +1,8 @@
-$chip-font-size: rem(1.6) !default;
+$chip-font-size: rem(1.3) !default;
 $chip-height: rem(3.2) !default;
 $chip-padding: 0 rem(1.2) 0 rem(1.2) !default;
 $chip-input-padding: 0 !default;
-$chip-remove-padding-right: rem(2.2) !default;
+$chip-remove-padding-right: rem(2.8) !default;
 $chip-remove-line-height: rem(2.2) !default;
 $chip-margin: rem(0.8) rem(0.8) 0 0 !default;
 $chip-wrap-padding: 0 0 rem(0.8) rem(0.3) !default;

src/components/chips/demoBasicUsage/index.html

@@ -69,7 +69,7 @@ <h2 class="md-title">Display an ordered set of objects as chips (with custom tem
           <em>({{$chip.type}})</em>
         </span>
       </md-chip-template>
-      <button md-chip-remove class="md-primary vegetablechip" aria-label="Remove {{$chip.name}}">
+      <button md-chip-remove class="demo-remove-vegetable-chip" aria-label="Remove {{$chip.name}}">
         <md-icon md-svg-icon="md-close"></md-icon>
       </button>
     </md-chips>

src/components/chips/demoBasicUsage/style.scss

@@ -3,50 +3,43 @@
   color: rgb(221,44,0);
   margin-top: 10px;
 }
-
 .custom-chips {
   md-chip {
     position: relative;
+    padding-right: 24px;
+
     .md-chip-remove-container {
       position: absolute;
       right: 4px;
       top: 4px;
       margin-right: 0;
-      height: 24px;
-      button.vegetablechip {
+      height: 26px;
+      display: none;
+
+      button.demo-remove-vegetable-chip {
         position: relative;
         height: 24px;
         width: 24px;
         line-height: 30px;
-        text-align: center;
-        background: rgba(black, 0.3);
-        border-radius: 50%;
+        background: transparent;
         border: none;
-        box-shadow: none;
         padding: 0;
-        margin: 0;
-        transition: background 0.15s linear;
-        display: block;
+
         md-icon {
-          position: absolute;
-          top: 50%;
-          left: 50%;
-          transform: translate3d(-50%, -50%, 0) scale(0.7);
-          color: white;
-          fill: white;
-        }
-        &:hover, &:focus {
-          background: rgba(red, 0.8);
+          transform: translate(0, -3px) scale(0.75);
+          fill: rgba(0, 0, 0, 0.33);
         }
       }
     }
-  }
+    &:hover:not(.md-readonly) .md-chip-remove-container {
+      display: block;
+    }
+    &.md-focused:not(.md-readonly) .md-chip-remove-container {
+      display: block;
 
-  // Show custom padding for the custom delete button, which needs more space.
-  md-chips-wrap.md-removable {
-    md-chip md-chip-template {
-      padding-right: 5px;
+      button.demo-remove-vegetable-chip md-icon {
+        fill: rgba(255, 255, 255, 0.87);
+      }
     }
   }
-
 }

src/components/chips/js/chipRemoveDirective.js

@@ -24,17 +24,17 @@ angular
  * ### With Standard Chips
  * <hljs lang="html">
  *   <md-chips ...>
- *     <button md-chip-remove class="md-primary" type="button" aria-label="Remove {{$chip}}">
- *       <md-icon md-svg-icon="md-close"></md-icon>
+ *     <button md-chip-remove type="button" aria-label="Remove {{$chip}}">
+ *       <md-icon md-svg-icon="md-cancel"></md-icon>
  *     </button>
  *   </md-chips>
  * </hljs>
  *
  * ### With Object Chips
  * <hljs lang="html">
  *   <md-chips ...>
- *     <button md-chip-remove class="md-primary" type="button" aria-label="Remove {{$chip.name}}">
- *       <md-icon md-svg-icon="md-close"></md-icon>
+ *     <button md-chip-remove type="button" aria-label="Remove {{$chip.name}}">
+ *       <md-icon md-svg-icon="md-cancel"></md-icon>
  *     </button>
  *   </md-chips>
  * </hljs>
@@ -57,7 +57,7 @@ function MdChipRemove ($timeout) {
   };
 
   function postLink(scope, element, attr, ctrl) {
-    element.on('click', function(event) {
+    element.on('click', function() {
       scope.$apply(function() {
         ctrl.removeChip(scope.$$replacedScope.$index);
       });

src/components/chips/js/chipsDirective.js

@@ -400,7 +400,7 @@
         mdChipsCtrl.chipRemoveTemplate   = chipRemoveTemplate;
         mdChipsCtrl.chipInputTemplate    = chipInputTemplate;
 
-        mdChipsCtrl.mdCloseIcon = $$mdSvgRegistry.mdClose;
+        mdChipsCtrl.mdCloseIcon = $$mdSvgRegistry.mdCancel;
 
         element
             .attr({ tabindex: -1 })