Skip to content

Commit da0abda

Browse files
benderabendera
committed
Add alwaysSHowHeaderActions prop to Collapsible
1 parent 1f0dc78 commit da0abda

File tree

4 files changed

+168
-6
lines changed

4 files changed

+168
-6
lines changed

‎CHANGELOG.md‎

Lines changed: 3 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -8,10 +8,11 @@ The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/)
88

99
### Changed
1010

11-
- The dropdown logic in **SingleSelect** and **MultiSelect** has been rewritten using the
12-
[Popover API](https://developer.mozilla.org/en-US/docs/Web/API/Popover_API). This prevents issues
11+
- The dropdown logic in **SingleSelect** and **MultiSelect** has been rewritten using the
12+
[Popover API](https://developer.mozilla.org/en-US/docs/Web/API/Popover_API). This prevents issues
1313
such as an element overlapping the dropdown or its overflowing parts being clipped (e.g., in the
1414
Collapsible component).
15+
- Added `alwaysShowHeaderActions` property to **Collapsible**.
1516

1617
## [2.0.1] - 2025-08-05
1718

‎dev/vscode-collapsible/always-show-header-actions.html‎

Lines changed: 146 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,146 @@
1+
<!doctype html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8">
5+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
6+
<title>VSCode Elements</title>
7+
<link
8+
rel="stylesheet"
9+
href="/node_modules/@vscode/codicons/dist/codicon.css"
10+
id="vscode-codicon-stylesheet"
11+
>
12+
<script
13+
type="module"
14+
src="/node_modules/@vscode-elements/webview-playground/dist/index.js"
15+
></script>
16+
<script type="module" src="/dist/main.js"></script>
17+
<script>
18+
const logEvents = (selector, eventType) => {
19+
document.querySelector(selector).addEventListener(eventType, (ev) => {
20+
console.log(ev);
21+
});
22+
};
23+
</script>
24+
</head>
25+
26+
<body class="vscode-light">
27+
<div class="story">
28+
<h2 class="story-title">Basic example</h2>
29+
<div class="story-content">
30+
<style>
31+
.collapsible1::part(body) {
32+
overflow: visible;
33+
}
34+
</style>
35+
<vscode-demo>
36+
<vscode-collapsible
37+
heading="Lorem"
38+
description="Ipsum Dolor sit"
39+
open
40+
class="collapsible1"
41+
always-show-header-actions
42+
>
43+
<vscode-icon
44+
name="account"
45+
action-icon
46+
title="Account"
47+
tabindex="0"
48+
slot="actions"
49+
></vscode-icon>
50+
<vscode-icon
51+
name="git-compare"
52+
action-icon
53+
title="Git compare"
54+
tabindex="0"
55+
slot="actions"
56+
></vscode-icon>
57+
<vscode-icon
58+
name="add"
59+
action-icon
60+
title="Add"
61+
tabindex="0"
62+
slot="actions"
63+
></vscode-icon>
64+
<vscode-badge slot="decorators" variant="counter">9</vscode-badge>
65+
<p>lorem ipsum dolor sit</p>
66+
<p>lorem ipsum dolor sit</p>
67+
<p>lorem ipsum dolor sit</p>
68+
<p>lorem ipsum dolor sit</p>
69+
<p>lorem ipsum dolor sit</p>
70+
<p>lorem ipsum dolor sit</p>
71+
<p>lorem ipsum dolor sit</p>
72+
<vscode-single-select position="above">
73+
<vscode-option>Lorem Ipsum</vscode-option>
74+
<vscode-option>Lorem Ipsum</vscode-option>
75+
<vscode-option>Lorem Ipsum</vscode-option>
76+
<vscode-option>Lorem Ipsum</vscode-option>
77+
<vscode-option>Lorem Ipsum</vscode-option>
78+
<vscode-option>Lorem Ipsum</vscode-option>
79+
<vscode-option>Lorem Ipsum</vscode-option>
80+
<vscode-option>Lorem Ipsum</vscode-option>
81+
<vscode-option>Lorem Ipsum</vscode-option>
82+
<vscode-option>Lorem Ipsum</vscode-option>
83+
<vscode-option>Lorem Ipsum</vscode-option>
84+
<vscode-option>Lorem Ipsum</vscode-option>
85+
<vscode-option>Lorem Ipsum</vscode-option>
86+
<vscode-option>Lorem Ipsum</vscode-option>
87+
<vscode-option>Lorem Ipsum</vscode-option>
88+
<vscode-option>Lorem Ipsum</vscode-option>
89+
<vscode-option>Lorem Ipsum</vscode-option>
90+
</vscode-single-select>
91+
<p>lorem ipsum dolor sit</p>
92+
</vscode-collapsible>
93+
<vscode-collapsible heading="Ipsum">
94+
<div slot="actions">
95+
<vscode-icon
96+
name="account"
97+
action-icon
98+
title="Account"
99+
tabindex="0"
100+
></vscode-icon>
101+
<vscode-icon
102+
name="add"
103+
action-icon
104+
title="Add"
105+
tabindex="0"
106+
></vscode-icon>
107+
<vscode-icon
108+
name="git-compare"
109+
action-icon
110+
title="Git compare"
111+
tabindex="0"
112+
></vscode-icon>
113+
</div>
114+
<p>lorem ipsum dolor sit</p>
115+
<p>lorem ipsum dolor sit</p>
116+
<p>lorem ipsum dolor sit</p>
117+
<p>lorem ipsum dolor sit</p>
118+
<p>lorem ipsum dolor sit</p>
119+
<p>lorem ipsum dolor sit</p>
120+
<p>lorem ipsum dolor sit</p>
121+
</vscode-collapsible>
122+
<vscode-collapsible title="Dolor"></vscode-collapsible>
123+
</vscode-demo>
124+
<script type="module">
125+
const icons = document.querySelectorAll('vscode-icon[action-icon]');
126+
127+
icons.forEach((i) => {
128+
i.addEventListener('click', (event) => {
129+
event.stopPropagation();
130+
131+
console.log(event);
132+
});
133+
134+
i.addEventListener('keydown', (event) => {
135+
event.stopPropagation();
136+
137+
if (event.key === 'Enter') {
138+
console.log(event);
139+
}
140+
});
141+
});
142+
</script>
143+
</div>
144+
</div>
145+
</body>
146+
</html>

‎src/vscode-collapsible/vscode-collapsible.styles.ts‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -69,7 +69,8 @@ const styles: CSSResultGroup = [
6969
display: none;
7070
}
7171
72-
.collapsible.open .actions {
72+
.collapsible.open .actions.always-visible,
73+
.collapsible.open:hover .actions {
7374
display: block;
7475
}
7576

‎src/vscode-collapsible/vscode-collapsible.ts‎

Lines changed: 17 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -30,6 +30,14 @@ export type VscCollapsibleToggleEvent = CustomEvent<{open: boolean}>;
3030
export class VscodeCollapsible extends VscElement {
3131
static override styles = styles;
3232

33+
/**
34+
* When enabled, header actions are always visible; otherwise, they appear only when the cursor
35+
* hovers over the component. Actions are shown only when the Collapsible component is open. This
36+
* property is designed to use the `workbench.view.alwaysShowHeaderActions` setting.
37+
*/
38+
@property({type: Boolean, reflect: true, attribute: 'always-show-header-actions'})
39+
alwaysShowHeaderActions = false;
40+
3341
/**
3442
* Component heading text
3543
*
@@ -73,7 +81,11 @@ export class VscodeCollapsible extends VscElement {
7381
}
7482

7583
override render(): TemplateResult {
76-
const classes = classMap({collapsible: true, open: this.open});
84+
const classes = {collapsible: true, open: this.open};
85+
const actionsClasses = {
86+
actions: true,
87+
'always-visible': this.alwaysShowHeaderActions,
88+
};
7789
const heading = this.heading ? this.heading : this.title;
7890

7991
const icon = html`<svg
@@ -96,7 +108,7 @@ export class VscodeCollapsible extends VscElement {
96108
: nothing;
97109

98110
return html`
99-
<div class=${classes}>
111+
<div class=${classMap(classes)}>
100112
<div
101113
class="collapsible-header"
102114
tabindex="0"
@@ -106,7 +118,9 @@ export class VscodeCollapsible extends VscElement {
106118
${icon}
107119
<h3 class="title">${heading}${descriptionMarkup}</h3>
108120
<div class="header-slots">
109-
<div class="actions"><slot name="actions"></slot></div>
121+
<div class=${classMap(actionsClasses)}>
122+
<slot name="actions"></slot>
123+
</div>
110124
<div class="decorations"><slot name="decorations"></slot></div>
111125
</div>
112126
</div>

0 commit comments

Comments
 (0)