Adds text label to explain commit in Inspect view

Author: d13

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

@@ -21,6 +21,7 @@ import { GlDetailsBase } from './gl-details-base';
 import '../../shared/components/actions/action-item';
 import '../../shared/components/actions/action-nav';
 import '../../shared/components/button';
+import '../../shared/components/chips/action-chip';
 import '../../shared/components/code-icon';
 import '../../shared/components/commit/commit-identity';
 import '../../shared/components/commit/commit-stats';
@@ -171,15 +172,16 @@ export class GlCommitDetails extends GlDetailsBase {
 						this.state?.orgSettings.ai !== false,
 						() => html`
 							<div class="message-block-actions">
-								<action-item
+								<gl-action-chip
 									label="Explain this ${this.isStash ? 'Stash' : 'Commit'}"
 									icon="sparkle"
 									data-action="explain-commit"
 									aria-busy="${this.explainBusy ? 'true' : nothing}"
 									?disabled="${this.explainBusy ? true : nothing}"
 									@click=${this.onExplainChanges}
 									@keydown=${this.onExplainChanges}
-								></action-item>
+									><span>explain</span></gl-action-chip
+								>
 							</div>
 						`,
 					)}

src/webviews/apps/shared/components/chips/action-chip.ts

@@ -0,0 +1,99 @@
+import { css, html, LitElement, nothing } from 'lit';
+import { customElement, property, query } from 'lit/decorators.js';
+import { focusOutline } from '../styles/lit/a11y.css';
+import '../overlays/tooltip';
+import '../code-icon';
+
+@customElement('gl-action-chip')
+export class ActionChip extends LitElement {
+	static override shadowRootOptions: ShadowRootInit = {
+		...LitElement.shadowRootOptions,
+		delegatesFocus: true,
+	};
+
+	static override styles = css`
+		:host {
+			box-sizing: border-box;
+			display: inline-flex;
+			justify-content: center;
+			align-items: center;
+			min-width: 2rem;
+			height: 2rem;
+			border-radius: 0.5rem;
+			color: inherit;
+			padding: 0.2rem;
+			vertical-align: text-bottom;
+			text-decoration: none;
+			cursor: pointer;
+		}
+
+		:host(:focus-within) {
+			${focusOutline}
+		}
+
+		:host(:hover) {
+			background-color: var(--vscode-toolbar-hoverBackground);
+		}
+
+		:host(:active) {
+			background-color: var(--vscode-toolbar-activeBackground);
+		}
+
+		:host([disabled]) {
+			pointer-events: none;
+			opacity: 0.5;
+		}
+
+		a {
+			display: inline-flex;
+			justify-content: center;
+			align-items: center;
+			gap: 0.2rem;
+			vertical-align: middle;
+			color: inherit;
+		}
+		a:focus {
+			outline: none;
+		}
+
+		::slotted(*) {
+			padding-inline-end: 0.2rem;
+			vertical-align: middle;
+			text-transform: capitalize;
+		}
+	`;
+
+	@property()
+	href?: string;
+
+	@property()
+	label?: string;
+
+	@property()
+	icon = '';
+
+	@property({ type: Boolean })
+	disabled = false;
+
+	@query('a')
+	private defaultFocusEl!: HTMLAnchorElement;
+
+	override render(): unknown {
+		return html`
+			<gl-tooltip hoist content="${this.label ?? nothing}">
+				<a
+					role="${!this.href ? 'button' : nothing}"
+					type="${!this.href ? 'button' : nothing}"
+					?disabled=${this.disabled}
+					href=${this.href ?? nothing}
+				>
+					<code-icon icon="${this.icon}"></code-icon><slot></slot>
+				</a>
+			</gl-tooltip>
+		`;
+	}
+
+	override focus(options?: FocusOptions): void {
+		this.defaultFocusEl.focus(options);
+	}
+}