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/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>
