Provide a UI component toolkit for WebViews

[eamodio]

Refs: #93604

As WebViews get used more and more to provide functionality (especially now with Custom Editors), it would be great to provide a reusable set of components that fit VS Code's UI/UX style and behavior.

[miguelsolorio]

@eamodio any specific components that came up?

[eamodio]

Toolbars, buttons, dropdowns, menus

[eamodio]

@RandomFractals Any more specifics you want to add here?

[idoprz]

Hi,
We created amazing reusable UI component for creating forms in VSCode, all based on inquirer.js framework, we call it inquirer-gui.
There is an example on how to use it in VSCode and get the VSCode themes & look and feel.

[RandomFractals]

@misolori to start with, I think it would be great to have a reusable custom toolbar api and web components markup provided by vscode to extend current use of custom webview editors and create additional toggles and controls for the preview extensions and viewers.

Most use top or bottom toolbar or both and with new side bar UI you added recently, I think it would be possible to build simple custom view extensions or REPL's with rich UX/XD tied to extension commands, yet have uniform look and feel and theming without duplicating that effort on custom extension setup end.

[mjcrouch]

I'm looking to create a 'changelist search' for the perforce extension, which would be very similar to the GitLens "Search commits" view. @eamodio did a good job with what's available, but I can imagine that interface would be more intuitive with a 'rich' input, which could support displaying a form with multiple inputs

I'd ideally like that to include checkboxes, e.g. for toggle-based filters like "show / hide submitted changelists", "show only changelists with shelved files" etc

edit: I totally failed to read the "webview" part of the title to realise that this was specifically about webviews and was thinking from more of a generic sense rather than about webviews when I wrote the above, though it could be done that way I suppose

[mati-o]

Hi,

definitely I'd love to use the components provided by VS Code in my extension's WebView, providing my users with one UX. I do my best to use CSS variables to keep up the colors tidy, but the elements and controls themselves needs a lot of care and attention to make them look the same.

In particular, I'm looking for all the components, as I display some clever custom editors that walk my users through a series of steps involving comboboxes, drop downs, text editing (including multi-line), and more... It resembles the rich editing capabilities of VS Code's own Settings view.

I'll be glad to have the CSS classes available too, or even control's functionality too.

[daviddossett]

Excited to finally close this one! We've just released the public preview of the Webview UI Toolkit for Visual Studio Code.

We would love to hear any ideas, requests, or issues you have—let us know over on the toolkit repo.

cc @hawkticehurst @misolori

[DonJayamanne]

Marking this as verified, I've tried the webview toolkit.