build: add button example to mdc-migration integration test

Author: amysorto

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

@@ -1,4 +1,5 @@
 <autocomplete-example></autocomplete-example>
+<button-example></button-example>
 <chips-example></chips-example>
 <form-field-example></form-field-example>
 <input-example></input-example>

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

@@ -5,6 +5,7 @@ import {AppComponent} from './app.component';
 import {BrowserAnimationsModule} from '@angular/platform-browser/animations';
 import {ReactiveFormsModule} from '@angular/forms';
 import {MatAutocompleteModule} from '@angular/material-experimental/mdc-autocomplete';
+import {MatButtonModule} from '@angular/material-experimental/mdc-button';
 import {MatChipsModule} from '@angular/material-experimental/mdc-chips';
 import {MatFormFieldModule} from '@angular/material-experimental/mdc-form-field';
 import {MatIconModule} from '@angular/material/icon';
@@ -23,11 +24,13 @@ 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';
+import {ButtonComponent} from './components/button/button.component';
 
 @NgModule({
   declarations: [
     AutocompleteComponent,
     AppComponent,
+    ButtonComponent,
     ChipsComponent,
     FormFieldComponent,
     InputComponent,
@@ -41,6 +44,7 @@ import {SelectComponent} from './components/select/select.component';
     BrowserModule,
     BrowserAnimationsModule,
     MatAutocompleteModule,
+    MatButtonModule,
     MatChipsModule,
     MatFormFieldModule,
     MatIconModule,

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

@@ -0,0 +1,2 @@
+<h2>Button example</h2>
+<button mat-button>Basic</button>

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

@@ -0,0 +1,8 @@
+.mat-mdc-button {
+  padding: 16px;
+}
+
+
+/* TODO: The following rule targets internal classes of button that may no longer apply for the MDC version. */
+
+::ng-deep .mat-button-wrapper{ color: darkblue; }

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

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

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

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

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

@@ -30,6 +30,12 @@ $sample-project-theme: mat.define-light-theme((
 
 @include mat.mdc-autocomplete-theme($sample-project-theme);
 @include mat.mdc-autocomplete-typography($sample-project-theme);
+@include mat.mdc-button-theme($sample-project-theme);
+@include mat.mdc-button-typography($sample-project-theme);
+@include mat.mdc-fab-theme($sample-project-theme);
+@include mat.mdc-fab-typography($sample-project-theme);
+@include mat.mdc-icon-button-theme($sample-project-theme);
+@include mat.mdc-icon-button-typography($sample-project-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);

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

@@ -1,4 +1,5 @@
 <autocomplete-example></autocomplete-example>
+<button-example></button-example>
 <chips-example></chips-example>
 <form-field-example></form-field-example>
 <input-example></input-example>

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

@@ -5,6 +5,7 @@ import {AppComponent} from './app.component';
 import {BrowserAnimationsModule} from '@angular/platform-browser/animations';
 import {ReactiveFormsModule} from '@angular/forms';
 import {MatAutocompleteModule} from '@angular/material/autocomplete';
+import {MatButtonModule} from '@angular/material/button';
 import {MatChipsModule} from '@angular/material/chips';
 import {MatFormFieldModule} from '@angular/material/form-field';
 import {MatIconModule} from '@angular/material/icon';
@@ -23,11 +24,13 @@ 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';
+import {ButtonComponent} from './components/button/button.component';
 
 @NgModule({
   declarations: [
     AutocompleteComponent,
     AppComponent,
+    ButtonComponent,
     ChipsComponent,
     FormFieldComponent,
     InputComponent,
@@ -41,6 +44,7 @@ import {SelectComponent} from './components/select/select.component';
     BrowserModule,
     BrowserAnimationsModule,
     MatAutocompleteModule,
+    MatButtonModule,
     MatChipsModule,
     MatFormFieldModule,
     MatIconModule,

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

@@ -0,0 +1,2 @@
+<h2>Button example</h2>
+<button mat-button>Basic</button>