From cb2e85785f5f84d7f657dbd4e907b63234fa7953 Mon Sep 17 00:00:00 2001
From: devrk96 <rohit.kumawat@primathon.in>
Date: Wed, 2 Sep 2020 14:32:29 +0530
Subject: [PATCH] Menu item disabled UI fixed (#484)

---
 app/client/src/components/ads/MenuItem.tsx    | 32 ++++++++++++-------
 .../src/components/stories/Menu.stories.tsx   |  1 +
 2 files changed, 21 insertions(+), 12 deletions(-)

diff --git a/app/client/src/components/ads/MenuItem.tsx b/app/client/src/components/ads/MenuItem.tsx
index 799ebc6dee..7107f2f04b 100644
--- a/app/client/src/components/ads/MenuItem.tsx
+++ b/app/client/src/components/ads/MenuItem.tsx
@@ -11,25 +11,33 @@ type MenuItemProps = CommonComponentProps & {
   onSelect?: () => void;
 };
 
-const ItemRow = styled.div`
+const ItemRow = styled.div<{ disabled?: boolean }>`
   display: flex;
   align-items: center;
   justify-content: space-between;
   padding: ${props => props.theme.spaces[4]}px
     ${props => props.theme.spaces[6]}px;
 
-  &:hover {
-    cursor: pointer;
-    background-color: ${props => props.theme.colors.blackShades[4]};
-    .${Classes.TEXT} {
-      color: ${props => props.theme.colors.blackShades[9]};
-    }
-    .${Classes.ICON} {
-      path {
-        fill: ${props => props.theme.colors.blackShades[9]};
+  ${props =>
+    !props.disabled
+      ? ` 
+    &:hover {
+      cursor: pointer;
+      background-color: ${props.theme.colors.blackShades[4]};
+      .${Classes.TEXT} {
+        color: ${props.theme.colors.blackShades[9]};
       }
+      .${Classes.ICON} {
+        path {
+          fill: ${props.theme.colors.blackShades[9]};
+        }
+      }
+    }`
+      : `
+    &:hover {
+      cursor: not-allowed;
     }
-  }
+    `}
 `;
 
 const IconContainer = styled.div`
@@ -43,7 +51,7 @@ const IconContainer = styled.div`
 
 function MenuItem(props: MenuItemProps) {
   return (
-    <ItemRow onClick={props.onSelect}>
+    <ItemRow onClick={props.onSelect} disabled={props.disabled}>
       <IconContainer>
         {props.icon ? <Icon name={props.icon} size={IconSize.LARGE} /> : null}
         {props.text ? (
diff --git a/app/client/src/components/stories/Menu.stories.tsx b/app/client/src/components/stories/Menu.stories.tsx
index ef2cf568ed..59c87420cd 100644
--- a/app/client/src/components/stories/Menu.stories.tsx
+++ b/app/client/src/components/stories/Menu.stories.tsx
@@ -107,6 +107,7 @@ export const MenuStory = () => {
           icon={select("First Icon", IconCollection, undefined)}
           onSelect={action("clicked-first-option")}
           label={<span>W</span>}
+          disabled={boolean("First option disabled", false)}
         />
         {boolean("First menu item divider", false) ? <MenuDivider /> : null}
         <MenuItem