Add disabled prop to EuiContextMenuItem.

CHANGELOG.md

@@ -12,6 +12,7 @@
 - Add `isReadOnly`, `setOptions`, and `cursorStart` props to  `<EuiCodeEditor>` ([#169](https://github.com/elastic/eui/pull/169))
 - Add `wrap` prop to `<EuiFlexGroup>` ([#170](https://github.com/elastic/eui/pull/170))
 - Add `scope` prop to `<EuiTableHeaderCell>` and `<EuiTableHeaderCellCheckbox>` ([#171](https://github.com/elastic/eui/pull/171))
+- Add `disabled` prop to `<EuiContextMenuItem>` ([#172](https://github.com/elastic/eui/pull/172))
 
 **Bug fixes**
 

src-docs/src/views/context_menu/context_menu.js

@@ -47,7 +47,7 @@ export default class extends Component {
         ),
         onClick: () => { this.closePopover(); window.alert('Show fullscreen'); },
       }, {
-        name: 'Share this dasbhoard',
+        name: 'Share this dashboard',
         icon: 'user',
         panel: {
           id: 1,
@@ -104,6 +104,11 @@ export default class extends Component {
         name: 'Display options',
         icon: 'user',
         onClick: () => { this.closePopover(); window.alert('Display options'); },
+      }, {
+        name: 'Disabled option',
+        icon: 'user',
+        disabled: true,
+        onClick: () => { this.closePopover(); window.alert('Disabled option'); },
       }],
     };
 

src/components/context_menu/__snapshots__/context_menu_item.test.js.snap

@@ -19,6 +19,22 @@ exports[`EuiContextMenuItem is rendered 1`] = `
 </button>
 `;
 
+exports[`EuiContextMenuItem props disabled is rendered 1`] = `
+<button
+  class="euiContextMenuItem euiContextMenuItem-isDisabled"
+  disabled=""
+  type="button"
+>
+  <span
+    class="euiContextMenu__itemLayout"
+  >
+    <span
+      class="euiContextMenuItem__text"
+    />
+  </span>
+</button>
+`;
+
 exports[`EuiContextMenuItem props hasPanel is rendered 1`] = `
 <button
   class="euiContextMenuItem"

src/components/context_menu/_context_menu_item.scss

@@ -11,6 +11,15 @@
   &:focus {
     background-color: $euiFocusBackgroundColor;
   }
+
+  &.euiContextMenuItem-isDisabled {
+    color: $euiButtonColorDisabled;
+    cursor: default;
+
+    &:hover, &:focus {
+      text-decoration: none;
+    }
+  }
 }
 
   .euiContextMenuItem__inner {

src/components/context_menu/context_menu_item.js

@@ -15,6 +15,7 @@ export class EuiContextMenuItem extends Component {
     onClick: PropTypes.func,
     hasPanel: PropTypes.bool,
     buttonRef: PropTypes.func,
+    disabled: PropTypes.bool,
   }
 
   render() {
@@ -24,6 +25,7 @@ export class EuiContextMenuItem extends Component {
       hasPanel,
       icon,
       buttonRef,
+      disabled,
       ...rest
     } = this.props;
 
@@ -61,13 +63,16 @@ export class EuiContextMenuItem extends Component {
       );
     }
 
-    const classes = classNames('euiContextMenuItem', className);
+    const classes = classNames('euiContextMenuItem', className, {
+      'euiContextMenuItem-isDisabled': disabled,
+    });
 
     return (
       <button
         className={classes}
         type="button"
         ref={buttonRef}
+        disabled={disabled}
         {...rest}
       >
         <span className="euiContextMenu__itemLayout">

src/components/context_menu/context_menu_item.test.js

@@ -1,5 +1,5 @@
 import React from 'react';
-import { render, shallow } from 'enzyme';
+import { render, shallow, mount } from 'enzyme';
 import sinon from 'sinon';
 import { requiredProps } from '../../test/required_props';
 
@@ -29,6 +29,17 @@ describe('EuiContextMenuItem', () => {
       });
     });
 
+    describe('disabled', () => {
+      test('is rendered', () => {
+        const component = render(
+          <EuiContextMenuItem disabled />
+        );
+
+        expect(component)
+          .toMatchSnapshot();
+      });
+    });
+
     describe('onClick', () => {
       test(`isn't called upon instantiation`, () => {
         const onClickHandler = sinon.stub();
@@ -51,6 +62,18 @@ describe('EuiContextMenuItem', () => {
 
         sinon.assert.calledOnce(onClickHandler);
       });
+
+      test('is not called when the item is clicked but set to disabled', () => {
+        const onClickHandler = sinon.stub();
+
+        const component = mount(
+          <EuiContextMenuItem disabled onClick={onClickHandler} />
+        );
+
+        component.simulate('click');
+
+        sinon.assert.notCalled(onClickHandler);
+      });
     });
 
     describe('hasPanel', () => {