From 2335b6ce142e12afb5e02cb05ec4ad4126e4b60d Mon Sep 17 00:00:00 2001
From: Goutham Subramanyam <gsn.goutham@gmail.com>
Date: Sun, 25 Dec 2022 22:45:58 +0530
Subject: [PATCH 1/3] Fixed MenuItem Button active state

---
 lib/components/Dropdown/MenuItem/MenuItemButton.js | 2 +-
 lib/styles/components/_dropdown.scss               | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/lib/components/Dropdown/MenuItem/MenuItemButton.js b/lib/components/Dropdown/MenuItem/MenuItemButton.js
index 8d903119d..37f6b56e4 100644
--- a/lib/components/Dropdown/MenuItem/MenuItemButton.js
+++ b/lib/components/Dropdown/MenuItem/MenuItemButton.js
@@ -45,7 +45,7 @@ const MenuItemButton = ({
           "neeto-ui-dropdown__popup-menu-item-btn",
           className,
           {
-            "neeto-ui-dropdown__popup-menu-item-btn": isActive,
+            "neeto-ui-dropdown__popup-menu-item-btn--active": isActive,
             "neeto-ui-dropdown__popup-menu-item-btn--style-danger":
               style === ITEM_BTN_STYLES.danger,
           }
diff --git a/lib/styles/components/_dropdown.scss b/lib/styles/components/_dropdown.scss
index 0547d09a9..7eefb58b3 100644
--- a/lib/styles/components/_dropdown.scss
+++ b/lib/styles/components/_dropdown.scss
@@ -117,7 +117,7 @@
       background-color: rgb(var(--neeto-ui-gray-200));
     }
 
-    &.active {
+    &--active:not(:hover, :focus) {
       background-color: rgb(var(--neeto-ui-gray-800));
       color: rgb(var(--neeto-ui-white));
     }

From e741f4385edb50bc04fcfe1b3d9e1de4e852e5c7 Mon Sep 17 00:00:00 2001
From: Goutham Subramanyam <gsn.goutham@gmail.com>
Date: Sun, 25 Dec 2022 22:51:25 +0530
Subject: [PATCH 2/3] Added MenuItem Button disabled state

---
 lib/components/Dropdown/MenuItem/MenuItemButton.js | 7 +++++++
 lib/styles/components/_dropdown.scss               | 4 ++--
 2 files changed, 9 insertions(+), 2 deletions(-)

diff --git a/lib/components/Dropdown/MenuItem/MenuItemButton.js b/lib/components/Dropdown/MenuItem/MenuItemButton.js
index 37f6b56e4..fa61db759 100644
--- a/lib/components/Dropdown/MenuItem/MenuItemButton.js
+++ b/lib/components/Dropdown/MenuItem/MenuItemButton.js
@@ -17,6 +17,7 @@ const MenuItemButton = ({
   children,
   className,
   isActive,
+  isDisabled,
   style,
   prefix,
   suffix,
@@ -46,10 +47,12 @@ const MenuItemButton = ({
           className,
           {
             "neeto-ui-dropdown__popup-menu-item-btn--active": isActive,
+            "neeto-ui-dropdown__popup-menu-item-btn--disabled": isDisabled,
             "neeto-ui-dropdown__popup-menu-item-btn--style-danger":
               style === ITEM_BTN_STYLES.danger,
           }
         )}
+        disabled={isDisabled}
         {...otherProps}
         {...elementSpecificProps}
       >
@@ -82,6 +85,10 @@ MenuItemButton.propTypes = {
    * To specify the active state of the MenuItem.
    */
   isActive: PropTypes.bool,
+  /**
+   * To specify whether the MenuItem is disabled.
+   */
+  isDisabled: PropTypes.bool,
   /**
    * To specify an internal route to which the button points to.
    */
diff --git a/lib/styles/components/_dropdown.scss b/lib/styles/components/_dropdown.scss
index 7eefb58b3..6b5a5ca4c 100644
--- a/lib/styles/components/_dropdown.scss
+++ b/lib/styles/components/_dropdown.scss
@@ -107,12 +107,12 @@
     outline-color: transparent;
     border-radius: 0;
 
-    &.disabled {
+    &--disabled {
       cursor: not-allowed;
       color: rgb(var(--neeto-ui-gray-500));
     }
 
-    &:hover,
+    &:hover:not(:disabled),
     &:focus {
       background-color: rgb(var(--neeto-ui-gray-200));
     }

From f1e6ed7683f8b3afcc0122518cb8ce6d308b69aa Mon Sep 17 00:00:00 2001
From: Praveen Murali <itspraveenmurali@gmail.com>
Date: Wed, 28 Dec 2022 16:08:51 +0530
Subject: [PATCH 3/3] updated active state

---
 lib/styles/components/_dropdown.scss    | 10 +++++-----
 stories/Components/Dropdown.stories.jsx |  2 ++
 2 files changed, 7 insertions(+), 5 deletions(-)

diff --git a/lib/styles/components/_dropdown.scss b/lib/styles/components/_dropdown.scss
index 6b5a5ca4c..dbe65cfb4 100644
--- a/lib/styles/components/_dropdown.scss
+++ b/lib/styles/components/_dropdown.scss
@@ -109,16 +109,16 @@
 
     &--disabled {
       cursor: not-allowed;
-      color: rgb(var(--neeto-ui-gray-500));
+      opacity: 0.5;
     }
 
-    &:hover:not(:disabled),
-    &:focus {
+    &:hover:not(:disabled):not(.neeto-ui-dropdown__popup-menu-item-btn--active),
+    &:focus:not(:disabled):not(.neeto-ui-dropdown__popup-menu-item-btn--active){
       background-color: rgb(var(--neeto-ui-gray-200));
     }
 
-    &--active:not(:hover, :focus) {
-      background-color: rgb(var(--neeto-ui-gray-800));
+    &--active {
+      background-color: rgb(var(--neeto-ui-primary-500));
       color: rgb(var(--neeto-ui-white));
     }
 
diff --git a/stories/Components/Dropdown.stories.jsx b/stories/Components/Dropdown.stories.jsx
index bfe874a39..1215d9cb3 100644
--- a/stories/Components/Dropdown.stories.jsx
+++ b/stories/Components/Dropdown.stories.jsx
@@ -56,6 +56,8 @@ export const Default = (args) => {
           {listItems.map((item, idx) => (
             <MenuItem.Button key={idx}>{item}</MenuItem.Button>
           ))}
+          <MenuItem.Button isActive>Active</MenuItem.Button>
+          <MenuItem.Button isDisabled>Disabled</MenuItem.Button>
           <Divider />
           <MenuItem.Button style="danger">Delete</MenuItem.Button>
         </Menu>