Prevent collapsing when clicking the decoration icon

Author: bendera

dev/vscode-collapsible/actions-stop-propagation.html

@@ -46,7 +46,7 @@ <h1>Component demo</h1>
             aria-role="button"
             id="btn-refresh"
             title="Refresh"
-            slot="actions"
+            slot="decorations"
           ></vscode-icon>
           <p>Lorem ipsum</p>
           <p>Lorem ipsum</p>

src/vscode-collapsible/vscode-collapsible.test.ts

@@ -120,4 +120,21 @@ describe('vscode-collapsible', () => {
 
     expect(el.open).to.be.true;
   });
+
+  it('prevents collapse on decoration icon click', async () => {
+    const el = await fixture<VscodeCollapsible>(html`
+      <vscode-collapsible always-show-header-actions open
+        ><vscode-icon
+          name="file"
+          slot="decorations"
+          id="action-icon"
+        ></vscode-icon>
+      </vscode-collapsible>
+    `);
+
+    const actionIcon = $('#action-icon');
+    await clickOnElement(actionIcon);
+
+    expect(el.open).to.be.true;
+  });
 });

src/vscode-collapsible/vscode-collapsible.ts

@@ -84,7 +84,7 @@ export class VscodeCollapsible extends VscElement {
     }
   }
 
-  private _onActionClick(event: PointerEvent) {
+  private _onHeaderSlotClick(event: PointerEvent) {
     event.stopPropagation();
   }
 
@@ -127,9 +127,11 @@ export class VscodeCollapsible extends VscElement {
           <h3 class="title">${heading}${descriptionMarkup}</h3>
           <div class="header-slots">
             <div class=${classMap(actionsClasses)}>
-              <slot name="actions" @click=${this._onActionClick}></slot>
+              <slot name="actions" @click=${this._onHeaderSlotClick}></slot>
+            </div>
+            <div class="decorations">
+              <slot name="decorations" @click=${this._onHeaderSlotClick}></slot>
             </div>
-            <div class="decorations"><slot name="decorations"></slot></div>
           </div>
         </div>
         <div class="collapsible-body" part="body">