From 6fbfd8d48b5f1c5f4604c0d3bfb37ed9410e4f04 Mon Sep 17 00:00:00 2001
From: cchaos <caroline.horn@elastic.co>
Date: Thu, 23 Aug 2018 18:00:43 -0400
Subject: [PATCH 1/6] Allowing `onClick` to be passed to whole pill

---
 src/components/combo_box/combo_box_input/combo_box_input.js | 5 ++++-
 1 file changed, 4 insertions(+), 1 deletion(-)

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 237af9456c0..86092a1f293 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
@@ -100,15 +100,18 @@ export class EuiComboBoxInput extends Component {
       const {
         label,
         color,
+        onClick,
         ...rest
       } = option;
 
       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}
           {...rest}
         >
           {label}

From a12c9a37b9770050c47557f05057fdac3255f8de Mon Sep 17 00:00:00 2001
From: cchaos <caroline.horn@elastic.co>
Date: Thu, 23 Aug 2018 18:04:35 -0400
Subject: [PATCH 2/6] Allowing single selection types to show plain text

with `asPlainText` as a property of `singleSelection`
---
 .../src/views/combo_box/combo_box_example.js  |  6 ++--
 .../src/views/combo_box/single_selection.js   |  2 +-
 src/components/combo_box/_combo_box.scss      | 17 +++++-----
 src/components/combo_box/combo_box.js         |  5 ++-
 .../combo_box_input/_combo_box_pill.scss      | 10 ++++++
 .../combo_box_input/combo_box_input.js        |  9 +++++-
 .../combo_box_input/combo_box_pill.js         | 31 ++++++++++---------
 7 files changed, 54 insertions(+), 26 deletions(-)

diff --git a/src-docs/src/views/combo_box/combo_box_example.js b/src-docs/src/views/combo_box/combo_box_example.js
index 055b577d8b2..1a287549817 100644
--- a/src-docs/src/views/combo_box/combo_box_example.js
+++ b/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 },
diff --git a/src-docs/src/views/combo_box/single_selection.js b/src-docs/src/views/combo_box/single_selection.js
index 18275954aec..43535d036c8 100644
--- a/src-docs/src/views/combo_box/single_selection.js
+++ b/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}
diff --git a/src/components/combo_box/_combo_box.scss b/src/components/combo_box/_combo_box.scss
index a41c15c996e..3ebca37ed8f 100644
--- a/src/components/combo_box/_combo_box.scss
+++ b/src/components/combo_box/_combo_box.scss
@@ -11,16 +11,19 @@
   .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;
 
-    &:hover {
-      cursor: text;
+    &:not(.euiComboBox__inputWrap--noWrap) {
+      height: auto;  /* 3 */
+      display: flex; /* 1 */
+      flex-wrap: wrap; /* 1 */
+      align-content: flex-start;
+
+      &:hover {
+        cursor: text;
+      }
     }
   }
 
diff --git a/src/components/combo_box/combo_box.js b/src/components/combo_box/combo_box.js
index ed2dfd747a0..908d01780a4 100644
--- a/src/components/combo_box/combo_box.js
+++ b/src/components/combo_box/combo_box.js
@@ -31,7 +31,10 @@ export class EuiComboBox extends Component {
     placeholder: PropTypes.string,
     isLoading: PropTypes.bool,
     async: PropTypes.bool,
-    singleSelection: PropTypes.bool,
+    singleSelection: PropTypes.oneOfType([
+      PropTypes.bool,
+      PropTypes.object,
+    ]),
     noSuggestions: PropTypes.bool,
     options: PropTypes.array,
     selectedOptions: PropTypes.array,
diff --git a/src/components/combo_box/combo_box_input/_combo_box_pill.scss b/src/components/combo_box/combo_box_input/_combo_box_pill.scss
index 4b94f31e674..d90b1a8ce81 100644
--- a/src/components/combo_box/combo_box_input/_combo_box_pill.scss
+++ b/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;
+  }
 }
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 86092a1f293..4ac3da0312d 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
@@ -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,
@@ -104,6 +107,8 @@ export class EuiComboBoxInput extends Component {
         ...rest
       } = option;
 
