all: Upgrade buttons to MDC component spec (connects #9166)

src/app/chat/chat-sidebar/chat-sidebar.component.html

@@ -2,12 +2,14 @@
   <mat-drawer #drawer mode="side" [opened]="deviceType === deviceTypes.DESKTOP || deviceType === deviceTypes.TABLET">
 
     <div class="header-container">
-      <div class="header">
+      <div class="header flex-vertical-center">
         <button type="button" mat-raised-button color="primary" mat-button (click)="newChat()">
           <mat-icon>add</mat-icon>
           <span i18n>Start New Chat</span>
         </button>
-        <button class="icon-button" *ngIf="deviceType === deviceTypes.DESKTOP" mat-icon-button (click)="drawer.toggle()"><i class="material-icons">chevron_left</i></button>
+        <button class="icon-button" *ngIf="deviceType === deviceTypes.DESKTOP" mat-mini-fab (click)="drawer.toggle()">
+          <mat-icon class="material-icons">chevron_left</mat-icon>
+        </button>
       </div>
       <mat-form-field class="font-size-1 margin-lr-3">
         <input matInput i18n-placeholder placeholder="Search" [(ngModel)]="titleSearch" (input)="onSearchChange($event.target.value)">
@@ -79,8 +81,8 @@
 
   <div class="window-box">
     <div class="expand-button">
-      <button mat-icon-button (click)="drawer.toggle()">
-        <i class="material-icons">{{ drawer.opened && deviceType !== deviceTypes.DESKTOP  ? 'chevron_left' : 'chevron_right' }}</i>
+      <button mat-mini-fab (click)="drawer.toggle()">
+        <mat-icon class="material-icons">{{ drawer.opened && deviceType !== deviceTypes.DESKTOP  ? 'chevron_left' : 'chevron_right' }}</mat-icon>
       </button>
     </div>
     <planet-chat-window [isEditing]="isEditing"></planet-chat-window>

src/app/configuration/configuration.component.ts

@@ -24,7 +24,7 @@ const removeProtocol = (str: string) => {
   selector: 'planet-configuration',
   templateUrl: './configuration.component.html',
   styles: [ `
-    .mat-raised-button {
+    .mat-mdc-raised-button {
       margin: 0px 2px 2px 0px;
     }
     .configuration-form {

src/app/configuration/migration.component.ts

@@ -23,7 +23,7 @@ const getProtocol = (str: string) => /^[^:]+(?=:\/\/)/.exec(str)[0];
   selector: 'planet-migration',
   templateUrl: './migration.component.html',
   styles: [ `
-    .mat-raised-button {
+    .mat-mdc-raised-button {
       margin: 0px 2px 2px 0px;
     }
     .configuration-form {

src/app/dashboard/dashboard-tile.component.ts

@@ -165,9 +165,9 @@ export class DashboardTileComponent implements AfterViewChecked, OnInit {
 
 @Component({
   selector: 'planet-dashboard-tile-title',
-  template: `
-    <mat-icon svgIcon={{cardType}}></mat-icon>
-    <span>{{cardTitle}}</span>
+  template: `
+    <mat-icon svgIcon={{cardType}}></mat-icon>
+    <span>{{cardTitle}}</span>
   `,
   styleUrls: [ './dashboard-tile-title.scss' ]
 })

src/app/dashboard/dashboard-tile.scss

@@ -60,6 +60,10 @@
             position: absolute;
             top: -0.25rem;
             right: -0.25rem;
+            --mat-mdc-button-persistent-ripple-color: auto;
+            > .mat-icon {
+              width: auto;
+            }
           }
           p {
             margin: 0;

src/app/dashboard/dashboard.component.html

@@ -11,10 +11,10 @@
     </a>
     <div class="dashboard-name" style="margin-left: 16px;">
       <a [routerLink]="['/users/profile', user.name]" class="profile-link">
-        <h1 class="mat-title">{{displayName | truncateText:(isMobile ? 20 : 40)}} <span *ngIf="!isLoading">({{visits | number}})</span></h1>
+        <h1 class="mat-headline-6">{{displayName | truncateText:(isMobile ? 20 : 40)}} <span *ngIf="!isLoading">({{visits | number}})</span></h1>
       </a>
-      <h1 class="mat-title">
-        <span class="mat-subheading-2">
+      <h1 class="mat-headline-6">
+        <span class="mat-subtitle-1">
           <ng-container *ngFor="let role of roles; last as last">
             <planet-role [role]="role"></planet-role><span *ngIf="!last">, </span>
           </ng-container>

src/app/dashboard/dashboard.scss

@@ -50,7 +50,7 @@ $top-row-height: calc(#{$dashboard-tile-width} + 0.5rem);
         display: flex;
         align-items: center;
       }
-      .mat-subheading-2 {
+      .mat-subtitle-1 {
         margin: 0;
       }
       span {

src/app/health/health-update.component.html

@@ -45,7 +45,7 @@
         </mat-form-field>
       </form>
       <form class="form-spacing" [formGroup]="healthForm">
-        <span class="full-width primary-text-color mat-body-2" i18n>Emergency Contact</span>
+        <span class="full-width primary-text-color mat-subtitle-2" i18n>Emergency Contact</span>
         <mat-form-field>
           <input matInput i18n-placeholder placeholder="Name" formControlName="emergencyContactName">
         </mat-form-field>

src/app/home/home.scss

@@ -138,6 +138,7 @@
     display: inline;
 
     li {
+      text-align: left;
       a {
         border-radius: 0;
       }
@@ -148,6 +149,7 @@
         color: $primary;
         transition: background-color 0.5s cubic-bezier(0, 0, 0.2, 1),
           color 0.5s cubic-bezier(0, 0, 0.2, 1); // Linear out, slow in;
+        /*TODO(mdc-migration): The following rule targets internal classes of button that may no longer apply for the MDC version.*/
         .mat-button-focus-overlay {
           background-color: rgba(0, 0, 0, 0.06);
           transition: background-color 1s ease-in;
@@ -169,20 +171,34 @@
   a {
     width: 100%;
     min-width: 0;
-    text-align: left;
+    display: grid;
+    grid-template-columns: 47px auto;
+    justify-content: start;
+    white-space: nowrap;
     // Fixed height so text visibility doesn't add pixel
     height: 36px;
     // align with top mat-icon-button
     padding: 0 24px;
+    color: $white;
+
+    > * {
+      vertical-align: middle;
+    }
+
+    .mat-icon {
+      height: 24px;
+      width: 24px;
+      margin: 0;
+    }
 
     label {
       cursor: pointer;
-      margin: 0 24px;
       display: inline-block;
       max-width: 12ch;
       white-space: nowrap;
       overflow: hidden;
       text-overflow: ellipsis;
+      letter-spacing: 0;
     }
   }
 

src/app/manager-dashboard/manager-dashboard.scss

@@ -16,7 +16,7 @@
   padding-top: 0;
 }
 
-.mat-raised-button {
+.mat-mdc-raised-button {
   margin: 0.25rem;
 }
 

src/app/manager-dashboard/manager-sync.component.html

@@ -5,7 +5,7 @@
 <div class="space-container primary-link-hover">
   <mat-toolbar class="primary-color font-size-1">
     <span class="toolbar-fill"></span>
-    <button mat-button planetSync (syncComplete)="getReplicators()" i18n><mat-icon svgIcon="sync"></mat-icon>Run Sync</button>
+    <button mat-button planetSync (syncComplete)="getReplicators()" i18n><mat-icon svgIcon="sync" class="svg-icon"></mat-icon>Run Sync</button>
     <button mat-button (click)="getReplicators()" i18n><mat-icon>refresh</mat-icon>Refresh</button>
   </mat-toolbar>
   <mat-list>

src/app/manager-dashboard/manager-sync.component.ts

@@ -4,7 +4,14 @@ import { DialogsLoadingService } from '../shared/dialogs/dialogs-loading.service
 import { forkJoin } from 'rxjs';
 
 @Component({
-  templateUrl: './manager-sync.component.html'
+  templateUrl: './manager-sync.component.html',
+  styles: [
+    `
+      .mat-mdc-button > .mat-icon.svg-icon {
+        height: inherit;
+      }
+    `
+  ]
 })
 
 export class ManagerSyncComponent implements OnInit {

src/app/manager-dashboard/reports/reports-detail.component.html

@@ -135,7 +135,7 @@
         <canvas id="voicesCreatedChart"></canvas>
         <div class="reports-table-container">
           <div>
-            <h1 class="mat-title" i18n>Members</h1>
+            <h1 class="mat-headline-6" i18n>Members</h1>
             <mat-grid-list cols="2" rowHeight="2rem">
               <mat-grid-tile class="subheading label" i18n>Total Members</mat-grid-tile>
               <mat-grid-tile>{{reports?.totalUsers}}</mat-grid-tile>
@@ -171,7 +171,7 @@ <h1 class="mat-title" i18n>Members</h1>
             </mat-grid-list>
           </div>
           <div>
-            <h1 class="mat-title" i18n>Resources</h1>
+            <h1 class="mat-headline-6" i18n>Resources</h1>
             <mat-grid-list cols="2" rowHeight="2rem">
               <mat-grid-tile class="subheading label" i18n>Total Resources</mat-grid-tile>
               <mat-grid-tile>{{reports?.totalResources}}</mat-grid-tile>
@@ -204,7 +204,7 @@ <h1 class="mat-title" i18n>Resources</h1>
             </mat-grid-list>
           </div>
           <div>
-            <h1 class="mat-title" i18n>Courses</h1>
+            <h1 class="mat-headline-6" i18n>Courses</h1>
             <mat-grid-list cols="2" rowHeight="2rem">
               <mat-grid-tile class="subheading label" i18n>Total Courses</mat-grid-tile>
               <mat-grid-tile>{{reports?.totalCourses}}</mat-grid-tile>

src/app/manager-dashboard/reports/reports-detail.scss

@@ -78,11 +78,12 @@ mat-toolbar mat-form-field {
   .mat-form-field {
     width: 100%;
   }
-
+  /* TODO(mdc-migration): The following rule targets internal classes of button that may no longer apply for the MDC version. */
+  /* TODO(mdc-migration): The following rule targets internal classes of button that may no longer apply for the MDC version. */
   mat-button-toggle-group {
     width: 100%;
     display: flex;
-
+    /* TODO(mdc-migration): The following rule targets internal classes of button that may no longer apply for the MDC version. */
     .mat-button-toggle {
       flex: 1;
     }

src/app/manager-dashboard/reports/reports-health.component.html

@@ -5,13 +5,13 @@
   <div>
     <span><b i18n>Patients Seen:</b> {{headlineData?.unique.length}}</span>
   </div>
-  <h1 class="mat-title" i18n>Diagnoses</h1>
+  <h1 class="mat-headline-6" i18n>Diagnoses</h1>
   <div>
     <span *ngFor="let condition of conditions">
       <planet-label [label]="condition"></planet-label>: {{headlineData?.conditions[condition]}}
     </span>
   </div>
-  <h1 class="mat-title" i18n>Diagnosis Trend</h1>
+  <h1 class="mat-headline-6" i18n>Diagnosis Trend</h1>
   <div class="trend-filters">
     <span i18n>Select diagnosis to view trend:</span>
     <mat-form-field>
@@ -25,7 +25,7 @@ <h1 class="mat-title" i18n>Diagnosis Trend</h1>
   <div *ngIf="showChart" class="chart-container">
     <canvas id="diagnosesTrend" #diagnosesChart></canvas>
   </div>
-  <h1 class="mat-title" i18n>Weekly Data</h1>
+  <h1 class="mat-headline-6" i18n>Weekly Data</h1>
   <planet-reports-detail-activities
     [activitiesByDoc]="weeklyHealthData"
     activityType="health"

src/app/manager-dashboard/reports/reports.component.ts

@@ -12,10 +12,10 @@ import { trackById } from '../../shared/table-helpers';
 
 @Component({
   templateUrl: './reports.component.html',
-  styles: [ `
-    mat-panel-title {
-      align-items: center;
-    }
+  styles: [ `
+    mat-panel-title {
+      align-items: center;
+    }
   ` ],
   styleUrls: [ './reports.components.scss' ]
 })

src/app/meetups/add-meetups/meetups-add.component.ts

@@ -24,14 +24,14 @@ import { debounce } from 'rxjs/operators';
 @Component({
   selector: 'planet-meetups-add',
   templateUrl: './meetups-add.component.html',
-  styles: [ `
-    form.form-spacing {
-      width: inherit;
-    }
-    .view-container form {
-      min-width: 385px;
-      max-width: 750px;
-    }
+  styles: [ `
+    form.form-spacing {
+      width: inherit;
+    }
+    .view-container form {
+      min-width: 385px;
+      max-width: 750px;
+    }
   ` ]
 })
 export class MeetupsAddComponent implements OnInit, CanComponentDeactivate {

src/app/meetups/meetups.component.ts

@@ -17,15 +17,15 @@ import { findByIdInArray } from '../shared/utils';
 
 @Component({
   templateUrl: './meetups.component.html',
-  styles: [ `
-    /* Column Widths */
-    .mat-column-select {
-      max-width: 44px;
-    }
-    .mat-column-info {
-      max-width: 500px;
-      align-self: flex-start;
-    }
+  styles: [ `
+    /* Column Widths */
+    .mat-column-select {
+      max-width: 44px;
+    }
+    .mat-column-info {
+      max-width: 500px;
+      align-self: flex-start;
+    }
   ` ]
 })
 export class MeetupsComponent implements OnInit, AfterViewInit, OnDestroy {

src/app/news/news-list-item.component.html

@@ -64,9 +64,9 @@
       </button>
     </div>
   </mat-card-content>
-  <mat-card-actions class="display-flex">
+  <mat-card-actions class="flex-vertical-center">
     <img [src]="item.avatar" class="cursor-pointer profile-outline" (click)="openMemberDialog(item.doc.user)">
-      <button mat-button type="button" class="cursor-pointer user-name-truncate" (click)="openMemberDialog(item.doc.user)">
+      <button mat-button type="button" class="cursor-pointer user-name-truncate margin-lr-8" (click)="openMemberDialog(item.doc.user)">
       <span class="user-name-truncate-text ellipsis">
         {{item.doc.user.firstName ?
           item.doc.user.firstName + ((" " + item.doc.user.middleName) || '') + ' ' + item.doc.user.lastName :

src/app/news/news-list-item.scss

@@ -62,13 +62,13 @@ mat-chip {
 
 .user-name-truncate {
   flex: 1 1 0;
+  justify-content: start;
 }
 
 .user-name-truncate-text {
   display: block;
   overflow: hidden;
   text-overflow: ellipsis;
-  text-align: left;
 }
 
 @media (max-width: $screen-xs) {

src/app/page-not-found/page-not-found.component.ts

@@ -3,13 +3,13 @@ import { Component } from '@angular/core';
 @Component({
   selector: 'planet-page-not-found',
   templateUrl: './page-not-found.component.html',
-  styles: [ `
-    :host {
-      display: flex;
-      flex-direction: column;
-      align-items: center;
-      padding-top: 10vh;
-    }
+  styles: [ `
+    :host {
+      display: flex;
+      flex-direction: column;
+      align-items: center;
+      padding-top: 10vh;
+    }
   ` ]
 })
 export class PageNotFoundComponent {

src/app/resources/resources.scss

@@ -35,7 +35,7 @@ $label-height: 1rem;
     height: calc(#{$view-container-height} - #{$toolbar-height});
   }
 
-  .mat-button, .mat-stroked-button {
+  .mat-mdc-button, .mat-mdc-outlined-button {
     min-width: auto;
   }
 

src/app/shared/dialogs/dialogs-submissions.component.ts

@@ -3,7 +3,7 @@ import { MAT_LEGACY_DIALOG_DATA as MAT_DIALOG_DATA } from '@angular/material/leg
 
 @Component({
   template: `
-    <h3 mat-dialog-title i18n class="mat-subheading-2">Review Previous Test Attempts</h3>
+    <h3 mat-dialog-title i18n class="mat-subtitle-1">Review Previous Test Attempts</h3>
     <mat-dialog-content>
       <planet-submissions *ngIf="view==='list'" [isDialog]="true" [parentId]="data.parentId"
         [displayedColumns]="[ 'lastUpdateTime', 'gradeTime', 'grade', 'status' ]" (submissionClick)="showSubmission($event)">