Migration to use the new MDC-based Angular Components. Components mig…

…rated: button PiperOrigin-RevId: 564794292
tensorflow · Sep 13, 2023 · 512ee9a · 512ee9a
1 parent 4b1d79b
commit 512ee9a
Show file tree

Hide file tree

Showing 19 changed files with 59 additions and 55 deletions.
diff --git a/frontend/app/common/angular/BUILD b/frontend/app/common/angular/BUILD
@@ -59,7 +59,7 @@ ts_library(
 )
 
 ts_library(
-    name = "angular_material_legacy_button",
+    name = "angular_material_button",
     srcs = [],
     deps = [
         "@npm//@angular/material",

diff --git a/frontend/app/components/capture_profile/BUILD b/frontend/app/components/capture_profile/BUILD
@@ -19,7 +19,7 @@ xprof_ng_module(
         "@npm//@angular/forms",
         "@npm//@ngrx/store",
         "@npm//rxjs",
-        "@org_xprof//frontend/app/common/angular:angular_material_legacy_button",
+        "@org_xprof//frontend/app/common/angular:angular_material_button",
         "@org_xprof//frontend/app/common/angular:angular_material_legacy_dialog",
         "@org_xprof//frontend/app/common/angular:angular_material_legacy_progress_spinner",
         "@org_xprof//frontend/app/common/angular:angular_material_legacy_snack_bar",

diff --git a/frontend/app/components/capture_profile/capture_profile.scss b/frontend/app/components/capture_profile/capture_profile.scss
@@ -8,7 +8,7 @@ mat-spinner {
   left: calc(50% - 10px);
 }
 
-.mat-raised-button {
+.mat-mdc-raised-button {
   @include box-shadow-none;
   @include border-black;
 }
diff --git a/frontend/app/components/capture_profile/capture_profile_dialog/BUILD b/frontend/app/components/capture_profile/capture_profile_dialog/BUILD
@@ -18,8 +18,8 @@ xprof_ng_module(
         "@npm//@angular/core",
         "@npm//@angular/forms",
         "@npm//@angular/platform-browser",
+        "@org_xprof//frontend/app/common/angular:angular_material_button",
         "@org_xprof//frontend/app/common/angular:angular_material_expansion",
-        "@org_xprof//frontend/app/common/angular:angular_material_legacy_button",
         "@org_xprof//frontend/app/common/angular:angular_material_legacy_dialog",
         "@org_xprof//frontend/app/common/angular:angular_material_legacy_form_field",
         "@org_xprof//frontend/app/common/angular:angular_material_legacy_input",

diff --git a/frontend/app/components/capture_profile/capture_profile_dialog/capture_profile_dialog.scss b/frontend/app/components/capture_profile/capture_profile_dialog/capture_profile_dialog.scss
@@ -22,7 +22,7 @@ mat-dialog-actions {
   justify-content: flex-end;
 }
 
-.mat-raised-button {
+.mat-mdc-raised-button {
   @include box-shadow-none;
   @include border-black;
 }
diff --git a/...nd/app/components/capture_profile/capture_profile_dialog/capture_profile_dialog_module.ts b/...nd/app/components/capture_profile/capture_profile_dialog/capture_profile_dialog_module.ts
@@ -2,7 +2,7 @@ import {CommonModule} from '@angular/common';
 import {NgModule} from '@angular/core';
 import {FormsModule} from '@angular/forms';
 import {MatExpansionModule} from '@angular/material/expansion';
-import {MatLegacyButtonModule} from '@angular/material/legacy-button';
+import {MatButtonModule} from '@angular/material/button';
 import {MatLegacyDialogModule} from '@angular/material/legacy-dialog';
 import {MatLegacyFormFieldModule} from '@angular/material/legacy-form-field';
 import {MatLegacyInputModule} from '@angular/material/legacy-input';
@@ -20,7 +20,7 @@ import {CaptureProfileDialog} from './capture_profile_dialog';
     BrowserModule,
     CommonModule,
     FormsModule,
-    MatLegacyButtonModule,
+    MatButtonModule,
     MatLegacyDialogModule,
     MatExpansionModule,
     MatLegacyFormFieldModule,

diff --git a/frontend/app/components/capture_profile/capture_profile_module.ts b/frontend/app/components/capture_profile/capture_profile_module.ts
@@ -1,6 +1,6 @@
 import {CommonModule} from '@angular/common';
 import {NgModule} from '@angular/core';
-import {MatLegacyButtonModule} from '@angular/material/legacy-button';
+import {MatButtonModule} from '@angular/material/button';
 import {MatLegacyDialogModule} from '@angular/material/legacy-dialog';
 import {MatLegacyProgressSpinnerModule} from '@angular/material/legacy-progress-spinner';
 import {MatLegacySnackBarModule} from '@angular/material/legacy-snack-bar';
@@ -14,7 +14,7 @@ import {CaptureProfileDialogModule} from './capture_profile_dialog/capture_profi
   declarations: [CaptureProfile],
   imports: [
     CommonModule,
-    MatLegacyButtonModule,
+    MatButtonModule,
     MatLegacyDialogModule,
     MatLegacyProgressSpinnerModule,
     CaptureProfileDialogModule,

diff --git a/frontend/app/components/graph_viewer/graph_config/BUILD b/frontend/app/components/graph_viewer/graph_config/BUILD
@@ -18,8 +18,8 @@ xprof_ng_module(
         "@npm//@angular/core",
         "@npm//@angular/forms",
         "@npm//rxjs",
+        "@org_xprof//frontend/app/common/angular:angular_material_button",
         "@org_xprof//frontend/app/common/angular:angular_material_icon",
-        "@org_xprof//frontend/app/common/angular:angular_material_legacy_button",
         "@org_xprof//frontend/app/common/angular:angular_material_legacy_checkbox",
         "@org_xprof//frontend/app/common/angular:angular_material_legacy_core",
         "@org_xprof//frontend/app/common/angular:angular_material_legacy_form_field",

diff --git a/frontend/app/components/graph_viewer/graph_config/graph_config.ng.html b/frontend/app/components/graph_viewer/graph_config/graph_config.ng.html
@@ -41,45 +41,44 @@
         name="opName"
       />
     </mat-form-field>
-    <div>
-      <mat-form-field class="full-width">
-        <input
-          matInput
-          placeholder="Graph width"
-          matTooltip="Suggest width < 10"
-          aria-label="graph-width"
-          type="number"
-          min="1"
-          step="1"
-          [ngModel]="params.graphWidth"
-          (ngModelChange)="onUpdateParam({ graphWidth: $event })"
-          name="graphWidth"
-        />
-      </mat-form-field>
+    <mat-form-field class="full-width">
+      <input
+        matInput
+        placeholder="Graph width"
+        matTooltip="Suggest width < 10"
+        aria-label="graph-width"
+        type="number"
+        min="1"
+        step="1"
+        [ngModel]="params.graphWidth"
+        (ngModelChange)="onUpdateParam({ graphWidth: $event })"
+        name="graphWidth"
+      />
+    </mat-form-field>
 
-      <mat-checkbox
-        [ngModel]="params.showMetadata"
-        name="showMetadata"
-        (ngModelChange)="onUpdateParam({ showMetadata: $event })"
-        >Show Metadata</mat-checkbox
-      >
-      <mat-checkbox
-        [ngModel]="params.mergeFusion"
-        name="mergeFusion"
-        matTooltip="Hide the fusion subcomputations in the rendered graph"
-        (ngModelChange)="onUpdateParam({ mergeFusion: $event })"
-      >
-        Merge Fusion
-      </mat-checkbox>
-    </div>
+    <mat-checkbox
+      [ngModel]="params.showMetadata"
+      name="showMetadata"
+      (ngModelChange)="onUpdateParam({ showMetadata: $event })"
+      class="full-width"
+      >Show Metadata</mat-checkbox
+    >
+    <mat-checkbox
+      [ngModel]="params.mergeFusion"
+      name="mergeFusion"
+      matTooltip="Hide the fusion subcomputations in the rendered graph"
+      (ngModelChange)="onUpdateParam({ mergeFusion: $event })"
+      class="full-width"
+    >
+      Merge Fusion
+    </mat-checkbox>
     <div class="search-button">
       <button
         mat-flat-button
         extended
         name="submit"
         type="submit"
         color="primary"
-        appearance="fill"
         [disabled]="!validToSubmit()"
       >
         <mat-icon>search</mat-icon> Search Graph

diff --git a/frontend/app/components/graph_viewer/graph_config/graph_config.scss b/frontend/app/components/graph_viewer/graph_config/graph_config.scss
@@ -19,5 +19,5 @@ mat-checkbox {
 }
 
 .search-button {
-  padding: 20px 0 0;
+  padding: 20px 0;
 }
diff --git a/frontend/app/components/graph_viewer/graph_config/graph_config_module.ts b/frontend/app/components/graph_viewer/graph_config/graph_config_module.ts
@@ -2,7 +2,7 @@ import {CommonModule} from '@angular/common';
 import {NgModule} from '@angular/core';
 import {FormsModule} from '@angular/forms';
 import {MatIconModule} from '@angular/material/icon';
-import {MatLegacyButtonModule} from '@angular/material/legacy-button';
+import {MatButtonModule} from '@angular/material/button';
 import {MatLegacyCheckboxModule} from '@angular/material/legacy-checkbox';
 import {MatLegacyOptionModule} from '@angular/material/legacy-core';
 import {MatLegacyFormFieldModule} from '@angular/material/legacy-form-field';
@@ -17,7 +17,7 @@ import {GraphConfig} from './graph_config';
   imports: [
     CommonModule,
     FormsModule,
-    MatLegacyButtonModule,
+    MatButtonModule,
     MatLegacyCheckboxModule,
     MatLegacyFormFieldModule,
     MatIconModule,

diff --git a/frontend/app/components/op_profile/op_details/BUILD b/frontend/app/components/op_profile/op_details/BUILD
@@ -18,8 +18,8 @@ xprof_ng_module(
         "@npm//@angular/core",
         "@npm//@ngrx/store",
         "@npm//rxjs",
+        "@org_xprof//frontend/app/common/angular:angular_material_button",
         "@org_xprof//frontend/app/common/angular:angular_material_icon",
-        "@org_xprof//frontend/app/common/angular:angular_material_legacy_button",
         "@org_xprof//frontend/app/common/angular:angular_material_legacy_card",
         "@org_xprof//frontend/app/common/interfaces:op_metrics_proto_defs",
         "@org_xprof//frontend/app/common/interfaces:op_profile_proto_defs",

diff --git a/frontend/app/components/op_profile/op_details/op_details_module.ts b/frontend/app/components/op_profile/op_details/op_details_module.ts
@@ -1,7 +1,7 @@
 import {CommonModule} from '@angular/common';
 import {NgModule} from '@angular/core';
 import {MatIconModule} from '@angular/material/icon';
-import {MatLegacyButtonModule} from '@angular/material/legacy-button';
+import {MatButtonModule} from '@angular/material/button';
 import {MatLegacyCardModule} from '@angular/material/legacy-card';
 
 import {OpDetails} from './op_details';
@@ -10,7 +10,7 @@ import {OpDetails} from './op_details';
 @NgModule({
   declarations: [OpDetails],
   imports:
-      [CommonModule, MatLegacyCardModule, MatIconModule, MatLegacyButtonModule],
+      [CommonModule, MatLegacyCardModule, MatIconModule, MatButtonModule],
   exports: [OpDetails]
 })
 export class OpDetailsModule {

diff --git a/frontend/app/components/pod_viewer/topology_graph/BUILD b/frontend/app/components/pod_viewer/topology_graph/BUILD
@@ -18,8 +18,8 @@ xprof_ng_module(
         "@npm//@angular/core",
         "@npm//@ngrx/store",
         "@npm//rxjs",
+        "@org_xprof//frontend/app/common/angular:angular_material_button",
         "@org_xprof//frontend/app/common/angular:angular_material_icon",
-        "@org_xprof//frontend/app/common/angular:angular_material_legacy_button",
         "@org_xprof//frontend/app/common/angular:angular_material_legacy_form_field",
         "@org_xprof//frontend/app/common/angular:angular_material_legacy_input",
         "@org_xprof//frontend/app/common/angular:angular_material_legacy_menu",

diff --git a/frontend/app/components/pod_viewer/topology_graph/topology_graph_module.ts b/frontend/app/components/pod_viewer/topology_graph/topology_graph_module.ts
@@ -1,7 +1,7 @@
 import {CommonModule} from '@angular/common';
 import {NgModule} from '@angular/core';
 import {MatIconModule} from '@angular/material/icon';
-import {MatLegacyButtonModule} from '@angular/material/legacy-button';
+import {MatButtonModule} from '@angular/material/button';
 import {MatLegacyFormFieldModule} from '@angular/material/legacy-form-field';
 import {MatLegacyInputModule} from '@angular/material/legacy-input';
 import {MatLegacyMenuModule} from '@angular/material/legacy-menu';
@@ -14,7 +14,7 @@ import {TopologyGraph} from './topology_graph';
   declarations: [TopologyGraph],
   imports: [
     CommonModule,
-    MatLegacyButtonModule,
+    MatButtonModule,
     MatLegacyFormFieldModule,
     MatIconModule,
     MatLegacyInputModule,

diff --git a/frontend/app/components/tensorflow_stats/BUILD b/frontend/app/components/tensorflow_stats/BUILD
@@ -35,9 +35,9 @@ xprof_ng_module(
         "@npm//@angular/core",
         "@npm//@ngrx/store",
         "@npm//@types/google.visualization",
+        "@org_xprof//frontend/app/common/angular:angular_material_button",
         "@org_xprof//frontend/app/common/angular:angular_material_divider",
         "@org_xprof//frontend/app/common/angular:angular_material_icon",
-        "@org_xprof//frontend/app/common/angular:angular_material_legacy_button",
         "@org_xprof//frontend/app/common/angular:angular_material_legacy_menu",
         "@org_xprof//frontend/app/common/constants",
         "@org_xprof//frontend/app/common/interfaces",

diff --git a/frontend/app/components/tensorflow_stats/tensorflow_stats.scss b/frontend/app/components/tensorflow_stats/tensorflow_stats.scss
@@ -23,7 +23,7 @@
   flex: 1;
 }
 
-.mat-raised-button {
+.mat-mdc-raised-button {
   @include box-shadow-none;
   @include border-black;
   border-radius: 0;

diff --git a/frontend/app/components/tensorflow_stats/tensorflow_stats_module.ts b/frontend/app/components/tensorflow_stats/tensorflow_stats_module.ts
@@ -2,7 +2,7 @@ import {CommonModule} from '@angular/common';
 import {NgModule} from '@angular/core';
 import {MatDividerModule} from '@angular/material/divider';
 import {MatIconModule} from '@angular/material/icon';
-import {MatLegacyButtonModule} from '@angular/material/legacy-button';
+import {MatButtonModule} from '@angular/material/button';
 import {MatLegacyMenuModule} from '@angular/material/legacy-menu';
 import {ChartModule} from 'org_xprof/frontend/app/components/chart/chart';
 import {ExportAsCsvModule} from 'org_xprof/frontend/app/components/controls/export_as_csv/export_as_csv_module';
@@ -18,7 +18,7 @@ import {TensorflowStats} from './tensorflow_stats';
   declarations: [TensorflowStats],
   imports: [
     CommonModule,
-    MatLegacyButtonModule,
+    MatButtonModule,
     MatDividerModule,
     MatIconModule,
     MatLegacyMenuModule,

diff --git a/frontend/styles.scss b/frontend/styles.scss
@@ -19,12 +19,17 @@ $theme: mat.define-light-theme(
       warn: $warn,
     ),
     density: 0,
-    typography: null,
+    // DO NOT SUBMIT: Confirm whether this is your application's
+    // intended typography before submitting (and delete this comment)
+    typography: mat.define-typography-config(),
   )
 );
 
 @include mat.all-component-themes($theme);
 @include mat.all-legacy-component-themes($theme);
+@include mat.fab-theme($theme);
+@include mat.button-theme($theme);
+@include mat.icon-button-theme($theme);
 
 html, body {
   height: 100%;