build: add form-field example to mdc-migration integration test

Author: amysorto

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

@@ -1,4 +1,5 @@
 <chips-example></chips-example>
+<form-field-example></form-field-example>
 <input-example></input-example>
 <menu-example></menu-example>
 <paginator-example></paginator-example>

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

@@ -12,6 +12,7 @@ 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 {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';
@@ -22,6 +23,7 @@ import {ProgressBarComponent} from './components/progress-bar/progress-bar.compo
   declarations: [
     AppComponent,
     ChipsComponent,
+    FormFieldComponent,
     InputComponent,
     MenuComponent,
     PaginatorComponent,

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

@@ -0,0 +1,6 @@
+<h2>Form field example</h2>
+<mat-form-field hintLabel="Max 10 characters" appearance="fill">
+  <mat-label>Enter some input</mat-label>
+  <input matInput #input maxlength="10" placeholder="Ex. Nougat">
+  <mat-hint align="end">{{input.value?.length || 0}}/10</mat-hint>
+</mat-form-field>

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

@@ -0,0 +1,15 @@
+.mat-mdc-form-field {
+  padding: 4px;
+
+  .mat-mdc-form-field-hint {
+    color: darkred;
+  }
+}
+
+
+/* TODO: The following rule targets internal classes of form-field that may no longer apply for the MDC version. */
+
+.mat-mdc-form-field
+.mat-form-field-wrapper {
+  padding: 16px;
+}

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

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

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

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

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

@@ -30,6 +30,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-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);

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

@@ -1,4 +1,5 @@
 <chips-example></chips-example>
+<form-field-example></form-field-example>
 <input-example></input-example>
 <menu-example></menu-example>
 <paginator-example></paginator-example>

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

@@ -12,6 +12,7 @@ import {MatPaginatorModule} from '@angular/material/paginator';
 import {MatProgressBarModule} from '@angular/material/progress-bar';
 import {MatProgressSpinnerModule} from '@angular/material/progress-spinner';
 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';
@@ -22,6 +23,7 @@ import {ProgressBarComponent} from './components/progress-bar/progress-bar.compo
   declarations: [
     AppComponent,
     ChipsComponent,
+    FormFieldComponent,
     InputComponent,
     MenuComponent,
     PaginatorComponent,

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

@@ -0,0 +1,6 @@
+<h2>Form field example</h2>
+<mat-form-field hintLabel="Max 10 characters" appearance="fill">
+  <mat-label>Enter some input</mat-label>
+  <input matInput #input maxlength="10" placeholder="Ex. Nougat">
+  <mat-hint align="end">{{input.value?.length || 0}}/10</mat-hint>
+</mat-form-field>