EuiComboBox - remove cross icon when singleSelection is enabled (#769)

* EuiComboBox - remove cross icon when singleSelection is enabled * change log * more clear change log message
elastic · May 3, 2018 · a398a53 · a398a53
1 parent bd21c3b
commit a398a53
Show file tree

Hide file tree

Showing 5 changed files with 28 additions and 9 deletions.
diff --git 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
@@ -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
@@ -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
@@ -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
@@ -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}