Fix menu caret (#5758)

ethyca · Feb 12, 2025 · 14858b2 · 14858b2
1 parent 88b49a8
commit 14858b2
Show file tree

Hide file tree

Showing 2 changed files with 16 additions and 7 deletions.
diff --git a/clients/admin-ui/src/features/common/nav/NavMenu.tsx b/clients/admin-ui/src/features/common/nav/NavMenu.tsx
@@ -1,4 +1,4 @@
-import { AntMenu as Menu, Icons } from "fidesui";
+import { AntMenu as Menu } from "fidesui";
 import { ComponentProps } from "react";
 
 import styles from "./NavMenu.module.scss";
@@ -10,12 +10,6 @@ export const NavMenu = ({ className, ...props }: MenuProps) => (
     mode="inline"
     theme="dark"
     inlineIndent={8}
-    expandIcon={
-      <div>
-        {/* The wrapper div is required otherwise the size of the icon is ignored */}
-        <Icons.ChevronDown size={14} />
-      </div>
-    }
     {...props}
     className={`${styles.menu} ${className}`}
   />

diff --git a/clients/admin-ui/src/theme/global.scss b/clients/admin-ui/src/theme/global.scss
@@ -54,3 +54,18 @@ h6 {
     color: var(--fidesui-minos);
   }
 }
+
+.ant-menu {
+  .ant-menu-submenu-arrow {
+    // Remove rounding from submenu arrow
+    // to better match the style Carbon icons
+    --ant-border-radius: 0px;
+
+    // fix missing pixel in the arrow icon
+    // (it's the same width as ant only changing 0.6 to 0.65 here)
+    &::before,
+    &::after {
+      width: calc(calc(var(--ant-font-size) / 7 * 5) * 0.65);
+    }
+  }
+}