commit af84f5af0a276d42a5574a6efe32ca4ee7c2fe83
author Chris Poucet <poucet@google.com> Mon Jul 18 10:48:30 2022 +0200
committer Chris Poucet <poucet@google.com> Mon Jul 18 14:12:59 2022 +0200
tree 229fc3e92152842fe834abb6b37631746974c103
parent 8d4bddf0f99fd86696c5c526952c3f7eac37b298

Migrate the submit-requirement icons to material-icons

The overridden icon is changed because we were actually using a custom
icon despite gr-icons saying otherwise. After consultation with UX we
settled on the icon listed below.

Screenshot of icon change: https://imgur.com/a/V2CnctQ

Screenshots: https://imgur.com/a/eG7aZ3c
Release-Notes: skip
Google-Bug-Id: b/237255434
Change-Id: I7f951351b139d29bc72585ca6a33f01cf183e553

polygerrit-ui/app/elements/change-list/gr-change-list-column-requirements-summary/gr-change-list-column-requirements-summary.ts

diff --git a/polygerrit-ui/app/elements/change-list/gr-change-list-column-requirements-summary/gr-change-list-column-requirements-summary.ts b/polygerrit-ui/app/elements/change-list/gr-change-list-column-requirements-summary/gr-change-list-column-requirements-summary.ts
index 09b56ce..4ac7581 100644
--- a/polygerrit-ui/app/elements/change-list/gr-change-list-column-requirements-summary/gr-change-list-column-requirements-summary.ts
+++ b/polygerrit-ui/app/elements/change-list/gr-change-list-column-requirements-summary/gr-change-list-column-requirements-summary.ts
@@ -9,7 +9,11 @@
 import {customElement, property} from 'lit/decorators';
 import {ChangeInfo, SubmitRequirementStatus} from '../../../api/rest-api';
 import {changeStatuses} from '../../../utils/change-util';
-import {getRequirements, iconForStatus} from '../../../utils/label-util';
+import {
+  getRequirements,
+  iconForStatus,
+  SubmitRequirementsIcon,
+} from '../../../utils/label-util';
 import {submitRequirementsStyles} from '../../../styles/gr-submit-requirements-styles';
 import {pluralize} from '../../../utils/string-util';
 import {iconStyles} from '../../../styles/gr-icon-styles';
@@ -24,13 +28,11 @@
       iconStyles,
       submitRequirementsStyles,
       css`
-        iron-icon {
-          width: var(--line-height-normal, 20px);
-          height: var(--line-height-normal, 20px);
-          vertical-align: top;
+        .material-icon {
+          font-size: var(--line-height-normal, 20px);
         }
-        iron-icon.block,
-        iron-icon.check-circle-filled {
+        .material-icon.block,
+        .material-icon.check_circle {
           margin-right: var(--spacing-xs);
         }
         .material-icon.commentIcon {
@@ -40,9 +42,6 @@
         span {
           line-height: var(--line-height-normal);
         }
-        span.check-circle-filled {
-          color: var(--success-foreground);
-        }
         .unsatisfied {
           color: var(--primary-text-color);
         }
@@ -111,11 +110,17 @@
     );
   }
 
-  renderState(icon: string, aggregation: string | TemplateResult) {
-    return html`<span class=${icon} role="button" tabindex="0">
+  renderState(
+    icon: SubmitRequirementsIcon,
+    aggregation: string | TemplateResult
+  ) {
+    return html`<span class=${icon.icon} role="button" tabindex="0">
       <gr-submit-requirement-dashboard-hovercard .change=${this.change}>
       </gr-submit-requirement-dashboard-hovercard>
-      <iron-icon class=${icon} icon="gr-icons:${icon}" role="img"></iron-icon
+      <span
+        class="material-icon ${icon.icon} ${icon.filled ? 'filled' : ''}"
+        role="img"
+        >${icon.icon}</span
       >${aggregation}</span
     >`;
   }