feat(Menu): add item disabled state

8base · Aug 14, 2019 · dd8adfd · dd8adfd
1 parent f84ce26
commit dd8adfd
Show file tree

Hide file tree

Showing 4 changed files with 9 additions and 1 deletion.
diff --git a/e2e/__tests__/__image_snapshots__/menu-test-js-components-menu-common-1-snap.png b/e2e/__tests__/__image_snapshots__/menu-test-js-components-menu-common-1-snap.png
diff --git a/src/components/Menu/Menu.stories.js b/src/components/Menu/Menu.stories.js
@@ -7,7 +7,7 @@ export default (asStory) => {
         <Menu>
           <Menu.Item>Tramman</Menu.Item>
           <Menu.Item>Gripman</Menu.Item>
-          <Menu.Item>Proalliance</Menu.Item>
+          <Menu.Item disabled>Proalliance</Menu.Item>
         </Menu>
       ));
   });

diff --git a/src/components/Menu/Menu.theme.js b/src/components/Menu/Menu.theme.js
@@ -38,6 +38,13 @@ const [MenuItemTag, themeMenuItem] = createThemeTag(`${name}Item`, ({ COLORS, SI
       color: COLORS.BLACK,
     },
   },
+  modifiers: {
+    disabled: {
+      pointerEvents: 'none',
+      cursor: 'default',
+      color: COLORS.DISABLED_COLOR,
+    },
+  },
 }));
 
 

diff --git a/src/components/Menu/MenuItem.js b/src/components/Menu/MenuItem.js
@@ -6,6 +6,7 @@ import { MenuItemTag } from './Menu.theme';
 
 type MenuItemProps = {
   children?: React$Node,
+  disabled?: boolean,
 };
-Original file line number
+Diff line change
@@ Expand Up / @@ -6,6 +6,7 @@ import { MenuItemTag } from './Menu.theme'; @@
     type MenuItemProps = {
       children?: React$Node,
+      disabled?: boolean,
     };
@@ Expand Down @@