Add before/after slots to Button

bendera · bendera · commit 37d08e3b7fc6 · 2025-08-20T01:21:29.000+02:00
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -9,6 +9,7 @@ The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/)
 ### Added
 
 - Added `base` css part to **Button**.
+- Added `content-before` and `content-after` slot to **Button**.
 
 ## [2.1.0] - 2025-08-08
 
diff --git a/dev/vscode-button/slots.html b/dev/vscode-button/slots.html
@@ -0,0 +1,57 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>VSCode Elements</title>
+    <link
+      rel="stylesheet"
+      href="/node_modules/@vscode/codicons/dist/codicon.css"
+      id="vscode-codicon-stylesheet"
+    >
+    <script
+      type="module"
+      src="/node_modules/@vscode-elements/webview-playground/dist/index.js"
+    ></script>
+    <script type="module" src="/dist/main.js"></script>
+    <script>
+      const logEvents = (selector, eventType) => {
+        document.querySelector(selector).addEventListener(eventType, (ev) => {
+          console.log(ev);
+        });
+      };
+    </script>
+  </head>
+
+  <body>
+    <main>
+      <vscode-demo>
+        <vscode-button
+          ><svg
+            width="16"
+            height="16"
+            fill="none"
+            viewBox="0 0 24 24"
+            xmlns="http://www.w3.org/2000/svg"
+            slot="content-after"
+          >
+            <path d="M8 6H6v2h2V6Z" fill="currentColor" />
+            <path
+              d="M3 5.25A2.25 2.25 0 0 1 5.25 3h3.5A2.25 2.25 0 0 1 11 5.25v3.5A2.25 2.25 0 0 1 8.75 11h-3.5A2.25 2.25 0 0 1 3 8.75v-3.5Zm2.25-.75a.75.75 0 0 0-.75.75v3.5c0 .414.336.75.75.75h3.5a.75.75 0 0 0 .75-.75v-3.5a.75.75 0 0 0-.75-.75h-3.5ZM6 16h2v2H6v-2Z"
+              fill="currentColor"
+            />
+            <path
+              d="M3 15.25A2.25 2.25 0 0 1 5.25 13h3.5A2.25 2.25 0 0 1 11 15.25v3.5A2.25 2.25 0 0 1 8.75 21h-3.5A2.25 2.25 0 0 1 3 18.75v-3.5Zm2.25-.75a.75.75 0 0 0-.75.75v3.5c0 .414.336.75.75.75h3.5a.75.75 0 0 0 .75-.75v-3.5a.75.75 0 0 0-.75-.75h-3.5ZM18 6h-2v2h2V6Z"
+              fill="currentColor"
+            />
+            <path
+              d="M15.25 3A2.25 2.25 0 0 0 13 5.25v3.5A2.25 2.25 0 0 0 15.25 11h3.5A2.25 2.25 0 0 0 21 8.75v-3.5A2.25 2.25 0 0 0 18.75 3h-3.5Zm-.75 2.25a.75.75 0 0 1 .75-.75h3.5a.75.75 0 0 1 .75.75v3.5a.75.75 0 0 1-.75.75h-3.5a.75.75 0 0 1-.75-.75v-3.5ZM13 13h2.75v2.75H13V13ZM18.25 15.75h-2.5v2.5H13V21h2.75v-2.75h2.5V21H21v-2.75h-2.75v-2.5ZM18.25 15.75V13H21v2.75h-2.75Z"
+              fill="currentColor"
+            />
+          </svg>
+          Button label</vscode-button
+        >
+      </vscode-demo>
+    </main>
+  </body>
+</html>
diff --git a/src/includes/test-helpers.ts b/src/includes/test-helpers.ts
@@ -120,23 +120,26 @@ type TagNameToElement<K extends AllTagNames> =
 
 export function $<K extends AllTagNames>(selector: K): TagNameToElement<K>;
 export function $<K extends AllTagNames>(
-  root: Element,
+  root: Element | ShadowRoot,
   selector: K
 ): TagNameToElement<K>;
 export function $<T extends Element = Element>(selector: string): T;
 export function $<T extends Element = Element>(
-  root: Element,
+  root: Element | ShadowRoot,
   selector: string
 ): T;
 export function $<T extends Element = Element>(
-  arg1: string | Element,
+  arg1: string | Element | ShadowRoot,
   arg2?: string
 ): T {
   let result: Element | null;
 
   if (typeof arg1 === 'string') {
     result = document.querySelector(arg1);
-  } else if (arg1 instanceof Element && typeof arg2 === 'string') {
+  } else if (
+    (arg1 instanceof Element || arg1 instanceof ShadowRoot) &&
+    typeof arg2 === 'string'
+  ) {
     result = arg1.querySelector(arg2);
   } else {
     throw new Error('Invalid arguments passed to $()');
diff --git a/src/vscode-button/vscode-button.styles.ts b/src/vscode-button/vscode-button.styles.ts
@@ -157,6 +157,14 @@ const styles: CSSResultGroup = [
       height: 100%;
     }
 
+    .has-content-before slot[name='content-before'] {
+      margin-right: 4px;
+    }
+
+    .has-content-after slot[name='content-after'] {
+      margin-left: 4px;
+    }
+
     .icon,
     .icon-after {
       color: inherit;
diff --git a/src/vscode-button/vscode-button.test.ts b/src/vscode-button/vscode-button.test.ts
@@ -1,6 +1,7 @@
 import sinon from 'sinon';
 import {VscodeButton} from './index.js';
 import {expect, fixture, html} from '@open-wc/testing';
+import {$} from '../includes/test-helpers.js';
 
 describe('vscode-button', () => {
   it('is defined', () => {
@@ -78,7 +79,9 @@ describe('vscode-button', () => {
       `
       <div class="base" part="base">
         <vscode-icon name="account" class="icon"></vscode-icon>
+        <slot name="content-before"></slot>
         <slot></slot>
+        <slot name="content-after"></slot>
       </div>
     `
     );
@@ -93,7 +96,9 @@ describe('vscode-button', () => {
       `
       <div class="base" part="base">
         <vscode-icon name="account" spin class="icon"></vscode-icon>
+        <slot name="content-before"></slot>
         <slot></slot>
+        <slot name="content-after"></slot>
       </div>
     `
     );
@@ -111,7 +116,9 @@ describe('vscode-button', () => {
       `
       <div class="base" part="base">
         <vscode-icon name="account" class="icon" spin-duration="5"></vscode-icon>
+        <slot name="content-before"></slot>
         <slot></slot>
+        <slot name="content-after"></slot>
       </div>
     `
     );
@@ -125,7 +132,9 @@ describe('vscode-button', () => {
     expect(el).shadowDom.to.eq(
       `
       <div class="base" part="base">
+        <slot name="content-before"></slot>
         <slot></slot>
+        <slot name="content-after"></slot>
         <vscode-icon name="account" class="icon-after"></vscode-icon>
       </div>
     `
@@ -140,7 +149,9 @@ describe('vscode-button', () => {
     expect(el).shadowDom.to.eq(
       `
       <div class="base" part="base">
+        <slot name="content-before"></slot>
         <slot></slot>
+        <slot name="content-after"></slot>
         <vscode-icon name="account" class="icon-after" spin></vscode-icon>
       </div>
     `
@@ -158,7 +169,9 @@ describe('vscode-button', () => {
     expect(el).shadowDom.to.eq(
       `
       <div class="base" part="base">
+        <slot name="content-before"></slot>
         <slot></slot>
+        <slot name="content-after"></slot>
         <vscode-icon name="account" class="icon-after" spin-duration="5"></vscode-icon>
       </div>
     `
@@ -199,5 +212,25 @@ describe('vscode-button', () => {
     expect(submitSpy.called).to.be.true;
   });
 
+  it('adds custom class to wrapper if content-before slot is not empty', async () => {
+    const el = await fixture<VscodeButton>(
+      html`<vscode-button><b slot="content-before">b</b></vscode-button>`
+    );
+
+    const base = $(el.shadowRoot!, '.base');
+
+    expect(base.classList.contains('has-content-before')).to.be.true;
+  });
+
+  it('adds custom class to wrapper if content-after slot is not empty', async () => {
+    const el = await fixture<VscodeButton>(
+      html`<vscode-button><b slot="content-after">b</b></vscode-button>`
+    );
+
+    const base = $(el.shadowRoot!, '.base');
+
+    expect(base.classList.contains('has-content-after')).to.be.true;
+  });
+
   it('sets the form value');
 });
diff --git a/src/vscode-button/vscode-button.ts b/src/vscode-button/vscode-button.ts
@@ -1,5 +1,5 @@
 import {html, nothing, PropertyValueMap, TemplateResult} from 'lit';
-import {property} from 'lit/decorators.js';
+import {property, state} from 'lit/decorators.js';
 import {classMap} from 'lit/directives/class-map.js';
 import {customElement, VscElement} from '../includes/VscElement.js';
 import '../vscode-icon/index.js';
@@ -108,6 +108,12 @@ export class VscodeButton extends VscElement {
   private _prevTabindex = 0;
   private _internals: ElementInternals;
 
+  @state()
+  private _hasContentBefore = false;
+
+  @state()
+  private _hasContentAfter = false;
+
   get form(): HTMLFormElement | null {
     return this._internals.form;
   }
@@ -211,12 +217,26 @@ export class VscodeButton extends VscElement {
     this.focused = false;
   };
 
+  private _handleSlotChange(ev: Event) {
+    const slot = ev.target as HTMLSlotElement;
+
+    if (slot.name === 'content-before') {
+      this._hasContentBefore = slot.assignedElements().length > 0;
+    }
+
+    if (slot.name === 'content-after') {
+      this._hasContentAfter = slot.assignedElements().length > 0;
+    }
+  }
+
   override render(): TemplateResult {
     const hasIcon = this.icon !== '';
     const hasIconAfter = this.iconAfter !== '';
     const baseClasses = {
       base: true,
       'icon-only': this.iconOnly,
+      'has-content-before': this._hasContentBefore,
+      'has-content-after': this._hasContentAfter,
     };
 
     const iconElem = hasIcon
@@ -238,10 +258,16 @@ export class VscodeButton extends VscElement {
       : nothing;
 
     return html`
-      <div class=${classMap(baseClasses)} part="base">
+      <div
+        class=${classMap(baseClasses)}
+        part="base"
+        @slotchange=${this._handleSlotChange}
+      >
+        <slot name="content-before"></slot>
         ${iconElem}
         <slot></slot>
         ${iconAfterElem}
+        <slot name="content-after"></slot>
       </div>
     `;
   }
