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

…rated: slide-toggle PiperOrigin-RevId: 565194488
tensorflow · Sep 18, 2023 · e5ba616 · e5ba616
1 parent 9cb544f
commit e5ba616
Show file tree

Hide file tree

Showing 7 changed files with 12 additions and 9 deletions.
diff --git a/frontend/app/common/angular/BUILD b/frontend/app/common/angular/BUILD
@@ -107,7 +107,7 @@ ts_library(
 )
 
 ts_library(
-    name = "angular_material_legacy_radio",
+    name = "angular_material_radio",
     srcs = [],
     deps = [
         "@npm//@angular/material",
@@ -139,7 +139,7 @@ ts_library(
 )
 
 ts_library(
-    name = "angular_material_legacy_slide_toggle",
+    name = "angular_material_slide_toggle",
     srcs = [],
     deps = [
         "@npm//@angular/material",

diff --git a/frontend/app/components/capture_profile/capture_profile_dialog/BUILD b/frontend/app/components/capture_profile/capture_profile_dialog/BUILD
@@ -23,8 +23,8 @@ xprof_ng_module(
         "@org_xprof//frontend/app/common/angular:angular_material_expansion",
         "@org_xprof//frontend/app/common/angular:angular_material_form_field",
         "@org_xprof//frontend/app/common/angular:angular_material_input",
-        "@org_xprof//frontend/app/common/angular:angular_material_legacy_radio",
         "@org_xprof//frontend/app/common/angular:angular_material_legacy_tooltip",
+        "@org_xprof//frontend/app/common/angular:angular_material_radio",
         "@org_xprof//frontend/app/common/angular:angular_material_select",
         "@org_xprof//frontend/app/common/interfaces",
     ],

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
@@ -6,7 +6,7 @@ import {MatButtonModule} from '@angular/material/button';
 import {MatDialogModule} from '@angular/material/dialog';
 import {MatFormFieldModule} from '@angular/material/form-field';
 import {MatInputModule} from '@angular/material/input';
-import {MatLegacyRadioModule} from '@angular/material/legacy-radio';
+import {MatRadioModule} from '@angular/material/radio';
 import {MatSelectModule} from '@angular/material/select';
 import {MatLegacyTooltipModule} from '@angular/material/legacy-tooltip';
 import {BrowserModule} from '@angular/platform-browser';
@@ -25,7 +25,7 @@ import {CaptureProfileDialog} from './capture_profile_dialog';
     MatExpansionModule,
     MatFormFieldModule,
     MatInputModule,
-    MatLegacyRadioModule,
+    MatRadioModule,
     MatSelectModule,
     MatLegacyTooltipModule,
   ],

diff --git a/frontend/app/components/op_profile/BUILD b/frontend/app/components/op_profile/BUILD
@@ -23,9 +23,9 @@ xprof_ng_module(
         "@org_xprof//frontend/app/common/angular:angular_material_form_field",
         "@org_xprof//frontend/app/common/angular:angular_material_icon",
         "@org_xprof//frontend/app/common/angular:angular_material_input",
-        "@org_xprof//frontend/app/common/angular:angular_material_legacy_slide_toggle",
         "@org_xprof//frontend/app/common/angular:angular_material_legacy_slider",
         "@org_xprof//frontend/app/common/angular:angular_material_legacy_tooltip",
+        "@org_xprof//frontend/app/common/angular:angular_material_slide_toggle",
         "@org_xprof//frontend/app/common/interfaces",
         "@org_xprof//frontend/app/components/op_profile/op_table",
         "@org_xprof//frontend/app/services/data_service",

diff --git a/frontend/app/components/op_profile/op_profile_common.scss b/frontend/app/components/op_profile/op_profile_common.scss
@@ -15,7 +15,8 @@
 
 .control-container {
   display: flex;
-  padding-top: 32px;
+  align-items: center;
+  margin-top: 32px;
 }
 
 .control {

diff --git a/frontend/app/components/op_profile/op_profile_module.ts b/frontend/app/components/op_profile/op_profile_module.ts
@@ -2,7 +2,7 @@ import {NgModule} from '@angular/core';
 import {MatIconModule} from '@angular/material/icon';
 import {MatFormFieldModule} from '@angular/material/form-field';
 import {MatInputModule} from '@angular/material/input';
-import {MatLegacySlideToggleModule} from '@angular/material/legacy-slide-toggle';
+import {MatSlideToggleModule} from '@angular/material/slide-toggle';
 import {MatLegacySliderModule} from '@angular/material/legacy-slider';
 import {MatLegacyTooltipModule} from '@angular/material/legacy-tooltip';
 
@@ -16,7 +16,7 @@ import {OpTableModule} from './op_table/op_table_module';
     MatFormFieldModule,
     MatInputModule,
     MatLegacySliderModule,
-    MatLegacySlideToggleModule,
+    MatSlideToggleModule,
     OpTableModule,
     MatIconModule,
     MatLegacyTooltipModule,

diff --git a/frontend/styles.scss b/frontend/styles.scss
@@ -39,6 +39,8 @@ $theme: mat.define-light-theme(
 @include mat.dialog-theme($theme);
 @include mat.progress-spinner-theme($theme);
 @include mat.progress-bar-theme($theme);
+@include mat.slide-toggle-theme(map-merge($theme, (density: -5)));
+@include mat.radio-theme($theme);
 
 html, body {
   height: 100%;