Skip to content

Commit 383b659

Browse files
benderabendera
committed
Update Collapsible docs
1 parent eb093fc commit 383b659

File tree

8 files changed

+95
-129
lines changed

8 files changed

+95
-129
lines changed

‎src/components/examples/collapsible/ActionsExample.astro‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
<vscode-collapsible title="Actions example" class="collapsible" open>
1+
<vscode-collapsible heading="Actions example" class="collapsible" open>
22
<vscode-icon
33
name="file-add"
44
action-icon

‎src/components/examples/collapsible/BasicExample.astro‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,9 @@
11
---
22
---
3-
<vscode-collapsible title="Basic example" open>
3+
<vscode-collapsible heading="Basic example" open>
44
<p>Open by default</p>
55
</vscode-collapsible>
6-
<vscode-collapsible title="Basic example">
6+
<vscode-collapsible heading="Basic example">
77
<p>Suspendisse potenti. Maecenas eu egestas metus. Nulla eget placerat mi, et efficitur augue.</p>
88
</vscode-collapsible>
99

‎src/components/examples/collapsible/CssBodyPartExample.astro‎

Lines changed: 0 additions & 23 deletions
This file was deleted.

‎src/components/examples/collapsible/DecorationsExample.astro‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
---
22
---
3-
<vscode-collapsible title="Decorations example" class="collapsible">
3+
<vscode-collapsible heading="Decorations example" class="collapsible">
44
<vscode-badge variant="counter" slot="decorations">99</vscode-badge>
55
<p>
66
Suspendisse potenti. Maecenas eu egestas metus. Nulla eget placerat mi, et

‎src/components/examples/collapsible/Imports.astro‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -3,6 +3,7 @@
33
import "@vscode-elements/elements/dist/vscode-badge/index.js";
44
import "@vscode-elements/elements/dist/vscode-scrollable/index.js";
55
import "@vscode-elements/elements/dist/vscode-tree/index.js";
6+
import "@vscode-elements/elements/dist/vscode-tree-item/index.js";
67
import "@vscode-elements/elements/dist/vscode-single-select/index.js";
78
import "@vscode-elements/elements/dist/vscode-option/index.js";
89
import "@vscode-elements/elements/dist/vscode-collapsible/index.js";

‎src/components/examples/collapsible/ScrollableExample.astro‎

Lines changed: 67 additions & 31 deletions
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,5 @@
1-
---
2-
3-
---
4-
51
<vscode-collapsible
6-
title="Timeline"
2+
heading="Timeline"
73
description="vscode-collapsible.ts"
84
class="collapsible complex-example"
95
open
@@ -15,7 +11,72 @@
1511
<vscode-icon name="filter" action-icon slot="actions" id="filter-icon"
1612
></vscode-icon>
1713
<vscode-scrollable>
18-
<vscode-tree id="tree-example"></vscode-tree>
14+
<vscode-tree>
15+
<vscode-tree-item>
16+
<vscode-icon name="circle-outline" slot="icon-leaf"></vscode-icon>
17+
File saved
18+
</vscode-tree-item>
19+
<vscode-tree-item>
20+
<vscode-icon name="circle-outline" slot="icon-leaf"></vscode-icon>
21+
File saved
22+
</vscode-tree-item>
23+
<vscode-tree-item>
24+
<vscode-icon name="circle-outline" slot="icon-leaf"></vscode-icon>
25+
File saved
26+
</vscode-tree-item>
27+
<vscode-tree-item>
28+
<vscode-icon name="circle-outline" slot="icon-leaf"></vscode-icon>
29+
File saved
30+
</vscode-tree-item>
31+
<vscode-tree-item>
32+
<vscode-icon name="circle-outline" slot="icon-leaf"></vscode-icon>
33+
File saved
34+
</vscode-tree-item>
35+
<vscode-tree-item>
36+
<vscode-icon name="circle-outline" slot="icon-leaf"></vscode-icon>
37+
File saved
38+
</vscode-tree-item>
39+
<vscode-tree-item>
40+
<vscode-icon name="circle-outline" slot="icon-leaf"></vscode-icon>
41+
File saved
42+
</vscode-tree-item>
43+
<vscode-tree-item>
44+
<vscode-icon name="circle-outline" slot="icon-leaf"></vscode-icon>
45+
File saved
46+
</vscode-tree-item>
47+
<vscode-tree-item>
48+
<vscode-icon name="circle-outline" slot="icon-leaf"></vscode-icon>
49+
File saved
50+
</vscode-tree-item>
51+
<vscode-tree-item>
52+
<vscode-icon name="circle-outline" slot="icon-leaf"></vscode-icon>
53+
File saved
54+
</vscode-tree-item>
55+
<vscode-tree-item>
56+
<vscode-icon name="circle-outline" slot="icon-leaf"></vscode-icon>
57+
File saved
58+
</vscode-tree-item>
59+
<vscode-tree-item>
60+
<vscode-icon name="circle-outline" slot="icon-leaf"></vscode-icon>
61+
File saved
62+
</vscode-tree-item>
63+
<vscode-tree-item>
64+
<vscode-icon name="circle-outline" slot="icon-leaf"></vscode-icon>
65+
File saved
66+
</vscode-tree-item>
67+
<vscode-tree-item>
68+
<vscode-icon name="circle-outline" slot="icon-leaf"></vscode-icon>
69+
File saved
70+
</vscode-tree-item>
71+
<vscode-tree-item>
72+
<vscode-icon name="circle-outline" slot="icon-leaf"></vscode-icon>
73+
File saved
74+
</vscode-tree-item>
75+
<vscode-tree-item>
76+
<vscode-icon name="circle-outline" slot="icon-leaf"></vscode-icon>
77+
File saved
78+
</vscode-tree-item>
79+
</vscode-tree>
1980
</vscode-scrollable>
2081
</vscode-collapsible>
2182

