Added prepend and append to EuiComboBox

CHANGELOG.md

@@ -1,11 +1,14 @@
 ## [`master`](https://github.com/elastic/eui/tree/master)
 
+- Added `prepend` and `append` ability to `EuiComboBox` ([#3003](https://github.com/elastic/eui/pull/3003))
+
 **Bug Fixes**
 
 - Fixed `EuiFieldNumber` so values of type `number` are now allowed ([#3020](https://github.com/elastic/eui/pull/3020))
 
 ## [`21.0.0`](https://github.com/elastic/eui/tree/v21.0.0)
 
+
 - 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-docs/src/views/combo_box/combo_box_example.js

@@ -261,12 +261,22 @@ export const ComboBoxExample = {
         },
       ],
       text: (
-        <p>
-          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>
+        <Fragment>
+          <p>
+            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>
+          <p>
+            <strong>Note:</strong> <EuiCode>append</EuiCode> and{' '}
+            <EuiCode>prepend</EuiCode> props only works if
+            <EuiCode>singleSelection</EuiCode> prop is set to{' '}
+            <EuiCode>true</EuiCode> to avoid multilines that makes combobox
+            height greater than that of <EuiCode>append</EuiCode> and{' '}
+            <EuiCode>prepend</EuiCode>
+          </p>
+        </Fragment>
       ),
       props: { EuiComboBox },
       demo: <SingleSelection />,

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

@@ -1,6 +1,7 @@
 import React, { Component } from 'react';
 
 import { EuiComboBox } from '../../../../src/components';
+import { DisplayToggles } from '../form_controls/display_toggles';
 
 export default class extends Component {
   constructor(props) {
@@ -56,14 +57,21 @@ export default class extends Component {
   render() {
     const { selectedOptions } = this.state;
     return (
-      <EuiComboBox
-        placeholder="Select a single option"
-        singleSelection={{ asPlainText: true }}
-        options={this.options}
-        selectedOptions={selectedOptions}
-        onChange={this.onChange}
-        isClearable={false}
-      />
+      <DisplayToggles
+        canDisabled={false}
+        canReadOnly={false}
+        canLoading={false}
+        canPrepend
+        canAppend>
+        <EuiComboBox
+          placeholder="Select a single option"
+          singleSelection={{ asPlainText: true }}
+          options={this.options}
+          selectedOptions={selectedOptions}
+          onChange={this.onChange}
+          isClearable={false}
+        />
+      </DisplayToggles>
     );
   }
 }

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,16 @@ interface _EuiComboBoxProps<T>
   placeholder?: string;
   rowHeight?: number;
   singleSelection: boolean | EuiComboBoxSingleSelectionShape;
+  /**
+   * Creates an input group with element(s) coming before input. It only shows when the `singleSelection` is set to `true`.
+   * `string` | `ReactElement` or an array of these
+   */
+  prepend?: EuiFormControlLayoutProps['prepend'];
+  /**
+   * Creates an input group with element(s) coming after input. It only shows when the `singleSelection` is set to `true`.
+   * `string` | `ReactElement` or an array of these
+   */
+  append?: EuiFormControlLayoutProps['append'];
 }
 
 /**
@@ -121,6 +132,8 @@ export class EuiComboBox<T> extends Component<
     options: [],
     selectedOptions: [],
     singleSelection: false,
+    prepend: null,
+    append: null,
   };
 
   state: EuiComboBoxState<T> = {
@@ -790,6 +803,8 @@ export class EuiComboBox<T> extends Component<
       rowHeight,
       selectedOptions,
       singleSelection,
+      prepend,
+      append,
       ...rest
     } = this.props;
     const {
@@ -912,8 +927,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);
@@ -238,14 +245,17 @@ export class EuiComboBoxInput<T> extends Component<
       'euiComboBox__inputWrap--fullWidth': fullWidth,
       'euiComboBox__inputWrap--noWrap': singleSelection,
       'euiComboBox__inputWrap-isClearable': onClear,
+      'euiComboBox__inputWrap--inGroup': prepend || append,
     });
 
     return (
       <EuiFormControlLayout
         icon={icon}
         {...clickProps}
         compressed={compressed}
-        fullWidth={fullWidth}>
+        fullWidth={fullWidth}
+        prepend={prepend}
+        append={append}>
         <div
           className={wrapClasses}
           data-test-subj="comboBoxInput"