Fixed isActive state and added isDisabled state in MenuItem Button (#1492)

Co-authored-by: github-actions[bot] <41898282+github-actions[bot]@users.noreply.github.com>
Co-authored-by: Praveen Murali <itspraveenmurali@gmail.com>

Author: 3 people

lib/components/Dropdown/MenuItem/MenuItemButton.js

@@ -17,6 +17,7 @@ const MenuItemButton = ({
   children,
   className,
   isActive,
+  isDisabled,
   style,
   prefix,
   suffix,
@@ -45,11 +46,13 @@ 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--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.
    */

lib/styles/components/_dropdown.scss

@@ -107,18 +107,18 @@
     outline-color: transparent;
     border-radius: 0;
 
-    &.disabled {
+    &--disabled {
       cursor: not-allowed;
-      color: rgb(var(--neeto-ui-gray-500));
+      opacity: 0.5;
     }
 
-    &:hover,
-    &: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 {
-      background-color: rgb(var(--neeto-ui-gray-800));
+    &--active {
+      background-color: rgb(var(--neeto-ui-primary-500));
       color: rgb(var(--neeto-ui-white));
     }
 

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>