fix(Menu): item styles

Author: tenphi

.changeset/big-suns-complain.md

@@ -0,0 +1,5 @@
+---
+"@cube-dev/ui-kit": patch
+---
+
+Fixes Menu Item disabled styles.

src/components/pickers/Menu/Menu.stories.tsx

@@ -83,6 +83,42 @@ export const Default = ({ ...props }) => {
   );
 };
 
+export const DisabledKeys = ({ ...props }) => {
+  const menu = (
+    <Menu id="menu" disabledKeys={['red', 'yellow']} {...props} width="220px">
+      <Menu.Item key="red" postfix="Ctr+C">
+        Copy
+      </Menu.Item>
+      <Menu.Item key="orange" postfix="Ctr+V">
+        Paste
+      </Menu.Item>
+      <Menu.Item key="yellow" postfix="Ctr+X">
+        Cut
+      </Menu.Item>
+    </Menu>
+  );
+
+  return (
+    <Space
+      gap="10x"
+      placeContent="start start"
+      placeItems="start"
+      height="400px"
+    >
+      {menu}
+
+      <MenuTrigger>
+        <Button
+          size="small"
+          icon={<MoreIcon />}
+          aria-label="Open Context Menu"
+        />
+        {menu}
+      </MenuTrigger>
+    </Space>
+  );
+};
+
 export const InsideModal = () => {
   return (
     <DialogContainer>

src/components/pickers/Menu/Menu.tsx

@@ -26,7 +26,8 @@ import { MenuSection } from './MenuSection';
 import { StyledMenu, StyledMenuHeader } from './styled';
 
 export interface CubeMenuProps<T>
-  extends ContainerStyleProps,
+  extends BaseProps,
+    ContainerStyleProps,
     AriaMenuProps<T> {
   selectionIcon?: MenuSelectionType;
   // @deprecated
@@ -51,10 +52,11 @@ function Menu<T extends object>(
     sectionHeadingStyles,
     selectionIcon,
     qa,
+    ...rest
   } = props;
   const domRef = useDOMRef(ref);
   const contextProps = useMenuContext();
-  const completeProps = mergeProps(contextProps, props);
+  const completeProps = mergeProps(contextProps, rest);
 
   const state = useTreeState(completeProps);
   const items = [...state.collection];

src/components/pickers/Menu/MenuButton.tsx

@@ -23,7 +23,13 @@ const StyledButton = tasty(Block, {
       '': '#clear',
       hovered: '#dark.03',
       'pressed | selected': '#dark.06',
-      '[disabled] & ![data-type="link"]': '#dark.04',
+      disabled: '#dark.04',
+    },
+    color: {
+      '': '#dark-02',
+      hovered: '#dark-02',
+      pressed: '#dark',
+      disabled: '#dark-04',
     },
     cursor: {
       '': 'pointer',
@@ -54,14 +60,7 @@ const StyledButton = tasty(Block, {
       placeItems: 'center',
     },
 
-    Postfix: {
-      color: {
-        '': '#dark-03',
-        'hovered | focused': '#dark-03',
-        'pressed | selected': '#purple-text',
-        disabled: '#dark-04',
-      },
-    },
+    Postfix: {},
   },
 });