Merge "Fix problems with applying css-styles to elements"

polygerrit-ui/app/elements/shared/gr-account-chip/gr-account-chip.html

@@ -40,14 +40,8 @@ limitations under the License.
       :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;
@@ -59,6 +53,19 @@ limitations under the License.
           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;

polygerrit-ui/app/elements/shared/gr-autocomplete/gr-autocomplete.html

@@ -76,14 +76,31 @@ limitations under the License.
         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"

polygerrit-ui/app/elements/shared/gr-autocomplete/gr-autocomplete.js

@@ -425,5 +425,9 @@
     _computeShowSearchIconClass(showSearchIcon) {
       return showSearchIcon ? 'showSearchIcon' : '';
     },
+
+    _isPolymer2() {
+      return window.POLYMER2;
+    },
   });
 })();

polygerrit-ui/app/elements/shared/gr-autocomplete/gr-autocomplete_test.html

@@ -320,12 +320,15 @@ limitations under the License.
       });
     });
 
-    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', () => {

polygerrit-ui/app/elements/shared/gr-button/gr-button.html

@@ -39,6 +39,37 @@ limitations under the License.
         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;

polygerrit-ui/app/elements/shared/gr-linked-chip/gr-linked-chip.html

@@ -37,14 +37,8 @@ limitations under the License.
         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;
@@ -56,6 +50,19 @@ limitations under the License.
           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;

polygerrit-ui/app/styles/gr-voting-styles.html

@@ -23,6 +23,7 @@ limitations under the License.
           border: 1px solid rgba(0,0,0,.12);
           border-radius: 1em;
           box-shadow: none;
+          box-sizing: border-box;
           min-width: 3em;
         }
       }