build: add select example to mdc-migration integration test

Author: amysorto

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

@@ -5,3 +5,4 @@
 <paginator-example></paginator-example>
 <progress-bar-example></progress-bar-example>
 <progress-spinner-example></progress-spinner-example>
+<select-example></select-example>

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

@@ -11,13 +11,15 @@ 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';
 import {MatProgressSpinnerModule} from '@angular/material-experimental/mdc-progress-spinner';
+import {MatSelectModule} from '@angular/material-experimental/mdc-select';
 import {ChipsComponent} from './components/chips/chips.component';
 import {FormFieldComponent} from './components/form-field/form-field.component';
 import {InputComponent} from './components/input/input.component';
 import {MenuComponent} from './components/menu/menu.component';
 import {PaginatorComponent} from './components/paginator/paginator.component';
 import {ProgressSpinnerComponent} from './components/progress-spinner/progress-spinner.component';
 import {ProgressBarComponent} from './components/progress-bar/progress-bar.component';
+import {SelectComponent} from './components/select/select.component';
 
 @NgModule({
   declarations: [
@@ -29,6 +31,7 @@ import {ProgressBarComponent} from './components/progress-bar/progress-bar.compo
     PaginatorComponent,
     ProgressBarComponent,
     ProgressSpinnerComponent,
+    SelectComponent,
   ],
   imports: [
     BrowserModule,
@@ -41,6 +44,7 @@ import {ProgressBarComponent} from './components/progress-bar/progress-bar.compo
     MatPaginatorModule,
     MatProgressBarModule,
     MatProgressSpinnerModule,
+    MatSelectModule,
   ],
   providers: [],
   bootstrap: [AppComponent],

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

@@ -0,0 +1,9 @@
+<h2>Select example</h2>
+<mat-form-field class="select-example" appearance="fill">
+  <mat-label>Favorite food</mat-label>
+  <mat-select>
+    <mat-option *ngFor="let food of foods" [value]="food.value">
+      {{food.viewValue}}
+    </mat-option>
+  </mat-select>
+</mat-form-field>

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

@@ -0,0 +1,18 @@
+.mat-mdc-select {
+  padding: 4px;
+}
+
+/* TODO: The following rule targets internal classes of select that may no longer apply for the MDC version. */
+
+.select-example ::ng-deep.mat-select-value {
+  color: darkblue;
+}
+
+
+.mat-mdc-select-panel {
+  padding: 4px;
+
+  .mat-mdc-option {
+    padding: 4px;
+  }
+}

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

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

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

@@ -0,0 +1,19 @@
+import {Component} from '@angular/core';
+
+interface Food {
+  value: string;
+  viewValue: string;
+}
+
+@Component({
+  selector: 'select-example',
+  templateUrl: './select.component.html',
+  styleUrls: ['./select.component.scss'],
+})
+export class SelectComponent {
+  foods: Food[] = [
+    {value: 'steak-0', viewValue: 'Steak'},
+    {value: 'pizza-1', viewValue: 'Pizza'},
+    {value: 'tacos-2', viewValue: 'Tacos'},
+  ];
+}

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

@@ -42,6 +42,10 @@ $sample-project-theme: mat.define-light-theme((
 @include mat.mdc-progress-bar-typography($sample-project-theme);
 @include mat.mdc-progress-spinner-theme($sample-project-theme);
 @include mat.mdc-progress-spinner-typography($sample-project-theme);
+@include mat.mdc-select-theme($sample-project-theme);
+@include mat.mdc-select-typography($sample-project-theme);
+@include mat.mdc-core-theme($sample-project-theme);
+@include mat.mdc-core-typography($sample-project-theme);
 
 /* You can add global styles to this file, and also import other style files */
 

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

@@ -5,3 +5,4 @@
 <paginator-example></paginator-example>
 <progress-bar-example></progress-bar-example>
 <progress-spinner-example></progress-spinner-example>
+<select-example></select-example>

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

@@ -11,13 +11,15 @@ import {MatMenuModule} from '@angular/material/menu';
 import {MatPaginatorModule} from '@angular/material/paginator';
 import {MatProgressBarModule} from '@angular/material/progress-bar';
 import {MatProgressSpinnerModule} from '@angular/material/progress-spinner';
+import {MatSelectModule} from '@angular/material/select';
 import {ChipsComponent} from './components/chips/chips.component';
 import {FormFieldComponent} from './components/form-field/form-field.component';
 import {InputComponent} from './components/input/input.component';
 import {MenuComponent} from './components/menu/menu.component';
 import {PaginatorComponent} from './components/paginator/paginator.component';
 import {ProgressSpinnerComponent} from './components/progress-spinner/progress-spinner.component';
 import {ProgressBarComponent} from './components/progress-bar/progress-bar.component';
+import {SelectComponent} from './components/select/select.component';
 
 @NgModule({
   declarations: [
@@ -29,6 +31,7 @@ import {ProgressBarComponent} from './components/progress-bar/progress-bar.compo
     PaginatorComponent,
     ProgressBarComponent,
     ProgressSpinnerComponent,
+    SelectComponent,
   ],
   imports: [
     BrowserModule,
@@ -41,6 +44,7 @@ import {ProgressBarComponent} from './components/progress-bar/progress-bar.compo
     MatPaginatorModule,
     MatProgressBarModule,
     MatProgressSpinnerModule,
+    MatSelectModule,
   ],
   providers: [],
   bootstrap: [AppComponent],

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

@@ -0,0 +1,9 @@
+<h2>Select example</h2>
+<mat-form-field class="select-example" appearance="fill">
+  <mat-label>Favorite food</mat-label>
+  <mat-select>
+    <mat-option *ngFor="let food of foods" [value]="food.value">
+      {{food.viewValue}}
+    </mat-option>
+  </mat-select>
+</mat-form-field>