Dropdown buttons have two different visuals (#7381)

Fixes #6716

Author: alexr00

webviews/activityBarView/index.css

@@ -104,7 +104,6 @@ form button {
 .select-control button,
 .branch-status-container button,
 input[type='submit'] {
-	min-height: 31px;
 	white-space: normal;
 }
 
@@ -191,31 +190,3 @@ button.split-left {
 	white-space: nowrap;
 	text-overflow: ellipsis;
 }
-
-
-.split {
-	width: 1px; height: 100%;
-	background-color: var(--vscode-button-background);
-	opacity: 0.5;
-}
-
-button.split-right {
-	border-radius: 0 2px 2px 0;
-	cursor: pointer;
-	width: 24px; height: 28px;
-	position: relative;
-}
-
-button.split-right:disabled {
-	cursor: default;
-}
-
-button.split-right .icon {
-	pointer-events: none;
-	position: absolute;
-	top: 6px; right: 4px;
-}
-
-button.split-right .icon svg path {
-	fill: unset;
-}

webviews/common/common.css

@@ -45,6 +45,14 @@ input.select-left {
 
 button.select-right {
 	border-radius: 0 2px 2px 0;
+	width: 24px;
+	position: relative;
+}
+
+button.select-right span {
+	position: absolute;
+	top: 2px;
+	right: 4px;
 }
 
 button:focus,
@@ -354,17 +362,26 @@ button.split-left {
 }
 
 .split {
-	width: 1px;
-	height: 100%;
 	background-color: var(--vscode-button-background);
-	opacity: 0.5;
+	border-top: 1px solid var(--vscode-button-border);
+	border-bottom: 1px solid var(--vscode-button-border);
+	padding: 4px 0;
 }
 
-.split.secondary {
-	width: 1px;
+.split .separator {
 	height: 100%;
+	width: 1px;
+	background-color: var(--vscode-button-separator);
+}
+
+.split.disabled {
+	opacity: 0.4;
+}
+
+.split.secondary {
 	background-color: var(--vscode-button-secondaryBackground);
-	opacity: 0.5;
+	border-top: 1px solid var(--vscode-button-secondaryBorder);
+	border-bottom: 1px solid var(--vscode-button-secondaryBorder);
 }
 
 button.split-right {
@@ -381,7 +398,7 @@ button.split-right:disabled {
 button.split-right .icon {
 	pointer-events: none;
 	position: absolute;
-	top: 6px;
+	top: 4px;
 	right: 4px;
 }
 
@@ -449,6 +466,7 @@ button.inlined-dropdown {
 	0% {
 		transform: rotate(0deg);
 	}
+
 	100% {
 		transform: rotate(360deg);
 	}

webviews/components/contextDropdown.tsx

@@ -64,7 +64,9 @@ export const ContextDropdown = ({ optionsContext, defaultOptionLabel, defaultOpt
 					title={defaultOptionLabel()}>
 					{defaultOptionLabel()}
 				</button>
-				<div className={`split${isSecondary ? ' secondary' : ''}`}></div>
+				{hasSingleAction ? null :
+					<div className={`split${isSecondary ? ' secondary' : ''}${disabled ? ' disabled' : ''}`}><div className={`separator${disabled ? ' disabled' : ''}`}></div></div>
+				}
 				{hasSingleAction ? null :
 					<button className={`split-right${isSecondary ? ' secondary' : ''}`} title={optionsTitle} disabled={disabled} aria-expanded={expanded} onClick={(e) => {
 						e.preventDefault();

webviews/components/dropdown.tsx

@@ -96,7 +96,7 @@ export const Dropdown = ({ options, defaultOption, disabled, submitAction, chang
 					submitAction={submitAction}
 					disabled={!!disabled}
 				/>
-				<div className='split'></div>
+					<div className={`split${disabled ? ' disabled' : ''}`}><div className={`separator${disabled ? ' disabled' : ''}`}></div></div>
 				<button id={EXPAND_OPTIONS_BUTTON} className={'select-right ' + expandButtonClass} aria-label='Expand button options' onClick={onClick}>
 					{chevronIcon}
 				</button>