Merge "gr-checks-run: Replace basic radio button with md-radio"
diff --git a/polygerrit-ui/app/elements/checks/gr-checks-runs.ts b/polygerrit-ui/app/elements/checks/gr-checks-runs.ts
index 5f92d16..54f636e 100644
--- a/polygerrit-ui/app/elements/checks/gr-checks-runs.ts
+++ b/polygerrit-ui/app/elements/checks/gr-checks-runs.ts
@@ -59,6 +59,8 @@
import {when} from 'lit/directives/when.js';
import {changeViewModelToken} from '../../models/views/change';
import {formStyles} from '../../styles/form-styles';
+import '@material/web/radio/radio';
+import {materialStyles} from '../../styles/gr-material-styles';
@customElement('gr-checks-run')
export class GrChecksRun extends LitElement {
@@ -66,6 +68,7 @@
return [
formStyles,
sharedStyles,
+ materialStyles,
css`
:host {
display: block;
@@ -173,7 +176,7 @@
.attemptDetail {
/* This is thick-border (6) + spacing-m (8) + icon (20) + padding. */
padding-left: 39px;
- padding-top: var(--spacing-s);
+ padding-top: var(--spacing-l);
}
.attemptDetail input {
width: 14px;
@@ -320,14 +323,14 @@
.attempt=${attempt as number}
></gr-hovercard-run>`
)}
- <input
- type="radio"
+ <md-radio
id=${id}
name=${`${checkNameId}-attempt-choice`}
- .checked=${selected}
+ ?checked=${selected}
?disabled=${!selected && wasNotRun}
@change=${() => this.handleAttemptChange(attempt)}
- />
+ >
+ </md-radio>
<gr-icon
icon=${icon.name}
class=${icon.name}
diff --git a/polygerrit-ui/app/elements/checks/gr-checks-runs_test.ts b/polygerrit-ui/app/elements/checks/gr-checks-runs_test.ts
index 13a2545..871a598 100644
--- a/polygerrit-ui/app/elements/checks/gr-checks-runs_test.ts
+++ b/polygerrit-ui/app/elements/checks/gr-checks-runs_test.ts
@@ -53,7 +53,7 @@
role="switch"
>
<div>
- <gr-icon icon="chevron_left" class="expandIcon"></gr-icon>
+ <gr-icon class="expandIcon" icon="chevron_left"> </gr-icon>
</div>
</gr-button>
</gr-tooltip-content>
@@ -64,7 +64,8 @@
</div>
<div class="right">
<div class="message">
- Error while fetching results for test-plugin-name: <br />
+ Error while fetching results for test-plugin-name:
+ <br />
test-error-message
</div>
</div>
@@ -76,32 +77,32 @@
/>
<div class="expanded running">
<div class="sectionHeader">
- <gr-icon icon="expand_less" class="expandIcon"></gr-icon>
+ <gr-icon class="expandIcon" icon="expand_less"> </gr-icon>
<h3 class="heading-3">Running / Scheduled (2)</h3>
</div>
<div class="sectionRuns">
- <gr-checks-run></gr-checks-run>
- <gr-checks-run></gr-checks-run>
+ <gr-checks-run> </gr-checks-run>
+ <gr-checks-run> </gr-checks-run>
</div>
</div>
<div class="completed expanded">
<div class="sectionHeader">
- <gr-icon icon="expand_less" class="expandIcon"></gr-icon>
+ <gr-icon class="expandIcon" icon="expand_less"> </gr-icon>
<h3 class="heading-3">Completed (3)</h3>
</div>
<div class="sectionRuns">
- <gr-checks-run></gr-checks-run>
- <gr-checks-run></gr-checks-run>
- <gr-checks-run></gr-checks-run>
+ <gr-checks-run> </gr-checks-run>
+ <gr-checks-run> </gr-checks-run>
+ <gr-checks-run> </gr-checks-run>
</div>
</div>
<div class="expanded runnable">
<div class="sectionHeader">
- <gr-icon icon="expand_less" class="expandIcon"></gr-icon>
+ <gr-icon class="expandIcon" icon="expand_less"> </gr-icon>
<h3 class="heading-3">Not run (1)</h3>
</div>
<div class="sectionRuns">
- <gr-checks-run></gr-checks-run>
+ <gr-checks-run> </gr-checks-run>
</div>
</div>
`,
@@ -216,26 +217,28 @@
<gr-checks-attempt> </gr-checks-attempt>
</div>
<div class="right"></div>
+ </div>
+ <div class="attemptDetails" hidden="">
+ <div class="attemptDetail">
+ <md-radio
+ checked=""
+ id="attempt-latest"
+ name="fakeerrorfinderfinderfinderfinderfinderfinderfinder-attempt-choice"
+ tabindex="0"
+ >
+ </md-radio>
+ <gr-icon icon=""> </gr-icon>
+ <label for="attempt-latest"> Latest Attempt </label>
</div>
- <div class="attemptDetails" hidden="">
- <div class="attemptDetail">
- <input
- id="attempt-latest"
- name="fakeerrorfinderfinderfinderfinderfinderfinderfinder-attempt-choice"
- type="radio"
- />
- <gr-icon icon=""> </gr-icon>
- <label for="attempt-latest"> Latest Attempt </label>
- </div>
- <div class="attemptDetail">
- <input
- id="attempt-all"
- name="fakeerrorfinderfinderfinderfinderfinderfinderfinder-attempt-choice"
- type="radio"
- />
- <gr-icon icon=""> </gr-icon>
- <label for="attempt-all"> All Attempts </label>
- </div>
+ <div class="attemptDetail">
+ <md-radio
+ id="attempt-all"
+ name="fakeerrorfinderfinderfinderfinderfinderfinderfinder-attempt-choice"
+ tabindex="-1"
+ >
+ </md-radio>
+ <gr-icon icon=""> </gr-icon>
+ <label for="attempt-all"> All Attempts </label>
</div>
</div>
`
