add disabled prop to EuiComboBoxOption (#650)

* add disabled prop to EuiComboBox option * update readme * override hover state, add disabled to example label
elastic · Apr 10, 2018 · e4ec1cd · e4ec1cd
1 parent 1e41642
commit e4ec1cd
Show file tree

Hide file tree

Showing 4 changed files with 13 additions and 2 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -1,6 +1,6 @@
 # [`master`](https://github.com/elastic/eui/tree/master)
 
-No public interface changes since `0.0.40`.
+- add disabled prop to `EuiComboBoxOption` ([#650](https://github.com/elastic/eui/pull/650))
 
 # [`0.0.40`](https://github.com/elastic/eui/tree/v0.0.40)
 

diff --git a/src-docs/src/views/combo_box/combo_box.js b/src-docs/src/views/combo_box/combo_box.js
@@ -12,7 +12,8 @@ export default class extends Component {
       label: 'Titan',
       'data-test-subj': 'titanOption',
     }, {
-      label: 'Enceladus',
+      label: 'Enceladus is disabled',
+      disabled: true,
     }, {
       label: 'Mimas',
     }, {

diff --git a/src/components/combo_box/combo_box_options_list/_combo_box_option.scss b/src/components/combo_box/combo_box_options_list/_combo_box_option.scss
@@ -16,4 +16,11 @@
     color: $euiColorPrimary;
     background-color: $euiFocusBackgroundColor;
   }
+  &:disabled {
+    color: $euiColorMediumShade;
+    cursor: not-allowed;
+    &:hover {
+      text-decoration: none;
+    }
+  }
 }
diff --git a/src/components/combo_box/combo_box_options_list/combo_box_option.js b/src/components/combo_box/combo_box_options_list/combo_box_option.js
@@ -14,6 +14,7 @@ export class EuiComboBoxOption extends Component {
     optionRef: PropTypes.func,
     onClick: PropTypes.func.isRequired,
     onEnterKey: PropTypes.func.isRequired,
+    disabled: PropTypes.bool,
   }
 
   onClick = () => {
@@ -38,6 +39,7 @@ export class EuiComboBoxOption extends Component {
       option, // eslint-disable-line no-unused-vars
       onClick, // eslint-disable-line no-unused-vars
       onEnterKey, // eslint-disable-line no-unused-vars
+      disabled,
       ...rest
     } = this.props;
 
@@ -54,6 +56,7 @@ export class EuiComboBoxOption extends Component {
         onKeyDown={this.onKeyDown}
         ref={optionRef}
         tabIndex="-1"
+        disabled={disabled}
         {...rest}
       >
         {children}