EuiComboBox additions

CHANGELOG.md

@@ -1,8 +1,7 @@
 ## [`master`](https://github.com/elastic/eui/tree/master)
 
-No public interface changes since `3.7.0`.
-
-- Added color and monotone icons for AWS and GCP. ([#1135](https://github.com/elastic/eui/pull/1135))
+- Added color and monotone icons for AWS and GCP ([#1135](https://github.com/elastic/eui/pull/1135))
+- Added `singleSelection.asPlainText` prop to `EuiComboBox` ([#1139](https://github.com/elastic/eui/pull/1139))
 
 ## [`3.7.0`](https://github.com/elastic/eui/tree/v3.7.0)
 

src-docs/src/views/combo_box/combo_box_example.js

@@ -224,8 +224,10 @@ export const ComboBoxExample = {
     }],
     text: (
       <p>
-        To only allow the user to select a single option, provide
-        the <EuiCode>singleSelection</EuiCode> prop.
+        To only allow the user to select a single option, provide the{' '}
+        <EuiCode>singleSelection</EuiCode> prop. You may want to render the selected option as
+        plain text instead of pill form. To do this, pass{' '}
+        <EuiCode>{'singleSelection={{ asPlainText: true }}'}</EuiCode>
       </p>
     ),
     props: { EuiComboBox },
@@ -257,7 +259,7 @@ export const ComboBoxExample = {
     }],
     text: (
       <p>
-        Alternatively, provide thhe <EuiCode>noSuggestions</EuiCode> prop to hide the suggestions list
+        Alternatively, provide the <EuiCode>noSuggestions</EuiCode> prop to hide the suggestions list
         and <em>only</em> allow the creation of custom options.
       </p>
     ),

src-docs/src/views/combo_box/single_selection.js

@@ -48,7 +48,7 @@ export default class extends Component {
     return (
       <EuiComboBox
         placeholder="Select a single option"
-        singleSelection={true}
+        singleSelection={{ asPlainText: true }}
         options={this.options}
         selectedOptions={selectedOptions}
         onChange={this.onChange}

src/components/combo_box/__snapshots__/combo_box.test.js.snap

@@ -13,7 +13,7 @@ exports[`EuiComboBox is rendered 1`] = `
       class="euiFormControlLayout__childrenWrapper"
     >
       <div
-        class="euiComboBox__inputWrap"
+        class="euiComboBox__inputWrap euiComboBox__inputWrap-isClearable"
         data-test-subj="comboBoxInput"
       >
         <div
@@ -214,7 +214,7 @@ exports[`props options list is rendered 1`] = `
       class="euiFormControlLayout__childrenWrapper"
     >
       <div
-        class="euiComboBox__inputWrap"
+        class="euiComboBox__inputWrap euiComboBox__inputWrap-isClearable"
         data-test-subj="comboBoxInput"
       >
         <div

src/components/combo_box/_combo_box.scss

@@ -11,16 +11,23 @@
   .euiComboBox__inputWrap {
     @include euiFormControlStyle($includeStates: false, $includeSizes: true);
     @include euiFormControlWithIcon($isIconOptional: true);
-    @include euiFormControlSize(auto); /* 3 */
-
+    @include euiFormControlSize();
     padding: $euiSizeXS;
-    display: flex; /* 1 */
-    flex-wrap: wrap; /* 1 */
-    @include euiFormControlLayout__padding(2); /* 2 */
-    align-content: flex-start;
+    @include euiFormControlLayout__padding(1); /* 2 */
+
+    &.euiComboBox__inputWrap-isClearable {
+      @include euiFormControlLayout__padding(2); /* 2 */
+    }
+
+    &:not(.euiComboBox__inputWrap--noWrap) {
+      height: auto;  /* 3 */
+      display: flex; /* 1 */
+      flex-wrap: wrap; /* 1 */
+      align-content: flex-start;
 
-    &:hover {
-      cursor: text;
+      &:hover {
+        cursor: text;
+      }
     }
   }
 

src/components/combo_box/combo_box.js

@@ -31,7 +31,12 @@ export class EuiComboBox extends Component {
     placeholder: PropTypes.string,
     isLoading: PropTypes.bool,
     async: PropTypes.bool,
-    singleSelection: PropTypes.bool,
+    singleSelection: PropTypes.oneOfType([
+      PropTypes.bool,
+      PropTypes.shape({
+        asPlainText: PropTypes.bool,
+      }),
+    ]),
     noSuggestions: PropTypes.bool,
     options: PropTypes.array,
     selectedOptions: PropTypes.array,

src/components/combo_box/combo_box_input/_combo_box_input.scss

@@ -1,4 +1,5 @@
 .euiComboBox__input {
+  max-width: 100%;
 
   // Ensure that no input states are visible on the hidden input
   input[aria-hidden="true"] {

src/components/combo_box/combo_box_input/_combo_box_pill.scss

@@ -3,4 +3,14 @@
 .euiComboBoxPill {
   margin: $euiSizeXS !important;
   line-height: $euiSizeL - 2px;
+
+  &--plainText {
+    font-size: $euiFontSizeS;
+    font-family: $euiFontFamily;
+    padding: 0 $euiSizeXS;
+    color: $euiTextColor;
+    vertical-align: middle;
+    display: inline-block;
+    @include euiTextTruncate;
+  }
 }

src/components/combo_box/combo_box_input/combo_box_input.js

@@ -29,7 +29,10 @@ export class EuiComboBoxInput extends Component {
     isListOpen: PropTypes.bool.isRequired,
     onOpenListClick: PropTypes.func.isRequired,
     onCloseListClick: PropTypes.func.isRequired,
-    singleSelection: PropTypes.bool,
+    singleSelection: PropTypes.oneOfType([
+      PropTypes.bool,
+      PropTypes.object,
+    ]),
     isDisabled: PropTypes.bool,
     toggleButtonRef: PropTypes.func,
     fullWidth: PropTypes.bool,
@@ -100,15 +103,21 @@ export class EuiComboBoxInput extends Component {
       const {
         label,
         color,
+        onClick,
         ...rest
       } = option;
 
+      const asPlainText = singleSelection && singleSelection.asPlainText;
+
       return (
         <EuiComboBoxPill
           option={option}
-          onClose={(isDisabled || singleSelection) ? null : onRemoveOption}
+          onClose={(isDisabled || singleSelection || onClick) ? null : onRemoveOption}
           key={label.toLowerCase()}
           color={color}
+          onClick={onClick}
+          onClickAriaLabel={onClick ? 'Change' : null}
+          asPlainText={asPlainText}
           {...rest}
         >
           {label}
@@ -171,6 +180,8 @@ export class EuiComboBoxInput extends Component {
 
     const wrapClasses = classNames('euiComboBox__inputWrap', {
       'euiComboBox__inputWrap--fullWidth': fullWidth,
+      'euiComboBox__inputWrap--noWrap': singleSelection,
+      'euiComboBox__inputWrap-isClearable': onClear,
     });
 
     return (

src/components/combo_box/combo_box_input/combo_box_pill.js

@@ -1,12 +1,8 @@
-import React, {
-  Component,
-} from 'react';
+import React, { Component } from 'react';
 import PropTypes from 'prop-types';
 import classNames from 'classnames';
 
-import {
-  EuiBadge,
-} from '../../badge';
+import { EuiBadge } from '../../badge';
 
 export class EuiComboBoxPill extends Component {
   static propTypes = {
@@ -15,6 +11,7 @@ export class EuiComboBoxPill extends Component {
     className: PropTypes.string,
     color: PropTypes.string,
     onClose: PropTypes.func,
+    asPlainText: PropTypes.bool,
   };
 
   static defaultProps = {
@@ -33,9 +30,16 @@ export class EuiComboBoxPill extends Component {
       option, // eslint-disable-line no-unused-vars
       onClose, // eslint-disable-line no-unused-vars
       color,
+      asPlainText,
       ...rest
     } = this.props;
-    const classes = classNames('euiComboBoxPill', className);
+    const classes = classNames(
+      'euiComboBoxPill',
+      {
+        'euiComboBoxPill--plainText': asPlainText,
+      },
+      className
+    );
 
     if (onClose) {
       return (
@@ -48,7 +52,7 @@ export class EuiComboBoxPill extends Component {
           iconSide="right"
           color={color}
           closeButtonProps={{
-            tabIndex: '-1'
+            tabIndex: '-1',
           }}
           {...rest}
         >
@@ -57,13 +61,12 @@ export class EuiComboBoxPill extends Component {
       );
     }
 
+    if (asPlainText) {
+      return <span className={classes}>{children}</span>;
+    }
+
     return (
-      <EuiBadge
-        className={classes}
-        title={children}
-        color={color}
-        {...rest}
-      >
+      <EuiBadge className={classes} title={children} color={color} {...rest}>
         {children}
       </EuiBadge>
     );