Skip to content

Update Collapsible docs #23

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
bendera merged 1 commit into from
Aug 8, 2025
Merged

Update Collapsible docs #23

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 1 addition & 1 deletion src/components/examples/collapsible/ActionsExample.astro
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
<vscode-collapsible title="Actions example" class="collapsible" open>
<vscode-collapsible heading="Actions example" class="collapsible" open>
<vscode-icon
name="file-add"
action-icon
Expand Down
4 changes: 2 additions & 2 deletions src/components/examples/collapsible/BasicExample.astro
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,9 +1,9 @@
---
---
<vscode-collapsible title="Basic example" open>
<vscode-collapsible heading="Basic example" open>
<p>Open by default</p>
</vscode-collapsible>
<vscode-collapsible title="Basic example">
<vscode-collapsible heading="Basic example">
<p>Suspendisse potenti. Maecenas eu egestas metus. Nulla eget placerat mi, et efficitur augue.</p>
</vscode-collapsible>

Expand Down
23 changes: 0 additions & 23 deletions src/components/examples/collapsible/CssBodyPartExample.astro
View file
Open in desktop

This file was deleted.

2 changes: 1 addition & 1 deletion src/components/examples/collapsible/DecorationsExample.astro
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
---
---
<vscode-collapsible title="Decorations example" class="collapsible">
<vscode-collapsible heading="Decorations example" class="collapsible">
<vscode-badge variant="counter" slot="decorations">99</vscode-badge>
<p>
Suspendisse potenti. Maecenas eu egestas metus. Nulla eget placerat mi, et
Expand Down
1 change: 1 addition & 0 deletions src/components/examples/collapsible/Imports.astro
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,6 +3,7 @@
import "@vscode-elements/elements/dist/vscode-badge/index.js";
import "@vscode-elements/elements/dist/vscode-scrollable/index.js";
import "@vscode-elements/elements/dist/vscode-tree/index.js";
import "@vscode-elements/elements/dist/vscode-tree-item/index.js";
import "@vscode-elements/elements/dist/vscode-single-select/index.js";
import "@vscode-elements/elements/dist/vscode-option/index.js";
import "@vscode-elements/elements/dist/vscode-collapsible/index.js";
Expand Down
98 changes: 67 additions & 31 deletions src/components/examples/collapsible/ScrollableExample.astro
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,9 +1,5 @@
---

---

<vscode-collapsible
title="Timeline"
heading="Timeline"
description="vscode-collapsible.ts"
class="collapsible complex-example"
open
Expand All @@ -15,7 +11,72 @@
<vscode-icon name="filter" action-icon slot="actions" id="filter-icon"
></vscode-icon>
<vscode-scrollable>
<vscode-tree id="tree-example"></vscode-tree>
<vscode-tree>
<vscode-tree-item>
<vscode-icon name="circle-outline" slot="icon-leaf"></vscode-icon>
File saved
</vscode-tree-item>
<vscode-tree-item>
<vscode-icon name="circle-outline" slot="icon-leaf"></vscode-icon>
File saved
</vscode-tree-item>
<vscode-tree-item>
<vscode-icon name="circle-outline" slot="icon-leaf"></vscode-icon>
File saved
</vscode-tree-item>
<vscode-tree-item>
<vscode-icon name="circle-outline" slot="icon-leaf"></vscode-icon>
File saved
</vscode-tree-item>
<vscode-tree-item>
<vscode-icon name="circle-outline" slot="icon-leaf"></vscode-icon>
File saved
</vscode-tree-item>
<vscode-tree-item>
<vscode-icon name="circle-outline" slot="icon-leaf"></vscode-icon>
File saved
</vscode-tree-item>
<vscode-tree-item>
<vscode-icon name="circle-outline" slot="icon-leaf"></vscode-icon>
File saved
</vscode-tree-item>
<vscode-tree-item>
<vscode-icon name="circle-outline" slot="icon-leaf"></vscode-icon>
File saved
</vscode-tree-item>
<vscode-tree-item>
<vscode-icon name="circle-outline" slot="icon-leaf"></vscode-icon>
File saved
</vscode-tree-item>
<vscode-tree-item>
<vscode-icon name="circle-outline" slot="icon-leaf"></vscode-icon>
File saved
</vscode-tree-item>
<vscode-tree-item>
<vscode-icon name="circle-outline" slot="icon-leaf"></vscode-icon>
File saved
</vscode-tree-item>
<vscode-tree-item>
<vscode-icon name="circle-outline" slot="icon-leaf"></vscode-icon>
File saved
</vscode-tree-item>
<vscode-tree-item>
<vscode-icon name="circle-outline" slot="icon-leaf"></vscode-icon>
File saved
</vscode-tree-item>
<vscode-tree-item>
<vscode-icon name="circle-outline" slot="icon-leaf"></vscode-icon>
File saved
</vscode-tree-item>
<vscode-tree-item>
<vscode-icon name="circle-outline" slot="icon-leaf"></vscode-icon>
File saved
</vscode-tree-item>
<vscode-tree-item>
<vscode-icon name="circle-outline" slot="icon-leaf"></vscode-icon>
File saved
</vscode-tree-item>
</vscode-tree>
</vscode-scrollable>
</vscode-collapsible>

