Adding prepend and append to EuiSuperSelect

CHANGELOG.md

@@ -12,6 +12,7 @@
 - Upgraded `react-beautiful-dnd` to v13 ([#3064](https://github.com/elastic/eui/pull/3064))
 - Fixed `EuiPagination` vertical alignment of the text when used as `compressed` ([#3152](https://github.com/elastic/eui/pull/3152))
 - Added `showTooltip` prop for `EuiSuperUpdateButton` to show tooltip and showing only once popovers are closed ([#3127](https://github.com/elastic/eui/pull/3127))
+- Added `prepend` and `append` ability to `EuiSuperSelect` ([#3167](https://github.com/elastic/eui/pull/3167)) 
 
 **Bug Fixes**
 

src-docs/src/views/super_select/super_select.js

@@ -42,7 +42,7 @@ export default class extends Component {
   render() {
     return (
       /* DisplayToggles wrapper for Docs only */
-      <DisplayToggles>
+      <DisplayToggles canPrepend={true} canAppend={true}>
         <EuiSuperSelect
           options={this.options}
           valueOfSelected={this.state.value}

src/components/form/super_select/__snapshots__/super_select.test.tsx.snap

@@ -296,6 +296,68 @@ exports[`EuiSuperSelect props fullWidth is rendered 1`] = `
 </div>
 `;
 
+exports[`EuiSuperSelect props is rendered with a prepend and append 1`] = `
+<div
+  class="euiPopover euiPopover--anchorDownCenter euiPopover--displayBlock euiSuperSelect"
+>
+  <div
+    class="euiPopover__anchor"
+  >
+    <input
+      type="hidden"
+      value=""
+    />
+    <div
+      class="euiFormControlLayout euiFormControlLayout--group euiSuperSelectControlWrapper--group"
+    >
+      <label
+        class="euiFormLabel euiFormControlLayout__prepend"
+      >
+        prepend
+      </label>
+      <div
+        class="euiFormControlLayout__childrenWrapper"
+      >
+        <span
+          class="euiScreenReaderOnly"
+          id="generated-id"
+        >
+          Select an option: , is selected
+        </span>
+        <button
+          aria-haspopup="true"
+          aria-label="aria-label"
+          aria-labelledby="undefined generated-id"
+          aria-selected="true"
+          class="euiSuperSelectControl euiSuperSelectControl--inGroup testClass1 testClass2"
+          data-test-subj="test subject string"
+          role="option"
+          type="button"
+        />
+        <div
+          class="euiFormControlLayoutIcons euiFormControlLayoutIcons--right"
+        >
+          <span
+            class="euiFormControlLayoutCustomIcon"
+          >
+            <div
+              aria-hidden="true"
+              class="euiFormControlLayoutCustomIcon__icon"
+              data-euiicon-type="arrowDown"
+            />
+          </span>
+        </div>
+      </div>
+      <label
+        class="euiFormLabel euiFormControlLayout__append"
+      >
+        append
+      </label>
+    </div>
+  </div>
+</div>
+`;
+
 exports[`EuiSuperSelect props more props are propogated to each option 1`] = `
 <div
   class="euiPopover euiPopover--anchorDownCenter euiPopover--displayBlock euiSuperSelect"
@@ -550,6 +612,7 @@ exports[`EuiSuperSelect props more props are propogated to each option 2`] = `
               value="1"
             />
             <EuiFormControlLayout
+              className=""
               compressed={false}
               fullWidth={false}
               icon={

src/components/form/super_select/_super_select_control.scss

@@ -34,3 +34,7 @@
     @include euiFormControlFocusStyle;
   }
 }
+
+.euiSuperSelectControlWrapper--group > div {
+  overflow: hidden;
+}

src/components/form/super_select/super_select.test.tsx

@@ -60,6 +60,20 @@ describe('EuiSuperSelect', () => {
       expect(component).toMatchSnapshot();
     });
 
+    test('is rendered with a prepend and append', () => {
+      const component = render(
+        <EuiSuperSelect
+          {...requiredProps}
+          options={options}
+          onChange={() => {}}
+          prepend="prepend"
+          append="append"
+        />
+      );
+
+      expect(component).toMatchSnapshot();
+    });
+
     test('select component is rendered', () => {
       const component = render(
         <EuiSuperSelect

src/components/form/super_select/super_select_control.tsx

@@ -37,6 +37,18 @@ export interface EuiSuperSelectControlProps<T>
   value?: T;
 
   options?: Array<EuiSuperSelectOption<T>>;
+
+  /**
+   * Creates an input group with element(s) coming before input.
+   * `string` | `ReactElement` or an array of these
+   */
+  prepend?: EuiFormControlLayoutProps['prepend'];
+
+  /**
+   * Creates an input group with element(s) coming after input.
+   * `string` | `ReactElement` or an array of these
+   */
+  append?: EuiFormControlLayoutProps['append'];
 }
 
 export const EuiSuperSelectControl: <T extends string>(
@@ -52,19 +64,26 @@ export const EuiSuperSelectControl: <T extends string>(
   defaultValue,
   compressed = false,
   value,
+  prepend,
+  append,
   ...rest
 }) => {
   const classes = classNames(
     'euiSuperSelectControl',
     {
       'euiSuperSelectControl--fullWidth': fullWidth,
       'euiSuperSelectControl--compressed': compressed,
+      'euiSuperSelectControl--inGroup': prepend || append,
       'euiSuperSelectControl-isLoading': isLoading,
       'euiSuperSelectControl-isInvalid': isInvalid,
     },
     className
   );
 
+  const wrapperClasses = classNames({
+    'euiSuperSelectControlWrapper--group': prepend || append,
+  });
+
   // React HTML input can not have both value and defaultValue properties.
   // https://reactjs.org/docs/uncontrolled-components.html#default-values
   let selectDefaultValue;
@@ -98,10 +117,13 @@ export const EuiSuperSelectControl: <T extends string>(
       />
 
       <EuiFormControlLayout
+        className={wrapperClasses}
         icon={icon}
         fullWidth={fullWidth}
         isLoading={isLoading}
-        compressed={compressed}>
+        compressed={compressed}
+        prepend={prepend}
+        append={append}>
         {/*
           This is read when the user tabs in. The comma is important,
           otherwise the screen reader often combines the text.
@@ -115,7 +137,6 @@ export const EuiSuperSelectControl: <T extends string>(
             />
           </span>
         </EuiScreenReaderOnly>
-
         <button
           role="option"
           type="button"