+      const asPlainText = singleSelection && singleSelection.asPlainText;
+
       return (
         <EuiComboBoxPill
           option={option}
@@ -112,6 +117,7 @@ export class EuiComboBoxInput extends Component {
           color={color}
           onClick={onClick}
           onClickAriaLabel={onClick ? 'Change' : null}
+          asPlainText={asPlainText}
           {...rest}
         >
           {label}
@@ -174,6 +180,7 @@ export class EuiComboBoxInput extends Component {
 
     const wrapClasses = classNames('euiComboBox__inputWrap', {
       'euiComboBox__inputWrap--fullWidth': fullWidth,
+      'euiComboBox__inputWrap--noWrap': singleSelection,
     });
 
     return (
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 9ce28d5dca8..e5353275512 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
@@ -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>
     );

From 0d8f3691f2fe957cb79f1dd8984a0533302fc14f Mon Sep 17 00:00:00 2001
From: cchaos <caroline.horn@elastic.co>
Date: Thu, 23 Aug 2018 18:38:36 -0400
Subject: [PATCH 3/6] Altering the padding based on props

---
 src-docs/src/views/combo_box/combo_box_example.js           | 2 +-
 .../combo_box/__snapshots__/combo_box.test.js.snap          | 4 ++--
 src/components/combo_box/_combo_box.scss                    | 6 +++++-
 .../combo_box/combo_box_input/_combo_box_input.scss         | 1 +
 src/components/combo_box/combo_box_input/combo_box_input.js | 1 +
 5 files changed, 10 insertions(+), 4 deletions(-)

diff --git a/src-docs/src/views/combo_box/combo_box_example.js b/src-docs/src/views/combo_box/combo_box_example.js
index 1a287549817..9ae64d90d9d 100644
--- a/src-docs/src/views/combo_box/combo_box_example.js
+++ b/src-docs/src/views/combo_box/combo_box_example.js
@@ -259,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>
     ),
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 4c4575cb8f1..ef0c350452e 100644
--- a/src/components/combo_box/__snapshots__/combo_box.test.js.snap
+++ b/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
diff --git a/src/components/combo_box/_combo_box.scss b/src/components/combo_box/_combo_box.scss
index 3ebca37ed8f..ab5fc5cf07b 100644
--- a/src/components/combo_box/_combo_box.scss
+++ b/src/components/combo_box/_combo_box.scss
@@ -13,7 +13,11 @@
     @include euiFormControlWithIcon($isIconOptional: true);
     @include euiFormControlSize();
     padding: $euiSizeXS;
-    @include euiFormControlLayout__padding(2); /* 2 */
+    @include euiFormControlLayout__padding(1); /* 2 */
+
+    &.euiComboBox__inputWrap-isClearable {
+      @include euiFormControlLayout__padding(2); /* 2 */
+    }
 
     &:not(.euiComboBox__inputWrap--noWrap) {
       height: auto;  /* 3 */
diff --git a/src/components/combo_box/combo_box_input/_combo_box_input.scss b/src/components/combo_box/combo_box_input/_combo_box_input.scss
index 32340949764..b3ee423b255 100644
--- a/src/components/combo_box/combo_box_input/_combo_box_input.scss
+++ b/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"] {
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 4ac3da0312d..7efe1242fab 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
@@ -181,6 +181,7 @@ export class EuiComboBoxInput extends Component {
     const wrapClasses = classNames('euiComboBox__inputWrap', {
       'euiComboBox__inputWrap--fullWidth': fullWidth,
       'euiComboBox__inputWrap--noWrap': singleSelection,
+      'euiComboBox__inputWrap-isClearable': onClear,
     });
 
     return (

From aa4cbf52d384637378aeaf904d79404636dc195d Mon Sep 17 00:00:00 2001
From: cchaos <caroline.horn@elastic.co>
Date: Mon, 27 Aug 2018 10:01:47 -0400
Subject: [PATCH 4/6] Address PR comments and Changelog

---
 CHANGELOG.md                          | 5 ++---
 src/components/combo_box/combo_box.js | 4 +++-
 2 files changed, 5 insertions(+), 4 deletions(-)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index 3b23de32135..040199d2789 100644
--- a/CHANGELOG.md
+++ b/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)
 
diff --git a/src/components/combo_box/combo_box.js b/src/components/combo_box/combo_box.js
index 908d01780a4..4d097b43d23 100644
--- a/src/components/combo_box/combo_box.js
+++ b/src/components/combo_box/combo_box.js
@@ -33,7 +33,9 @@ export class EuiComboBox extends Component {
     async: PropTypes.bool,
     singleSelection: PropTypes.oneOfType([
       PropTypes.bool,
-      PropTypes.object,
+      PropTypes.shape({
+        asPlainText: PropTypes.bool,
+      }),
     ]),
     noSuggestions: PropTypes.bool,
     options: PropTypes.array,

From 1f5c5629f81ebc197fa789165e102fe949355aee Mon Sep 17 00:00:00 2001
From: cchaos <caroline.horn@elastic.co>
Date: Tue, 28 Aug 2018 09:14:27 -0400
Subject: [PATCH 5/6] More PR addressing

---
 src/components/combo_box/combo_box_input/combo_box_input.js | 4 +++-
 src/components/combo_box/combo_box_input/combo_box_pill.js  | 2 +-
 2 files changed, 4 insertions(+), 2 deletions(-)

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 7efe1242fab..9707e79ddcb 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
@@ -31,7 +31,9 @@ export class EuiComboBoxInput extends Component {
     onCloseListClick: PropTypes.func.isRequired,
     singleSelection: PropTypes.oneOfType([
       PropTypes.bool,
-      PropTypes.object,
+      PropTypes.shape({
+        asPlainText: PropTypes.bool,
+      }),
     ]),
     isDisabled: PropTypes.bool,
     toggleButtonRef: PropTypes.func,
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 e5353275512..84e92a3f408 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
@@ -62,7 +62,7 @@ export class EuiComboBoxPill extends Component {
     }
 
     if (asPlainText) {
-      return <span className={classes}>{children}</span>;
+      return <span className={classes} {...rest}>{children}</span>;
     }
 
     return (

From c1cf96c8db552f7edc76055a4f6c6f20033b772f Mon Sep 17 00:00:00 2001
From: cchaos <caroline.horn@elastic.co>
Date: Tue, 4 Sep 2018 11:33:27 -0400
Subject: [PATCH 6/6] Updating TS def

---
 src/components/combo_box/index.d.ts | 4 +++-
 1 file changed, 3 insertions(+), 1 deletion(-)

diff --git a/src/components/combo_box/index.d.ts b/src/components/combo_box/index.d.ts
index 2f0d0935784..a16de82c280 100644
--- a/src/components/combo_box/index.d.ts
+++ b/src/components/combo_box/index.d.ts
@@ -49,6 +49,8 @@ declare module '@elastic/eui' {
   }
   export const EuiComboBoxOptionsList: SFC<EuiComboBoxOptionsListProps>;
 
+  export type EuiComboBoxSingleSelectionShape = { asPlainText?: boolean; };
+
   export interface EuiComboBoxProps {
     id?: string,
     isDisabled?: boolean,
@@ -56,7 +58,7 @@ declare module '@elastic/eui' {
     placeholder?: string,
     isLoading?: boolean,
     async?: boolean,
-    singleSelection?: boolean,
+    singleSelection?: EuiComboBoxSingleSelectionShape | boolean,
     noSuggestions?: boolean,
     options?: EuiComboBoxOptionsListProps['options'],
     selectedOptions?: EuiComboBoxOptionsListProps['selectedOptions'],