Fix a couple of layout issues caused by tooltip and gr-button migrations
When gr-button was migrated to Lit it was missed that @apply does not
work in static styles, so those styles should have been put into the
render() method, which is a workaround that is already in place in
various other Lit elements. But we want to get rid of css mixins anyway.
So I took the opportunity in this change to get rid of the --gr-button
mixin altogether, because it was clear that I would have to make a
careful pass over the entire UI anyway with pixel by pixel comparison.
So this ended up also fixing a couple of unrelated issues that were
recently broken. I have basically just opened gerrit-review and compared
against the Dev Helper version, and worked my way through most of the
important pages and widgets until I reached nearly pixel perfect
identity.
gr-button being inline-block inside gr-tooltip-content is a bit
unfortunate. gr-button would probably be easier to deal with, if it had
display:block, but that is a change for another day.
Change-Id: I7d3e57a43148000053ef63232dcb1945c1ad40be
diff --git a/polygerrit-ui/app/elements/admin/gr-admin-view/gr-admin-view_html.ts b/polygerrit-ui/app/elements/admin/gr-admin-view/gr-admin-view_html.ts
index 70e146f..a3afc5c 100644
--- a/polygerrit-ui/app/elements/admin/gr-admin-view/gr-admin-view_html.ts
+++ b/polygerrit-ui/app/elements/admin/gr-admin-view/gr-admin-view_html.ts
@@ -24,11 +24,6 @@
/* Workaround for empty style block - see https://github.com/Polymer/tools/issues/408 */
</style>
<style include="gr-page-nav-styles">
- gr-dropdown-list {
- --trigger-style: {
- text-transform: none;
- }
- }
.breadcrumbText {
/* Same as dropdown trigger so chevron spacing is consistent. */
padding: 5px 4px;
diff --git a/polygerrit-ui/app/elements/change-list/gr-change-list-item/gr-change-list-item_html.ts b/polygerrit-ui/app/elements/change-list/gr-change-list-item/gr-change-list-item_html.ts
index e1013e1..a9b4ece 100644
--- a/polygerrit-ui/app/elements/change-list/gr-change-list-item/gr-change-list-item_html.ts
+++ b/polygerrit-ui/app/elements/change-list/gr-change-list-item/gr-change-list-item_html.ts
@@ -273,7 +273,7 @@
<gr-date-formatter
withTooltip
forceRelative
- relativeOptionNoAge
+ relativeOptionNoAgo
date-str="[[_computeWaiting(account, change)]]"
></gr-date-formatter>
</td>
diff --git a/polygerrit-ui/app/elements/change-list/gr-dashboard-view/gr-dashboard-view_html.ts b/polygerrit-ui/app/elements/change-list/gr-dashboard-view/gr-dashboard-view_html.ts
index 4778890..a55befb 100644
--- a/polygerrit-ui/app/elements/change-list/gr-dashboard-view/gr-dashboard-view_html.ts
+++ b/polygerrit-ui/app/elements/change-list/gr-dashboard-view/gr-dashboard-view_html.ts
@@ -42,11 +42,6 @@
justify-content: space-between;
padding: var(--spacing-xs) var(--spacing-l);
}
- .banner gr-button {
- --gr-button: {
- color: var(--primary-text-color);
- }
- }
.hide {
display: none;
}
diff --git a/polygerrit-ui/app/elements/change/gr-change-actions/gr-change-actions_html.ts b/polygerrit-ui/app/elements/change/gr-change-actions/gr-change-actions_html.ts
index b5f55ca..d21c29f 100644
--- a/polygerrit-ui/app/elements/change/gr-change-actions/gr-change-actions_html.ts
+++ b/polygerrit-ui/app/elements/change/gr-change-actions/gr-change-actions_html.ts
@@ -33,6 +33,9 @@
/* px because don't have the same font size */
margin-left: 8px;
}
+ gr-button {
+ display: block;
+ }
#actionLoadingMessage {
align-items: center;
color: var(--deemphasized-text-color);
@@ -57,10 +60,8 @@
flex-wrap: wrap;
}
gr-button {
- --gr-button: {
- padding: var(--spacing-m);
- white-space: nowrap;
- }
+ --gr-button-padding: var(--spacing-m);
+ white-space: nowrap;
}
gr-button,
gr-dropdown {
diff --git a/polygerrit-ui/app/elements/change/gr-change-summary/gr-change-summary.ts b/polygerrit-ui/app/elements/change/gr-change-summary/gr-change-summary.ts
index 831a309..771f666 100644
--- a/polygerrit-ui/app/elements/change/gr-change-summary/gr-change-summary.ts
+++ b/polygerrit-ui/app/elements/change/gr-change-summary/gr-change-summary.ts
@@ -514,7 +514,7 @@
.actions gr-checks-action,
.actions gr-dropdown {
vertical-align: top;
- --padding: 0 var(--spacing-m);
+ --gr-button-padding: 0 var(--spacing-m);
}
.actions #moreMessage {
display: none;
diff --git a/polygerrit-ui/app/elements/change/gr-file-list-header/gr-file-list-header_html.ts b/polygerrit-ui/app/elements/change/gr-file-list-header/gr-file-list-header_html.ts
index 85f0330..651a640 100644
--- a/polygerrit-ui/app/elements/change/gr-file-list-header/gr-file-list-header_html.ts
+++ b/polygerrit-ui/app/elements/change/gr-file-list-header/gr-file-list-header_html.ts
@@ -93,9 +93,7 @@
}
.fileViewActions gr-button {
margin: 0;
- --gr-button: {
- padding: 2px 4px;
- }
+ --gr-button-padding: 2px 4px;
}
.editMode .hideOnEdit {
display: none;
diff --git a/polygerrit-ui/app/elements/change/gr-file-list/gr-file-list_html.ts b/polygerrit-ui/app/elements/change/gr-file-list/gr-file-list_html.ts
index 35f01d8..f7be36b 100644
--- a/polygerrit-ui/app/elements/change/gr-file-list/gr-file-list_html.ts
+++ b/polygerrit-ui/app/elements/change/gr-file-list/gr-file-list_html.ts
@@ -256,9 +256,7 @@
display: inline-block;
visibility: hidden;
vertical-align: bottom;
- --gr-button: {
- padding: 0px;
- }
+ --gr-button-padding: 0px;
}
.row:focus-within gr-copy-clipboard,
.row:hover gr-copy-clipboard {
diff --git a/polygerrit-ui/app/elements/change/gr-message/gr-message_html.ts b/polygerrit-ui/app/elements/change/gr-message/gr-message_html.ts
index c9680ef..7f3e9de 100644
--- a/polygerrit-ui/app/elements/change/gr-message/gr-message_html.ts
+++ b/polygerrit-ui/app/elements/change/gr-message/gr-message_html.ts
@@ -132,7 +132,7 @@
}
.dateContainer .patchsetDiffButton {
margin-right: var(--spacing-m);
- --padding: 0 var(--spacing-m);
+ --gr-button-padding: 0 var(--spacing-m);
}
span.date {
color: var(--deemphasized-text-color);
diff --git a/polygerrit-ui/app/elements/change/gr-reply-dialog/gr-reply-dialog_html.ts b/polygerrit-ui/app/elements/change/gr-reply-dialog/gr-reply-dialog_html.ts
index 1973fe6..0beb91c 100644
--- a/polygerrit-ui/app/elements/change/gr-reply-dialog/gr-reply-dialog_html.ts
+++ b/polygerrit-ui/app/elements/change/gr-reply-dialog/gr-reply-dialog_html.ts
@@ -177,7 +177,7 @@
}
.attention .edit-attention-button {
vertical-align: top;
- --padding: 0px 4px;
+ --gr-button-padding: 0px 4px;
}
.attention .edit-attention-button iron-icon {
color: inherit;
diff --git a/polygerrit-ui/app/elements/change/gr-reviewer-list/gr-reviewer-list_html.ts b/polygerrit-ui/app/elements/change/gr-reviewer-list/gr-reviewer-list_html.ts
index b081be7..d115899 100644
--- a/polygerrit-ui/app/elements/change/gr-reviewer-list/gr-reviewer-list_html.ts
+++ b/polygerrit-ui/app/elements/change/gr-reviewer-list/gr-reviewer-list_html.ts
@@ -42,15 +42,13 @@
display: inline-block;
}
gr-button.addReviewer {
- --padding: 1px 4px;
+ --gr-button-padding: 1px 0px;
vertical-align: top;
top: 1px;
}
gr-button {
line-height: var(--line-height-normal);
- --gr-button: {
- padding: 0px 0px;
- }
+ --gr-button-padding: 0px;
}
gr-account-chip {
line-height: var(--line-height-normal);
diff --git a/polygerrit-ui/app/elements/change/gr-thread-list/gr-thread-list_html.ts b/polygerrit-ui/app/elements/change/gr-thread-list/gr-thread-list_html.ts
index 6ed5a2c..3eb28c9 100644
--- a/polygerrit-ui/app/elements/change/gr-thread-list/gr-thread-list_html.ts
+++ b/polygerrit-ui/app/elements/change/gr-thread-list/gr-thread-list_html.ts
@@ -51,11 +51,8 @@
margin-right: var(--spacing-s);
}
gr-dropdown-list {
- --trigger-style: {
- color: var(--primary-text-color);
- text-transform: none;
- font-family: var(--font-family);
- }
+ --trigger-style-text-color: var(--primary-text-color);
+ --trigger-style-font-family: var(--font-family);
}
.filter-text, .sort-text, .author-text {
margin-right: var(--spacing-s);
diff --git a/polygerrit-ui/app/elements/checks/gr-checks-action.ts b/polygerrit-ui/app/elements/checks/gr-checks-action.ts
index aed07e0..558ec56 100644
--- a/polygerrit-ui/app/elements/checks/gr-checks-action.ts
+++ b/polygerrit-ui/app/elements/checks/gr-checks-action.ts
@@ -43,7 +43,7 @@
white-space: nowrap;
}
gr-button {
- --padding: var(--spacing-s) var(--spacing-m);
+ --gr-button-padding: var(--spacing-s) var(--spacing-m);
}
paper-tooltip {
text-transform: none;
diff --git a/polygerrit-ui/app/elements/checks/gr-checks-results.ts b/polygerrit-ui/app/elements/checks/gr-checks-results.ts
index 68c7957..245660d 100644
--- a/polygerrit-ui/app/elements/checks/gr-checks-results.ts
+++ b/polygerrit-ui/app/elements/checks/gr-checks-results.ts
@@ -816,6 +816,7 @@
}
.headerTopRow .right .goToLatest gr-button {
margin-right: var(--spacing-m);
+ --gr-button-padding: var(--spacing-s) var(--spacing-m);
}
.headerBottomRow iron-icon {
color: var(--link-color);
@@ -975,23 +976,11 @@
}
override render() {
- // To pass CSS mixins for @apply to Polymer components, they need to appear
- // in <style> inside the template.
- /* eslint-disable lit/prefer-static-styles */
- const style = html`<style>
- .headerTopRow .right .goToLatest gr-button {
- --gr-button: {
- padding: var(--spacing-s) var(--spacing-m);
- text-transform: none;
- }
- }
- </style>`;
const headerClasses = classMap({
header: true,
notLatest: !!this.checksPatchsetNumber,
});
- return html`${style}
- <div class="${headerClasses}">
+ return html` <div class="${headerClasses}">
<div class="headerTopRow">
<div class="left">
<h2 class="heading-2">Results</h2>
diff --git a/polygerrit-ui/app/elements/checks/gr-checks-runs.ts b/polygerrit-ui/app/elements/checks/gr-checks-runs.ts
index 76fa353..4cb87bd 100644
--- a/polygerrit-ui/app/elements/checks/gr-checks-runs.ts
+++ b/polygerrit-ui/app/elements/checks/gr-checks-runs.ts
@@ -426,11 +426,11 @@
flex-grow: 1;
}
.title gr-button {
- --padding: var(--spacing-s) var(--spacing-m);
+ --gr-button-padding: var(--spacing-s) var(--spacing-m);
white-space: nowrap;
}
.title gr-button.expandButton {
- --padding: var(--spacing-xs) var(--spacing-s);
+ --gr-button-padding: var(--spacing-xs) var(--spacing-s);
}
:host(:not([collapsed])) .expandButton {
margin-right: calc(0px - var(--spacing-m));
diff --git a/polygerrit-ui/app/elements/core/gr-account-dropdown/gr-account-dropdown.ts b/polygerrit-ui/app/elements/core/gr-account-dropdown/gr-account-dropdown.ts
index c2066d7..eb55177 100644
--- a/polygerrit-ui/app/elements/core/gr-account-dropdown/gr-account-dropdown.ts
+++ b/polygerrit-ui/app/elements/core/gr-account-dropdown/gr-account-dropdown.ts
@@ -82,6 +82,7 @@
css`
gr-dropdown {
padding: 0 var(--spacing-m);
+ --gr-button-text-color: var(--header-text-color);
}
gr-avatar {
height: 2em;
@@ -99,9 +100,6 @@
const customStyle = html`
<style>
gr-dropdown {
- --gr-button: {
- color: var(--header-text-color);
- }
--gr-dropdown-item: {
color: var(--primary-text-color);
}
diff --git a/polygerrit-ui/app/elements/diff/gr-diff-view/gr-diff-view_html.ts b/polygerrit-ui/app/elements/diff/gr-diff-view/gr-diff-view_html.ts
index 4f1047f..b25be5a8 100644
--- a/polygerrit-ui/app/elements/diff/gr-diff-view/gr-diff-view_html.ts
+++ b/polygerrit-ui/app/elements/diff/gr-diff-view/gr-diff-view_html.ts
@@ -141,11 +141,6 @@
.separator.hide {
display: none;
}
- gr-dropdown-list {
- --trigger-style: {
- text-transform: none;
- }
- }
.editButtona a {
text-decoration: none;
}
diff --git a/polygerrit-ui/app/elements/diff/gr-patch-range-select/gr-patch-range-select_html.ts b/polygerrit-ui/app/elements/diff/gr-patch-range-select/gr-patch-range-select_html.ts
index ebbb0d6..26944a4 100644
--- a/polygerrit-ui/app/elements/diff/gr-patch-range-select/gr-patch-range-select_html.ts
+++ b/polygerrit-ui/app/elements/diff/gr-patch-range-select/gr-patch-range-select_html.ts
@@ -33,11 +33,8 @@
margin: 0 var(--spacing-m);
}
gr-dropdown-list {
- --trigger-style: {
- color: var(--deemphasized-text-color);
- text-transform: none;
- font-family: var(--font-family);
- }
+ --trigger-style-text-color: var(--deemphasized-text-color);
+ --trigger-style-font-family: var(--font-family);
}
@media screen and (max-width: 50em) {
.filesWeblinks {
diff --git a/polygerrit-ui/app/elements/edit/gr-edit-file-controls/gr-edit-file-controls.ts b/polygerrit-ui/app/elements/edit/gr-edit-file-controls/gr-edit-file-controls.ts
index db45c33..418c368 100644
--- a/polygerrit-ui/app/elements/edit/gr-edit-file-controls/gr-edit-file-controls.ts
+++ b/polygerrit-ui/app/elements/edit/gr-edit-file-controls/gr-edit-file-controls.ts
@@ -49,6 +49,9 @@
display: flex;
justify-content: flex-end;
}
+ gr-dropdown {
+ --gr-button-padding: var(--spacing-xs) var(--spacing-s);
+ }
#actions {
margin-right: var(--spacing-l);
}
@@ -62,12 +65,6 @@
/* eslint-disable lit/prefer-static-styles */
const customStyle = html`
<style>
- gr-button,
- gr-dropdown {
- --gr-button: {
- height: 1.8em;
- }
- }
gr-dropdown {
--gr-dropdown-item: {
background-color: transparent;
diff --git a/polygerrit-ui/app/elements/shared/gr-alert/gr-alert.ts b/polygerrit-ui/app/elements/shared/gr-alert/gr-alert.ts
index ae3853e..6036a99 100644
--- a/polygerrit-ui/app/elements/shared/gr-alert/gr-alert.ts
+++ b/polygerrit-ui/app/elements/shared/gr-alert/gr-alert.ts
@@ -78,6 +78,7 @@
font-weight: var(--font-weight-bold);
margin-left: var(--spacing-l);
text-decoration: none;
+ --gr-button-padding: 0;
}
`,
];
@@ -94,18 +95,8 @@
}
override render() {
- // To pass CSS mixins for @apply to Polymer components, they need to appear
- // in <style> inside the template.
- /* eslint-disable lit/prefer-static-styles */
- const style = html`<style>
- .action {
- --gr-button: {
- padding: 0;
- }
- }
- </style>`;
const {text, actionText} = this;
- return html`${style}
+ return html`
<div class="content-wrapper">
<span class="text">${text}</span>
<gr-button
@@ -116,7 +107,8 @@
>${actionText}
</gr-button>
${this.renderDismissButton()}
- </div> `;
+ </div>
+ `;
}
/**
diff --git a/polygerrit-ui/app/elements/shared/gr-button/gr-button.ts b/polygerrit-ui/app/elements/shared/gr-button/gr-button.ts
index 4467ba6..7017c9c 100644
--- a/polygerrit-ui/app/elements/shared/gr-button/gr-button.ts
+++ b/polygerrit-ui/app/elements/shared/gr-button/gr-button.ts
@@ -72,7 +72,10 @@
--button-background-color,
var(--default-button-background-color)
);
- --text-color: var(--default-button-text-color);
+ --text-color: var(
+ --gr-button-text-color,
+ var(--default-button-text-color)
+ );
display: inline-block;
position: relative;
}
@@ -83,40 +86,6 @@
text-transform: none;
}
paper-button {
- /* The next lines contains a copy of paper-button style.
- Without a copy, the @apply works incorrectly with Polymer 2.
- @apply is deprecated and is not recommended to use. It is expected
- that @apply will be replaced with the ::part CSS pseudo-element.
- After replacement copied lines can be removed.
- */
- @apply --layout-inline;
- @apply --layout-center-center;
- position: relative;
- box-sizing: border-box;
- min-width: 5.14em;
- margin: 0 0.29em;
- background: transparent;
- -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
- -webkit-tap-highlight-color: transparent;
- font: inherit;
- text-transform: uppercase;
- outline-width: 0;
- border-top-left-radius: var(--border-radius);
- border-top-right-radius: var(--border-radius);
- border-bottom-right-radius: var(--border-radius);
- border-bottom-left-radius: var(--border-radius);
- -moz-user-select: none;
- -ms-user-select: none;
- -webkit-user-select: none;
- user-select: none;
- cursor: pointer;
- z-index: 0;
- padding: var(--spacing-m);
-
- @apply --paper-font-common-base;
- @apply --paper-button;
- /* End of copy*/
-
/* paper-button sets this to anti-aliased, which appears different than
bold font elsewhere on macOS. */
-webkit-font-smoothing: initial;
@@ -128,27 +97,23 @@
justify-content: center;
margin: var(--margin, 0);
min-width: var(--border, 0);
- padding: var(--padding, 4px 8px);
- @apply --gr-button;
+ padding: var(--gr-button-padding, var(--spacing-s) var(--spacing-m));
}
- /* https://github.com/PolymerElements/paper-button/blob/2.x/paper-button.html */
- /* BEGIN: Copy from paper-button */
paper-button[elevation='1'] {
- @apply --paper-material-elevation-1;
+ box-shadow: var(--elevation-level-1);
}
paper-button[elevation='2'] {
- @apply --paper-material-elevation-2;
+ box-shadow: var(--elevation-level-2);
}
paper-button[elevation='3'] {
- @apply --paper-material-elevation-3;
+ box-shadow: var(--elevation-level-3);
}
paper-button[elevation='4'] {
- @apply --paper-material-elevation-4;
+ box-shadow: var(--elevation-level-4);
}
paper-button[elevation='5'] {
- @apply --paper-material-elevation-5;
+ box-shadow: var(--elevation-level-5);
}
- /* END: Copy from paper-button */
paper-button:hover {
background: linear-gradient(rgba(0, 0, 0, 0.12), rgba(0, 0, 0, 0.12)),
var(--background-color);
@@ -192,7 +157,9 @@
:host([link]) {
--background-color: transparent;
--margin: 0;
- --padding: var(--spacing-s);
+ }
+ :host([link]) paper-button {
+ padding: var(--gr-button-padding, var(--spacing-s));
}
:host([disabled][link]),
:host([loading][link]) {
diff --git a/polygerrit-ui/app/elements/shared/gr-comment/gr-comment_html.ts b/polygerrit-ui/app/elements/shared/gr-comment/gr-comment_html.ts
index d1496fb..ee4c02f 100644
--- a/polygerrit-ui/app/elements/shared/gr-comment/gr-comment_html.ts
+++ b/polygerrit-ui/app/elements/shared/gr-comment/gr-comment_html.ts
@@ -89,10 +89,7 @@
justify-content: flex-end;
}
.rightActions gr-button {
- --gr-button: {
- height: 20px;
- padding: 0 var(--spacing-s);
- }
+ --gr-button-padding: 0 var(--spacing-s);
}
.editMessage {
display: none;
@@ -190,10 +187,8 @@
}
#deleteBtn {
display: none;
- --gr-button: {
- color: var(--deemphasized-text-color);
- padding: 0;
- }
+ --gr-button-text-color: var(--deemphasized-text-color);
+ --gr-button-padding: 0;
}
#deleteBtn.showDeleteButtons {
display: block;
diff --git a/polygerrit-ui/app/elements/shared/gr-copy-clipboard/gr-copy-clipboard.ts b/polygerrit-ui/app/elements/shared/gr-copy-clipboard/gr-copy-clipboard.ts
index 0cd522a..38b1e9f 100644
--- a/polygerrit-ui/app/elements/shared/gr-copy-clipboard/gr-copy-clipboard.ts
+++ b/polygerrit-ui/app/elements/shared/gr-copy-clipboard/gr-copy-clipboard.ts
@@ -81,29 +81,19 @@
iron-icon {
color: var(--deemphasized-text-color);
vertical-align: top;
+ --iron-icon-height: 20px;
+ --iron-icon-width: 20px;
+ }
+ gr-button {
+ display: block;
+ --gr-button-padding: 2px;
}
`,
];
}
override render() {
- // To pass CSS mixins for @apply to Polymer components, they need to appear
- // in <style> inside the template.
- /* eslint-disable lit/prefer-static-styles */
- const customStyle = html`
- <style>
- iron-icon {
- --iron-icon-height: 20px;
- --iron-icon-width: 20px;
- }
- gr-button {
- --gr-button: {
- padding: 2px;
- }
- }
- </style>
- `;
- return html`${customStyle}
+ return html`
<div class="text">
<iron-input
class="copyText"
@@ -137,7 +127,8 @@
<iron-icon id="icon" icon="gr-icons:content-copy"></iron-icon>
</gr-button>
</gr-tooltip-content>
- </div> `;
+ </div>
+ `;
}
focusOnCopy() {
diff --git a/polygerrit-ui/app/elements/shared/gr-dropdown-list/gr-dropdown-list_html.ts b/polygerrit-ui/app/elements/shared/gr-dropdown-list/gr-dropdown-list_html.ts
index 9ec1d39..2ff1936 100644
--- a/polygerrit-ui/app/elements/shared/gr-dropdown-list/gr-dropdown-list_html.ts
+++ b/polygerrit-ui/app/elements/shared/gr-dropdown-list/gr-dropdown-list_html.ts
@@ -78,9 +78,8 @@
width: 100%;
}
gr-button {
- --gr-button: {
- @apply --trigger-style;
- }
+ font-family: var(--trigger-style-font-family);
+ --gr-button-text-color: var(--trigger-style-text-color);
}
gr-date-formatter {
color: var(--deemphasized-text-color);
diff --git a/polygerrit-ui/app/elements/shared/gr-dropdown/gr-dropdown_html.ts b/polygerrit-ui/app/elements/shared/gr-dropdown/gr-dropdown_html.ts
index 4bd98d6..3c07d94 100644
--- a/polygerrit-ui/app/elements/shared/gr-dropdown/gr-dropdown_html.ts
+++ b/polygerrit-ui/app/elements/shared/gr-dropdown/gr-dropdown_html.ts
@@ -33,7 +33,6 @@
}
gr-button {
vertical-align: top;
- @apply --gr-button;
}
gr-avatar {
height: 2em;
diff --git a/polygerrit-ui/app/elements/shared/gr-editable-label/gr-editable-label_html.ts b/polygerrit-ui/app/elements/shared/gr-editable-label/gr-editable-label_html.ts
index c303bed..e711e9d 100644
--- a/polygerrit-ui/app/elements/shared/gr-editable-label/gr-editable-label_html.ts
+++ b/polygerrit-ui/app/elements/shared/gr-editable-label/gr-editable-label_html.ts
@@ -72,7 +72,7 @@
--iron-icon-width: 18px;
}
gr-button.pencil {
- --padding: 0px 0px;
+ --gr-button-padding: 0px 0px;
}
</style>
<template is="dom-if" if="[[!showAsEditPencil]]">
diff --git a/polygerrit-ui/app/elements/shared/gr-hovercard-account/gr-hovercard-account_html.ts b/polygerrit-ui/app/elements/shared/gr-hovercard-account/gr-hovercard-account_html.ts
index 076553b..adca888 100644
--- a/polygerrit-ui/app/elements/shared/gr-hovercard-account/gr-hovercard-account_html.ts
+++ b/polygerrit-ui/app/elements/shared/gr-hovercard-account/gr-hovercard-account_html.ts
@@ -45,9 +45,7 @@
.action {
border-top: 1px solid var(--border-color);
padding: var(--spacing-s) var(--spacing-l);
- --gr-button: {
- padding: var(--spacing-s) var(--spacing-m);
- }
+ --gr-button-padding: var(--spacing-s) var(--spacing-m);
}
.attention {
background-color: var(--emphasis-color);
diff --git a/polygerrit-ui/app/elements/shared/gr-label-info/gr-label-info_html.ts b/polygerrit-ui/app/elements/shared/gr-label-info/gr-label-info_html.ts
index 552bd08..1186ee1 100644
--- a/polygerrit-ui/app/elements/shared/gr-label-info/gr-label-info_html.ts
+++ b/polygerrit-ui/app/elements/shared/gr-label-info/gr-label-info_html.ts
@@ -65,13 +65,13 @@
tr {
min-height: var(--line-height-normal);
}
+ gr-tooltip-content {
+ display: block;
+ }
gr-button {
+ display: block;
vertical-align: top;
- --gr-button: {
- height: var(--line-height-normal);
- width: var(--line-height-normal);
- padding: 0;
- }
+ --gr-button-padding: 1px;
}
gr-button[disabled] iron-icon {
color: var(--border-color);
diff --git a/polygerrit-ui/app/elements/shared/gr-tooltip-content/gr-tooltip-content.ts b/polygerrit-ui/app/elements/shared/gr-tooltip-content/gr-tooltip-content.ts
index 2b9a868..0585aec8 100644
--- a/polygerrit-ui/app/elements/shared/gr-tooltip-content/gr-tooltip-content.ts
+++ b/polygerrit-ui/app/elements/shared/gr-tooltip-content/gr-tooltip-content.ts
@@ -40,7 +40,7 @@
@property({type: String, attribute: 'max-width', reflect: true})
maxWidth?: string;
- @property({type: Boolean})
+ @property({type: Boolean, attribute: 'show-icon'})
showIcon = false;
// Should be private but used in tests.
