Color statuses in change list items Adds a "flat" mode to gr-change-status that changes the styling of the chip to emulate a flat Material button, and uses that element in the change list. Bug: Issue 8362 Change-Id: I23814d2d6e291821ed3c8a90d75b0d4a1d2b1ac3

diff --git a/polygerrit-ui/app/elements/shared/gr-change-status/gr-change-status.html b/polygerrit-ui/app/elements/shared/gr-change-status/gr-change-status.html
index cdd5414..eab0173 100644
--- a/polygerrit-ui/app/elements/shared/gr-change-status/gr-change-status.html
+++ b/polygerrit-ui/app/elements/shared/gr-change-status/gr-change-status.html

@@ -26,7 +26,6 @@
       .chip {
         border-radius: 4px;
         background-color: var(--chip-background-color);
-        color: #fff;
         font-family: var(--font-family);
         font-size: var(--font-size-normal);
         padding: .1em .5em;
@@ -34,27 +33,42 @@
       }
       :host(.merged) .chip {
         background-color: #5b9d52;
+        color: #5b9d52;
       }
       :host(.abandoned) .chip {
         background-color: #afafaf;
+        color: #afafaf;
       }
       :host(.wip) .chip {
         background-color: #8f756c;
+        color: #8f756c;
       }
       :host(.private) .chip {
         background-color: #c17ccf;
+        color: #c17ccf;
       }
       :host(.merge-conflict) .chip {
         background-color: #dc5c60;
+        color: #dc5c60;
       }
       :host(.active) .chip {
         background-color: #29b6f6;
+        color: #29b6f6;
       }
       :host(.ready-to-submit) .chip {
         background-color: #e10ca3;
+        color: #e10ca3;
       }
       :host(.custom) .chip {
         background-color: #825cc2;
+        color: #825cc2;
+      }
+      :host([flat]) .chip {
+        background-color: transparent;
+        padding: .1em;
+      }
+      :host:not([flat]) .chip {
+        color: white;
       }
     </style>
     <gr-tooltip-content
@@ -62,8 +76,11 @@
         position-below
         title="[[tooltipText]]"
         max-width="40em">
-      <div class="chip" aria-label$="Label: [[status]]">
-          [[_computeStatusString(status)]]</div>
+      <div
+          class="chip"
+          aria-label$="Label: [[status]]">
+        [[_computeStatusString(status)]]
+      </div>
     </gr-tooltip-content>
   </template>
   <script src="gr-change-status.js"></script>

diff --git a/polygerrit-ui/app/elements/shared/gr-change-status/gr-change-status.js b/polygerrit-ui/app/elements/shared/gr-change-status/gr-change-status.js
index 991fea3..cd27a28 100644
--- a/polygerrit-ui/app/elements/shared/gr-change-status/gr-change-status.js
+++ b/polygerrit-ui/app/elements/shared/gr-change-status/gr-change-status.js

@@ -33,6 +33,11 @@
     is: 'gr-change-status',
 
     properties: {
+      flat: {
+        type: Boolean,
+        value: false,
+        reflectToAttribute: true,
+      },
       status: {
         type: String,
         observer: '_updateChipDetails',
@@ -44,7 +49,7 @@
     },
 
     _computeStatusString(status) {
-      if (status === ChangeStates.WIP) {
+      if (status === ChangeStates.WIP && !this.flat) {
         return 'Work in Progress';
       }
       return status;

diff --git a/polygerrit-ui/app/elements/shared/gr-change-status/gr-change-status_test.html b/polygerrit-ui/app/elements/shared/gr-change-status/gr-change-status_test.html
index 801249d..212296f 100644
--- a/polygerrit-ui/app/elements/shared/gr-change-status/gr-change-status_test.html
+++ b/polygerrit-ui/app/elements/shared/gr-change-status/gr-change-status_test.html

@@ -52,6 +52,15 @@
       assert.isTrue(element.classList.contains('wip'));
     });
 
+    test('WIP flat', () => {
+      element.flat = true;
+      element.status = 'WIP';
+      assert.equal(element.$$('.chip').innerText, 'WIP');
+      assert.isDefined(element.tooltipText);
+      assert.isTrue(element.classList.contains('wip'));
+      assert.isTrue(element.hasAttribute('flat'));
+    });
+
     test('merged', () => {
       element.status = 'Merged';
       assert.equal(element.$$('.chip').innerText, element.status);