From acf54c6f3846bea889e9acc5b6144bec4ee3016c Mon Sep 17 00:00:00 2001
From: David Luzar <5153846+dwelle@users.noreply.github.com>
Date: Wed, 21 Jan 2026 14:07:36 +0100
Subject: [PATCH] fix: dropdownMenu item badge position (#10682)

---
 packages/excalidraw/components/Actions.tsx           |  2 +-
 .../components/FontPicker/FontPickerList.tsx         | 12 +++++++-----
 .../components/TTDDialog/TTDDialogTrigger.tsx        |  2 +-
 .../components/dropdownMenu/DropdownMenuItem.tsx     |  9 ++++++++-
 .../dropdownMenu/DropdownMenuItemContent.tsx         |  3 +++
 5 files changed, 20 insertions(+), 8 deletions(-)

diff --git a/packages/excalidraw/components/Actions.tsx b/packages/excalidraw/components/Actions.tsx
index 9967ee2c99..18791f8f9b 100644
--- a/packages/excalidraw/components/Actions.tsx
+++ b/packages/excalidraw/components/Actions.tsx
@@ -1263,9 +1263,9 @@ export const ShapesSwitcher = ({
               onSelect={() => app.onMagicframeToolSelect()}
               icon={MagicIcon}
               data-testid="toolbar-magicframe"
+              badge={<DropdownMenu.Item.Badge>AI</DropdownMenu.Item.Badge>}
             >
               {t("toolBar.magicframe")}
-              <DropdownMenu.Item.Badge>AI</DropdownMenu.Item.Badge>
             </DropdownMenu.Item>
           )}
         </DropdownMenu.Content>
diff --git a/packages/excalidraw/components/FontPicker/FontPickerList.tsx b/packages/excalidraw/components/FontPicker/FontPickerList.tsx
index a6202f0227..79dca68ce0 100644
--- a/packages/excalidraw/components/FontPicker/FontPickerList.tsx
+++ b/packages/excalidraw/components/FontPicker/FontPickerList.tsx
@@ -290,13 +290,15 @@ export const FontPickerList = React.memo(
             onHover(font.value);
           }
         }}
+        badge={
+          font.badge && (
+            <DropDownMenuItemBadge type={font.badge.type}>
+              {font.badge.placeholder}
+            </DropDownMenuItemBadge>
+          )
+        }
       >
         {font.text}
-        {font.badge && (
-          <DropDownMenuItemBadge type={font.badge.type}>
-            {font.badge.placeholder}
-          </DropDownMenuItemBadge>
-        )}
       </DropdownMenuItem>
     );
 
diff --git a/packages/excalidraw/components/TTDDialog/TTDDialogTrigger.tsx b/packages/excalidraw/components/TTDDialog/TTDDialogTrigger.tsx
index 0d5c62f331..9886d59c96 100644
--- a/packages/excalidraw/components/TTDDialog/TTDDialogTrigger.tsx
+++ b/packages/excalidraw/components/TTDDialog/TTDDialogTrigger.tsx
@@ -26,9 +26,9 @@ export const TTDDialogTrigger = ({
           setAppState({ openDialog: { name: "ttd", tab: "text-to-diagram" } });
         }}
         icon={icon ?? brainIcon}
+        badge={<DropdownMenu.Item.Badge>AI</DropdownMenu.Item.Badge>}
       >
         {children ?? t("labels.textToDiagram")}
-        <DropdownMenu.Item.Badge>AI</DropdownMenu.Item.Badge>
       </DropdownMenu.Item>
     </TTDDialogTriggerTunnel.In>
   );
diff --git a/packages/excalidraw/components/dropdownMenu/DropdownMenuItem.tsx b/packages/excalidraw/components/dropdownMenu/DropdownMenuItem.tsx
index 59c5dd2f84..0f227a0bbd 100644
--- a/packages/excalidraw/components/dropdownMenu/DropdownMenuItem.tsx
+++ b/packages/excalidraw/components/dropdownMenu/DropdownMenuItem.tsx
@@ -26,6 +26,7 @@ const DropdownMenuItem = ({
   textStyle,
   onSelect,
   onClick,
+  badge,
   ...rest
 }: {
   icon?: JSX.Element;
@@ -38,6 +39,7 @@ const DropdownMenuItem = ({
   selected?: boolean;
   textStyle?: React.CSSProperties;
   className?: string;
+  badge?: React.ReactNode;
 } & Omit<React.ButtonHTMLAttributes<HTMLButtonElement>, "onSelect">) => {
   const handleClick = useHandleDropdownMenuItemClick(onClick, onSelect);
   const ref = useRef<HTMLButtonElement>(null);
@@ -62,7 +64,12 @@ const DropdownMenuItem = ({
       className={getDropdownMenuItemClassName(className, selected, hovered)}
       title={rest.title ?? rest["aria-label"]}
     >
-      <MenuItemContent textStyle={textStyle} icon={icon} shortcut={shortcut}>
+      <MenuItemContent
+        textStyle={textStyle}
+        icon={icon}
+        shortcut={shortcut}
+        badge={badge}
+      >
         {children}
       </MenuItemContent>
     </button>
diff --git a/packages/excalidraw/components/dropdownMenu/DropdownMenuItemContent.tsx b/packages/excalidraw/components/dropdownMenu/DropdownMenuItemContent.tsx
index d4078a8da4..c57dad8885 100644
--- a/packages/excalidraw/components/dropdownMenu/DropdownMenuItemContent.tsx
+++ b/packages/excalidraw/components/dropdownMenu/DropdownMenuItemContent.tsx
@@ -9,11 +9,13 @@ const MenuItemContent = ({
   icon,
   shortcut,
   children,
+  badge,
 }: {
   icon?: JSX.Element;
   shortcut?: string;
   textStyle?: React.CSSProperties;
   children: React.ReactNode;
+  badge?: React.ReactNode;
 }) => {
   const editorInterface = useEditorInterface();
   return (
@@ -22,6 +24,7 @@ const MenuItemContent = ({
       <div style={textStyle} className="dropdown-menu-item__text">
         <Ellipsify>{children}</Ellipsify>
       </div>
+      {badge && <div className="dropdown-menu-item__badge">{badge}</div>}
       {shortcut && editorInterface.formFactor !== "phone" && (
         <div className="dropdown-menu-item__shortcut">{shortcut}</div>
       )}