Change all pencil icons from 18px to 16px
The 18px pencil on the change page seemed a bit large. Generally we want
to consistently use either 20px or 16px icons and never 18px ones.
16px is set by using the `small` attribute on `<gr-icon>`.
Note that we are introducing some <div>s in <gr-button> slots. The
reason is that <gr-button> applies a flex layout to slotted children.
And that does not work well with inline children. It is much easier to
reason about the layout, if there is a dedicated block between flex
parent and inline child.
Screenshots
https://imgur.com/a/9Rgi99T
https://imgur.com/a/73bNmyQ (also filled the pencil here)
https://imgur.com/a/i4W6QCM
https://imgur.com/a/2X9u4Kr
Release-Notes: skip
Change-Id: Idad10184366d0fa747960aedeffa8ea72ef48ea7
diff --git a/polygerrit-ui/app/elements/admin/gr-access-section/gr-access-section.ts b/polygerrit-ui/app/elements/admin/gr-access-section/gr-access-section.ts
index 4b62710..29f06fd 100644
--- a/polygerrit-ui/app/elements/admin/gr-access-section/gr-access-section.ts
+++ b/polygerrit-ui/app/elements/admin/gr-access-section/gr-access-section.ts
@@ -179,7 +179,7 @@
class=${this.section?.id === GLOBAL_NAME ? 'global' : ''}
@click=${this.editReference}
>
- <gr-icon id="icon" icon="edit"></gr-icon>
+ <gr-icon id="icon" icon="edit" filled small></gr-icon>
</gr-button>
</div>
<iron-input
diff --git a/polygerrit-ui/app/elements/admin/gr-access-section/gr-access-section_test.ts b/polygerrit-ui/app/elements/admin/gr-access-section/gr-access-section_test.ts
index 1048dde..b8cee66 100644
--- a/polygerrit-ui/app/elements/admin/gr-access-section/gr-access-section_test.ts
+++ b/polygerrit-ui/app/elements/admin/gr-access-section/gr-access-section_test.ts
@@ -84,7 +84,7 @@
role="button"
tabindex="0"
>
- <gr-icon icon="edit" id="icon"></gr-icon>
+ <gr-icon icon="edit" id="icon" small filled></gr-icon>
</gr-button>
</div>
<iron-input class="editRefInput">
diff --git a/polygerrit-ui/app/elements/change/gr-reply-dialog/gr-reply-dialog.ts b/polygerrit-ui/app/elements/change/gr-reply-dialog/gr-reply-dialog.ts
index 731bcd0..144d81d 100644
--- a/polygerrit-ui/app/elements/change/gr-reply-dialog/gr-reply-dialog.ts
+++ b/polygerrit-ui/app/elements/change/gr-reply-dialog/gr-reply-dialog.ts
@@ -493,6 +493,10 @@
}
.attention .edit-attention-button gr-icon {
color: inherit;
+ /* The line-height:26px hack (see below) requires us to do this.
+ Normally the gr-icon would account for a proper positioning
+ within the standard line-height:20px context. */
+ top: 5px;
}
.attention a,
.attention-detail a {
@@ -969,8 +973,10 @@
role="button"
tabindex="0"
>
- <gr-icon icon="edit" filled></gr-icon>
- Modify
+ <div>
+ <gr-icon icon="edit" filled small></gr-icon>
+ <span>Modify</span>
+ </div>
</gr-button>
</gr-tooltip-content>
</div>
diff --git a/polygerrit-ui/app/elements/change/gr-reply-dialog/gr-reply-dialog_test.ts b/polygerrit-ui/app/elements/change/gr-reply-dialog/gr-reply-dialog_test.ts
index 95cdba91..55a98f2 100644
--- a/polygerrit-ui/app/elements/change/gr-reply-dialog/gr-reply-dialog_test.ts
+++ b/polygerrit-ui/app/elements/change/gr-reply-dialog/gr-reply-dialog_test.ts
@@ -281,8 +281,10 @@
role="button"
tabindex="0"
>
- <gr-icon icon="edit" filled></gr-icon>
- Modify
+ <div>
+ <gr-icon icon="edit" filled small></gr-icon>
+ <span>Modify</span>
+ </div>
</gr-button>
</gr-tooltip-content>
</div>
diff --git a/polygerrit-ui/app/elements/change/gr-reviewer-list/gr-reviewer-list.ts b/polygerrit-ui/app/elements/change/gr-reviewer-list/gr-reviewer-list.ts
index 61e16b0..163ec49 100644
--- a/polygerrit-ui/app/elements/change/gr-reviewer-list/gr-reviewer-list.ts
+++ b/polygerrit-ui/app/elements/change/gr-reviewer-list/gr-reviewer-list.ts
@@ -73,15 +73,14 @@
}
.addReviewer gr-icon {
color: inherit;
- font-size: 18px;
}
.controlsContainer {
display: inline-block;
}
gr-button.addReviewer {
- --gr-button-padding: 1px 0px;
vertical-align: top;
- top: 1px;
+ --gr-button-padding: var(--spacing-s);
+ --margin: calc(0px - var(--spacing-s));
}
gr-button {
line-height: var(--line-height-normal);
@@ -117,7 +116,10 @@
class="addReviewer"
@click=${this.handleAddTap}
title=${this.ccsOnly ? 'Add CC' : 'Add reviewer'}
- ><gr-icon icon="edit" filled></gr-icon>
+ >
+ <div>
+ <gr-icon icon="edit" filled small></gr-icon>
+ </div>
</gr-button>
</div>
</div>
diff --git a/polygerrit-ui/app/elements/change/gr-reviewer-list/gr-reviewer-list_test.ts b/polygerrit-ui/app/elements/change/gr-reviewer-list/gr-reviewer-list_test.ts
index 89bb2fd..9f8aada 100644
--- a/polygerrit-ui/app/elements/change/gr-reviewer-list/gr-reviewer-list_test.ts
+++ b/polygerrit-ui/app/elements/change/gr-reviewer-list/gr-reviewer-list_test.ts
@@ -39,7 +39,9 @@
tabindex="0"
title="Add reviewer"
>
- <gr-icon icon="edit" filled></gr-icon>
+ <div>
+ <gr-icon icon="edit" filled small></gr-icon>
+ </div>
</gr-button>
</div>
</div>
diff --git a/polygerrit-ui/app/elements/shared/gr-editable-content/gr-editable-content.ts b/polygerrit-ui/app/elements/shared/gr-editable-content/gr-editable-content.ts
index ac910ea..5e18afe 100644
--- a/polygerrit-ui/app/elements/shared/gr-editable-content/gr-editable-content.ts
+++ b/polygerrit-ui/app/elements/shared/gr-editable-content/gr-editable-content.ts
@@ -25,6 +25,7 @@
import {nothing} from 'lit';
import {classMap} from 'lit/directives/class-map';
import {when} from 'lit/directives/when';
+import {fontStyles} from '../../../styles/gr-font-styles';
const RESTORED_MESSAGE = 'Content restored from a previous edit.';
const STORAGE_DEBOUNCE_INTERVAL_MS = 400;
@@ -110,6 +111,7 @@
static override get styles() {
return [
sharedStyles,
+ fontStyles,
css`
:host {
display: block;
@@ -166,7 +168,6 @@
}
.show-all-container gr-icon {
color: inherit;
- font-size: 18px;
}
.cancel-button {
margin-right: var(--spacing-l);
@@ -175,8 +176,6 @@
margin-right: var(--spacing-xs);
}
gr-button {
- font-family: var(--font-family);
- line-height: var(--line-height-normal);
padding: var(--spacing-xs);
}
`,
@@ -233,7 +232,7 @@
return nothing;
return html`
- <div class="show-all-container">
+ <div class="show-all-container font-normal">
${when(
this.commitCollapsible && !this.editing,
() => html`
@@ -242,15 +241,17 @@
class="show-all-button"
@click=${this.toggleCommitCollapsed}
>
- ${when(
- !this.commitCollapsed,
- () => html`<gr-icon icon="expand_less"></gr-icon>`
- )}
- ${when(
- this.commitCollapsed,
- () => html`<gr-icon icon="expand_more"></gr-icon>`
- )}
- ${this.commitCollapsed ? 'Show all' : 'Show less'}
+ <div>
+ ${when(
+ !this.commitCollapsed,
+ () => html`<gr-icon icon="expand_less" small></gr-icon>`
+ )}
+ ${when(
+ this.commitCollapsed,
+ () => html`<gr-icon icon="expand_more" small></gr-icon>`
+ )}
+ <span>${this.commitCollapsed ? 'Show all' : 'Show less'}</span>
+ </div>
</gr-button>
<div class="flex-space"></div>
`
@@ -263,7 +264,10 @@
class="edit-commit-message"
title="Edit commit message"
@click=${this.handleEditCommitMessage}
- ><gr-icon icon="edit" filled></gr-icon> Edit</gr-button
+ ><div>
+ <gr-icon icon="edit" filled small></gr-icon>
+ <span>Edit</span>
+ </div></gr-button
>
`
)}
diff --git a/polygerrit-ui/app/elements/shared/gr-editable-content/gr-editable-content_test.ts b/polygerrit-ui/app/elements/shared/gr-editable-content/gr-editable-content_test.ts
index ed09c49..d2663ed 100644
--- a/polygerrit-ui/app/elements/shared/gr-editable-content/gr-editable-content_test.ts
+++ b/polygerrit-ui/app/elements/shared/gr-editable-content/gr-editable-content_test.ts
@@ -27,7 +27,7 @@
<div class="collapsed viewer">
<slot> </slot>
</div>
- <div class="show-all-container">
+ <div class="show-all-container font-normal">
<gr-button
aria-disabled="false"
class="show-all-button"
@@ -35,8 +35,10 @@
role="button"
tabindex="0"
>
- <gr-icon icon="expand_more"></gr-icon>
- Show all
+ <div>
+ <gr-icon icon="expand_more" small></gr-icon>
+ <span>Show all</span>
+ </div>
</gr-button>
<div class="flex-space"></div>
<gr-button
@@ -47,8 +49,10 @@
tabindex="0"
title="Edit commit message"
>
- <gr-icon icon="edit" filled></gr-icon>
- Edit
+ <div>
+ <gr-icon icon="edit" filled small></gr-icon>
+ <span>Edit</span>
+ </div>
</gr-button>
</div>
<gr-endpoint-slot name="above-actions"> </gr-endpoint-slot>
diff --git a/polygerrit-ui/app/elements/shared/gr-editable-label/gr-editable-label.ts b/polygerrit-ui/app/elements/shared/gr-editable-label/gr-editable-label.ts
index 231b6fd..19cda0f 100644
--- a/polygerrit-ui/app/elements/shared/gr-editable-label/gr-editable-label.ts
+++ b/polygerrit-ui/app/elements/shared/gr-editable-label/gr-editable-label.ts
@@ -144,10 +144,10 @@
}
gr-button gr-icon {
color: inherit;
- font-size: 18px;
}
gr-button.pencil {
- --gr-button-padding: 0px 0px;
+ --gr-button-padding: var(--spacing-s);
+ --margin: calc(0px - var(--spacing-s));
}
`,
];
@@ -188,8 +188,11 @@
class="pencil ${this.computeLabelClass()}"
@click=${this.showDropdown}
title=${this.computeLabel()}
- ><gr-icon icon="edit" filled></gr-icon
- ></gr-button>`;
+ >
+ <div>
+ <gr-icon icon="edit" filled small></gr-icon>
+ </div>
+ </gr-button>`;
} else {
return html`<label
class=${this.computeLabelClass()}
