Adds split grouping to button-container

Author: d13

src/webviews/apps/plus/home/components/launchpad.ts

@@ -147,7 +147,7 @@ export class GlLaunchpad extends SignalWatcher(LitElement) {
 			<gl-section ?loading=${this._summaryState.computed.status === 'pending'}>
 				<span slot="heading">Launchpad</span>
 				<div class="summary">${this.renderSummaryResult()}</div>
-				<button-container gap="wide">
+				<button-container grouping="gap-wide">
 					<gl-button full class="start-work" href=${this.startWorkCommand}>Start Work on an Issue</gl-button>
 					<gl-button
 						appearance="secondary"

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

@@ -9,7 +9,6 @@ export class ButtonContainer extends LitElement {
 		css`
 			:host {
 				--button-group-gap: 0.4rem;
-				--button-group-wide-gap: 1rem;
 				display: block;
 				max-width: 30rem;
 				margin-right: auto;
@@ -18,6 +17,14 @@ export class ButtonContainer extends LitElement {
 				transition: max-width 0.2s ease-out;
 			}
 
+			:host([grouping='gap-wide']) {
+				--button-group-gap: 1rem;
+			}
+
+			:host([grouping='split']) {
+				--button-group-gap: 0.1rem;
+			}
+
 			@media (min-width: 640px) {
 				:host(:not([editor])) {
 					max-width: 100%;
@@ -26,13 +33,18 @@ export class ButtonContainer extends LitElement {
 
 			.group {
 				display: inline-flex;
-				gap: var(--button-group-gap);
+				gap: var(--button-group-gap, 0.4rem);
 				width: 100%;
 				max-width: 30rem;
 			}
 
-			:host([gap='wide']) .group {
-				gap: var(--button-group-wide-gap);
+			:host([grouping='split']) ::slotted(*:not(:first-child)) {
+				border-top-left-radius: 0;
+				border-bottom-left-radius: 0;
+			}
+			:host([grouping='split']) ::slotted(*:not(:last-child)) {
+				border-top-right-radius: 0;
+				border-bottom-right-radius: 0;
 			}
 		`,
 	];
@@ -43,6 +55,9 @@ export class ButtonContainer extends LitElement {
 	@property({ reflect: true })
 	gap?: 'wide';
 
+	@property({ reflect: true })
+	grouping?: 'gap' | 'split' | 'gap-wide' = 'gap';
+
 	override render(): unknown {
 		return html`<div class="group"><slot></slot></div>`;
 	}