feat(chips): Add chip avatar and chip trailing icon (#9557)

* feat(chips): Add chip avatar and chip trailing icon

* Removed MatBasicChip and MatStandardChip

* Add mat-chip-trailing-icon style to MatChipRemove and add examples in
demo

Author: tinayuangao

src/demo-app/chips/chips-demo.html

@@ -8,7 +8,7 @@ <h4>Simple</h4>
       <mat-chip-list>
         <mat-chip>Chip 1</mat-chip>
         <mat-chip>Chip 2</mat-chip>
-        <mat-chip>Chip 3</mat-chip>
+        <mat-chip disabled>Chip 3</mat-chip>
       </mat-chip-list>
 
       <h4>Unstyled</h4>
@@ -31,6 +31,56 @@ <h4>Advanced</h4>
         </mat-chip>
       </mat-chip-list>
       <div>{{message}}</div>
+
+      <h4>With avatar and icons</h4>
+
+
+      <mat-chip-list>
+        <mat-chip>
+          <mat-icon matChipAvatar>home</mat-icon>
+          Home
+          <mat-icon matChipRemove>cancel</mat-icon>
+        </mat-chip>
+        <mat-chip color="accent" selected="true">
+          <mat-chip-avatar>P</mat-chip-avatar>
+          Portel
+          <mat-icon matChipRemove>cancel</mat-icon>
+        </mat-chip>
+
+        <mat-chip>
+          <mat-chip-avatar>M</mat-chip-avatar>
+          Molly
+        </mat-chip>
+
+        <mat-chip>
+          Koby
+          <mat-icon matChipRemove>cancel</mat-icon>
+        </mat-chip>
+
+        <mat-chip>
+          Razzle
+        </mat-chip>
+
+        <mat-chip>
+          <img src="https://material.angularjs.org/material2_assets/ngconf/Mal.png" matChipAvatar>
+          Mal
+        </mat-chip>
+
+        <mat-chip selected="true" color="warn">
+          <img src="https://material.angularjs.org/material2_assets/ngconf/Husi.png" matChipAvatar>
+          Husi
+          <mat-icon matChipRemove>cancel</mat-icon>
+        </mat-chip>
+
+        <mat-chip>
+          Good
+          <mat-icon matChipTrailingIcon>star</mat-icon>
+        </mat-chip>
+        <mat-chip>
+          Bad
+          <mat-icon matChipTrailingIcon>star_border</mat-icon>
+        </mat-chip>
+      </mat-chip-list>
     </mat-card-content>
   </mat-card>
 

src/lib/chips/_chips-theme.scss

@@ -37,11 +37,11 @@ $mat-chip-remove-font-size: 18px;
   $unselected-foreground: mat-color($foreground, text);
 
 
-  .mat-chip:not(.mat-basic-chip) {
+  .mat-chip.mat-standard-chip {
     @include mat-chips-color($unselected-foreground, $unselected-background);
   }
 
-  .mat-chip.mat-chip-selected {
+  .mat-chip.mat-standard-chip.mat-chip-selected {
 
     &.mat-primary {
       @include mat-chips-theme-color($primary);
@@ -62,6 +62,7 @@ $mat-chip-remove-font-size: 18px;
     font-size: $mat-chip-font-size;
     line-height: $mat-chip-line-height;
 
+    .mat-chip-trailing-icon.mat-icon,
     .mat-chip-remove.mat-icon {
       font-size: $mat-chip-remove-font-size;
     }

src/lib/chips/chip-list.ts

@@ -21,6 +21,7 @@ import {
   DoCheck,
   ElementRef,
   EventEmitter,
+  Inject,
   Input,
   OnDestroy,
   OnInit,
@@ -747,3 +748,4 @@ export class MatChipList extends _MatChipListMixinBase implements MatFormFieldCo
     });
   }
 }
+

src/lib/chips/chip.ts

@@ -10,9 +10,11 @@ import {FocusableOption} from '@angular/cdk/a11y';
 import {coerceBooleanProperty} from '@angular/cdk/coercion';
 import {BACKSPACE, DELETE, SPACE} from '@angular/cdk/keycodes';
 import {
+  ContentChild,
   Directive,
   ElementRef,
   EventEmitter,
+  forwardRef,
   Input,
   OnDestroy,
   Output,
@@ -47,17 +49,27 @@ export class MatChipBase {
 
 export const _MatChipMixinBase = mixinColor(mixinDisabled(MatChipBase), 'primary');
 
+const CHIP_ATTRIBUTE_NAMES = ['mat-basic-chip'];
 
 /**
- * Dummy directive to add CSS class to basic chips.
+ * Dummy directive to add CSS class to chip avatar.
  * @docs-private
  */
 @Directive({
-  selector: `mat-basic-chip, [mat-basic-chip]`,
-  host: {'class': 'mat-basic-chip'},
+  selector: 'mat-chip-avatar, [matChipAvatar]',
+  host: {'class': 'mat-chip-avatar'}
 })
-export class MatBasicChip {
-}
+export class MatChipAvatar {}
+
+/**
+ * Dummy directive to add CSS class to chip trailing icon.
+ * @docs-private
+ */
+@Directive({
+  selector: 'mat-chip-trailing-icon, [matChipTrailingIcon]',
+  host: {'class': 'mat-chip-trailing-icon'}
+})
+export class MatChipTrailingIcon {}
 
 /**
  * Material design styled Chip component. Used inside the MatChipList component.
@@ -71,6 +83,8 @@ export class MatBasicChip {
     '[attr.tabindex]': 'disabled ? null : -1',
     'role': 'option',
     '[class.mat-chip-selected]': 'selected',
+    '[class.mat-chip-with-avatar]': 'avatar',
+    '[class.mat-chip-with-trailing-icon]': 'trailingIcon || removeIcon',
     '[attr.disabled]': 'disabled || null',
     '[attr.aria-disabled]': 'disabled.toString()',
     '[attr.aria-selected]': 'ariaSelected',
@@ -86,6 +100,15 @@ export class MatChip extends _MatChipMixinBase implements FocusableOption, OnDes
   /** Whether the chip has focus. */
   _hasFocus: boolean = false;
 
+  /** The chip avatar */
+  @ContentChild(MatChipAvatar) avatar: MatChipAvatar;
+
+  /** The chip's trailing icon. */
+  @ContentChild(MatChipTrailingIcon) trailingIcon: MatChipTrailingIcon;
+
+  /** The chip's remove toggler. */
+  @ContentChild(forwardRef(() => MatChipRemove)) removeIcon: MatChipRemove;
+
   /** Whether the chip is selected. */
   @Input()
   get selected(): boolean { return this._selected; }
@@ -167,6 +190,20 @@ export class MatChip extends _MatChipMixinBase implements FocusableOption, OnDes
 
   constructor(public _elementRef: ElementRef) {
     super(_elementRef);
+
+    this._addHostClassName();
+  }
+
+  _addHostClassName() {
+    // Add class for the different chips
+    for (const attr of CHIP_ATTRIBUTE_NAMES) {
+      if (this._elementRef.nativeElement.hasAttribute(attr) ||
+        this._elementRef.nativeElement.tagName.toLowerCase() === attr) {
+        (this._elementRef.nativeElement as HTMLElement).classList.add(attr);
+        return;
+      }
+    }
+    (this._elementRef.nativeElement as HTMLElement).classList.add('mat-standard-chip');
   }
 
   ngOnDestroy() {
@@ -297,7 +334,7 @@ export class MatChip extends _MatChipMixinBase implements FocusableOption, OnDes
 @Directive({
   selector: '[matChipRemove]',
   host: {
-    'class': 'mat-chip-remove',
+    'class': 'mat-chip-remove mat-chip-trailing-icon',
     '(click)': '_handleClick()',
   }
 })

src/lib/chips/chips-module.ts

@@ -9,14 +9,22 @@
 import {NgModule} from '@angular/core';
 import {ErrorStateMatcher} from '@angular/material/core';
 import {MatChipList} from './chip-list';
-import {MatBasicChip, MatChip, MatChipRemove} from './chip';
+import {MatChip, MatChipRemove, MatChipAvatar, MatChipTrailingIcon} from './chip';
 import {MatChipInput} from './chip-input';
 
+const CHIP_DECLARATIONS = [
+  MatChipList,
+  MatChip,
+  MatChipInput,
+  MatChipRemove,
+  MatChipAvatar,
+  MatChipTrailingIcon,
+];
 
 @NgModule({
   imports: [],
-  exports: [MatChipList, MatChip, MatChipInput, MatChipRemove, MatChipRemove, MatBasicChip],
-  declarations: [MatChipList, MatChip, MatChipInput, MatChipRemove,  MatChipRemove, MatBasicChip],
+  exports: CHIP_DECLARATIONS,
+  declarations: CHIP_DECLARATIONS,
   providers: [ErrorStateMatcher]
 })
 export class MatChipsModule {}