Explore use of vscode-webview-ui-toolkit

[Thomas1664]

I saw a few issues related to vscode-webview-ui-toolkit and I think using their components can make life easier for this extension:
#3035, #3785, #3900

However, I ran into a few issues when integrating components from the toolkit:

• Icon buttons aren't properly formatted
  I think the best solution here would be to use codicons but the problem is that they don't provide a React component which makes them harder to use and to integrate.
• Button groups require changing the CSS
  I whish the UI toolkit provided a way to handle this as button groups are a common use case.

[Thomas1664]

Seems like submit buttons have a few issues: microsoft/vscode-webview-ui-toolkit#394 , microsoft/vscode-webview-ui-toolkit#395

[hawkticehurst]

Hey @Thomas1664, maintainer of the toolkit here! 👋

I was catching up on old issues and saw this (and some other GHPRI extension issues related to the toolkit) linked and wanted to check in.

It's been on @daviddossett and I's to-do list for a long time to try and get this extension onboarded to the toolkit. We're hoping to ship a split button by the end of the year so as we're working towards that I'd love to hear more about any other blockers you have in adopting the toolkit and how we can help resolve those.

As a starter, it would be great to learn a bit more about the icon button and button group issues you were discussing above. Could you give some more context and details about this? (p.s. screenshots of examples are also always appreciated too)

Thanks in advance!

[Thomas1664]

Hi @hawkticehurst,

The reason why I want to have a ButtonGroup component is because there is no space between buttons. Bootstrap for example offers a similar feature via btn-group.

The icon button thing can be dropped because it isn't the fault of the toolkit that the icon isn't displayed in the center of the button but I wished there was an Icon component that allows the use of vscodeicons via React.

Icon Buttons:

Before:

After:

[daviddossett]

Thanks for looking into this @Thomas1664. Once I've closed the larger overhaul PRs tied to #4029 I'll come back to this to see if I can resolve the issue with the icon button. I'm less worried about the button group for now but agree that it could be useful to have that in the future.

@hawkticehurst codicons should work just fine with the React versions of the toolkit, no?

[ghost]

@ @