Updates spacing on button content

src/webviews/apps/commitDetails/components/gl-commit-details.ts

@@ -408,7 +408,8 @@ export class GlCommitDetails extends GlDetailsBase {
 								aria-busy="${this.explainBusy ? 'true' : nothing}"
 								@click=${this.onExplainChanges}
 								@keydown=${this.onExplainChanges}
-								><code-icon icon="loading" modifier="spin"></code-icon>Explain Changes</gl-button
+								><code-icon icon="loading" modifier="spin" slot="prefix"></code-icon>Explain
+								Changes</gl-button
 							>
 						</span>
 					</p>

src/webviews/apps/commitDetails/components/gl-details-base.ts

@@ -109,7 +109,7 @@ export class GlDetailsBase extends LitElement {
 							<p class="button-container">
 								<span class="button-group button-group--single">
 									<gl-button full href="command:workbench.view.scm"
-										>Commit via SCM <code-icon rotate="45" icon="arrow-up"></code-icon
+										>Commit via SCM <code-icon rotate="45" icon="arrow-up" slot="suffix"></code-icon
 									></gl-button>
 								</span>
 							</p>

src/webviews/apps/commitDetails/components/gl-wip-details.ts

@@ -133,7 +133,7 @@ export class GlWipDetails extends GlDetailsBase {
 						data-action="${action}"
 						@click=${() => this.onToggleReviewMode(!this.inReview)}
 					>
-						<code-icon icon="gl-code-suggestion"></code-icon> ${label}
+						<code-icon icon="gl-code-suggestion" slot="prefix"></code-icon>${label}
 					</gl-button>
 					<gl-button
 						appearance="secondary"
@@ -156,7 +156,7 @@ export class GlWipDetails extends GlDetailsBase {
 					data-action="${action}"
 					@click=${() => this.onDataActionClick(action)}
 				>
-					<code-icon icon="gl-cloud-patch-share"></code-icon> ${label}
+					<code-icon icon="gl-cloud-patch-share" slot="prefix"></code-icon>${label}
 				</gl-button>
 			</span>
 		</p>`;
@@ -172,7 +172,7 @@ export class GlWipDetails extends GlDetailsBase {
 						data-action="publish-branch"
 						@click=${() => this.onDataActionClick('publish-branch')}
 					>
-						<code-icon icon="cloud-upload"></code-icon> Publish Branch
+						<code-icon icon="cloud-upload" slot="prefix"></code-icon> Publish Branch
 					</gl-button>
 				</span>
 			</p>`;
@@ -193,8 +193,8 @@ export class GlWipDetails extends GlDetailsBase {
 					data-action="${fetchLabel.toLowerCase()}"
 					@click=${() => this.onDataActionClick(fetchLabel.toLowerCase())}
 				>
-					<code-icon icon="${fetchIcon}"></code-icon> ${fetchLabel}&nbsp;
-					<gl-tracking-pill .ahead=${ahead} .behind=${behind}></gl-tracking-pill>
+					<code-icon icon="${fetchIcon}" slot="prefix"></code-icon> ${fetchLabel}
+					<gl-tracking-pill .ahead=${ahead} .behind=${behind} slot="suffix"></gl-tracking-pill>
 				</gl-button>
 			</span>
 		</p>`;

src/webviews/apps/home/home.html

@@ -173,7 +173,7 @@ <h1 class="alert__title">Get Started with GitLens</h1>
 					<p class="button-container">
 						<span class="button-group button-group--single">
 							<gl-button appearance="secondary" full data-action="command:gitlens.getStarted"
-								><code-icon icon="info"></code-icon> Open Walkthrough</gl-button
+								><code-icon icon="info" slot="prefix"></code-icon> Open Walkthrough</gl-button
 							>
 							<gl-tooltip placement="bottom">
 								<gl-button

src/webviews/apps/plus/patchDetails/components/gl-draft-details.ts

@@ -213,7 +213,8 @@ export class GlDraftDetails extends GlTreeBase {
 								aria-busy="${ifDefined(this.explainBusy ? 'true' : undefined)}"
 								@click=${this.onExplainChanges}
 								@keydown=${this.onExplainChanges}
-								><code-icon icon="loading" modifier="spin"></code-icon>Explain Changes</gl-button
+								><code-icon icon="loading" modifier="spin" slot="prefix"></code-icon>Explain
+								Changes</gl-button
 							>
 						</span>
 					</p>
@@ -446,7 +447,7 @@ export class GlDraftDetails extends GlTreeBase {
 								></span>
 							</div>
 							<gl-button appearance="secondary" @click=${this.onInviteUsers}
-								><code-icon icon="person-add"></code-icon> Invite</gl-button
+								><code-icon icon="person-add" slot="prefix"></code-icon> Invite</gl-button
 							>
 						</div>`,
 				)}

src/webviews/apps/plus/patchDetails/components/gl-patch-create.ts

@@ -251,7 +251,7 @@ export class GlPatchCreate extends GlTreeBase {
 								></span>
 							</div>
 							<gl-button appearance="secondary" @click=${this.onInviteUsers}
-								><code-icon icon="person-add"></code-icon> Invite</gl-button
+								><code-icon icon="person-add" slot="prefix"></code-icon> Invite</gl-button
 							>
 						</div>
 						${this.renderUserSelectionList()}

src/webviews/apps/shared/components/button.ts

@@ -26,6 +26,7 @@ export class GlButton extends LitElement {
 				--button-background: var(--color-button-background);
 				--button-hover-background: var(--vscode-button-hoverBackground);
 				--button-padding: 0.4rem 1.1rem;
+				--button-gap: 0.6rem;
 				--button-compact-padding: 0.6rem 0.8rem;
 				--button-line-height: 1.694;
 				--button-border: var(--vscode-button-border, transparent);
@@ -46,7 +47,11 @@ export class GlButton extends LitElement {
 			}
 
 			.control {
-				display: inline-block;
+				display: inline-flex;
+				flex-direction: row;
+				justify-content: center;
+				align-items: center;
+				gap: var(--button-gap);
 				padding: var(--button-padding);
 				line-height: normal;
 
@@ -68,6 +73,10 @@ export class GlButton extends LitElement {
 				outline: none;
 			}
 
+			.label {
+				display: inline-block;
+			}
+
 			:host(:hover) {
 				background: var(--button-hover-background);
 			}
@@ -206,10 +215,12 @@ export class GlButton extends LitElement {
 				tabindex="${this.disabled === false ? 0 : -1}"
 				href=${this.href}
 				@keypress=${(e: KeyboardEvent) => this.onLinkKeypress(e)}
-				><slot></slot
+				><slot name="prefix"></slot><slot class="label"></slot><slot name="suffix"></slot
 			></a>`;
 		}
-		return html`<button class="control" ?disabled=${this.disabled}><slot></slot></button>`;
+		return html`<button class="control" ?disabled=${this.disabled}>
+			<slot name="prefix"></slot><slot class="label"></slot><slot name="suffix"></slot>
+		</button>`;
 	}
 
 	private onLinkKeypress(e: KeyboardEvent) {

src/webviews/apps/shared/styles/details-base.scss

@@ -111,10 +111,6 @@ ul {
 }
 
 .button--busy {
-	code-icon {
-		margin-right: 0.5rem;
-	}
-
 	&[aria-busy='true'] {
 		opacity: 0.5;
 	}

src/webviews/apps/welcome/welcome.html

@@ -84,7 +84,7 @@ <h2 class="sticky">Get Started</h2>
 					<p class="button-container">
 						<span class="button-group button-group--single">
 							<gl-button appearance="secondary" full href="command:gitlens.getStarted"
-								><code-icon icon="info"></code-icon> Get Started Walkthrough</gl-button
+								><code-icon icon="info" slot="prefix"></code-icon> Get Started Walkthrough</gl-button
 							>
 						</span>
 					</p>
@@ -540,7 +540,7 @@ <h2 class="sticky">Get Started</h2>
 					</p>
 					<p>
 						<gl-button appearance="secondary" full href="command:gitlens.getStarted"
-							><code-icon icon="info"></code-icon> Get Started Walkthrough</gl-button
+							><code-icon icon="info" slot="prefix"></code-icon> Get Started Walkthrough</gl-button
 						>
 					</p>