Merge "gr-checks-run: Replace basic radio button with md-radio"
diff --git a/polygerrit-ui/app/elements/shared/gr-comment/gr-comment.ts b/polygerrit-ui/app/elements/shared/gr-comment/gr-comment.ts
index 6308b12..56f5f55 100644
--- a/polygerrit-ui/app/elements/shared/gr-comment/gr-comment.ts
+++ b/polygerrit-ui/app/elements/shared/gr-comment/gr-comment.ts
@@ -95,6 +95,8 @@
} from '../../../services/suggestions/suggestions-service';
import {ResponseCode, SuggestionsProvider} from '../../../api/suggestions';
import {pluginLoaderToken} from '../gr-js-api-interface/gr-plugin-loader';
+import '@material/web/checkbox/checkbox';
+import {materialStyles} from '../../../styles/gr-material-styles';
// visible for testing
export const AUTO_SAVE_DEBOUNCE_DELAY_MS = 2000;
@@ -517,6 +519,7 @@
formStyles,
sharedStyles,
modalStyles,
+ materialStyles,
css`
:host {
display: block;
@@ -591,7 +594,7 @@
margin-left: var(--spacing-s);
}
/* just for a11y */
- input.show-hide {
+ md-checkbox.show-hide {
display: none;
}
label.show-hide {
@@ -874,12 +877,11 @@
return html`
<div class="show-hide" tabindex="0">
<label class="show-hide" aria-label=${ariaLabel}>
- <input
- type="checkbox"
+ <md-checkbox
class="show-hide"
?checked=${!!this.collapsed}
- @change=${() => (this.collapsed = !this.collapsed)}
- />
+ @click=${() => (this.collapsed = !this.collapsed)}
+ ></md-checkbox>
<gr-icon icon=${icon} id="icon"></gr-icon>
</label>
</div>
@@ -1026,12 +1028,11 @@
<div class="leftActions">
<div class="action resolve">
<label>
- <input
- type="checkbox"
+ <md-checkbox
id="resolvedCheckbox"
- .checked=${!this.unresolved}
- @change=${this.handleToggleResolved}
- />
+ ?checked=${!this.unresolved}
+ @click=${this.handleToggleResolved}
+ ></md-checkbox>
Resolved
</label>
</div>
@@ -1178,11 +1179,10 @@
return html`
<div class="action">
<label title=${tooltip} class="suggestEdit">
- <input
- type="checkbox"
+ <md-checkbox
id="generateSuggestCheckbox"
?checked=${this.generateSuggestion}
- @change=${() => {
+ @click=${() => {
this.generateSuggestion = !this.generateSuggestion;
// Reset so suggestion can be re-generated.
this.wasSuggestionEdited = false;
@@ -1213,7 +1213,7 @@
}
);
}}
- />
+ ></md-checkbox>
Attach AI-suggested fix
${when(
this.suggestionLoading,
diff --git a/polygerrit-ui/app/elements/shared/gr-comment/gr-comment_test.ts b/polygerrit-ui/app/elements/shared/gr-comment/gr-comment_test.ts
index 230b1b6..1f5a9eb 100644
--- a/polygerrit-ui/app/elements/shared/gr-comment/gr-comment_test.ts
+++ b/polygerrit-ui/app/elements/shared/gr-comment/gr-comment_test.ts
@@ -98,30 +98,30 @@
initiallyCollapsedElement,
/* HTML */ `
<gr-endpoint-decorator name="comment">
- <gr-endpoint-param name="comment"></gr-endpoint-param>
- <gr-endpoint-param name="editing"></gr-endpoint-param>
- <gr-endpoint-param name="message"></gr-endpoint-param>
- <gr-endpoint-param name="isDraft"></gr-endpoint-param>
+ <gr-endpoint-param name="comment"> </gr-endpoint-param>
+ <gr-endpoint-param name="editing"> </gr-endpoint-param>
+ <gr-endpoint-param name="message"> </gr-endpoint-param>
+ <gr-endpoint-param name="isDraft"> </gr-endpoint-param>
<div class="container" id="container">
<div class="header" id="header">
<div class="headerLeft">
- <gr-account-label deselected=""></gr-account-label>
+ <gr-account-label deselected=""> </gr-account-label>
</div>
<div class="headerMiddle">
<span class="collapsedContent">
This is the test comment message.
</span>
</div>
- <span class="patchset-text">Patchset 1</span>
+ <span class="patchset-text"> Patchset 1 </span>
<div class="show-hide" tabindex="0">
<label aria-label="Expand" class="show-hide">
- <input checked="" class="show-hide" type="checkbox" />
- <gr-icon id="icon" icon="expand_more"></gr-icon>
+ <md-checkbox checked="" class="show-hide"> </md-checkbox>
+ <gr-icon icon="expand_more" id="icon"> </gr-icon>
</label>
</div>
</div>
<div class="body">
- <gr-endpoint-slot name="above-actions"></gr-endpoint-slot>
+ <gr-endpoint-slot name="above-actions"> </gr-endpoint-slot>
</div>
</div>
</gr-endpoint-decorator>
@@ -140,31 +140,31 @@
element,
/* HTML */ `
<gr-endpoint-decorator name="comment">
- <gr-endpoint-param name="comment"></gr-endpoint-param>
- <gr-endpoint-param name="editing"></gr-endpoint-param>
- <gr-endpoint-param name="message"></gr-endpoint-param>
- <gr-endpoint-param name="isDraft"></gr-endpoint-param>
+ <gr-endpoint-param name="comment"> </gr-endpoint-param>
+ <gr-endpoint-param name="editing"> </gr-endpoint-param>
+ <gr-endpoint-param name="message"> </gr-endpoint-param>
+ <gr-endpoint-param name="isDraft"> </gr-endpoint-param>
<div class="container" id="container">
<div class="header" id="header">
<div class="headerLeft">
- <gr-account-label deselected=""></gr-account-label>
+ <gr-account-label deselected=""> </gr-account-label>
</div>
<div class="headerMiddle"></div>
- <span class="patchset-text">Patchset 1</span>
- <span class="separator"></span>
+ <span class="patchset-text"> Patchset 1 </span>
+ <span class="separator"> </span>
<span class="date" tabindex="0">
- <gr-date-formatter withtooltip=""></gr-date-formatter>
+ <gr-date-formatter withtooltip=""> </gr-date-formatter>
</span>
<div class="show-hide" tabindex="0">
<label aria-label="Collapse" class="show-hide">
- <input class="show-hide" type="checkbox" />
- <gr-icon id="icon" icon="expand_less"></gr-icon>
+ <md-checkbox class="show-hide"> </md-checkbox>
+ <gr-icon icon="expand_less" id="icon"> </gr-icon>
</label>
</div>
</div>
<div class="body">
- <gr-formatted-text class="message"></gr-formatted-text>
- <gr-endpoint-slot name="above-actions"></gr-endpoint-slot>
+ <gr-formatted-text class="message"> </gr-formatted-text>
+ <gr-endpoint-slot name="above-actions"> </gr-endpoint-slot>
</div>
</div>
</gr-endpoint-decorator>
@@ -206,10 +206,10 @@
element,
/* HTML */ `
<gr-endpoint-decorator name="comment">
- <gr-endpoint-param name="comment"></gr-endpoint-param>
- <gr-endpoint-param name="editing"></gr-endpoint-param>
- <gr-endpoint-param name="message"></gr-endpoint-param>
- <gr-endpoint-param name="isDraft"></gr-endpoint-param>
+ <gr-endpoint-param name="comment"> </gr-endpoint-param>
+ <gr-endpoint-param name="editing"> </gr-endpoint-param>
+ <gr-endpoint-param name="message"> </gr-endpoint-param>
+ <gr-endpoint-param name="isDraft"> </gr-endpoint-param>
<div class="container draft" id="container">
<div class="header" id="header">
<div class="headerLeft">
@@ -219,31 +219,32 @@
max-width="20em"
title="This draft is only visible to you. To publish drafts, click the 'Reply' or 'Start review' button at the top of the change or press the 'a' key."
>
- <gr-icon filled icon="rate_review"></gr-icon>
- <span class="draftLabel">Draft</span>
+ <gr-icon filled="" icon="rate_review"> </gr-icon>
+ <span class="draftLabel"> Draft </span>
</gr-tooltip-content>
</div>
<div class="headerMiddle"></div>
- <span class="patchset-text">Patchset 1</span>
- <span class="separator"></span>
+ <span class="patchset-text"> Patchset 1 </span>
+ <span class="separator"> </span>
<span class="date" tabindex="0">
- <gr-date-formatter withtooltip=""></gr-date-formatter>
+ <gr-date-formatter withtooltip=""> </gr-date-formatter>
</span>
<div class="show-hide" tabindex="0">
<label aria-label="Collapse" class="show-hide">
- <input class="show-hide" type="checkbox" />
- <gr-icon id="icon" icon="expand_less"></gr-icon>
+ <md-checkbox class="show-hide"> </md-checkbox>
+ <gr-icon icon="expand_less" id="icon"> </gr-icon>
</label>
</div>
</div>
<div class="body">
- <gr-formatted-text class="message"></gr-formatted-text>
- <gr-endpoint-slot name="above-actions"></gr-endpoint-slot>
+ <gr-formatted-text class="message"> </gr-formatted-text>
+ <gr-endpoint-slot name="above-actions"> </gr-endpoint-slot>
<div class="actions">
<div class="leftActions">
<div class="action resolve">
<label>
- <input id="resolvedCheckbox" type="checkbox" />
+ <md-checkbox checked="" id="resolvedCheckbox">
+ </md-checkbox>
Resolved
</label>
</div>
@@ -291,10 +292,10 @@
element,
/* HTML */ `
<gr-endpoint-decorator name="comment">
- <gr-endpoint-param name="comment"></gr-endpoint-param>
- <gr-endpoint-param name="editing"></gr-endpoint-param>
- <gr-endpoint-param name="message"></gr-endpoint-param>
- <gr-endpoint-param name="isDraft"></gr-endpoint-param>
+ <gr-endpoint-param name="comment"> </gr-endpoint-param>
+ <gr-endpoint-param name="editing"> </gr-endpoint-param>
+ <gr-endpoint-param name="message"> </gr-endpoint-param>
+ <gr-endpoint-param name="isDraft"> </gr-endpoint-param>
<div class="container draft" id="container">
<div class="header" id="header">
<div class="headerLeft">
@@ -304,8 +305,8 @@
max-width="20em"
title="This draft is only visible to you. To publish drafts, click the 'Reply' or 'Start review' button at the top of the change or press the 'a' key."
>
- <gr-icon filled icon="rate_review"></gr-icon>
- <span class="draftLabel">Draft</span>
+ <gr-icon filled="" icon="rate_review"> </gr-icon>
+ <span class="draftLabel"> Draft </span>
</gr-tooltip-content>
</div>
<div class="headerMiddle"></div>
@@ -320,15 +321,15 @@
<gr-icon filled="" icon="edit" id="icon"> </gr-icon>
Suggest Edit
</gr-button>
- <span class="patchset-text">Patchset 1</span>
- <span class="separator"></span>
+ <span class="patchset-text"> Patchset 1 </span>
+ <span class="separator"> </span>
<span class="date" tabindex="0">
- <gr-date-formatter withtooltip=""></gr-date-formatter>
+ <gr-date-formatter withtooltip=""> </gr-date-formatter>
</span>
<div class="show-hide" tabindex="0">
<label aria-label="Collapse" class="show-hide">
- <input class="show-hide" type="checkbox" />
- <gr-icon id="icon" icon="expand_less"></gr-icon>
+ <md-checkbox class="show-hide"> </md-checkbox>
+ <gr-icon icon="expand_less" id="icon"> </gr-icon>
</label>
</div>
</div>
@@ -342,12 +343,13 @@
rows="4"
>
</gr-suggestion-textarea>
- <gr-endpoint-slot name="above-actions"></gr-endpoint-slot>
+ <gr-endpoint-slot name="above-actions"> </gr-endpoint-slot>
<div class="actions">
<div class="leftActions">
<div class="action resolve">
<label>
- <input id="resolvedCheckbox" type="checkbox" />
+ <md-checkbox checked="" id="resolvedCheckbox">
+ </md-checkbox>
Resolved
</label>
</div>
diff --git a/polygerrit-ui/app/elements/shared/gr-fix-suggestions/gr-fix-suggestions.ts b/polygerrit-ui/app/elements/shared/gr-fix-suggestions/gr-fix-suggestions.ts
index 66aafbb..1e02b29 100644
--- a/polygerrit-ui/app/elements/shared/gr-fix-suggestions/gr-fix-suggestions.ts
+++ b/polygerrit-ui/app/elements/shared/gr-fix-suggestions/gr-fix-suggestions.ts
@@ -30,6 +30,8 @@
import {stringToReplacements} from '../../../utils/comment-util';
import {ReportSource} from '../../../services/suggestions/suggestions-service';
import {getFileExtension} from '../../../utils/file-util';
+import '@material/web/checkbox/checkbox';
+import {materialStyles} from '../../../styles/gr-material-styles';
export const COLLAPSE_SUGGESTION_STORAGE_KEY = 'collapseSuggestionStorageKey';
@@ -143,6 +145,7 @@
static override get styles() {
return [
+ materialStyles,
css`
:host {
display: block;
@@ -154,7 +157,7 @@
margin-left: var(--spacing-s);
}
/* just for a11y */
- input.show-hide {
+ md-checkbox.show-hide {
display: none;
}
label.show-hide {
@@ -360,11 +363,10 @@
return html`
<div class="show-hide" tabindex="0">
<label class="show-hide" aria-label=${ariaLabel}>
- <input
- type="checkbox"
+ <md-checkbox
class="show-hide"
- .checked=${this.collapsed}
- @change=${() => {
+ ?checked=${this.collapsed}
+ @click=${() => {
this.collapsed = !this.collapsed;
if (this.collapsed) {
this.reporting.reportInteraction(
@@ -382,7 +384,7 @@
);
}
}}
- />
+ ></md-checkbox>
<gr-icon icon=${icon} id="icon"></gr-icon>
</label>
</div>
diff --git a/polygerrit-ui/app/styles/gr-material-styles.ts b/polygerrit-ui/app/styles/gr-material-styles.ts
index 0045108..0621432 100644
--- a/polygerrit-ui/app/styles/gr-material-styles.ts
+++ b/polygerrit-ui/app/styles/gr-material-styles.ts
@@ -95,6 +95,7 @@
/* These colours come from paper-checkbox */
md-checkbox {
+ background-color: var(--background-color-primary);
--md-sys-color-primary: var(--checkbox-primary);
--md-sys-color-on-primary: var(--checkbox-on-primary);
--md-sys-color-on-surface: var(--checkbox-on-surface);
