MDC Migration: Fix styling for runs_group_menu

Author: JamesHollyer

tensorboard/webapp/runs/views/runs_table/runs_group_menu_button_component.ng.html

@@ -31,13 +31,11 @@
     [attr.aria-checked]="selectedGroupBy.key === GroupByKey.EXPERIMENT"
     (click)="onGroupByChange.emit({key: GroupByKey.EXPERIMENT})"
   >
-    <span>
-      <mat-icon
-        *ngIf="selectedGroupBy.key === GroupByKey.EXPERIMENT"
-        svgIcon="done_24px"
-      ></mat-icon>
-    </span>
-    <label>Experiment</label>
+    <mat-icon
+      *ngIf="selectedGroupBy.key === GroupByKey.EXPERIMENT"
+      svgIcon="done_24px"
+    ></mat-icon>
+    <span>Experiment</span>
   </button>
   <button
     mat-menu-item
@@ -46,13 +44,11 @@
     [attr.aria-checked]="selectedGroupBy.key === GroupByKey.RUN"
     (click)="onGroupByChange.emit({key: GroupByKey.RUN})"
   >
-    <span>
-      <mat-icon
-        *ngIf="selectedGroupBy.key === GroupByKey.RUN"
-        svgIcon="done_24px"
-      ></mat-icon>
-    </span>
-    <label>Run</label>
+    <mat-icon
+      *ngIf="selectedGroupBy.key === GroupByKey.RUN"
+      svgIcon="done_24px"
+    ></mat-icon>
+    <span>Run</span>
   </button>
   <button
     mat-menu-item
@@ -61,13 +57,11 @@
     [attr.aria-checked]="selectedGroupBy.key === GroupByKey.REGEX"
     (click)="onGroupByRegexClick()"
   >
-    <span>
-      <mat-icon
-        *ngIf="selectedGroupBy.key === GroupByKey.REGEX"
-        svgIcon="done_24px"
-      ></mat-icon>
-    </span>
-    <label>Regex</label>
+    <mat-icon
+      *ngIf="selectedGroupBy.key === GroupByKey.REGEX"
+      svgIcon="done_24px"
+    ></mat-icon>
+    <span>Regex</span>
   </button>
   <button
     mat-menu-item
@@ -76,10 +70,8 @@
     (click)="onRegexStringEdit()"
     class="display-regex-string"
   >
-    <span>
-      <mat-icon svgIcon="edit_24px"></mat-icon>
-    </span>
-    <label *ngIf="regexString">{{regexString}}</label>
-    <label *ngIf="!regexString" class="none-set-string">(none set)</label>
+    <mat-icon svgIcon="edit_24px"></mat-icon>
+    <span *ngIf="regexString">{{regexString}}</span>
+    <span *ngIf="!regexString" class="none-set-string">(none set)</span>
   </button>
 </mat-menu>

tensorboard/webapp/runs/views/runs_table/runs_group_menu_button_component.scss

@@ -27,12 +27,6 @@ limitations under the License.
     pointer-events: none;
   }
 
-  button {
-    display: grid;
-    gap: 2px 10px;
-    grid-template-columns: $_icon-size auto;
-  }
-
   mat-icon {
     height: $_icon-size;
     width: $_icon-size;

tensorboard/webapp/runs/views/runs_table/runs_table_test.ts

@@ -638,7 +638,7 @@ describe('runs_table', () => {
         const items = getOverlayMenuItems();
 
         expect(
-          items.map((element) => element.querySelector('label')!.textContent)
+          items.map((element) => element.querySelector('span')!.textContent)
         ).toEqual(['Experiment', 'Run', 'Regex', '(none set)']);
       });
 
@@ -655,9 +655,10 @@ describe('runs_table', () => {
 
         openColorGroupDialog(fixture);
         const items = getOverlayMenuItems();
+        console.log('items', items);
 
         expect(
-          items.map((element) => element.querySelector('label')!.textContent)
+          items.map((element) => element.querySelector('span')!.textContent)
         ).toEqual(['Run', 'Regex', '(none set)']);
       });