Expand All @@ -26,12 +87,6 @@
</style>

<script>
import type { VscodeTree } from "@vscode-elements/elements/dist/vscode-tree";

const icons = {
leaf: "circle-outline",
};
const tree = document.getElementById("tree-example") as VscodeTree;
document.getElementById("pin-icon")!.addEventListener("click", (ev) => {
ev.stopPropagation();
});
Expand All @@ -41,23 +96,4 @@
document.getElementById("filter-icon")!.addEventListener("click", (ev) => {
ev.stopPropagation();
});

// tree.data = [
// { icons, label: "File Saved" },
// { icons, label: "File Saved" },
// { icons, label: "File Saved" },
// { icons, label: "File Saved" },
// { icons, label: "File Saved" },
// { icons, label: "File Saved" },
// { icons, label: "File Saved" },
// { icons, label: "File Saved" },
// { icons, label: "File Saved" },
// { icons, label: "File Saved" },
// { icons, label: "File Saved" },
// { icons, label: "File Saved" },
// { icons, label: "File Saved" },
// { icons, label: "File Saved" },
// { icons, label: "File Saved" },
// { icons, label: "File Saved" },
// ];
</script>
2 changes: 1 addition & 1 deletion src/components/examples/collapsible/ToggleExample.astro
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
<vscode-collapsible title="Dispatch toggle event" id="toggle-event-example">
<vscode-collapsible heading="Dispatch toggle event" id="toggle-event-example">
<p>Test content</p>
</vscode-collapsible>

Expand Down
92 changes: 22 additions & 70 deletions src/content/docs/components/collapsible.mdx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -11,7 +11,6 @@ import ActionsExample from "@components/examples/collapsible/ActionsExample.astr
import DecorationsExample from "@components/examples/collapsible/DecorationsExample.astro";
import ScrollableExample from "@components/examples/collapsible/ScrollableExample.astro";
import ToggleExample from "@components/examples/collapsible/ToggleExample.astro";
import CssBodyPartExample from "@components/examples/collapsible/CssBodyPartExample.astro";

<Imports />
<PageSwitcher />
Expand All @@ -22,10 +21,10 @@ import CssBodyPartExample from "@components/examples/collapsible/CssBodyPartExam
<BasicExample />
<Fragment slot="html">
```html
<vscode-collapsible title="Basic example" open>
<vscode-collapsible heading="Basic example" open>
<p>Open by default</p>
</vscode-collapsible>
<vscode-collapsible title="Basic example">
<vscode-collapsible heading="Basic example">
<p>Suspendisse potenti. Maecenas eu egestas metus. Nulla eget placerat mi, et efficitur augue.</p>
</vscode-collapsible>
```
Expand All @@ -41,13 +40,13 @@ import CssBodyPartExample from "@components/examples/collapsible/CssBodyPartExam

## Toggle event

A custom event is dispatched when the visibility of content changes.
A custom event is dispatched when the visibility of content changes. Check the console log for the triggered events.

