From a398a538870b5a5d9cecb622f5882d23c2052cb2 Mon Sep 17 00:00:00 2001
From: Nathan Reese <reese.nathan@gmail.com>
Date: Thu, 3 May 2018 15:48:03 -0600
Subject: [PATCH] EuiComboBox - remove cross icon when singleSelection is
 enabled (#769)

* EuiComboBox - remove cross icon when singleSelection is enabled

* change log

* more clear change log message
---
 CHANGELOG.md                                  |  1 +
 .../__snapshots__/combo_box.test.js.snap      |  1 +
 src/components/combo_box/combo_box.js         |  4 ++-
 .../combo_box_input/combo_box_input.js        |  4 ++-
 .../combo_box_input/combo_box_pill.js         | 27 ++++++++++++++-----
 5 files changed, 28 insertions(+), 9 deletions(-)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index 05f13f118a7..e0708c0c063 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -3,6 +3,7 @@
 - Added `EuiDescribedFormGroup` component, a wrapper around `EuiFormRow`(s) ([#707](https://github.com/elastic/eui/pull/707))
 - Added `describedByIds` prop to `EuiFormRow` to help with accessibility ([#707](https://github.com/elastic/eui/pull/707))
 - Added `isLoading` prop to `EuiButtonEmpty` ([#768](https://github.com/elastic/eui/pull/768))
+- Removed individual badge cross icon when `EuiComboBox` has `singleSelection` prop enabled. ([#769](https://github.com/elastic/eui/pull/769))
 
 ## [`0.0.45`](https://github.com/elastic/eui/tree/v0.0.45)
 
diff --git a/src/components/combo_box/__snapshots__/combo_box.test.js.snap b/src/components/combo_box/__snapshots__/combo_box.test.js.snap
index f8707b14f49..89c5941cc22 100644
--- a/src/components/combo_box/__snapshots__/combo_box.test.js.snap
+++ b/src/components/combo_box/__snapshots__/combo_box.test.js.snap
@@ -22,6 +22,7 @@ exports[`EuiComboBox is rendered 1`] = `
     onRemoveOption={[Function]}
     searchValue=""
     selectedOptions={Array []}
+    singleSelection={false}
     updatePosition={[Function]}
     value=""
   />
diff --git a/src/components/combo_box/combo_box.js b/src/components/combo_box/combo_box.js
index e55c391023f..e6fa87896a9 100644
--- a/src/components/combo_box/combo_box.js
+++ b/src/components/combo_box/combo_box.js
@@ -47,6 +47,7 @@ export class EuiComboBox extends Component {
     options: [],
     selectedOptions: [],
     isClearable: true,
+    singleSelection: false,
   }
 
   constructor(props) {
@@ -497,7 +498,7 @@ export class EuiComboBox extends Component {
       placeholder,
       noSuggestions,
       renderOption,
-      singleSelection, // eslint-disable-line no-unused-vars
+      singleSelection,
       onChange, // eslint-disable-line no-unused-vars
       onSearchChange, // eslint-disable-line no-unused-vars
       async, // eslint-disable-line no-unused-vars
@@ -572,6 +573,7 @@ export class EuiComboBox extends Component {
           isListOpen={isListOpen}
           onOpen={this.openList}
           onClose={this.closeList}
+          singleSelection={singleSelection}
         />
 
         {optionsList}
diff --git a/src/components/combo_box/combo_box_input/combo_box_input.js b/src/components/combo_box/combo_box_input/combo_box_input.js
index 85b9e830bb0..d8ce6f6d249 100644
--- a/src/components/combo_box/combo_box_input/combo_box_input.js
+++ b/src/components/combo_box/combo_box_input/combo_box_input.js
@@ -28,6 +28,7 @@ export class EuiComboBoxInput extends Component {
     isListOpen: PropTypes.bool.isRequired,
     onOpen: PropTypes.func.isRequired,
     onClose: PropTypes.func.isRequired,
+    singleSelection: PropTypes.bool,
   }
 
   constructor(props) {
@@ -85,6 +86,7 @@ export class EuiComboBoxInput extends Component {
       isListOpen,
       onOpen,
       onClose,
+      singleSelection,
     } = this.props;
 
     const pills = selectedOptions.map((option) => {
@@ -97,7 +99,7 @@ export class EuiComboBoxInput extends Component {
       return (
         <EuiComboBoxPill
           option={option}
-          onClose={onRemoveOption}
+          onClose={singleSelection ? null : onRemoveOption}
           key={label.toLowerCase()}
           color={color}
           {...rest}
diff --git a/src/components/combo_box/combo_box_input/combo_box_pill.js b/src/components/combo_box/combo_box_input/combo_box_pill.js
index bb637b668e7..8bdcec2fdc9 100644
--- a/src/components/combo_box/combo_box_input/combo_box_pill.js
+++ b/src/components/combo_box/combo_box_input/combo_box_pill.js
@@ -14,7 +14,7 @@ export class EuiComboBoxPill extends Component {
     children: PropTypes.string,
     className: PropTypes.string,
     color: PropTypes.string,
-    onClose: PropTypes.func.isRequired,
+    onClose: PropTypes.func,
   };
 
   static defaultProps = {
@@ -37,17 +37,30 @@ export class EuiComboBoxPill extends Component {
     } = this.props;
     const classes = classNames('euiComboBoxPill', className);
 
+    if (onClose) {
+      return (
+        <EuiBadge
+          className={classes}
+          title={children}
+          iconOnClick={this.onCloseButtonClick}
+          iconType="cross"
+          iconSide="right"
+          color={color}
+          closeButtonProps={{
+            tabIndex: '-1'
+          }}
+          {...rest}
+        >
+          {children}
+        </EuiBadge>
+      );
+    }
+
     return (
       <EuiBadge
         className={classes}
         title={children}
-        iconOnClick={this.onCloseButtonClick}
-        iconType="cross"
-        iconSide="right"
         color={color}
-        closeButtonProps={{
-          tabIndex: '-1'
-        }}
         {...rest}
       >
         {children}