Improve ring on Menu

Signed-off-by: Charles de Dreuille <charles.dedreuille@gmail.com>

.changeset/ui-menu-item-style-refactor.md

@@ -0,0 +1,7 @@
+---
+'@backstage/ui': patch
+---
+
+Simplified the `Menu` component's item structure by removing the inner wrapper element and applying styles directly to the menu item, improving DOM clarity.
+
+**Affected components:** Menu

packages/ui/src/components/Menu/Menu.module.css

@@ -72,48 +72,10 @@
     box-sizing: border-box;
     outline: none;
     padding-block: var(--bui-space-1);
+    padding-inline: var(--bui-space-1);
   }
 
   .bui-MenuItem {
-    padding-inline: var(--bui-space-1);
-    display: block;
-
-    &[data-focus-visible] {
-      outline: none;
-    }
-
-    &[data-focus-visible] {
-      outline: 2px solid var(--bui-ring);
-      outline-offset: -2px;
-    }
-
-    &[data-focused] .bui-MenuItemWrapper {
-      background: var(--bui-bg-neutral-2);
-      color: var(--bui-fg-primary);
-    }
-
-    &[data-open] .bui-MenuItemWrapper {
-      background: var(--bui-bg-neutral-2);
-      color: var(--bui-fg-primary);
-    }
-
-    &[data-color='danger'] .bui-MenuItemWrapper {
-      color: var(--bui-fg-danger);
-    }
-
-    &[data-color='danger'][data-focused] .bui-MenuItemWrapper {
-      background: var(--bui-bg-danger);
-      color: var(--bui-fg-danger);
-    }
-
-    &[data-has-submenu] {
-      & > .bui-MenuItemWrapper > .bui-MenuItemArrow {
-        display: block;
-      }
-    }
-  }
-
-  .bui-MenuItemWrapper {
     display: flex;
     align-items: center;
     justify-content: space-between;
@@ -125,6 +87,40 @@
     color: var(--bui-fg-primary);
     font-size: var(--bui-font-size-3);
     gap: var(--bui-space-6);
+
+    &[data-focus-visible] {
+      outline: none;
+    }
+
+    &[data-focus-visible] {
+      outline: 2px solid var(--bui-ring);
+      outline-offset: -2px;
+    }
+
+    &[data-focused] {
+      background: var(--bui-bg-neutral-2);
+      color: var(--bui-fg-primary);
+    }
+
+    &[data-open] {
+      background: var(--bui-bg-neutral-2);
+      color: var(--bui-fg-primary);
+    }
+
+    &[data-color='danger'] {
+      color: var(--bui-fg-danger);
+    }
+
+    &[data-color='danger'][data-focused] {
+      background: var(--bui-bg-danger);
+      color: var(--bui-fg-danger);
+    }
+
+    &[data-has-submenu] {
+      & > .bui-MenuItemArrow {
+        display: block;
+      }
+    }
   }
 
   .bui-MenuItemListBox {

packages/ui/src/components/Menu/Menu.tsx

@@ -357,14 +357,12 @@ export const MenuItem = (props: MenuItemProps) => {
         handleAction();
       }}
     >
-      <div className={classes.itemWrapper}>
-        <div className={classes.itemContent}>
-          {iconStart}
-          {children}
-        </div>
-        <div className={classes.itemArrow}>
-          <RiArrowRightSLine />
-        </div>
+      <div className={classes.itemContent}>
+        {iconStart}
+        {children}
+      </div>
+      <div className={classes.itemArrow}>
+        <RiArrowRightSLine />
       </div>
     </RAMenuItem>
   );