@@ -26,12 +87,6 @@
2687
</style>
2788

2889
<script>
29-
import type { VscodeTree } from "@vscode-elements/elements/dist/vscode-tree";
30-
31-
const icons = {
32-
leaf: "circle-outline",
33-
};
34-
const tree = document.getElementById("tree-example") as VscodeTree;
3590
document.getElementById("pin-icon")!.addEventListener("click", (ev) => {
3691
ev.stopPropagation();
3792
});
@@ -41,23 +96,4 @@
4196
document.getElementById("filter-icon")!.addEventListener("click", (ev) => {
4297
ev.stopPropagation();
4398
});
44-
45-
// tree.data = [
46-
// { icons, label: "File Saved" },
47-
// { icons, label: "File Saved" },
48-
// { icons, label: "File Saved" },
49-
// { icons, label: "File Saved" },
50-
// { icons, label: "File Saved" },
51-
// { icons, label: "File Saved" },
52-
// { icons, label: "File Saved" },
53-
// { icons, label: "File Saved" },
54-
// { icons, label: "File Saved" },
55-
// { icons, label: "File Saved" },
56-
// { icons, label: "File Saved" },
57-
// { icons, label: "File Saved" },
58-
// { icons, label: "File Saved" },
59-
// { icons, label: "File Saved" },
60-
// { icons, label: "File Saved" },
61-
// { icons, label: "File Saved" },
62-
// ];
6399
</script>

‎src/components/examples/collapsible/ToggleExample.astro‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
<vscode-collapsible title="Dispatch toggle event" id="toggle-event-example">
1+
<vscode-collapsible heading="Dispatch toggle event" id="toggle-event-example">
22
<p>Test content</p>
33
</vscode-collapsible>
44

‎src/content/docs/components/collapsible.mdx‎

Lines changed: 22 additions & 70 deletions
Original file line numberDiff line numberDiff line change
@@ -11,7 +11,6 @@ import ActionsExample from "@components/examples/collapsible/ActionsExample.astr
1111
import DecorationsExample from "@components/examples/collapsible/DecorationsExample.astro";
1212
import ScrollableExample from "@components/examples/collapsible/ScrollableExample.astro";
1313
import ToggleExample from "@components/examples/collapsible/ToggleExample.astro";
14-
import CssBodyPartExample from "@components/examples/collapsible/CssBodyPartExample.astro";
1514

1615
<Imports />
1716
<PageSwitcher />
@@ -22,10 +21,10 @@ import CssBodyPartExample from "@components/examples/collapsible/CssBodyPartExam
2221
<BasicExample />
2322
<Fragment slot="html">
2423
```html
25-
<vscode-collapsible title="Basic example" open>
24+
<vscode-collapsible heading="Basic example" open>
2625
<p>Open by default</p>
2726
</vscode-collapsible>
28-
<vscode-collapsible title="Basic example">
27+
<vscode-collapsible heading="Basic example">
2928
<p>Suspendisse potenti. Maecenas eu egestas metus. Nulla eget placerat mi, et efficitur augue.</p>
3029
</vscode-collapsible>
3130
```
@@ -41,13 +40,13 @@ import CssBodyPartExample from "@components/examples/collapsible/CssBodyPartExam
4140

4241
## Toggle event
4342

44-
A custom event is dispatched when the visibility of content changes.
43+
A custom event is dispatched when the visibility of content changes. Check the console log for the triggered events.
4544

