Add support for split buttons

Author: a-stewart

src/main.ts

@@ -18,6 +18,8 @@ export {VscodeRadio} from './vscode-radio/index.js';
 export {VscodeRadioGroup} from './vscode-radio-group/index.js';
 export {VscodeSingleSelect} from './vscode-single-select/index.js';
 export {VscodeScrollable} from './vscode-scrollable/index.js';
+export {VscodeSplitButton} from './vscode-split-button/index.js';
+export {VscodeSplitButtonDivider} from './vscode-split-button-divider/index.js';
 export {VscodeSplitLayout} from './vscode-split-layout/index.js';
 export {VscodeTabHeader} from './vscode-tab-header/index.js';
 export {VscodeTabPanel} from './vscode-tab-panel/index.js';

src/vscode-button/vscode-button.styles.ts

@@ -26,6 +26,10 @@ const styles: CSSResultGroup = [
       white-space: nowrap;
     }
 
+    :host(:empty) {
+      padding: 1px 5px;
+    }
+
     :host([secondary]) {
       color: var(--vscode-button-secondaryForeground, #cccccc);
       background-color: var(--vscode-button-secondaryBackground, #313131);
@@ -91,6 +95,10 @@ const styles: CSSResultGroup = [
       margin-left: 0;
     }
 
+    ::slotted(*:last-child) {
+      margin-right: 0;
+    }
+
     ::slotted(vscode-icon) {
       color: inherit;
     }
@@ -102,6 +110,7 @@ const styles: CSSResultGroup = [
       justify-content: center;
       position: relative;
       width: 100%;
+      height: 100%;
     }
 
     slot {
@@ -110,15 +119,16 @@ const styles: CSSResultGroup = [
       height: 100%;
     }
 
-    .icon {
+    .icon, .icon-after {
       color: inherit;
       display: block;
+    }
+
+    :host(:not(:empty)) .icon {
       margin-right: 3px;
     }
 
-    .icon-after {
-      color: inherit;
-      display: block;
+    :host(:not(:empty)) .icon-after, :host([icon]) .icon-after {
       margin-left: 3px;
     }
   `,

src/vscode-split-button-divider/index.ts

@@ -0,0 +1 @@
+export {VscodeSplitButtonDivider} from './vscode-split-button-divider.js';

src/vscode-split-button-divider/vscode-split-button-divider.ts

@@ -0,0 +1,46 @@
+import {css, html, TemplateResult} from 'lit';
+import {customElement, property} from 'lit/decorators.js';
+import {VscElement} from '../includes/VscElement.js';
+
+/**
+ * A divider to show between two buttons in a split button.
+ *
+ * @tag vscode-split-button-divider
+ */
+@customElement('vscode-split-button-divider')
+export class VscodeSplitButtonDivider extends VscElement {
+  static override get styles() {
+    return css`
+      :host {
+        background-color: var(--vscode-button-background, #0078d4);
+        padding: 4px 0;
+        display: flex;
+        box-sizing: border-box;
+      }
+      :host([secondary]) {
+        background-color: var(--vscode-button-secondaryBackground, #313131);
+      }
+      div {
+        background-color: var(--vscode-button-separator);
+        width: 1px;
+        margin: 0;
+      }
+    `;
+  }
+
+  /**
+   * Button has a less prominent style.
+   */
+  @property({type: Boolean, reflect: true})
+  secondary = false;
+
+  override render() {
+    return html`<div></div> `;
+  }
+}
+
+declare global {
+  interface HTMLElementTagNameMap {
+    'vscode-split-button-divider': VscodeSplitButtonDivider;
+  }
+}

src/vscode-split-button/index.ts

@@ -0,0 +1 @@
+export {VscodeSplitButton} from './vscode-split-button.js';

src/vscode-split-button/vscode-split-button.styles.ts

@@ -0,0 +1,32 @@
+import {css, CSSResultGroup} from 'lit';
+
+import defaultStyles from '../includes/default.styles.js';
+import {getDefaultFontStack} from '../includes/helpers.js';
+
+const defaultFontStack = getDefaultFontStack();
+
+const styles: CSSResultGroup = [
+  defaultStyles,
+  css`
+    :host {
+      display: flex;
+      align-items: stretch;
+      padding: 0;
+      border: none;
+    }
+
+    ::slotted(vscode-button:not(:first-child)) {
+      border-top-left-radius: 0;
+      border-bottom-left-radius: 0;
+      border-left-width: 0;
+    }
+
+    ::slotted(vscode-button:not(:last-child)) {
+      border-top-right-radius: 0;
+      border-bottom-right-radius: 0;
+      border-right-width: 0;
+    }
+  `,
+];
+
+export default styles;

src/vscode-split-button/vscode-split-button.ts

@@ -0,0 +1,36 @@
+import {html, TemplateResult} from 'lit';
+import {customElement, property} from 'lit/decorators.js';
+import {VscElement} from '../includes/VscElement.js';
+import styles from './vscode-split-button.styles.js';
+
+/**
+ * Shows a split button, including several components in a single button. Commonly used to show a button with a dropdown to the right.
+ *
+ * @tag vscode-split-button
+ *
+ * @cssprop [--vscode-button-background=#0078d4]
+ * @cssprop [--vscode-button-foreground=#ffffff]
+ * @cssprop [--vscode-button-border=var(--vscode-button-background, rgba(255, 255, 255, 0.07))]
+ * @cssprop [--vscode-button-hoverBackground=#026ec1]
+ * @cssprop [--vscode-font-family=sans-serif] - A sans-serif font type depends on the host OS.
+ * @cssprop [--vscode-font-size=13px]
+ * @cssprop [--vscode-font-weight=normal]
+ * @cssprop [--vscode-button-secondaryForeground=#cccccc]
+ * @cssprop [--vscode-button-secondaryBackground=#313131]
+ * @cssprop [--vscode-button-secondaryHoverBackground=#3c3c3c]
+ * @cssprop [--vscode-focusBorder=#0078d4]
+ */
+@customElement('vscode-split-button')
+export class VscodeSplitButton extends VscElement {
+  static override styles = styles;
+
+  override render(): TemplateResult {
+    return html` <slot></slot> `;
+  }
+}
+
+declare global {
+  interface HTMLElementTagNameMap {
+    'vscode-split-button': VscodeSplitButton;
+  }
+}