Merge "Replace the "down arrow" for dropdowns by a gr-icon"
diff --git a/polygerrit-ui/app/elements/change/gr-change-view/gr-change-view.ts b/polygerrit-ui/app/elements/change/gr-change-view/gr-change-view.ts
index ea211ce..6ed55ca 100644
--- a/polygerrit-ui/app/elements/change/gr-change-view/gr-change-view.ts
+++ b/polygerrit-ui/app/elements/change/gr-change-view/gr-change-view.ts
@@ -903,7 +903,7 @@
margin-left: var(--spacing-s);
}
.showCopyLinkDialogButton {
- --gr-button-padding: var(--spacing-m) var(--spacing-xs);
+ --gr-button-padding: 0;
}
#replyBtn {
margin-bottom: var(--spacing-m);
diff --git a/polygerrit-ui/app/elements/core/gr-main-header/gr-main-header.ts b/polygerrit-ui/app/elements/core/gr-main-header/gr-main-header.ts
index 7f729c1..dcc9a99 100644
--- a/polygerrit-ui/app/elements/core/gr-main-header/gr-main-header.ts
+++ b/polygerrit-ui/app/elements/core/gr-main-header/gr-main-header.ts
@@ -311,7 +311,9 @@
.loginButton,
.registerButton,
gr-icon,
+ gr-dropdown,
gr-account-dropdown {
+ --gr-button-text-color: var(--header-text-color);
color: var(--header-text-color);
}
#mobileSearch {
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 d1b984c..f33f7d8 100644
--- a/polygerrit-ui/app/elements/shared/gr-button/gr-button.ts
+++ b/polygerrit-ui/app/elements/shared/gr-button/gr-button.ts
@@ -6,7 +6,7 @@
import '@polymer/paper-button/paper-button';
import {spinnerStyles} from '../../../styles/gr-spinner-styles';
import {votingStyles} from '../../../styles/gr-voting-styles';
-import {css, html, LitElement, PropertyValues} from 'lit';
+import {css, html, LitElement, nothing, PropertyValues} from 'lit';
import {customElement, property} from 'lit/decorators.js';
import {addShortcut, getEventPath, Key} from '../../../utils/dom-util';
import {getAppContext} from '../../../services/app-context';
@@ -39,7 +39,7 @@
// after created, the initial value maybe overridden by this
private initialTabindex?: string;
- @property({type: Boolean, reflect: true, attribute: 'down-arrow'})
+ @property({type: Boolean, attribute: 'down-arrow'})
downArrow = false;
@property({type: Boolean, reflect: true})
@@ -168,21 +168,8 @@
--text-color: var(--disabled-foreground);
cursor: default;
}
-
- /* Styles for the optional down arrow */
- :host(:not([down-arrow])) .downArrow {
- display: none;
- }
- :host([down-arrow]) .downArrow {
- border-top: 0.36em solid #ccc;
- border-left: 0.36em solid transparent;
- border-right: 0.36em solid transparent;
- margin-bottom: var(--spacing-xxs);
- margin-left: var(--spacing-m);
- transition: border-top-color 200ms;
- }
- :host([down-arrow]) paper-button:hover .downArrow {
- border-top-color: var(--deemphasized-text-color);
+ gr-icon.downArrow {
+ color: inherit;
}
.newVoteChip {
border: 1px solid var(--border-color);
@@ -208,10 +195,15 @@
>
${this.loading ? html`<span class="loadingSpin"></span>` : ''}
<slot></slot>
- <i class="downArrow"></i>
+ ${this.renderArrowIcon()}
</paper-button>`;
}
+ renderArrowIcon() {
+ if (!this.downArrow) return nothing;
+ return html`<gr-icon icon="arrow_drop_down" class="downArrow"></gr-icon>`;
+ }
+
constructor() {
super();
this.initialTabindex = this.getAttribute('tabindex') || '0';
diff --git a/polygerrit-ui/app/elements/shared/gr-button/gr-button_test.ts b/polygerrit-ui/app/elements/shared/gr-button/gr-button_test.ts
index d597a83..bda595f 100644
--- a/polygerrit-ui/app/elements/shared/gr-button/gr-button_test.ts
+++ b/polygerrit-ui/app/elements/shared/gr-button/gr-button_test.ts
@@ -42,12 +42,24 @@
raised=""
role="button"
tabindex="-1"
- ><slot></slot><i class="downArrow"></i>
+ ><slot></slot>
</paper-button>
`
);
});
+ test('renders arrow icon', async () => {
+ element.downArrow = true;
+ await element.updateComplete;
+ const icon = queryAndAssert(element, 'gr-icon');
+ assert.dom.equal(
+ icon,
+ /* HTML */ `
+ <gr-icon icon="arrow_drop_down" class="downArrow"></gr-icon>
+ `
+ );
+ });
+
test('disabled is set by disabled', async () => {
const paperBtn = queryAndAssert<PaperButtonElement>(
element,