4645
<Demo>
4746
<ToggleExample />
4847
<Fragment slot="html">
4948
```html
50-
<vscode-collapsible title="Dispatch toggle event" id="toggle-event-example">
49+
<vscode-collapsible heading="Dispatch toggle event" id="toggle-event-example">
5150
<p>Test content</p>
5251
</vscode-collapsible>
5352
```
@@ -60,6 +59,7 @@ A custom event is dispatched when the visibility of content changes.
6059
console.log(ev);
6160
});
6261
```
62+
6363
</Fragment>
6464
</Demo>
6565

@@ -72,7 +72,7 @@ visible exclusively when the component is in the opened state.
7272
<ActionsExample />
7373
<Fragment slot="html">
7474
```html {2-15}
75-
<vscode-collapsible title="Actions example" class="collapsible" open>
75+
<vscode-collapsible heading="Actions example" class="collapsible" open>
7676
<vscode-icon
7777
name="file-add"
7878
action-icon
@@ -146,7 +146,7 @@ Elements in the `decorations` slot are always visible, in contrast to the `actio
146146
<DecorationsExample />
147147
<Fragment slot="html">
148148
```html {2}
149-
<vscode-collapsible title="Decorations example" class="collapsible">
149+
<vscode-collapsible heading="Decorations example" class="collapsible">
150150
<vscode-badge variant="counter" slot="decorations">99</vscode-badge>
151151
<p>
152152
Suspendisse potenti. Maecenas eu egestas metus. Nulla eget placerat mi, et
@@ -164,43 +164,6 @@ Elements in the `decorations` slot are always visible, in contrast to the `actio
164164
</Fragment>
165165
</Demo>
166166

167-
## Overflown content
168-
169-
The overflown content of the Collapsible component is hidden by default. Sometimes, this behavior
170-
can be problematic. In such cases, it is useful that the Collapsible body is customizable.
171-
172-
<Demo>
173-
<CssBodyPartExample />
174-
<Fragment slot="html">
175-
```html
176-
<vscode-collapsible title="Customized CSS part example" class="css-part-example" open>
177-
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
178-
<vscode-single-select>
179-
<vscode-option>Lorem</vscode-option>
180-
<vscode-option>Ipsum</vscode-option>
181-
<vscode-option>Dolor</vscode-option>
182-
<vscode-option>Sit</vscode-option>
183-
<vscode-option>Et</vscode-option>
184-
<vscode-option>Amur</vscode-option>
185-
<vscode-option>Sadispcing</vscode-option>
186-
</vscode-single-select>
187-
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
188-
</vscode-collapsible>
189-
```
190-
</Fragment>
191-
<Fragment slot="css">
192-
```css
193-
.css-part-example::part(body) {
194-
overflow: visible;
195-
}
196-
197-
.css-part-example p:last-child {
198-
margin-bottom: 0;
199-
}
200-
```
201-
</Fragment>
202-
</Demo>
203-
204167
## Displaying large amounts of data
205168

206169
Long content can be managed by the [Scrollable](/components/scrollable) component.
@@ -210,7 +173,7 @@ Long content can be managed by the [Scrollable](/components/scrollable) componen
210173
<Fragment slot="html">
211174
```html
212175
<vscode-collapsible
213-
title="Timeline"
176+
heading="Timeline"
214177
description="vscode-collapsible.ts"
215178
class="collapsible complex-example"
216179
open
@@ -222,7 +185,17 @@ Long content can be managed by the [Scrollable](/components/scrollable) componen
222185
<vscode-icon name="filter" action-icon slot="actions" id="filter-icon"
223186
></vscode-icon>
224187
<vscode-scrollable>
225-
<vscode-tree id="tree-example"></vscode-tree>
188+
<vscode-tree>
189+
<vscode-tree-item>
190+
<vscode-icon name="circle-outline" slot="icon-leaf"></vscode-icon>
191+
File saved
192+
</vscode-tree-item>
193+
<vscode-tree-item>
194+
<vscode-icon name="circle-outline" slot="icon-leaf"></vscode-icon>
195+
File saved
196+
</vscode-tree-item>
197+
...
198+
</vscode-tree>
226199
</vscode-scrollable>
227200
</vscode-collapsible>
228201
```
@@ -236,39 +209,18 @@ Long content can be managed by the [Scrollable](/components/scrollable) componen
236209
</Fragment>
237210
<Fragment slot="js">
238211
```javascript
239-
const icons = {
240-
leaf: "circle-outline",
241-
};
242-
const tree = document.getElementById("tree-example");
243212
document.getElementById("pin-icon").addEventListener("click", (ev) => {
213+
// Prevent collapsing of the component:
244214
ev.stopPropagation();
245215
});
246216
document.getElementById("refresh-icon").addEventListener("click", (ev) => {
217+
// Prevent collapsing of the component:
247218
ev.stopPropagation();
248219
});
249220
document.getElementById("filter-icon").addEventListener("click", (ev) => {
221+
// Prevent collapsing of the component:
250222
ev.stopPropagation();
251223
});
252-
253-
tree.data = [
254-
{ icons, label: "File Saved" },
255-
{ icons, label: "File Saved" },
256-
{ icons, label: "File Saved" },
257-
{ icons, label: "File Saved" },
258-
{ icons, label: "File Saved" },
259-
{ icons, label: "File Saved" },
260-
{ icons, label: "File Saved" },
261-
{ icons, label: "File Saved" },
262-
{ icons, label: "File Saved" },
263-
{ icons, label: "File Saved" },
264-
{ icons, label: "File Saved" },
265-
{ icons, label: "File Saved" },
266-
{ icons, label: "File Saved" },
267-
{ icons, label: "File Saved" },
268-
{ icons, label: "File Saved" },
269-
{ icons, label: "File Saved" },
270-
];
271224
```
272-
273225
</Fragment>
274226
</Demo>

0 commit comments

Comments
 (0)