Fix problems with applying css-styles to elements
In polymer 2 some styles processed differently. For example @apply
is deprecated and sometimes final style is different than in Polymer 1.
In the future, @apply should be removed - see Issue 11277.
Bug: Issue 11163
Change-Id: I46f3787a1323b1468c7896451d7a725020fc88fd
diff --git a/polygerrit-ui/app/elements/shared/gr-account-chip/gr-account-chip.html b/polygerrit-ui/app/elements/shared/gr-account-chip/gr-account-chip.html
index 6de10a3..9a7d3f9 100644
--- a/polygerrit-ui/app/elements/shared/gr-account-chip/gr-account-chip.html
+++ b/polygerrit-ui/app/elements/shared/gr-account-chip/gr-account-chip.html
@@ -39,14 +39,8 @@
:host([show-avatar]) .container {
padding-left: 0;
}
- gr-button.remove:hover,
- gr-button.remove:focus {
- --gr-button: {
- color: #333;
- }
- }
gr-button.remove {
- --gr-button: {
+ --gr-remove-button-style: {
border: 0;
color: var(--deemphasized-text-color);
font-size: 1.7rem;
@@ -58,6 +52,19 @@
text-decoration: none;
}
}
+
+ gr-button.remove:hover,
+ gr-button.remove:focus {
+ --gr-button: {
+ @apply --gr-remove-button-style
+ color: #333;
+ }
+ }
+ gr-button.remove {
+ --gr-button: {
+ @apply --gr-remove-button-style
+ }
+ }
:host:focus {
border-color: transparent;
box-shadow: none;
diff --git a/polygerrit-ui/app/elements/shared/gr-autocomplete/gr-autocomplete.html b/polygerrit-ui/app/elements/shared/gr-autocomplete/gr-autocomplete.html
index ac739c3..41335a3 100644
--- a/polygerrit-ui/app/elements/shared/gr-autocomplete/gr-autocomplete.html
+++ b/polygerrit-ui/app/elements/shared/gr-autocomplete/gr-autocomplete.html
@@ -75,14 +75,31 @@
on-focus="_onInputFocus"
on-blur="_onInputBlur"
autocomplete="off">
- <!-- slot is for future use (2.x) while prefix attribute is for 1.x
- (current) -->
- <iron-icon
- icon="gr-icons:search"
- slot="prefix"
+
+ <template is="dom-if" if="[[_isPolymer2()]]">
+ <!-- Content uses vertical-align:baseline. If iron-icon is placed
+ directly in the slot and is not visible, vertical-align doesn't
+ work, because display:none convert it from inline-block element to
+ block element. To fix this problem, iron-icon is wrapped in div
+ which never changes display type.
+ The problem doesn't exist in Polymer1 because DOM is different.
+ Applying the same fix to Polymer1 breaks vertical-align.
+ -->
+ <div slot="prefix">
+ <iron-icon
+ icon="gr-icons:search"
+ class$="searchIcon [[_computeShowSearchIconClass(showSearchIcon)]]">
+ </iron-icon>
+ </div>
+ </template>
+ <template is="dom-if" if="[[!_isPolymer2()]]">
+ <iron-icon
prefix
+ icon="gr-icons:search"
class$="searchIcon [[_computeShowSearchIconClass(showSearchIcon)]]">
- </iron-icon>
+ </iron-icon>
+ </template>
+
</paper-input>
<gr-autocomplete-dropdown
vertical-align="top"
diff --git a/polygerrit-ui/app/elements/shared/gr-autocomplete/gr-autocomplete.js b/polygerrit-ui/app/elements/shared/gr-autocomplete/gr-autocomplete.js
index 76e14a7..adfb0a6 100644
--- a/polygerrit-ui/app/elements/shared/gr-autocomplete/gr-autocomplete.js
+++ b/polygerrit-ui/app/elements/shared/gr-autocomplete/gr-autocomplete.js
@@ -419,5 +419,9 @@
_computeShowSearchIconClass(showSearchIcon) {
return showSearchIcon ? 'showSearchIcon' : '';
},
+
+ _isPolymer2() {
+ return window.POLYMER2;
+ },
});
})();
diff --git a/polygerrit-ui/app/elements/shared/gr-autocomplete/gr-autocomplete_test.html b/polygerrit-ui/app/elements/shared/gr-autocomplete/gr-autocomplete_test.html
index 217321f..cff35b4 100644
--- a/polygerrit-ui/app/elements/shared/gr-autocomplete/gr-autocomplete_test.html
+++ b/polygerrit-ui/app/elements/shared/gr-autocomplete/gr-autocomplete_test.html
@@ -320,12 +320,15 @@
});
});
- test('search icon shows with showSearchIcon property', () => {
- assert.equal(getComputedStyle(element.$$('iron-icon')).display,
- 'none');
- element.showSearchIcon = true;
- assert.notEqual(getComputedStyle(element.$$('iron-icon')).display,
- 'none');
+ test('search icon shows with showSearchIcon property', done => {
+ flush(() => {
+ assert.equal(getComputedStyle(element.$$('iron-icon')).display,
+ 'none');
+ element.showSearchIcon = true;
+ assert.notEqual(getComputedStyle(element.$$('iron-icon')).display,
+ 'none');
+ done();
+ });
});
test('vertical offset overridden by param if it exists', () => {
diff --git a/polygerrit-ui/app/elements/shared/gr-button/gr-button.html b/polygerrit-ui/app/elements/shared/gr-button/gr-button.html
index 754c3c0..340297f 100644
--- a/polygerrit-ui/app/elements/shared/gr-button/gr-button.html
+++ b/polygerrit-ui/app/elements/shared/gr-button/gr-button.html
@@ -39,6 +39,37 @@
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 replacecment 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-radius: 3px;
+ -moz-user-select: none;
+ -ms-user-select: none;
+ -webkit-user-select: none;
+ user-select: none;
+ cursor: pointer;
+ z-index: 0;
+ padding: 0.7em 0.57em;
+
+ @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;
diff --git a/polygerrit-ui/app/elements/shared/gr-linked-chip/gr-linked-chip.html b/polygerrit-ui/app/elements/shared/gr-linked-chip/gr-linked-chip.html
index a3dd054..fe63e28 100644
--- a/polygerrit-ui/app/elements/shared/gr-linked-chip/gr-linked-chip.html
+++ b/polygerrit-ui/app/elements/shared/gr-linked-chip/gr-linked-chip.html
@@ -36,14 +36,8 @@
display: inline-flex;
padding: 0 .5em;
}
- gr-button.remove:hover,
- gr-button.remove:focus {
- --gr-button: {
- color: #333;
- }
- }
gr-button.remove {
- --gr-button: {
+ --gr-remove-button-style: {
border: 0;
color: var(--deemphasized-text-color);
font-size: 1.7rem;
@@ -55,6 +49,19 @@
text-decoration: none;
}
}
+
+ gr-button.remove:hover,
+ gr-button.remove:focus {
+ --gr-button: {
+ @apply --gr-remove-button-style
+ color: #333;
+ }
+ }
+ gr-button.remove {
+ --gr-button: {
+ @apply --gr-remove-button-style
+ }
+ }
.transparentBackground,
gr-button.transparentBackground {
background-color: transparent;
diff --git a/polygerrit-ui/app/styles/gr-voting-styles.html b/polygerrit-ui/app/styles/gr-voting-styles.html
index 3b1ee64..eec79be 100644
--- a/polygerrit-ui/app/styles/gr-voting-styles.html
+++ b/polygerrit-ui/app/styles/gr-voting-styles.html
@@ -23,6 +23,7 @@
border: 1px solid rgba(0,0,0,.12);
border-radius: 1em;
box-shadow: none;
+ box-sizing: border-box;
min-width: 3em;
}
}
