RFC: Add support for split buttons

[a-stewart]

Fixes #168.

This is still in draft as there are a few things I am not sure on.

1. It would be nice to create the dividers automatically.
2. Not sure between vscode-split-button and vscode-button-group.
3. Should we use square buttons automatically for contentless buttons, or should this be configurable? Perhaps we could allow it to be configured but default to square?

This is what the buttons look like after this change. (Regular text buttons or text buttons with icons are unchanged)

And the html for that:

<vscode-split-button>
  <vscode-button>Standard</vscode-button>
  <vscode-split-button-divider></vscode-split-button-divider>
  <vscode-button icon="chevron-down"></vscode-button>
</vscode-split-button>

This is what I think will be the most common usage of the split button. It includes a standard button, a divider and a chevron down. Both sides are standard buttons, the split button trims the border radius and border of the relevant slotted children.

<vscode-split-button>
  <vscode-button>Hello</vscode-button>
  <vscode-split-button-divider></vscode-split-button-divider>
  <vscode-button>World</vscode-button>
  <vscode-split-button-divider></vscode-split-button-divider>
  <vscode-button icon="account"></vscode-button>
</vscode-split-button>

<vscode-split-button>
  <vscode-button secondary>Left</vscode-button>
  <vscode-split-button-divider secondary></vscode-split-button-divider>
  <vscode-button secondary icon="arrow-swap"></vscode-button>
  <vscode-split-button-divider secondary></vscode-split-button-divider>
  <vscode-button secondary>Right</vscode-button>
</vscode-split-button>

This is a demo of 3 buttons combined into a group.
I am unsure what I think about the square icon in the first example - it makes sense in all other examples but looks weird here.

<vscode-split-button>
  <vscode-button>No</vscode-button>
  <vscode-button>Divider</vscode-button>
</vscode-split-button>

This is an example of how the buttons look without a divider. I am not sure if there is a use case for this, but I guess there is no harm in having the option.

<vscode-split-button>
  <vscode-button>Primary</vscode-button>
  <vscode-split-button-divider></vscode-split-button-divider>
  <vscode-button secondary>Secondary</vscode-button>
</vscode-split-button>

You can split primary and seconday buttons, although the background of the separator must be one or the other.

<vscode-button icon="heart"></vscode-button>

<vscode-button icon="radio-tower" icon-after="flame"></vscode-button>

These last two just demonstrate some icon buttons with no slotted content, showing the new padding for these.

[bendera]

Wow, it's very promising!

1. I would add the divider right after the .icon-after in the button's shadow dom. I would also define that element as part, like this <div class="divider" part="divider"></div>. It would be hidden by default.
   In the container component I would make it visible:
   ::slotted(vscode-button:not(:last-child))::part(divider) {display: block;}
   Update: it won't work, but with a custom css property will do:
   ::slotted(vscode-button:not(:last-child)){--divider-display: block;}
2. The vscode-button-group is definitely better.
3. By adding min-width: 16px and min-height: 26px to the wrapper, the button becomes square-shaped, even when it's empty. Theoretically, I wasn't able to try it. Maybe in the future it can be configurable with custom properties or shadow parts.

• Could you add a demo.html under the "/dev" with your examples?
• There are some minor TS and Prettier issues.

[a-stewart]

Thanks - yeah this is still quite early so I wanted to share to get your opinion on the direction before committing to much. Using a variable for the divider is a cool idea, I had been trying to use ::after with content but the var seems cleaner. I'll commit that change now to this PR.

The vscode-button-group is definitely better.

That was my preference too, updated.

There are some minor TS and Prettier issues.

With regards to prettier, it seems to be making changes which are inconsistent with what already exists, eg adding spaces to imports and changing single quotes to double quotes?

I am happy to submit that but it seems odd?

[bendera]

Hmm, that's weird. Anyway, what I see is this:

and this:

The first screenshot is the result of the verify PR action. The second one is running on the github codespaces. Unfortunately, I have no idea how I could submit changes to your branch, but the npm run prettier:fix should fix your prettier errors, and build:ts will show you the TS issues.

[a-stewart]

Seems like the VS Code prettier extension on github.dev doesn't work for some reason. Checked out locally and run to fix.

[a-stewart]

I've merged in your proposed changes

[bendera]

Thanks! Merged.