<Demo>
<ToggleExample />
<Fragment slot="html">
```html
<vscode-collapsible title="Dispatch toggle event" id="toggle-event-example">
<vscode-collapsible heading="Dispatch toggle event" id="toggle-event-example">
<p>Test content</p>
</vscode-collapsible>
```
Expand All @@ -60,6 +59,7 @@ A custom event is dispatched when the visibility of content changes.
console.log(ev);
});
```

</Fragment>
</Demo>

Expand All @@ -72,7 +72,7 @@ visible exclusively when the component is in the opened state.
<ActionsExample />
<Fragment slot="html">
```html {2-15}
<vscode-collapsible title="Actions example" class="collapsible" open>
<vscode-collapsible heading="Actions example" class="collapsible" open>
<vscode-icon
name="file-add"
action-icon
Expand Down Expand Up @@ -146,7 +146,7 @@ Elements in the `decorations` slot are always visible, in contrast to the `actio
<DecorationsExample />
<Fragment slot="html">
```html {2}
<vscode-collapsible title="Decorations example" class="collapsible">
<vscode-collapsible heading="Decorations example" class="collapsible">
<vscode-badge variant="counter" slot="decorations">99</vscode-badge>
<p>
Suspendisse potenti. Maecenas eu egestas metus. Nulla eget placerat mi, et
Expand All @@ -164,43 +164,6 @@ Elements in the `decorations` slot are always visible, in contrast to the `actio
</Fragment>
</Demo>

## Overflown content

The overflown content of the Collapsible component is hidden by default. Sometimes, this behavior
can be problematic. In such cases, it is useful that the Collapsible body is customizable.

<Demo>
<CssBodyPartExample />
<Fragment slot="html">
```html
<vscode-collapsible title="Customized CSS part example" class="css-part-example" open>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
<vscode-single-select>
<vscode-option>Lorem</vscode-option>
<vscode-option>Ipsum</vscode-option>
<vscode-option>Dolor</vscode-option>
<vscode-option>Sit</vscode-option>
<vscode-option>Et</vscode-option>
<vscode-option>Amur</vscode-option>
<vscode-option>Sadispcing</vscode-option>
</vscode-single-select>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
</vscode-collapsible>
```
</Fragment>
<Fragment slot="css">
```css
.css-part-example::part(body) {
overflow: visible;
}

.css-part-example p:last-child {
margin-bottom: 0;
}
```
</Fragment>
</Demo>

## Displaying large amounts of data

Long content can be managed by the [Scrollable](/components/scrollable) component.
Expand All @@ -210,7 +173,7 @@ Long content can be managed by the [Scrollable](/components/scrollable) componen
<Fragment slot="html">
```html
<vscode-collapsible
title="Timeline"
heading="Timeline"
description="vscode-collapsible.ts"
class="collapsible complex-example"
open
Expand All @@ -222,7 +185,17 @@ Long content can be managed by the [Scrollable](/components/scrollable) componen
<vscode-icon name="filter" action-icon slot="actions" id="filter-icon"
></vscode-icon>
<vscode-scrollable>
<vscode-tree id="tree-example"></vscode-tree>
<vscode-tree>
<vscode-tree-item>
<vscode-icon name="circle-outline" slot="icon-leaf"></vscode-icon>
File saved
</vscode-tree-item>
<vscode-tree-item>
<vscode-icon name="circle-outline" slot="icon-leaf"></vscode-icon>
File saved
</vscode-tree-item>
...
</vscode-tree>
</vscode-scrollable>
</vscode-collapsible>
```
Expand All @@ -236,39 +209,18 @@ Long content can be managed by the [Scrollable](/components/scrollable) componen
</Fragment>
<Fragment slot="js">
```javascript
const icons = {
leaf: "circle-outline",
};
const tree = document.getElementById("tree-example");
document.getElementById("pin-icon").addEventListener("click", (ev) => {
// Prevent collapsing of the component:
ev.stopPropagation();
});
document.getElementById("refresh-icon").addEventListener("click", (ev) => {
// Prevent collapsing of the component:
ev.stopPropagation();
});
document.getElementById("filter-icon").addEventListener("click", (ev) => {
// Prevent collapsing of the component:
ev.stopPropagation();
});

tree.data = [
{ icons, label: "File Saved" },
{ icons, label: "File Saved" },
{ icons, label: "File Saved" },
{ icons, label: "File Saved" },
{ icons, label: "File Saved" },
{ icons, label: "File Saved" },
{ icons, label: "File Saved" },
{ icons, label: "File Saved" },
{ icons, label: "File Saved" },
{ icons, label: "File Saved" },
{ icons, label: "File Saved" },
{ icons, label: "File Saved" },
{ icons, label: "File Saved" },
{ icons, label: "File Saved" },
{ icons, label: "File Saved" },
{ icons, label: "File Saved" },
];
```

</Fragment>
</Demo>