build: add chips example to mdc-migration integration test

Author: amysorto

integration/mdc-migration/golden/src/app/app.component.html

@@ -1 +1,2 @@
-<menu></menu>
+<chips-example></chips-example>
+<menu-example></menu-example>

integration/mdc-migration/golden/src/app/app.module.ts

@@ -3,13 +3,23 @@ import {BrowserModule} from '@angular/platform-browser';
 
 import {AppComponent} from './app.component';
 import {BrowserAnimationsModule} from '@angular/platform-browser/animations';
+import {MatChipsModule} from '@angular/material-experimental/mdc-chips';
+import {MatFormFieldModule} from '@angular/material-experimental/mdc-form-field';
 import {MatIconModule} from '@angular/material/icon';
-import {MatMenuModule} from '@angular/material/menu';
+import {MatMenuModule} from '@angular/material-experimental/mdc-menu';
+import {ChipsComponent} from './components/chips/chips.component';
 import {MenuComponent} from './components/menu/menu.component';
 
 @NgModule({
-  declarations: [AppComponent, MenuComponent],
-  imports: [BrowserModule, BrowserAnimationsModule, MatIconModule, MatMenuModule],
+  declarations: [AppComponent, ChipsComponent, MenuComponent],
+  imports: [
+    BrowserModule,
+    BrowserAnimationsModule,
+    MatChipsModule,
+    MatFormFieldModule,
+    MatIconModule,
+    MatMenuModule,
+  ],
   providers: [],
   bootstrap: [AppComponent],
 })

integration/mdc-migration/golden/src/app/components/chips/chips.component.html

@@ -0,0 +1,30 @@
+<h2>Chips example</h2>
+
+<mat-chip-listbox aria-label="Dog selection" #dogChipList>
+    <mat-chip-option>
+        <mat-chip-avatar>
+            <img src="https://material.angular.io/assets/img/examples/shiba1.jpg" alt="Photo of a Shiba Inu"/>
+        </mat-chip-avatar>
+        Dog one
+    </mat-chip-option>
+    <mat-chip-option color="primary">Dog two</mat-chip-option>
+    <mat-chip-option color="accent">Dog three</mat-chip-option>
+</mat-chip-listbox>
+
+
+<mat-form-field class="example-chip-list" appearance="fill">
+    <mat-label>Favorite Fruits</mat-label>
+    <mat-chip-grid #fruitChipList aria-label="Fruit selection">
+        <mat-chip *ngFor="let fruit of fruits" (removed)="remove(fruit)">
+            {{fruit.name}}
+            <button matChipRemove>
+                <mat-icon>cancel</mat-icon>
+            </button>
+        </mat-chip>
+        <input placeholder="New fruit..."
+            [matChipInputFor]="fruitChipList"
+            [matChipInputSeparatorKeyCodes]="separatorKeysCodes"
+            [matChipInputAddOnBlur]="addOnBlur"
+            (matChipInputTokenEnd)="add($event)">
+    </mat-chip-grid>
+</mat-form-field>

integration/mdc-migration/golden/src/app/components/chips/chips.component.scss

@@ -0,0 +1,11 @@
+.mat-mdc-chip {
+  background-color: lavender;
+  /* TODO: The following rule targets internal classes of chips that may no longer apply for the MDC version. */
+
+  .mat-chip-avatar {
+    outline: 1px solid black;
+  }
+}
+
+
+.mat-mdc-chip-grid { padding: 8px; }

integration/mdc-migration/golden/src/app/components/chips/chips.component.spec.ts

@@ -0,0 +1,24 @@
+import {ComponentFixture, TestBed} from '@angular/core/testing';
+
+import {ChipsComponent} from './chips.component';
+
+describe('ChipsComponent', () => {
+  let component: ChipsComponent;
+  let fixture: ComponentFixture<ChipsComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      declarations: [ChipsComponent],
+    }).compileComponents();
+  });
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(ChipsComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

integration/mdc-migration/golden/src/app/components/chips/chips.component.ts

@@ -0,0 +1,38 @@
+import {COMMA, ENTER} from '@angular/cdk/keycodes';
+import {Component} from '@angular/core';
+import {MatChipInputEvent} from '@angular/material-experimental/mdc-chips';
+
+export interface Fruit {
+  name: string;
+}
+
+@Component({
+  selector: 'chips-example',
+  templateUrl: './chips.component.html',
+  styleUrls: ['./chips.component.scss'],
+})
+export class ChipsComponent {
+  addOnBlur = true;
+  readonly separatorKeysCodes = [ENTER, COMMA] as const;
+  fruits: Fruit[] = [{name: 'Lemon'}, {name: 'Lime'}, {name: 'Apple'}];
+
+  add(event: MatChipInputEvent): void {
+    const value = (event.value || '').trim();
+
+    // Add our fruit
+    if (value) {
+      this.fruits.push({name: value});
+    }
+
+    // Clear the input value
+    event.chipInput!.clear();
+  }
+
+  remove(fruit: Fruit): void {
+    const index = this.fruits.indexOf(fruit);
+
+    if (index >= 0) {
+      this.fruits.splice(index, 1);
+    }
+  }
+}

integration/mdc-migration/golden/src/app/components/menu/menu.component.ts

@@ -1,7 +1,7 @@
 import {Component, OnInit} from '@angular/core';
 
 @Component({
-  selector: 'menu',
+  selector: 'menu-example',
   templateUrl: './menu.component.html',
   styleUrls: ['./menu.component.scss'],
 })

integration/mdc-migration/golden/src/styles.scss

@@ -28,6 +28,8 @@ $sample-project-theme: mat.define-light-theme((
   )
 ));
 
+@include mat.mdc-chips-theme($sample-project-theme);
+@include mat.mdc-chips-typography($sample-project-theme);
 @include mat.mdc-menu-theme($sample-project-theme);
 @include mat.mdc-menu-typography($sample-project-theme);
 

integration/mdc-migration/sample-project/src/app/app.component.html

@@ -1 +1,2 @@
-<menu></menu>
+<chips-example></chips-example>
+<menu-example></menu-example>

integration/mdc-migration/sample-project/src/app/app.module.ts

@@ -3,13 +3,23 @@ import {BrowserModule} from '@angular/platform-browser';
 
 import {AppComponent} from './app.component';
 import {BrowserAnimationsModule} from '@angular/platform-browser/animations';
+import {MatChipsModule} from '@angular/material/chips';
+import {MatFormFieldModule} from '@angular/material/form-field';
 import {MatIconModule} from '@angular/material/icon';
 import {MatMenuModule} from '@angular/material/menu';
+import {ChipsComponent} from './components/chips/chips.component';
 import {MenuComponent} from './components/menu/menu.component';
 
 @NgModule({
-  declarations: [AppComponent, MenuComponent],
-  imports: [BrowserModule, BrowserAnimationsModule, MatIconModule, MatMenuModule],
+  declarations: [AppComponent, ChipsComponent, MenuComponent],
+  imports: [
+    BrowserModule,
+    BrowserAnimationsModule,
+    MatChipsModule,
+    MatFormFieldModule,
+    MatIconModule,
+    MatMenuModule,
+  ],
   providers: [],
   bootstrap: [AppComponent],
 })