From a6145f5ea7df9ec3de01edb28e2e27f4583adc3c Mon Sep 17 00:00:00 2001
From: Kailash Rajput <98249911+Kailash8799@users.noreply.github.com>
Date: Tue, 19 Aug 2025 15:24:01 +0530
Subject: [PATCH] fix(design-system): fix menu item selection & focus state
 (#13807) (#13948)

Closes #13807

Demo Video:


https://github.com/user-attachments/assets/27c94028-fe1b-4a65-800d-56eaad9599d6

---------

Co-authored-by: Weiko <corentin@twenty.com>
---
 .../navigation/menu-item/components/MenuItemSelect.tsx |  2 +-
 .../components/__stories__/MenuItemSelect.stories.tsx  | 10 +++++-----
 2 files changed, 6 insertions(+), 6 deletions(-)

diff --git a/packages/twenty-ui/src/navigation/menu-item/components/MenuItemSelect.tsx b/packages/twenty-ui/src/navigation/menu-item/components/MenuItemSelect.tsx
index 406344a7ba..33e69f0a2f 100644
--- a/packages/twenty-ui/src/navigation/menu-item/components/MenuItemSelect.tsx
+++ b/packages/twenty-ui/src/navigation/menu-item/components/MenuItemSelect.tsx
@@ -24,7 +24,7 @@ export const StyledMenuItemSelect = styled(StyledMenuItemBase)<{
       `;
     } else if (focused === true) {
       return css`
-        background: ${theme.background.transparent.light};
+        background: transparent;
       `;
     }
   }}
diff --git a/packages/twenty-ui/src/navigation/menu-item/components/__stories__/MenuItemSelect.stories.tsx b/packages/twenty-ui/src/navigation/menu-item/components/__stories__/MenuItemSelect.stories.tsx
index f33ea12df3..ffe24bc78b 100644
--- a/packages/twenty-ui/src/navigation/menu-item/components/__stories__/MenuItemSelect.stories.tsx
+++ b/packages/twenty-ui/src/navigation/menu-item/components/__stories__/MenuItemSelect.stories.tsx
@@ -50,17 +50,17 @@ export const Catalog: CatalogStory<Story, typeof MenuItemSelect> = {
         },
         {
           name: 'states',
-          values: ['default', 'hover', 'selected', 'hover+selected'],
+          values: ['default', 'hover', 'focused', 'hover+focused'],
           props: (state: string) => {
             switch (state) {
               case 'default':
                 return {};
               case 'hover':
                 return { className: 'hover' };
-              case 'selected':
-                return { selected: true };
-              case 'hover+selected':
-                return { className: 'hover', selected: true };
+              case 'focused':
+                return { focused: true };
+              case 'hover+focused':
+                return { className: 'hover', focused: true };
               default:
                 return {};
             }