Collapsible panel section component

[estruyf]

Feature/component description

Creation of an accordion / collapsible section component. Similar to the panel sections which you have on the explorer panel.

Use case

To create an experience that comes close to the OOTB VS Code experience in your webviews, it would be great to have a collapsible section component.

Screenshots/references

[hawkticehurst]

Thanks for the request!

To help a bit more with my understanding could you provide some examples or ideas of what you would use the accordion for?

For example, is your hope that the accordion would contain a tree view (like in the photo above) or some other content? If you have an extension idea or extension that you actively work on where would the accordion fit into that extension?

[estruyf]

@hawkticehurst I use the accordion to mimic the same behavior in my Front Matter panel (https://frontmatter.codes/) as all other panels from VS Code.

I just want to be able to render any kind of HTML elements in it, not only a tree view.

[idoprz]

Another example of collapse/expand. I have "tasks.json" graphical editor:

[hawkticehurst]

I just want to be able to render any kind of HTML elements in it, not only a tree view.

Sorry, one more clarification since I may be misunderstanding, but does the image you sent not already have arbitrary HTML inside the collapsable sidebar Webview Views?

[hawkticehurst]

Another example of collapse/expand. I have "tasks.json" graphical editor

Thanks! That's helpful.

[daviddossett]

I had a similar question re: rendering HTML in a panel. @estruyf are you currently using this Webview View API?

Webview views that are rendered in the sidebar or panel areas. See the webview view sample extension for more details

Based on the screenshots, I assume you already are. If that's the case, is it simply a matter of wanting that same component in an editor panel instead of the sidebar?

[estruyf]

Correct @daviddossett, I'm using it in a webview. Having the web component available would allow us to reuse it in custom sidebars and align the style.

[hawkticehurst]

Thanks for the clarification @estruyf! The last question I have is if you could give a bit more information/screenshots about the task.json example.

It seems pretty straightforward and makes me wonder if it would be possible to implement a sort of hybrid extension that uses both the TreeView API and Webview API in a similar fashion to the notepad sample extension?

That way you get the built-in styling of a collapsible UI element (not to mention the speed of a native API), along with the flexibility of rendering whatever content you need inside a webview.

But again I could certainly be misinterpreting the screenshot you sent so any further info would be appreciated!

[idoprz]

The tasks.json was actually my example. 🙄 We do have tasks in a TreeView. But if you want to see the task dependent tasks, it should be in a tree inside the webview.

[hawkticehurst]

Ahh shoot my apologies! Totally skimmed over the username without looking closely 🤦🏻‍♂️.

But also got it, thanks for clarifying!