From 186f3f5b865e47b4e075e1b00b1140a303899cda Mon Sep 17 00:00:00 2001
From: Keith Daulton <keith.daulton@gitkraken.com>
Date: Wed, 14 Dec 2022 01:32:14 -0500
Subject: [PATCH] Updates menu component styles

---
 src/webviews/apps/shared/components/menu/index.ts   |  1 +
 .../apps/shared/components/menu/menu-divider.ts     | 18 ++++++++++++++++++
 .../apps/shared/components/menu/menu-item.ts        | 21 ++++++++++++++++-----
 .../apps/shared/components/menu/menu-label.ts       |  3 +++
 src/webviews/apps/shared/components/menu/react.tsx  |  8 +++++++-
 .../shared/components/overlays/pop-menu/pop-menu.ts |  6 ++++--
 .../apps/shared/components/search/search-input.ts   |  1 +
 7 files changed, 50 insertions(+), 8 deletions(-)
 create mode 100644 src/webviews/apps/shared/components/menu/menu-divider.ts

diff --git a/src/webviews/apps/shared/components/menu/index.ts b/src/webviews/apps/shared/components/menu/index.ts
index 73f97d6..36108b2 100644
--- a/src/webviews/apps/shared/components/menu/index.ts
+++ b/src/webviews/apps/shared/components/menu/index.ts
@@ -1,3 +1,4 @@
 export * from './menu-list';
 export * from './menu-item';
 export * from './menu-label';
+export * from './menu-divider';
diff --git a/src/webviews/apps/shared/components/menu/menu-divider.ts b/src/webviews/apps/shared/components/menu/menu-divider.ts
new file mode 100644
index 0000000..609170f
--- /dev/null
+++ b/src/webviews/apps/shared/components/menu/menu-divider.ts
@@ -0,0 +1,18 @@
+import { css, customElement, FASTElement, html } from '@microsoft/fast-element';
+import { elementBase } from '../styles/base';
+
+const template = html<MenuDivider>``;
+
+const styles = css`
+	${elementBase}
+
+	:host {
+		display: block;
+		height: 0;
+		margin: 0.6rem;
+		border-top: 0.1rem solid var(--vscode-menu-separatorBackground);
+	}
+`;
+
+@customElement({ name: 'menu-divider', template: template, styles: styles })
+export class MenuDivider extends FASTElement {}
diff --git a/src/webviews/apps/shared/components/menu/menu-item.ts b/src/webviews/apps/shared/components/menu/menu-item.ts
index 9641ae8..4804f72 100644
--- a/src/webviews/apps/shared/components/menu/menu-item.ts
+++ b/src/webviews/apps/shared/components/menu/menu-item.ts
@@ -1,8 +1,8 @@
-import { attr, css, customElement, FASTElement, html } from '@microsoft/fast-element';
+import { attr, css, customElement, FASTElement, html, volatile } from '@microsoft/fast-element';
 import { elementBase } from '../styles/base';
 
 const template = html<MenuItem>`
-	<template role="option" tabindex="${x => (x.disabled ? '-1' : '0')}" ?disabled="${x => x.disabled}">
+	<template tabindex="${x => (x.isInteractive ? '0' : null)}" ?disabled="${x => x.disabled}">
 		<slot></slot>
 	</template>
 `;
@@ -11,6 +11,7 @@ const styles = css`
 	${elementBase}
 
 	:host {
+		display: block;
 		font-family: inherit;
 		border: none;
 		padding: 0 0.6rem;
@@ -18,13 +19,11 @@ const styles = css`
 		color: var(--vscode-menu-foreground);
 		background-color: var(--vscode-menu-background);
 		text-align: left;
-		display: flex;
-		align-items: center;
 		height: auto;
 		line-height: 2.2rem;
 	}
 
-	:host(:hover) {
+	:host([role='option']:hover) {
 		color: var(--vscode-menu-selectionForeground);
 		background-color: var(--vscode-menu-selectionBackground);
 	}
@@ -46,4 +45,16 @@ const styles = css`
 export class MenuItem extends FASTElement {
 	@attr({ mode: 'boolean' })
 	disabled = false;
+
+	@attr
+	override role: ARIAMixin['role'] = 'option';
+
+	@volatile
+	get isInteractive() {
+		if (this.disabled) {
+			return false;
+		}
+
+		return this.role === 'option';
+	}
 }
diff --git a/src/webviews/apps/shared/components/menu/menu-label.ts b/src/webviews/apps/shared/components/menu/menu-label.ts
index 9e8e11e..4ad2c0d 100644
--- a/src/webviews/apps/shared/components/menu/menu-label.ts
+++ b/src/webviews/apps/shared/components/menu/menu-label.ts
@@ -11,12 +11,15 @@ const styles = css`
 	${elementBase}
 
 	:host {
+		display: block;
 		text-transform: uppercase;
 		font-size: 0.84em;
 		line-height: 2.2rem;
 		padding-left: 0.6rem;
 		padding-right: 0.6rem;
 		margin: 0px;
+		color: var(--vscode-menu-foreground);
+		opacity: 0.6;
 	}
 `;
 
diff --git a/src/webviews/apps/shared/components/menu/react.tsx b/src/webviews/apps/shared/components/menu/react.tsx
index b46f782..e4eb397 100644
--- a/src/webviews/apps/shared/components/menu/react.tsx
+++ b/src/webviews/apps/shared/components/menu/react.tsx
@@ -1,6 +1,12 @@
 import { reactWrapper } from '../helpers/react-wrapper';
-import { MenuItem as MenuItemComponent, MenuLabel as MenuLabelComponent, MenuList as MenuListComponent } from './index';
+import {
+	MenuDivider as MenuDividerComponent,
+	MenuItem as MenuItemComponent,
+	MenuLabel as MenuLabelComponent,
+	MenuList as MenuListComponent,
+} from './index';
 
+export const MenuDivider = reactWrapper(MenuDividerComponent);
 export const MenuItem = reactWrapper(MenuItemComponent);
 export const MenuLabel = reactWrapper(MenuLabelComponent);
 export const MenuList = reactWrapper(MenuListComponent);
diff --git a/src/webviews/apps/shared/components/overlays/pop-menu/pop-menu.ts b/src/webviews/apps/shared/components/overlays/pop-menu/pop-menu.ts
index 1a731f2..15da11c 100644
--- a/src/webviews/apps/shared/components/overlays/pop-menu/pop-menu.ts
+++ b/src/webviews/apps/shared/components/overlays/pop-menu/pop-menu.ts
@@ -57,7 +57,7 @@ export class PopMenu extends FASTElement {
 		return this.contentNodes![0];
 	}
 
-	isTrackingOutside = false;
+	private isTrackingOutside = false;
 
 	override connectedCallback() {
 		super.connectedCallback();
@@ -71,7 +71,9 @@ export class PopMenu extends FASTElement {
 		this.disposeTrackOutside();
 	}
 
-	handleToggle() {
+	handleToggle(e: MouseEvent) {
+		if (!e.composedPath().includes(this.triggerNode!)) return;
+
 		this.open = !this.open;
 		this.updateToggle();
 	}
diff --git a/src/webviews/apps/shared/components/search/search-input.ts b/src/webviews/apps/shared/components/search/search-input.ts
index 54d710a..64e1207 100644
--- a/src/webviews/apps/shared/components/search/search-input.ts
+++ b/src/webviews/apps/shared/components/search/search-input.ts
@@ -344,6 +344,7 @@ const styles = css`
 		padding-left: 0.6rem;
 		padding-right: 0.6rem;
 		margin: 0;
+		opacity: 0.6;
 	}
 
 	.helper-button {