Added prepend and append to EuiComboBox

CHANGELOG.md

@@ -1,5 +1,6 @@
 ## [`master`](https://github.com/elastic/eui/tree/master)
 
+- Added `prepend` and `append` ability to `EuiComboBox` ([#3003](https://github.com/elastic/eui/pull/3003))
 - Added `EuiDataGrid`'s default sort order property ([#2987](https://github.com/elastic/eui/pull/2987))
 - Fixed `EuiDataGrid`'s pagination visibility when changing rows per page ([#2978](https://github.com/elastic/eui/pull/2978))
 - Added `highlightAll` prop to `EuiHighlight` to highlight all matches ([#2957](https://github.com/elastic/eui/pull/2957))

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

@@ -338,6 +338,7 @@ exports[`props singleSelection is rendered 1`] = `
   role="combobox"
 >
   <EuiComboBoxInput
+    append={null}
     autoSizeInputRef={[Function]}
     compressed={false}
     fullWidth={false}
@@ -352,6 +353,7 @@ exports[`props singleSelection is rendered 1`] = `
     onFocus={[Function]}
     onOpenListClick={[Function]}
     onRemoveOption={[Function]}
+    prepend={null}
     rootId={[Function]}
     searchValue=""
     selectedOptions={
@@ -369,6 +371,135 @@ exports[`props singleSelection is rendered 1`] = `
 </div>
 `;
 
+exports[`props singleSelection prepend and append is rendered 1`] = `
+<div
+  aria-expanded={true}
+  aria-haspopup="listbox"
+  className="euiComboBox euiComboBox-isOpen"
+  onKeyDown={[Function]}
+  role="combobox"
+>
+  <EuiComboBoxInput
+    append="String"
+    autoSizeInputRef={[Function]}
+    compressed={false}
+    fullWidth={false}
+    hasSelectedOptions={false}
+    inputRef={[Function]}
+    isListOpen={true}
+    noIcon={false}
+    onChange={[Function]}
+    onClear={[Function]}
+    onClick={[Function]}
+    onCloseListClick={[Function]}
+    onFocus={[Function]}
+    onOpenListClick={[Function]}
+    onRemoveOption={[Function]}
+    prepend="String"
+    rootId={[Function]}
+    searchValue=""
+    selectedOptions={Array []}
+    singleSelection={true}
+    toggleButtonRef={[Function]}
+    updatePosition={[Function]}
+    value=""
+  />
+  <EuiPortal>
+    <EuiComboBoxOptionsList
+      activeOptionIndex={-1}
+      areAllOptionsSelected={false}
+      data-test-subj=""
+      fullWidth={false}
+      listRef={[Function]}
+      matchingOptions={
+        Array [
+          Object {
+            "data-test-subj": "titanOption",
+            "label": "Titan",
+          },
+          Object {
+            "label": "Enceladus",
+          },
+          Object {
+            "label": "Mimas",
+          },
+          Object {
+            "label": "Dione",
+          },
+          Object {
+            "label": "Iapetus",
+          },
+          Object {
+            "label": "Phoebe",
+          },
+          Object {
+            "label": "Rhea",
+          },
+          Object {
+            "label": "Pandora is one of Saturn's moons, named for a Titaness of Greek mythology",
+          },
+          Object {
+            "label": "Tethys",
+          },
+          Object {
+            "label": "Hyperion",
+          },
+        ]
+      }
+      onCloseList={[Function]}
+      onOptionClick={[Function]}
+      onOptionEnterKey={[Function]}
+      onScroll={[Function]}
+      optionRef={[Function]}
+      options={
+        Array [
+          Object {
+            "data-test-subj": "titanOption",
+            "label": "Titan",
+          },
+          Object {
+            "label": "Enceladus",
+          },
+          Object {
+            "label": "Mimas",
+          },
+          Object {
+            "label": "Dione",
+          },
+          Object {
+            "label": "Iapetus",
+          },
+          Object {
+            "label": "Phoebe",
+          },
+          Object {
+            "label": "Rhea",
+          },
+          Object {
+            "label": "Pandora is one of Saturn's moons, named for a Titaness of Greek mythology",
+          },
+          Object {
+            "label": "Tethys",
+          },
+          Object {
+            "label": "Hyperion",
+          },
+        ]
+      }
+      position="bottom"
+      rootId={[Function]}
+      rowHeight={27}
+      scrollToIndex={-1}
+      searchValue=""
+      selectedOptions={Array []}
+      singleSelection={true}
+      updatePosition={[Function]}
+      width={0}
+    />
+  </EuiPortal>
+</div>
+`;
+
 exports[`props singleSelection selects existing option when opened 1`] = `
 <div
   aria-expanded={true}
@@ -378,6 +509,7 @@ exports[`props singleSelection selects existing option when opened 1`] = `
   role="combobox"
 >
   <EuiComboBoxInput
+    append={null}
     autoSizeInputRef={[Function]}
     compressed={false}
     fullWidth={false}
@@ -392,6 +524,7 @@ exports[`props singleSelection selects existing option when opened 1`] = `
     onFocus={[Function]}
     onOpenListClick={[Function]}
     onRemoveOption={[Function]}
+    prepend={null}
     rootId={[Function]}
     searchValue=""
     selectedOptions={

src/components/combo_box/_combo_box.scss

@@ -101,4 +101,4 @@
       }
     }
   }
-}
+}

src/components/combo_box/combo_box.test.tsx

@@ -134,6 +134,19 @@ describe('props', () => {
         />
       );
 
+      component.setState({ isListOpen: true });
+      expect(component).toMatchSnapshot();
+    });
+    test('prepend and append is rendered', () => {
+      const component = shallow(
+        <EuiComboBox
+          options={options}
+          singleSelection={true}
+          prepend="String"
+          append="String"
+        />
+      );
+
       component.setState({ isListOpen: true });
       expect(component).toMatchSnapshot();
     });

src/components/combo_box/combo_box.tsx

@@ -43,6 +43,7 @@ import {
 import { EuiFilterSelectItem } from '../filter_group';
 import AutosizeInput from 'react-input-autosize';
 import { CommonProps } from '../common';
+import { EuiFormControlLayoutProps } from '../form';
 
 type DrillProps<T> = Pick<
   EuiComboBoxOptionsListProps<T>,
@@ -73,6 +74,8 @@ interface _EuiComboBoxProps<T>
   placeholder?: string;
   rowHeight?: number;
   singleSelection: boolean | EuiComboBoxSingleSelectionShape;
+  prepend?: EuiFormControlLayoutProps['prepend'];
+  append?: EuiFormControlLayoutProps['append'];
 }
 
 /**
@@ -121,6 +124,8 @@ export class EuiComboBox<T> extends Component<
     options: [],
     selectedOptions: [],
     singleSelection: false,
+    prepend: null,
+    append: null,
   };
 
   state: EuiComboBoxState<T> = {
@@ -790,6 +795,8 @@ export class EuiComboBox<T> extends Component<
       rowHeight,
       selectedOptions,
       singleSelection,
+      prepend,
+      append,
       ...rest
     } = this.props;
     const {
@@ -912,8 +919,9 @@ export class EuiComboBox<T> extends Component<
           toggleButtonRef={this.toggleButtonRefCallback}
           updatePosition={this.updatePosition}
           value={value}
+          append={singleSelection ? append : undefined}
+          prepend={singleSelection ? prepend : undefined}
         />
-
         {optionsList}
       </div>
     );

src/components/combo_box/combo_box_input/combo_box_input.tsx

@@ -8,7 +8,10 @@ import classNames from 'classnames';
 import AutosizeInput from 'react-input-autosize';
 
 import { EuiScreenReaderOnly } from '../../accessibility';
-import { EuiFormControlLayout } from '../../form/form_control_layout';
+import {
+  EuiFormControlLayout,
+  EuiFormControlLayoutProps,
+} from '../../form/form_control_layout';
 import { EuiComboBoxPill } from './combo_box_pill';
 import { htmlIdGenerator } from '../../../services';
 import { EuiFormControlLayoutIconsProps } from '../../form/form_control_layout/form_control_layout_icons';
@@ -49,6 +52,8 @@ export interface EuiComboBoxInputProps<T> extends CommonProps {
   toggleButtonRef?: RefCallback<HTMLButtonElement | HTMLSpanElement>;
   updatePosition: UpdatePositionHandler;
   value?: string;
+  prepend?: EuiFormControlLayoutProps['prepend'];
+  append?: EuiFormControlLayoutProps['append'];
 }
 
 interface EuiComboBoxInputState {
@@ -133,6 +138,8 @@ export class EuiComboBoxInput<T> extends Component<
       singleSelection: singleSelectionProp,
       toggleButtonRef,
       value,
+      prepend,
+      append,
     } = this.props;
 
     const singleSelection = Boolean(singleSelectionProp);
@@ -245,7 +252,9 @@ export class EuiComboBoxInput<T> extends Component<
         icon={icon}
         {...clickProps}
         compressed={compressed}
-        fullWidth={fullWidth}>
+        fullWidth={fullWidth}
+        prepend={prepend}
+        append={append}>
         <div
           className={wrapClasses}
           data-test-subj="comboBoxInput"