diff --git a/CHANGELOG.md b/CHANGELOG.md index 569f32036f1..8a5f2f7a59b 100644 --- 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 index bd01a4bae0b..647af621fbb 100644 --- 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 index 7f37487eb80..f38453417b4 100644 --- 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 index e3f9a77b568..184712686a9 100644 --- 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}