From 549743acdf5c0a0efe465e5e6f223e879ec675d0 Mon Sep 17 00:00:00 2001
From: Samual Krish Ravichandran <sravichandran@eightfold.ai>
Date: Sun, 10 Nov 2024 19:10:29 -0800
Subject: [PATCH] feat: remove focus visible

---
 src/components/Menu/Menu.stories.tsx          | 101 +++++++++---------
 .../Menu/MenuItem/menuItem.module.scss        |   6 --
 2 files changed, 52 insertions(+), 55 deletions(-)

diff --git a/src/components/Menu/Menu.stories.tsx b/src/components/Menu/Menu.stories.tsx
index 2ed22deba..cb8195c5a 100644
--- a/src/components/Menu/Menu.stories.tsx
+++ b/src/components/Menu/Menu.stories.tsx
@@ -15,6 +15,7 @@ import { IconName } from '../Icon';
 import { useCanvasDirection } from '../../hooks/useCanvasDirection';
 import { SelectorSize } from '../CheckBox';
 import { CascadingMenu } from './CascadingMenu';
+import { ConfigProvider } from '../ConfigProvider';
 
 export default {
   title: 'Menu',
@@ -58,61 +59,63 @@ export default {
 } as ComponentMeta<typeof Menu>;
 
 const BasicOverlay = (args: any) => (
-  <Menu
-    {...args}
-    items={[
-      {
-        iconProps: {
-          path: IconName.mdiCalendar,
-        },
-        text: 'Date',
-        value: 'menu 1',
-        counter: '8',
-        secondaryButtonProps: {
+  <ConfigProvider themeOptions={{ name: 'blue' }}>
+    <Menu
+      {...args}
+      items={[
+        {
           iconProps: {
-            path: IconName.mdiTrashCan,
+            path: IconName.mdiCalendar,
           },
-          onClick: () => {
-            console.log('Delete clicked');
+          text: 'Date',
+          value: 'menu 1',
+          counter: '8',
+          secondaryButtonProps: {
+            iconProps: {
+              path: IconName.mdiTrashCan,
+            },
+            onClick: () => {
+              console.log('Delete clicked');
+            },
           },
         },
-      },
-      {
-        text: 'Disabled button',
-        value: 'menu 2',
-        disabled: true,
-        subText: 'This is a sub text',
-      },
-      {
-        iconProps: {
-          path: IconName.mdiCalendar,
+        {
+          text: 'Disabled button',
+          value: 'menu 2',
+          disabled: true,
+          subText: 'This is a sub text',
         },
-        text: 'Date',
-        value: 'menu 3',
-        counter: '8',
-      },
-      {
-        text: 'Button',
-        value: 'menu 4',
-      },
-      {
-        iconProps: {
-          path: IconName.mdiCalendar,
+        {
+          iconProps: {
+            path: IconName.mdiCalendar,
+          },
+          text: 'Date',
+          value: 'menu 3',
+          counter: '8',
         },
-        text: 'Date',
-        value: 'menu 5',
-        counter: '8',
-      },
-      {
-        text: 'Button',
-        value: 'menu 6',
-      },
-    ]}
-    onChange={(item) => {
-      args.onChange(item);
-      console.log(item);
-    }}
-  />
+        {
+          text: 'Button',
+          value: 'menu 4',
+        },
+        {
+          iconProps: {
+            path: IconName.mdiCalendar,
+          },
+          text: 'Date',
+          value: 'menu 5',
+          counter: '8',
+        },
+        {
+          text: 'Button',
+          value: 'menu 6',
+        },
+      ]}
+      onChange={(item) => {
+        args.onChange(item);
+        console.log(item);
+      }}
+    />
+  </ConfigProvider>
 );
 
 const LinkOverlay = (args: any) => (
diff --git a/src/components/Menu/MenuItem/menuItem.module.scss b/src/components/Menu/MenuItem/menuItem.module.scss
index dace847c6..4b559abb5 100644
--- a/src/components/Menu/MenuItem/menuItem.module.scss
+++ b/src/components/Menu/MenuItem/menuItem.module.scss
@@ -12,12 +12,6 @@
   margin: $space-xxs 0;
   white-space: nowrap;
 
-  &:focus-within {
-    box-shadow: var(--focus-visible-box-shadow);
-    color: var(--primary-color);
-    border-radius: var(--border-radius-xl);
-  }
-
   &.wrap {
     white-space: normal;
     overflow-wrap: anywhere;