Commit Action Button - Fix separator when button is disabled (microsoft#154781)

lszomoru · web-flow · commit 402d94a0bebc · 2022-07-11T05:14:06.000-07:00
* Fix separator when button is disabled

* Pull request feedback
diff --git a/src/vs/base/browser/ui/button/button.css b/src/vs/base/browser/ui/button/button.css
@@ -38,10 +38,18 @@
 	cursor: pointer;
 }
 
+.monaco-button-dropdown.disabled {
+	cursor: default;
+}
+
 .monaco-button-dropdown > .monaco-button:focus {
 	outline-offset: -1px !important;
 }
 
+.monaco-button-dropdown.disabled .monaco-button-dropdown-separator {
+	opacity: 0.4;
+}
+
 .monaco-button-dropdown .monaco-button-dropdown-separator {
 	padding: 4px 0;
 }
diff --git a/src/vs/base/browser/ui/button/button.ts b/src/vs/base/browser/ui/button/button.ts
@@ -299,6 +299,8 @@ export class ButtonWithDropdown extends Disposable implements IButton {
 	set enabled(enabled: boolean) {
 		this.button.enabled = enabled;
 		this.dropdownButton.enabled = enabled;
+
+		this.element.classList.toggle('disabled', !enabled);
 	}
 
 	get enabled(): boolean {

Original file line number	Diff line number	Diff line change
`@@ -38,10 +38,18 @@`
`38`	`38`	`cursor: pointer;`
`39`	`39`	`}`
`40`	`40`
	`41`	`+.monaco-button-dropdown.disabled {`
	`42`	`+ cursor: default;`
	`43`	`+}`
	`44`	`+`
`41`	`45`	`.monaco-button-dropdown > .monaco-button:focus {`
`42`	`46`	`outline-offset: -1px !important;`
`43`	`47`	`}`
`44`	`48`
	`49`	`+.monaco-button-dropdown.disabled .monaco-button-dropdown-separator {`
	`50`	`+ opacity: 0.4;`
	`51`	`+}`
	`52`	`+`
`45`	`53`	`.monaco-button-dropdown .monaco-button-dropdown-separator {`
`46`	`54`	`padding: 4px 0;`
`47`	`55`	`}`
Original file line number	Diff line number	Diff line change
`@@ -299,6 +299,8 @@ export class ButtonWithDropdown extends Disposable implements IButton {`
`299`	`299`	`set enabled(enabled: boolean) {`
`300`	`300`	`this.button.enabled = enabled;`
`301`	`301`	`this.dropdownButton.enabled = enabled;`
	`302`	`+`
	`303`	`+ this.element.classList.toggle('disabled', !enabled);`
`302`	`304`	`}`
`303`	`305`
`304`	`306`	`get enabled(): boolean {`