Add support for icon only buttons

[a-stewart]

If you have a button which includes an icon but no text, it still has the 3px margin - which results in the button being off centre

This change would allow for an icon-only attribute to be passed in, which avoids the 3px margin.

Another option would be to avoid this attribute and instead determine if the slot is empty.

[bendera]

Thanks for the PR!!

I would go with the first option. It would be good to keep the possibility of placing any kind of content into the main slot. For example a custom icon. Or formatted B I U letters for a WYSIWYG editor. I would also reduce the horizontal padding so the button would be square-shaped. The button height is 26px, an icon is 16x16, so the left and right padding should be 5px.

[a-stewart]

Thanks - my main motivation for this is to support split buttons #168.

And one of the issues I had with that is that the off-centre icon was very obvious on a narrow side button.

For that though we need a really narrow version of the button, so I'll leave this PR as a draft for now, whilst I play with that a bit:

[bendera]

Where this sync button comes from? Actually, the arrow button isn't even narrow:

And we could use the icon button as-is (icon is 16x16 with 5px padding):

We’d need a container component, e.g. <vscode-split-button>, and within it, we could remove the rounded corners where the buttons touch.

What's your position on this?

[a-stewart]

Interesting - I was looking at the buttons in the extensions page which do have a narrow dropdown:

Seems like there is some variation in VS Code. The one in the notifications seems like a better template though so I will look into using square buttons instead.

We’d need a container component, e.g. <vscode-split-button>, and within it, we could remove the rounded corners where the buttons touch.

Yeah - that is what I have at the moment.

I Was planning on sending this PR to just get the centering fixed.

Will follow up with a split button implementation once that is a bit tidier.

The sync button screenshot above is the WIP button.

[a-stewart]

Here is what I have so far:

I'll close the alignment PRs as I think it is probably simpler to just discuss the full thing in one go.

New PR: #427