Merge "Sanitize height, border and padding of gr-autocomplete"
diff --git a/polygerrit-ui/app/elements/admin/gr-create-change-dialog/gr-create-change-dialog.html b/polygerrit-ui/app/elements/admin/gr-create-change-dialog/gr-create-change-dialog.html
index ffc1b9b..1d6e706 100644
--- a/polygerrit-ui/app/elements/admin/gr-create-change-dialog/gr-create-change-dialog.html
+++ b/polygerrit-ui/app/elements/admin/gr-create-change-dialog/gr-create-change-dialog.html
@@ -43,11 +43,6 @@
.value {
width: 32em;
}
- gr-autocomplete {
- --gr-autocomplete: {
- padding: 0 var(--spacing-xs);
- }
- }
.hide {
display: none;
}
diff --git a/polygerrit-ui/app/elements/admin/gr-create-repo-dialog/gr-create-repo-dialog.html b/polygerrit-ui/app/elements/admin/gr-create-repo-dialog/gr-create-repo-dialog.html
index 8d03595..b78090c 100644
--- a/polygerrit-ui/app/elements/admin/gr-create-repo-dialog/gr-create-repo-dialog.html
+++ b/polygerrit-ui/app/elements/admin/gr-create-repo-dialog/gr-create-repo-dialog.html
@@ -40,14 +40,7 @@
width: 20em;
}
gr-autocomplete {
- border: none;
- --gr-autocomplete: {
- border: 1px solid var(--border-color);
- border-radius: var(--border-radius);
- height: 2em;
- padding: 0 var(--spacing-xs);
- width: 20em;
- }
+ width: 20em;
}
</style>
diff --git a/polygerrit-ui/app/elements/admin/gr-group-members/gr-group-members.html b/polygerrit-ui/app/elements/admin/gr-group-members/gr-group-members.html
index bc7a109..cf24793 100644
--- a/polygerrit-ui/app/elements/admin/gr-group-members/gr-group-members.html
+++ b/polygerrit-ui/app/elements/admin/gr-group-members/gr-group-members.html
@@ -48,10 +48,6 @@
}
gr-autocomplete {
width: 20em;
- --gr-autocomplete: {
- height: 2em;
- width: 20em;
- }
}
a {
color: var(--primary-text-color);
diff --git a/polygerrit-ui/app/elements/core/gr-search-bar/gr-search-bar.html b/polygerrit-ui/app/elements/core/gr-search-bar/gr-search-bar.html
index 0cdef8c..1b57ddb 100644
--- a/polygerrit-ui/app/elements/core/gr-search-bar/gr-search-bar.html
+++ b/polygerrit-ui/app/elements/core/gr-search-bar/gr-search-bar.html
@@ -29,11 +29,9 @@
}
gr-autocomplete {
background-color: var(--view-background-color);
- border: 1px solid var(--border-color);
border-radius: var(--border-radius);
flex: 1;
outline: none;
- padding: var(--spacing-xs);
}
</style>
<form>
@@ -45,7 +43,6 @@
on-commit="_handleInputCommit"
allow-non-suggested-values
multi
- borderless
threshold="[[_threshold]]"
tab-complete
vertical-offset="30"></gr-autocomplete>
diff --git a/polygerrit-ui/app/elements/edit/gr-edit-controls/gr-edit-controls.html b/polygerrit-ui/app/elements/edit/gr-edit-controls/gr-edit-controls.html
index 4b9fbac..cb950da 100644
--- a/polygerrit-ui/app/elements/edit/gr-edit-controls/gr-edit-controls.html
+++ b/polygerrit-ui/app/elements/edit/gr-edit-controls/gr-edit-controls.html
@@ -55,21 +55,13 @@
gr-dialog .main > iron-input{
width: 100%;
}
- gr-autocomplete {
- --gr-autocomplete: {
- border: 1px solid var(--border-color);
- border-radius: var(--border-radius);
- height: 2em;
- padding: 0 var(--spacing-xs);
- }
- }
input {
border: 1px solid var(--border-color);
border-radius: var(--border-radius);
- height: 2em;
margin: var(--spacing-m) 0;
- padding: 0 var(--spacing-xs);
+ padding: var(--spacing-s);
width: 100%;
+ box-sizing: content-box;
}
@media screen and (max-width: 50em) {
gr-dialog {
diff --git a/polygerrit-ui/app/elements/shared/gr-account-entry/gr-account-entry.html b/polygerrit-ui/app/elements/shared/gr-account-entry/gr-account-entry.html
index ae656fd..992ea8407 100644
--- a/polygerrit-ui/app/elements/shared/gr-account-entry/gr-account-entry.html
+++ b/polygerrit-ui/app/elements/shared/gr-account-entry/gr-account-entry.html
@@ -40,7 +40,8 @@
on-commit="_handleInputCommit"
clear-on-commit
warn-uncommitted
- text="{{_inputText}}">
+ text="{{_inputText}}"
+ vertical-offset="24">
</gr-autocomplete>
</template>
<script src="gr-account-entry.js"></script>
diff --git a/polygerrit-ui/app/elements/shared/gr-autocomplete-dropdown/gr-autocomplete-dropdown.html b/polygerrit-ui/app/elements/shared/gr-autocomplete-dropdown/gr-autocomplete-dropdown.html
index 64950f2..cf32e28 100644
--- a/polygerrit-ui/app/elements/shared/gr-autocomplete-dropdown/gr-autocomplete-dropdown.html
+++ b/polygerrit-ui/app/elements/shared/gr-autocomplete-dropdown/gr-autocomplete-dropdown.html
@@ -60,6 +60,7 @@
.dropdown-content {
background: var(--dropdown-background-color);
box-shadow: rgba(0, 0, 0, 0.3) 0 1px 3px;
+ border-radius: var(--border-radius);
max-height: 50vh;
overflow: auto;
}
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 c9d12ce..e47b661 100644
--- a/polygerrit-ui/app/elements/shared/gr-autocomplete/gr-autocomplete.html
+++ b/polygerrit-ui/app/elements/shared/gr-autocomplete/gr-autocomplete.html
@@ -36,13 +36,14 @@
margin: 0 var(--spacing-xs);
vertical-align: top;
}
- paper-input:not(.borderless) {
- border: 1px solid var(--border-color);
+ paper-input.borderless {
+ border: none;
+ padding: 0;
}
paper-input {
- height: var(--line-height-normal);
- width: 100%;
- @apply --gr-autocomplete;
+ border: 1px solid var(--border-color);
+ border-radius: var(--border-radius);
+ padding: var(--spacing-s);
--paper-input-container: {
padding: 0;
};
@@ -50,13 +51,25 @@
font-size: var(--font-size-normal);
line-height: var(--line-height-normal);
};
+ /* This is a hack for not being able to set height:0 on the underline
+ of a paper-input 2.2.3 element. All the underline fixes below only
+ actually work in 3.x.x, so the height must be adjusted directly as
+ a workaround until we are on Polymer 3. */
+ height: var(--line-height-normal);
+ --paper-input-container-underline-height: 0;
+ --paper-input-container-underline-wrapper-height: 0;
+ --paper-input-container-underline-focus-height: 0;
+ --paper-input-container-underline-legacy-height: 0;
--paper-input-container-underline: {
+ height: 0;
display: none;
};
--paper-input-container-underline-focus: {
+ height: 0;
display: none;
};
--paper-input-container-underline-disabled: {
+ height: 0;
display: none;
};
}
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 a2c908a..3a60255 100644
--- a/polygerrit-ui/app/elements/shared/gr-autocomplete/gr-autocomplete.js
+++ b/polygerrit-ui/app/elements/shared/gr-autocomplete/gr-autocomplete.js
@@ -74,9 +74,9 @@
},
/**
- * The number of characters that must be typed before suggestions are
- * made. If threshold is zero, default suggestions are enabled.
- */
+ * The number of characters that must be typed before suggestions are
+ * made. If threshold is zero, default suggestions are enabled.
+ */
threshold: {
type: Number,
value: 1,
@@ -89,11 +89,15 @@
type: Boolean,
value: false,
},
- // Vertical offset needed for a 1em font-size with no vertical padding.
- // Inputs with additional padding will need to increase vertical offset.
+ /**
+ * Vertical offset needed for an element with 20px line-height, 4px
+ * padding and 1px border (30px height total). Plus 1px spacing between
+ * input and dropdown. Inputs with different line-height or padding will
+ * need to tweak vertical offset.
+ */
verticalOffset: {
type: Number,
- value: 20,
+ value: 31,
},
text: {
@@ -110,10 +114,10 @@
},
/**
- * When true, tab key autocompletes but does not fire the commit event.
- * When false, tab key not caught, and focus is removed from the element.
- * See Issue 4556, Issue 6645.
- */
+ * When true, tab key autocompletes but does not fire the commit event.
+ * When false, tab key not caught, and focus is removed from the element.
+ * See Issue 4556, Issue 6645.
+ */
tabComplete: {
type: Boolean,
value: false,
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 68338a4..39329e5 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
@@ -335,7 +335,7 @@
});
test('vertical offset overridden by param if it exists', () => {
- assert.equal(element.$.suggestions.verticalOffset, 20);
+ assert.equal(element.$.suggestions.verticalOffset, 31);
element.verticalOffset = 30;
assert.equal(element.$.suggestions.verticalOffset, 30);
});
diff --git a/polygerrit-ui/app/elements/shared/gr-labeled-autocomplete/gr-labeled-autocomplete.html b/polygerrit-ui/app/elements/shared/gr-labeled-autocomplete/gr-labeled-autocomplete.html
index da0b93f..47be6f7 100644
--- a/polygerrit-ui/app/elements/shared/gr-labeled-autocomplete/gr-labeled-autocomplete.html
+++ b/polygerrit-ui/app/elements/shared/gr-labeled-autocomplete/gr-labeled-autocomplete.html
@@ -38,14 +38,7 @@
#body {
display: flex;
}
- gr-autocomplete {
- height: 1.5em;
- --gr-autocomplete: {
- border: none;
- }
- }
#trigger {
- border-left: 1px solid var(--deemphasized-text-color);
color: var(--deemphasized-text-color);
cursor: pointer;
padding-left: var(--spacing-s);
diff --git a/polygerrit-ui/app/styles/gr-form-styles.html b/polygerrit-ui/app/styles/gr-form-styles.html
index 3fe0a72..7c9ae0d 100644
--- a/polygerrit-ui/app/styles/gr-form-styles.html
+++ b/polygerrit-ui/app/styles/gr-form-styles.html
@@ -61,7 +61,6 @@
}
.gr-form-styles td,
.gr-form-styles tfoot th {
- height: 2em;
padding: var(--spacing-s) 0;
vertical-align: middle;
}
@@ -84,8 +83,7 @@
.gr-form-styles textarea {
border: 1px solid var(--border-color);
border-radius: var(--border-radius);
- height: 2em;
- padding: 0 var(--spacing-xs);
+ padding: var(--spacing-s);
}
.gr-form-styles td:last-child {
width: 5em;
@@ -97,23 +95,16 @@
.gr-form-styles iron-autogrow-textarea {
border: none;
height: auto;
- min-height: 2em;
+ min-height: 4em;
--iron-autogrow-textarea: {
border: 1px solid var(--border-color);
border-radius: var(--border-radius);
box-sizing: border-box;
- padding: var(--spacing-s) var(--spacing-xs) 0 var(--spacing-xs);
+ padding: var(--spacing-s);
}
}
.gr-form-styles gr-autocomplete {
- border: none;
- --gr-autocomplete: {
- border: 1px solid var(--border-color);
- border-radius: var(--border-radius);
- height: 2em;
- padding: 0 var(--spacing-xs);
- width: 14em;
- }
+ width: 14em;
}
@media only screen and (max-width: 40em) {
.gr-form-styles section {
diff --git a/polygerrit-ui/app/styles/shared-styles.html b/polygerrit-ui/app/styles/shared-styles.html
index 5314741..51b92e1 100644
--- a/polygerrit-ui/app/styles/shared-styles.html
+++ b/polygerrit-ui/app/styles/shared-styles.html
@@ -42,10 +42,11 @@
input {
background-color: inherit;
border: 1px solid var(--border-color);
+ border-radius: var(--border-radius);
box-sizing: border-box;
color: var(--primary-text-color);
margin: 0;
- padding: 0;
+ padding: var(--spacing-s);
}
iron-autogrow-textarea {
background-color: inherit;
