ButtonWithDropdown separator style update (microsoft#154109)

Author: lszomoru

src/vs/base/browser/ui/button/button.css

@@ -42,8 +42,13 @@
 	outline-offset: -1px !important;
 }
 
-.monaco-button-dropdown > .monaco-dropdown-button {
-	margin-left: 1px;
+.monaco-button-dropdown .monaco-button-dropdown-separator {
+	padding: 4px 0;
+}
+
+.monaco-button-dropdown .monaco-button-dropdown-separator > div {
+	height: 100%;
+	width: 1px;
 }
 
 .monaco-description-button {

src/vs/base/browser/ui/button/button.ts

@@ -247,6 +247,8 @@ export class ButtonWithDropdown extends Disposable implements IButton {
 	private readonly button: Button;
 	private readonly action: Action;
 	private readonly dropdownButton: Button;
+	private readonly separatorContainer: HTMLDivElement;
+	private readonly separator: HTMLDivElement;
 
 	readonly element: HTMLElement;
 	private readonly _onDidClick = this._register(new Emitter<Event | undefined>());
@@ -263,6 +265,13 @@ export class ButtonWithDropdown extends Disposable implements IButton {
 		this._register(this.button.onDidClick(e => this._onDidClick.fire(e)));
 		this.action = this._register(new Action('primaryAction', this.button.label, undefined, true, async () => this._onDidClick.fire(undefined)));
 
+		this.separatorContainer = document.createElement('div');
+		this.separatorContainer.classList.add('monaco-button-dropdown-separator');
+
+		this.separator = document.createElement('div');
+		this.separatorContainer.appendChild(this.separator);
+		this.element.appendChild(this.separatorContainer);
+
 		this.dropdownButton = this._register(new Button(this.element, { ...options, title: false, supportIcons: true }));
 		this.dropdownButton.element.title = localize("button dropdown more actions", 'More Actions...');
 		this.dropdownButton.element.classList.add('monaco-dropdown-button');
@@ -299,6 +308,10 @@ export class ButtonWithDropdown extends Disposable implements IButton {
 	style(styles: IButtonStyles): void {
 		this.button.style(styles);
 		this.dropdownButton.style(styles);
+
+		// Separator
+		this.separatorContainer.style.backgroundColor = styles.buttonBackground?.toString() ?? '';
+		this.separator.style.backgroundColor = styles.buttonForeground?.toString() ?? '';
 	}
 
 	focus(): void {