From 15e626601413362021faf0313671fff012032bbc Mon Sep 17 00:00:00 2001
From: Victoria League <vleague@bitwarden.com>
Date: Fri, 7 Jun 2024 10:25:16 -0400
Subject: [PATCH] [CL-237] Update menu styles for extension refresh (#9525)

---
 .../src/menu/menu-divider.component.html      |  2 +-
 .../src/menu/menu-item.directive.ts           | 25 +++++++++++++------
 libs/components/src/menu/menu.component.html  |  2 +-
 libs/components/src/menu/menu.component.ts    |  4 ++-
 4 files changed, 22 insertions(+), 11 deletions(-)

diff --git a/libs/components/src/menu/menu-divider.component.html b/libs/components/src/menu/menu-divider.component.html
index 7d9fee3e8f2..98048261cff 100644
--- a/libs/components/src/menu/menu-divider.component.html
+++ b/libs/components/src/menu/menu-divider.component.html
@@ -1,5 +1,5 @@
 <div
-  class="tw-my-2 tw-border-0 tw-border-t tw-border-solid tw-border-t-secondary-600"
+  class="tw-my-2 tw-border-0 tw-border-t tw-border-solid tw-border-t-secondary-500"
   role="separator"
   aria-hidden="true"
 ></div>
diff --git a/libs/components/src/menu/menu-item.directive.ts b/libs/components/src/menu/menu-item.directive.ts
index 37289c9364c..90f65fbca96 100644
--- a/libs/components/src/menu/menu-item.directive.ts
+++ b/libs/components/src/menu/menu-item.directive.ts
@@ -1,5 +1,6 @@
 import { FocusableOption } from "@angular/cdk/a11y";
-import { Component, ElementRef, HostBinding } from "@angular/core";
+import { coerceBooleanProperty } from "@angular/cdk/coercion";
+import { Component, ElementRef, HostBinding, Input } from "@angular/core";
 
 @Component({
   selector: "[bitMenuItem]",
@@ -9,29 +10,37 @@ export class MenuItemDirective implements FocusableOption {
   @HostBinding("class") classList = [
     "tw-block",
     "tw-w-full",
-    "tw-py-1",
-    "tw-px-4",
+    "tw-py-1.5",
+    "tw-px-3",
     "!tw-text-main",
     "!tw-no-underline",
     "tw-cursor-pointer",
     "tw-border-none",
     "tw-bg-background",
     "tw-text-left",
-    "hover:tw-bg-secondary-100",
-    "focus-visible:tw-bg-secondary-100",
+    "hover:tw-bg-primary-100",
+    "hover:!tw-underline",
     "focus-visible:tw-z-50",
     "focus-visible:tw-outline-none",
-    "focus-visible:tw-ring",
-    "focus-visible:tw-ring-offset-2",
-    "focus-visible:tw-ring-primary-700",
+    "focus-visible:tw-ring-2",
+    "focus-visible:tw-rounded-lg",
+    "focus-visible:tw-ring-inset",
+    "focus-visible:tw-ring-primary-500",
     "active:!tw-ring-0",
     "active:!tw-ring-offset-0",
     "disabled:!tw-text-muted",
     "disabled:hover:tw-bg-background",
+    "disabled:hover:!tw-no-underline",
     "disabled:tw-cursor-not-allowed",
   ];
   @HostBinding("attr.role") role = "menuitem";
   @HostBinding("tabIndex") tabIndex = "-1";
+  @HostBinding("attr.disabled")
+  get disabledAttr() {
+    return this.disabled || null; // native disabled attr must be null when false
+  }
+
+  @Input({ transform: coerceBooleanProperty }) disabled?: boolean = false;
 
   constructor(private elementRef: ElementRef) {}
 
diff --git a/libs/components/src/menu/menu.component.html b/libs/components/src/menu/menu.component.html
index 5b6b15b5cbe..31fd6df0a66 100644
--- a/libs/components/src/menu/menu.component.html
+++ b/libs/components/src/menu/menu.component.html
@@ -1,7 +1,7 @@
 <ng-template>
   <div
     (click)="closed.emit()"
-    class="tw-flex tw-shrink-0 tw-flex-col tw-rounded tw-border tw-border-solid tw-border-secondary-600 tw-bg-background tw-bg-clip-padding tw-py-2 tw-overflow-y-auto"
+    class="tw-flex tw-shrink-0 tw-flex-col tw-rounded-lg tw-border tw-border-solid tw-border-secondary-500 tw-bg-background tw-bg-clip-padding tw-py-1 tw-overflow-y-auto"
     [attr.role]="ariaRole"
     [attr.aria-label]="ariaLabel"
     cdkTrapFocus
diff --git a/libs/components/src/menu/menu.component.ts b/libs/components/src/menu/menu.component.ts
index de606687e89..858cf991856 100644
--- a/libs/components/src/menu/menu.component.ts
+++ b/libs/components/src/menu/menu.component.ts
@@ -31,7 +31,9 @@ export class MenuComponent implements AfterContentInit {
 
   ngAfterContentInit() {
     if (this.ariaRole === "menu") {
-      this.keyManager = new FocusKeyManager(this.menuItems).withWrap();
+      this.keyManager = new FocusKeyManager(this.menuItems)
+        .withWrap()
+        .skipPredicate((item) => item.disabled);
     }
   }
 }