updated active state

praveen-murali-ind · praveen-murali-ind · commit f1e6ed7683f8 · 2022-12-28T16:08:51.000+05:30
diff --git 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
@@ -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>

Original file line number	Diff line number	Diff line change
`@@ -109,16 +109,16 @@`
`109`	`109`
`110`	`110`	`&--disabled {`
`111`	`111`	`cursor: not-allowed;`
`112`		`- color: rgb(var(--neeto-ui-gray-500));`
	`112`	`+ opacity: 0.5;`
`113`	`113`	`}`
`114`	`114`
`115`		`- &:hover:not(:disabled),`
`116`		`- &:focus {`
	`115`	`+ &:hover:not(:disabled):not(.neeto-ui-dropdown__popup-menu-item-btn--active),`
	`116`	`+ &:focus:not(:disabled):not(.neeto-ui-dropdown__popup-menu-item-btn--active){`
`117`	`117`	`background-color: rgb(var(--neeto-ui-gray-200));`
`118`	`118`	`}`
`119`	`119`
`120`		`- &--active:not(:hover, :focus) {`
`121`		`- background-color: rgb(var(--neeto-ui-gray-800));`
	`120`	`+ &--active {`
	`121`	`+ background-color: rgb(var(--neeto-ui-primary-500));`
`122`	`122`	`color: rgb(var(--neeto-ui-white));`
`123`	`123`	`}`
`124`	`124`