feat(Label): add a disabled state to submenu button (#1867)

mondaycom · Jan 4, 2024 · ecb20c8 · ecb20c8
1 parent 63e3f8a
commit ecb20c8
Show file tree

Hide file tree

Showing 2 changed files with 11 additions and 4 deletions.
diff --git a/src/components/Menu/MenuItem/MenuItem.module.scss b/src/components/Menu/MenuItem/MenuItem.module.scss
@@ -44,14 +44,20 @@
 .subMenuIconWrapper .splitMenuItemIconButton {
   width: 34px;
   height: 30px;
-  --primary-background-hover-color: rgba(103, 104, 121, 0.1); // TODO Temp override for Tal changes - remove once token is changed
-  --primary-selected-color: rgba(103, 104, 121, 0.1); // Override for IconButton active color
+
+  // TODO Temp override for Tal changes - remove once token is changed
+  --primary-background-hover-color: rgba(103, 104, 121, 0.1);
+  // Override for IconButton active color
+  --primary-selected-color: rgba(103, 104, 121, 0.1);
 }
 
 .iconButton {
   width: 18px;
   height: 18px;
-  color: var(--icon-color);
+
+  &:not(.disabled) {
+    color: var(--icon-color);
+  }
 }
 
 .item.splitMenuItem {

diff --git a/src/components/Menu/MenuItem/MenuItem.tsx b/src/components/Menu/MenuItem/MenuItem.tsx
@@ -229,10 +229,11 @@ const MenuItem: VibeComponent<MenuItemProps> & {
             className={styles.splitMenuItemIconButton}
             kind={IconButton.kinds.TERTIARY}
             size={null} // Customizing size via className
-            iconClassName={styles.iconButton}
+            iconClassName={cx(styles.iconButton, { [styles.disabled]: disabled })}
             tabIndex={-1}
             ref={iconButtonElementRef}
             active={shouldShowSubMenu}
+            disabled={disabled}
           />
         </div>
       ) : (