build: add list example to mdc-migration integration test

Author: amysorto

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

@@ -4,6 +4,7 @@
 <chips-example></chips-example>
 <form-field-example></form-field-example>
 <input-example></input-example>
+<list-example></list-example>
 <menu-example></menu-example>
 <paginator-example></paginator-example>
 <progress-bar-example></progress-bar-example>

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

@@ -11,6 +11,7 @@ import {MatChipsModule} from '@angular/material-experimental/mdc-chips';
 import {MatFormFieldModule} from '@angular/material-experimental/mdc-form-field';
 import {MatIconModule} from '@angular/material/icon';
 import {MatInputModule} from '@angular/material-experimental/mdc-input';
+import {MatListModule} from '@angular/material-experimental/mdc-list';
 import {MatMenuModule} from '@angular/material-experimental/mdc-menu';
 import {MatPaginatorModule} from '@angular/material-experimental/mdc-paginator';
 import {MatProgressBarModule} from '@angular/material-experimental/mdc-progress-bar';
@@ -21,6 +22,7 @@ import {CardComponent} from './components/card/card.component';
 import {ChipsComponent} from './components/chips/chips.component';
 import {FormFieldComponent} from './components/form-field/form-field.component';
 import {InputComponent} from './components/input/input.component';
+import {ListComponent} from './components/list/list.component';
 import {MenuComponent} from './components/menu/menu.component';
 import {PaginatorComponent} from './components/paginator/paginator.component';
 import {ProgressSpinnerComponent} from './components/progress-spinner/progress-spinner.component';
@@ -37,6 +39,7 @@ import {ButtonComponent} from './components/button/button.component';
     ChipsComponent,
     FormFieldComponent,
     InputComponent,
+    ListComponent,
     MenuComponent,
     PaginatorComponent,
     ProgressBarComponent,
@@ -53,6 +56,7 @@ import {ButtonComponent} from './components/button/button.component';
     MatFormFieldModule,
     MatIconModule,
     MatInputModule,
+    MatListModule,
     MatMenuModule,
     MatPaginatorModule,
     MatProgressBarModule,

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

@@ -0,0 +1,15 @@
+<h2>List example</h2>
+<mat-list role="list">
+  <mat-list-item role="listitem">
+    <mat-icon mat-list-icon>account_circle</mat-icon>
+    <div mat-line>Account Information</div>
+  </mat-list-item>
+  <mat-list-item role="listitem">
+    <mat-icon mat-list-icon>settings</mat-icon>
+    <div mat-line>Settings</div>
+  </mat-list-item>
+  <mat-list-item role="listitem">
+    <mat-icon mat-list-icon>logout</mat-icon>
+    <div mat-line>Log Out</div>
+  </mat-list-item>
+</mat-list>

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

@@ -0,0 +1,11 @@
+.mat-mdc-list { padding: 8px; }
+
+.mat-mdc-list-item-icon {
+  color: darkblue;
+}
+
+/* TODO: The following rule targets internal classes of list that may no longer apply for the MDC version. */
+
+.mat-list-item-content {
+  padding: 8px;
+}

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

@@ -0,0 +1,26 @@
+import {ComponentFixture, TestBed} from '@angular/core/testing';
+import {BrowserAnimationsModule} from '@angular/platform-browser/animations';
+import {MatListModule} from '@angular/material/list';
+import {ListComponent} from './list.component';
+
+describe('ListComponent', () => {
+  let component: ListComponent;
+  let fixture: ComponentFixture<ListComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      imports: [BrowserAnimationsModule, MatListModule],
+      declarations: [ListComponent],
+    }).compileComponents();
+  });
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(ListComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

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

@@ -0,0 +1,12 @@
+import {Component, OnInit} from '@angular/core';
+
+@Component({
+  selector: 'list-example',
+  templateUrl: './list.component.html',
+  styleUrls: ['./list.component.scss'],
+})
+export class ListComponent implements OnInit {
+  constructor() {}
+
+  ngOnInit(): void {}
+}

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

@@ -42,10 +42,12 @@ $sample-project-theme: mat.define-light-theme((
 @include mat.mdc-chips-typography($sample-project-theme);
 @include mat.mdc-form-field-theme($sample-project-theme);
 @include mat.mdc-form-field-typography($sample-project-theme);
-@include mat.mdc-menu-theme($sample-project-theme);
-@include mat.mdc-menu-typography($sample-project-theme);
 @include mat.mdc-input-theme($sample-project-theme);
 @include mat.mdc-input-typography($sample-project-theme);
+@include mat.mdc-list-theme($sample-project-theme);
+@include mat.mdc-list-typography($sample-project-theme);
+@include mat.mdc-menu-theme($sample-project-theme);
+@include mat.mdc-menu-typography($sample-project-theme);
 @include mat.mdc-paginator-theme($sample-project-theme);
 @include mat.mdc-paginator-typography($sample-project-theme);
 @include mat.mdc-progress-bar-theme($sample-project-theme);

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

@@ -4,6 +4,7 @@
 <chips-example></chips-example>
 <form-field-example></form-field-example>
 <input-example></input-example>
+<list-example></list-example>
 <menu-example></menu-example>
 <paginator-example></paginator-example>
 <progress-bar-example></progress-bar-example>

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

@@ -11,6 +11,7 @@ import {MatChipsModule} from '@angular/material/chips';
 import {MatFormFieldModule} from '@angular/material/form-field';
 import {MatIconModule} from '@angular/material/icon';
 import {MatInputModule} from '@angular/material/input';
+import {MatListModule} from '@angular/material/list';
 import {MatMenuModule} from '@angular/material/menu';
 import {MatPaginatorModule} from '@angular/material/paginator';
 import {MatProgressBarModule} from '@angular/material/progress-bar';
@@ -21,6 +22,7 @@ import {CardComponent} from './components/card/card.component';
 import {ChipsComponent} from './components/chips/chips.component';
 import {FormFieldComponent} from './components/form-field/form-field.component';
 import {InputComponent} from './components/input/input.component';
+import {ListComponent} from './components/list/list.component';
 import {MenuComponent} from './components/menu/menu.component';
 import {PaginatorComponent} from './components/paginator/paginator.component';
 import {ProgressSpinnerComponent} from './components/progress-spinner/progress-spinner.component';
@@ -37,6 +39,7 @@ import {ButtonComponent} from './components/button/button.component';
     ChipsComponent,
     FormFieldComponent,
     InputComponent,
+    ListComponent,
     MenuComponent,
     PaginatorComponent,
     ProgressBarComponent,
@@ -53,6 +56,7 @@ import {ButtonComponent} from './components/button/button.component';
     MatFormFieldModule,
     MatIconModule,
     MatInputModule,
+    MatListModule,
     MatMenuModule,
     MatPaginatorModule,
     MatProgressBarModule,

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

@@ -0,0 +1,15 @@
+<h2>List example</h2>
+<mat-list role="list">
+  <mat-list-item role="listitem">
+    <mat-icon mat-list-icon>account_circle</mat-icon>
+    <div mat-line>Account Information</div>
+  </mat-list-item>
+  <mat-list-item role="listitem">
+    <mat-icon mat-list-icon>settings</mat-icon>
+    <div mat-line>Settings</div>
+  </mat-list-item>
+  <mat-list-item role="listitem">
+    <mat-icon mat-list-icon>logout</mat-icon>
+    <div mat-line>Log Out</div>
+  </mat-list-item>
+</mat-list>