From 2a4c254c6a176f6bb1d2ff034be72516d22cc14b Mon Sep 17 00:00:00 2001
From: cchaos <caroline.horn@elastic.co>
Date: Tue, 12 Jun 2018 14:55:40 -0400
Subject: [PATCH] Moved mapping option to inside super select

---
 .../src/views/super_select/super_select.js    |  74 +----
 .../__snapshots__/super_select.test.js.snap   | 247 +++++++++++---
 .../super_select_control.test.js.snap         | 309 ++++++++++++++++++
 .../form/super_select/_super_select.scss      |  15 +-
 .../form/super_select/super_select.js         |  97 ++++--
 .../form/super_select/super_select.test.js    |  50 ++-
 .../form/super_select/super_select_control.js |   4 +-
 .../super_select/super_select_control.test.js |  73 +++++
 8 files changed, 739 insertions(+), 130 deletions(-)

diff --git a/src-docs/src/views/super_select/super_select.js b/src-docs/src/views/super_select/super_select.js
index c7a52bd15ff..735aa2bb837 100644
--- a/src-docs/src/views/super_select/super_select.js
+++ b/src-docs/src/views/super_select/super_select.js
@@ -8,8 +8,6 @@ import {
   EuiSpacer,
   EuiText,
   EuiIcon,
-  EuiContextMenuItem,
-  EuiHorizontalRule,
 } from '../../../../src/components';
 
 export default class extends Component {
@@ -19,8 +17,8 @@ export default class extends Component {
     this.options = [
       {
         value: 'option_one',
-        text: 'Option one',
-        display: (
+        inputDisplay: 'Option one',
+        dropdownDisplay: (
           <Fragment>
             <strong>Option one</strong>
             <EuiSpacer size="xs" />
@@ -32,12 +30,12 @@ export default class extends Component {
       },
       {
         value: 'option_two',
-        text: (
+        inputDisplay: (
           <span>
             <EuiIcon type="alert" /> Option two
           </span>
         ),
-        display: (
+        dropdownDisplay: (
           <Fragment>
             <strong>Option two</strong>
             <EuiSpacer size="xs" />
@@ -49,8 +47,8 @@ export default class extends Component {
       },
       {
         value: 'option_three',
-        text: 'Option three has a super long text to see if it will truncate or what',
-        display: (
+        inputDisplay: 'Option three has a super long text to see if it will truncate or what',
+        dropdownDisplay: (
           <Fragment>
             <strong>Option three</strong>
             <EuiSpacer size="xs" />
@@ -64,101 +62,65 @@ export default class extends Component {
 
     this.state = {
       value: this.options[1].value,
-      isPopoverOpen: false,
     };
   }
 
-  onChange = e => {
-    this.setState({
-      value: e.target.value,
-    });
-  };
-
-  itemClicked = (value) => {
+  onChange = (value) => {
     this.setState({
       value: value,
-      isPopoverOpen: false,
     });
   };
 
   render() {
-    const items = this.options.map((option, index) => {
-      return (
-        <Fragment>
-          <EuiContextMenuItem
-            key={index}
-            icon={this.state.value === option.value ? "check" : "empty"}
-            onClick={() => this.itemClicked(option.value)}
-            layoutAlign="top"
-          >
-            {option.display}
-          </EuiContextMenuItem>
-          {index < this.options.length - 1 &&
-            <EuiHorizontalRule margin="none" />
-          }
-        </Fragment>
-      );
-    });
-
     return (
       <Fragment>
         <EuiSuperSelect
           options={this.options}
-          value={this.state.value}
+          valueOfSelected={this.state.value}
           onChange={this.onChange}
-          isOpen={this.state.isPopoverOpen}
+          hasDividers
           aria-label="Use aria labels when no actual label is in use"
-        >
-          {items}
-        </EuiSuperSelect>
+        />
 
         <EuiSpacer size="m" />
 
         <EuiSuperSelect
           options={this.options}
-          value={this.state.value}
+          valueOfSelected={this.state.value}
           onChange={this.onChange}
           disabled
           aria-label="Use aria labels when no actual label is in use"
-        >
-          {items}
-        </EuiSuperSelect>
+        />
 
         <EuiSpacer size="m" />
 
         <EuiSuperSelect
           options={this.options}
-          value={this.state.value}
+          valueOfSelected={this.state.value}
           onChange={this.onChange}
           isLoading
           aria-label="Use aria labels when no actual label is in use"
-        >
-          {items}
-        </EuiSuperSelect>
+        />
 
         <EuiSpacer size="m" />
 
         <EuiSuperSelect
           options={this.options}
-          value={this.state.value}
+          valueOfSelected={this.state.value}
           onChange={this.onChange}
           isLoading
           disabled
           aria-label="Use aria labels when no actual label is in use"
-        >
-          {items}
-        </EuiSuperSelect>
+        />
 
         <EuiSpacer size="m" />
 
         <EuiSuperSelect
           options={this.options}
-          value={this.state.value}
+          valueOfSelected={this.state.value}
           onChange={this.onChange}
           compressed
-        >
-          {items}
-        </EuiSuperSelect>
+        />
       </Fragment>
     );
   }
diff --git a/src/components/form/super_select/__snapshots__/super_select.test.js.snap b/src/components/form/super_select/__snapshots__/super_select.test.js.snap
index f404f4d6e1c..780c401467b 100644
--- a/src/components/form/super_select/__snapshots__/super_select.test.js.snap
+++ b/src/components/form/super_select/__snapshots__/super_select.test.js.snap
@@ -2,58 +2,223 @@
 
 exports[`EuiSuperSelect is rendered 1`] = `
 <div
-  class="euiSuperSelect testClass1 testClass2"
+  class="euiPopover euiPopover--anchorDownCenter euiSuperSelect"
 >
+  <select
+    aria-hidden="true"
+    aria-label="aria-label"
+    class="euiSuperSelectControl__hiddenField"
+    data-test-subj="test subject string"
+  />
   <div
-    class="euiPopover euiPopover--anchorDownCenter"
-    id="singlePanel"
-    style="width:100%;max-width:400px"
+    class="euiFormControlLayout"
   >
-    <select
-      aria-hidden="true"
+    <button
       aria-label="aria-label"
-      class="euiSuperSelectControl__hiddenField"
+      class="euiSuperSelectControl testClass1 testClass2"
       data-test-subj="test subject string"
+      role="option"
+      type="button"
     />
     <div
-      class="euiFormControlLayout"
+      class="euiFormControlLayoutIcons euiFormControlLayoutIcons--right"
     >
-      <button
-        aria-label="aria-label"
-        class="euiSuperSelectControl"
-        data-test-subj="test subject string"
-        role="option"
-        type="button"
-      />
-      <div
-        class="euiFormControlLayoutIcons euiFormControlLayoutIcons--right"
+      <span
+        class="euiFormControlLayoutCustomIcon"
       >
-        <span
-          class="euiFormControlLayoutCustomIcon"
+        <svg
+          aria-hidden="true"
+          class="euiIcon euiIcon--medium euiFormControlLayoutCustomIcon__icon"
+          focusable="false"
+          height="16"
+          viewBox="0 0 16 16"
+          width="16"
+          xlink="http://www.w3.org/1999/xlink"
+          xmlns="http://www.w3.org/2000/svg"
         >
-          <svg
-            aria-hidden="true"
-            class="euiIcon euiIcon--medium euiFormControlLayoutCustomIcon__icon"
-            focusable="false"
-            height="16"
-            viewBox="0 0 16 16"
-            width="16"
-            xlink="http://www.w3.org/1999/xlink"
-            xmlns="http://www.w3.org/2000/svg"
-          >
-            <defs>
-              <path
-                d="M13.069 5.157L8.384 9.768a.546.546 0 0 1-.768 0L2.93 5.158a.552.552 0 0 0-.771 0 .53.53 0 0 0 0 .759l4.684 4.61c.641.631 1.672.63 2.312 0l4.684-4.61a.53.53 0 0 0 0-.76.552.552 0 0 0-.771 0z"
-                id="arrow_down-a"
-              />
-            </defs>
-            <use
-              fill-rule="nonzero"
-              href="#arrow_down-a"
+          <defs>
+            <path
+              d="M13.069 5.157L8.384 9.768a.546.546 0 0 1-.768 0L2.93 5.158a.552.552 0 0 0-.771 0 .53.53 0 0 0 0 .759l4.684 4.61c.641.631 1.672.63 2.312 0l4.684-4.61a.53.53 0 0 0 0-.76.552.552 0 0 0-.771 0z"
+              id="arrow_down-a"
             />
-          </svg>
-        </span>
-      </div>
+          </defs>
+          <use
+            fill-rule="nonzero"
+            href="#arrow_down-a"
+          />
+        </svg>
+      </span>
+    </div>
+  </div>
+</div>
+`;
+
+exports[`EuiSuperSelect props custom display is propagated to dropdown 1`] = `
+<div
+  class="euiPopover euiPopover--anchorDownCenter euiSuperSelect"
+>
+  <select
+    aria-hidden="true"
+    class="euiSuperSelectControl__hiddenField"
+  >
+    <option
+      value="1"
+    />
+    <option
+      value="2"
+    />
+  </select>
+  <div
+    class="euiFormControlLayout"
+  >
+    <button
+      class="euiSuperSelectControl"
+      role="option"
+      type="button"
+    />
+    <div
+      class="euiFormControlLayoutIcons euiFormControlLayoutIcons--right"
+    >
+      <span
+        class="euiFormControlLayoutCustomIcon"
+      >
+        <svg
+          aria-hidden="true"
+          class="euiIcon euiIcon--medium euiFormControlLayoutCustomIcon__icon"
+          focusable="false"
+          height="16"
+          viewBox="0 0 16 16"
+          width="16"
+          xlink="http://www.w3.org/1999/xlink"
+          xmlns="http://www.w3.org/2000/svg"
+        >
+          <defs>
+            <path
+              d="M13.069 5.157L8.384 9.768a.546.546 0 0 1-.768 0L2.93 5.158a.552.552 0 0 0-.771 0 .53.53 0 0 0 0 .759l4.684 4.61c.641.631 1.672.63 2.312 0l4.684-4.61a.53.53 0 0 0 0-.76.552.552 0 0 0-.771 0z"
+              id="arrow_down-a"
+            />
+          </defs>
+          <use
+            fill-rule="nonzero"
+            href="#arrow_down-a"
+          />
+        </svg>
+      </span>
+    </div>
+  </div>
+</div>
+`;
+
+exports[`EuiSuperSelect props options are rendered 1`] = `
+<div
+  class="euiPopover euiPopover--anchorDownCenter euiSuperSelect"
+>
+  <select
+    aria-hidden="true"
+    class="euiSuperSelectControl__hiddenField"
+  >
+    <option
+      value="1"
+    />
+    <option
+      value="2"
+    />
+  </select>
+  <div
+    class="euiFormControlLayout"
+  >
+    <button
+      class="euiSuperSelectControl"
+      role="option"
+      type="button"
+    />
+    <div
+      class="euiFormControlLayoutIcons euiFormControlLayoutIcons--right"
+    >
+      <span
+        class="euiFormControlLayoutCustomIcon"
+      >
+        <svg
+          aria-hidden="true"
+          class="euiIcon euiIcon--medium euiFormControlLayoutCustomIcon__icon"
+          focusable="false"
+          height="16"
+          viewBox="0 0 16 16"
+          width="16"
+          xlink="http://www.w3.org/1999/xlink"
+          xmlns="http://www.w3.org/2000/svg"
+        >
+          <defs>
+            <path
+              d="M13.069 5.157L8.384 9.768a.546.546 0 0 1-.768 0L2.93 5.158a.552.552 0 0 0-.771 0 .53.53 0 0 0 0 .759l4.684 4.61c.641.631 1.672.63 2.312 0l4.684-4.61a.53.53 0 0 0 0-.76.552.552 0 0 0-.771 0z"
+              id="arrow_down-a"
+            />
+          </defs>
+          <use
+            fill-rule="nonzero"
+            href="#arrow_down-a"
+          />
+        </svg>
+      </span>
+    </div>
+  </div>
+</div>
+`;
+
+exports[`EuiSuperSelect props valueSelected is rendered 1`] = `
+<div
+  class="euiPopover euiPopover--anchorDownCenter euiSuperSelect"
+>
+  <select
+    aria-hidden="true"
+    class="euiSuperSelectControl__hiddenField"
+  >
+    <option
+      selected=""
+      value="1"
+    />
+    <option
+      value="2"
+    />
+  </select>
+  <div
+    class="euiFormControlLayout"
+  >
+    <button
+      class="euiSuperSelectControl"
+      role="option"
+      type="button"
+    >
+      Option #1
+    </button>
+    <div
+      class="euiFormControlLayoutIcons euiFormControlLayoutIcons--right"
+    >
+      <span
+        class="euiFormControlLayoutCustomIcon"
+      >
+        <svg
+          aria-hidden="true"
+          class="euiIcon euiIcon--medium euiFormControlLayoutCustomIcon__icon"
+          focusable="false"
+          height="16"
+          viewBox="0 0 16 16"
+          width="16"
+          xlink="http://www.w3.org/1999/xlink"
+          xmlns="http://www.w3.org/2000/svg"
+        >
+          <defs>
+            <path
+              d="M13.069 5.157L8.384 9.768a.546.546 0 0 1-.768 0L2.93 5.158a.552.552 0 0 0-.771 0 .53.53 0 0 0 0 .759l4.684 4.61c.641.631 1.672.63 2.312 0l4.684-4.61a.53.53 0 0 0 0-.76.552.552 0 0 0-.771 0z"
+              id="arrow_down-a"
+            />
+          </defs>
+          <use
+            fill-rule="nonzero"
+            href="#arrow_down-a"
+          />
+        </svg>
+      </span>
     </div>
   </div>
 </div>
diff --git a/src/components/form/super_select/__snapshots__/super_select_control.test.js.snap b/src/components/form/super_select/__snapshots__/super_select_control.test.js.snap
index d6ea56fdba3..94318ced541 100644
--- a/src/components/form/super_select/__snapshots__/super_select_control.test.js.snap
+++ b/src/components/form/super_select/__snapshots__/super_select_control.test.js.snap
@@ -50,3 +50,312 @@ Array [
   </div>,
 ]
 `;
+
+exports[`EuiSuperSelectControl props compressed is rendered 1`] = `
+Array [
+  <select
+    aria-hidden="true"
+    class="euiSuperSelectControl__hiddenField"
+  />,
+  <div
+    class="euiFormControlLayout euiFormControlLayout--compressed"
+  >
+    <button
+      class="euiSuperSelectControl euiSuperSelectControl--compressed"
+      role="option"
+      type="button"
+    />
+    <div
+      class="euiFormControlLayoutIcons euiFormControlLayoutIcons--right"
+    >
+      <span
+        class="euiFormControlLayoutCustomIcon"
+      >
+        <svg
+          aria-hidden="true"
+          class="euiIcon euiIcon--medium euiFormControlLayoutCustomIcon__icon"
+          focusable="false"
+          height="16"
+          viewBox="0 0 16 16"
+          width="16"
+          xlink="http://www.w3.org/1999/xlink"
+          xmlns="http://www.w3.org/2000/svg"
+        >
+          <defs>
+            <path
+              d="M13.069 5.157L8.384 9.768a.546.546 0 0 1-.768 0L2.93 5.158a.552.552 0 0 0-.771 0 .53.53 0 0 0 0 .759l4.684 4.61c.641.631 1.672.63 2.312 0l4.684-4.61a.53.53 0 0 0 0-.76.552.552 0 0 0-.771 0z"
+              id="arrow_down-a"
+            />
+          </defs>
+          <use
+            fill-rule="nonzero"
+            href="#arrow_down-a"
+          />
+        </svg>
+      </span>
+    </div>
+  </div>,
+]
+`;
+
+exports[`EuiSuperSelectControl props disabled options are rendered 1`] = `
+Array [
+  <select
+    aria-hidden="true"
+    class="euiSuperSelectControl__hiddenField"
+  >
+    <option
+      value="1"
+    />
+    <option
+      value="2"
+    />
+  </select>,
+  <div
+    class="euiFormControlLayout"
+  >
+    <button
+      class="euiSuperSelectControl"
+      role="option"
+      type="button"
+    />
+    <div
+      class="euiFormControlLayoutIcons euiFormControlLayoutIcons--right"
+    >
+      <span
+        class="euiFormControlLayoutCustomIcon"
+      >
+        <svg
+          aria-hidden="true"
+          class="euiIcon euiIcon--medium euiFormControlLayoutCustomIcon__icon"
+          focusable="false"
+          height="16"
+          viewBox="0 0 16 16"
+          width="16"
+          xlink="http://www.w3.org/1999/xlink"
+          xmlns="http://www.w3.org/2000/svg"
+        >
+          <defs>
+            <path
+              d="M13.069 5.157L8.384 9.768a.546.546 0 0 1-.768 0L2.93 5.158a.552.552 0 0 0-.771 0 .53.53 0 0 0 0 .759l4.684 4.61c.641.631 1.672.63 2.312 0l4.684-4.61a.53.53 0 0 0 0-.76.552.552 0 0 0-.771 0z"
+              id="arrow_down-a"
+            />
+          </defs>
+          <use
+            fill-rule="nonzero"
+            href="#arrow_down-a"
+          />
+        </svg>
+      </span>
+    </div>
+  </div>,
+]
+`;
+
+exports[`EuiSuperSelectControl props fullWidth is rendered 1`] = `
+Array [
+  <select
+    aria-hidden="true"
+    class="euiSuperSelectControl__hiddenField"
+  />,
+  <div
+    class="euiFormControlLayout euiFormControlLayout--fullWidth"
+  >
+    <button
+      class="euiSuperSelectControl euiSuperSelectControl--fullWidth"
+      role="option"
+      type="button"
+    />
+    <div
+      class="euiFormControlLayoutIcons euiFormControlLayoutIcons--right"
+    >
+      <span
+        class="euiFormControlLayoutCustomIcon"
+      >
+        <svg
+          aria-hidden="true"
+          class="euiIcon euiIcon--medium euiFormControlLayoutCustomIcon__icon"
+          focusable="false"
+          height="16"
+          viewBox="0 0 16 16"
+          width="16"
+          xlink="http://www.w3.org/1999/xlink"
+          xmlns="http://www.w3.org/2000/svg"
+        >
+          <defs>
+            <path
+              d="M13.069 5.157L8.384 9.768a.546.546 0 0 1-.768 0L2.93 5.158a.552.552 0 0 0-.771 0 .53.53 0 0 0 0 .759l4.684 4.61c.641.631 1.672.63 2.312 0l4.684-4.61a.53.53 0 0 0 0-.76.552.552 0 0 0-.771 0z"
+              id="arrow_down-a"
+            />
+          </defs>
+          <use
+            fill-rule="nonzero"
+            href="#arrow_down-a"
+          />
+        </svg>
+      </span>
+    </div>
+  </div>,
+]
+`;
+
+exports[`EuiSuperSelectControl props isLoading is rendered 1`] = `
+Array [
+  <select
+    aria-hidden="true"
+    class="euiSuperSelectControl__hiddenField"
+  />,
+  <div
+    class="euiFormControlLayout"
+  >
+    <button
+      class="euiSuperSelectControl euiSuperSelectControl-isLoading"
+      role="option"
+      type="button"
+    />
+    <div
+      class="euiFormControlLayoutIcons euiFormControlLayoutIcons--right"
+    >
+      <div
+        class="euiLoadingSpinner euiLoadingSpinner--medium"
+      />
+      <span
+        class="euiFormControlLayoutCustomIcon"
+      >
+        <svg
+          aria-hidden="true"
+          class="euiIcon euiIcon--medium euiFormControlLayoutCustomIcon__icon"
+          focusable="false"
+          height="16"
+          viewBox="0 0 16 16"
+          width="16"
+          xlink="http://www.w3.org/1999/xlink"
+          xmlns="http://www.w3.org/2000/svg"
+        >
+          <defs>
+            <path
+              d="M13.069 5.157L8.384 9.768a.546.546 0 0 1-.768 0L2.93 5.158a.552.552 0 0 0-.771 0 .53.53 0 0 0 0 .759l4.684 4.61c.641.631 1.672.63 2.312 0l4.684-4.61a.53.53 0 0 0 0-.76.552.552 0 0 0-.771 0z"
+              id="arrow_down-a"
+            />
+          </defs>
+          <use
+            fill-rule="nonzero"
+            href="#arrow_down-a"
+          />
+        </svg>
+      </span>
+    </div>
+  </div>,
+]
+`;
+
+exports[`EuiSuperSelectControl props options are rendered 1`] = `
+Array [
+  <select
+    aria-hidden="true"
+    class="euiSuperSelectControl__hiddenField"
+  >
+    <option
+      value="1"
+    />
+    <option
+      value="2"
+    />
+  </select>,
+  <div
+    class="euiFormControlLayout"
+  >
+    <button
+      class="euiSuperSelectControl"
+      role="option"
+      type="button"
+    />
+    <div
+      class="euiFormControlLayoutIcons euiFormControlLayoutIcons--right"
+    >
+      <span
+        class="euiFormControlLayoutCustomIcon"
+      >
+        <svg
+          aria-hidden="true"
+          class="euiIcon euiIcon--medium euiFormControlLayoutCustomIcon__icon"
+          focusable="false"
+          height="16"
+          viewBox="0 0 16 16"
+          width="16"
+          xlink="http://www.w3.org/1999/xlink"
+          xmlns="http://www.w3.org/2000/svg"
+        >
+          <defs>
+            <path
+              d="M13.069 5.157L8.384 9.768a.546.546 0 0 1-.768 0L2.93 5.158a.552.552 0 0 0-.771 0 .53.53 0 0 0 0 .759l4.684 4.61c.641.631 1.672.63 2.312 0l4.684-4.61a.53.53 0 0 0 0-.76.552.552 0 0 0-.771 0z"
+              id="arrow_down-a"
+            />
+          </defs>
+          <use
+            fill-rule="nonzero"
+            href="#arrow_down-a"
+          />
+        </svg>
+      </span>
+    </div>
+  </div>,
+]
+`;
+
+exports[`EuiSuperSelectControl props value option is rendered 1`] = `
+Array [
+  <select
+    aria-hidden="true"
+    class="euiSuperSelectControl__hiddenField"
+  >
+    <option
+      selected=""
+      value="1"
+    />
+    <option
+      value="2"
+    />
+  </select>,
+  <div
+    class="euiFormControlLayout"
+  >
+    <button
+      class="euiSuperSelectControl"
+      role="option"
+      type="button"
+    >
+      Option #1
+    </button>
+    <div
+      class="euiFormControlLayoutIcons euiFormControlLayoutIcons--right"
+    >
+      <span
+        class="euiFormControlLayoutCustomIcon"
+      >
+        <svg
+          aria-hidden="true"
+          class="euiIcon euiIcon--medium euiFormControlLayoutCustomIcon__icon"
+          focusable="false"
+          height="16"
+          viewBox="0 0 16 16"
+          width="16"
+          xlink="http://www.w3.org/1999/xlink"
+          xmlns="http://www.w3.org/2000/svg"
+        >
+          <defs>
+            <path
+              d="M13.069 5.157L8.384 9.768a.546.546 0 0 1-.768 0L2.93 5.158a.552.552 0 0 0-.771 0 .53.53 0 0 0 0 .759l4.684 4.61c.641.631 1.672.63 2.312 0l4.684-4.61a.53.53 0 0 0 0-.76.552.552 0 0 0-.771 0z"
+              id="arrow_down-a"
+            />
+          </defs>
+          <use
+            fill-rule="nonzero"
+            href="#arrow_down-a"
+          />
+        </svg>
+      </span>
+    </div>
+  </div>,
+]
+`;
diff --git a/src/components/form/super_select/_super_select.scss b/src/components/form/super_select/_super_select.scss
index f6ec500598c..a7ed4b44e16 100644
--- a/src/components/form/super_select/_super_select.scss
+++ b/src/components/form/super_select/_super_select.scss
@@ -4,7 +4,12 @@
  * 3. Specificity to override default popover
  */
 
- .euiSuperSelect .euiSuperSelect__popoverPanel { /* 3 */
+.euiSuperSelect.euiPopover { /* 3 */
+  @include euiFormControlSize; /* 1 */
+  height: auto;
+}
+
+.euiSuperSelect.euiPopover .euiSuperSelect__popoverPanel { /* 3 */
   width: calc(100% + 2px); /* 1 */
 
   &::before,
@@ -13,12 +18,16 @@
   }
 }
 
-.euiSuperSelect .euiPopover--anchorDownCenter .euiSuperSelect__popoverPanel { /* 3 */
+.euiSuperSelect.euiPopover--anchorDownCenter .euiSuperSelect__popoverPanel { /* 3 */
   border-top-color: transparentize($euiBorderColor, .2);
   border-top-right-radius: 0; /* 2 */
   border-top-left-radius: 0; /* 2 */
 }
 
-.euiSuperSelect .euiPopover--anchorDownCenter.euiPopover-isOpen .euiSuperSelect__popoverPanel { /* 3 */
+.euiSuperSelect.euiPopover--anchorDownCenter.euiPopover-isOpen .euiSuperSelect__popoverPanel { /* 3 */
   transform: translateX(-50%) translateY(0) translateZ(0); /* 2 */
 }
+
+.euiSuperSelect__item--hasDividers:not(:last-of-type) {
+  border-bottom: $euiBorderThin;
+}
diff --git a/src/components/form/super_select/super_select.js b/src/components/form/super_select/super_select.js
index a37037765b8..1cb254d9520 100644
--- a/src/components/form/super_select/super_select.js
+++ b/src/components/form/super_select/super_select.js
@@ -6,6 +6,7 @@ import classNames from 'classnames';
 
 import { EuiSuperSelectControl } from './super_select_control';
 import { EuiPopover } from '../../popover';
+import { EuiContextMenuItem } from '../../context_menu';
 
 export class EuiSuperSelect extends Component {
   constructor(props) {
@@ -28,40 +29,44 @@ export class EuiSuperSelect extends Component {
     });
   };
 
-  itemClicked = () => {
+  itemClicked = (value) => {
     this.setState({
       isPopoverOpen: false,
     });
-
-    this.props.onChange();
+    this.props.onChange(value);
   };
 
   render() {
     const {
-      children,
       className,
       options,
-      value,
+      valueOfSelected,
       onChange,
       isOpen,
+      hasDividers,
+      itemClassName,
       ...rest
     } = this.props;
 
-    const classes = classNames(
-      'euiSuperSelect',
-      className
-    );
-
     const buttonClasses = classNames(
       {
         'euiSuperSelect--isOpen__button': this.state.isPopoverOpen,
       },
+      className,
+    );
+
+    const itemClasses = classNames(
+      'euiSuperSelect__item',
+      {
+        'euiSuperSelect__item--hasDividers': hasDividers,
+      },
+      itemClassName,
     );
 
     const button = (
       <EuiSuperSelectControl
         options={options}
-        value={value}
+        value={valueOfSelected}
         onChange={onChange}
         onClick={this.onButtonClick}
         className={buttonClasses}
@@ -69,32 +74,70 @@ export class EuiSuperSelect extends Component {
       />
     );
 
-    return (
-      <div className={classes}>
-        <EuiPopover
-          style={{ width: '100%', maxWidth: '400px' }}
-          panelClassName="euiSuperSelect__popoverPanel"
-          id="singlePanel"
-          button={button}
-          isOpen={isOpen || this.state.isPopoverOpen}
-          closePopover={this.closePopover}
-          panelPaddingSize="none"
-          anchorPosition="downCenter"
+    const items = options.map((option, index) => {
+      return (
+        <EuiContextMenuItem
+          key={index}
+          className={itemClasses}
+          icon={valueOfSelected === option.value ? "check" : "empty"}
+          onClick={() => this.itemClicked(option.value)}
+          layoutAlign="top"
         >
-          {children}
-        </EuiPopover>
-      </div>
+          {option.dropdownDisplay || option.inputDisplay}
+        </EuiContextMenuItem>
+      );
+    });
+
+    return (
+      <EuiPopover
+        className="euiSuperSelect"
+        panelClassName="euiSuperSelect__popoverPanel"
+        button={button}
+        isOpen={isOpen || this.state.isPopoverOpen}
+        closePopover={this.closePopover}
+        panelPaddingSize="none"
+        anchorPosition="downCenter"
+      >
+        {items}
+      </EuiPopover>
     );
   }
 }
 
 EuiSuperSelect.propTypes = {
-  name: PropTypes.string,
   /**
-   * You must pass an onChange function to hande the update of the value
+   * Classes (and `...rest`) will be applied to the control
+   */
+  className: PropTypes.string,
+  /**
+   * Classes for the context menu item
+   */
+  itemClassName: PropTypes.string,
+  /**
+   * You must pass an `onChange` function to handle the update of the value
    */
   onChange: PropTypes.func,
+  /**
+   * Pass an array of options that must at least include:
+   * `value`: storing unique value of item,
+   * `inputDisplay`: what shows inside the form input when selected
+   * `dropdownDisplay` (optional): what shows for the item in the dropdown
+   */
+  options: PropTypes.arrayOf(
+    PropTypes.shape({
+      value: PropTypes.string.isRequired,
+      inputDisplay: PropTypes.node,
+      dropdownDisplay: PropTypes.node,
+    }),
+  ).isRequired,
+  valueOfSelected: PropTypes.string,
+  /**
+   * Change to `true` if you want horizontal lines between options.
+   * This is best used when options are multi-line.
+   */
+  hasDividers: PropTypes.bool,
 };
 
 EuiSuperSelect.defaultProps = {
+  options: [],
 };
diff --git a/src/components/form/super_select/super_select.test.js b/src/components/form/super_select/super_select.test.js
index 34b0e55568b..e4a62829402 100644
--- a/src/components/form/super_select/super_select.test.js
+++ b/src/components/form/super_select/super_select.test.js
@@ -7,10 +7,58 @@ import { EuiSuperSelect } from './super_select';
 describe('EuiSuperSelect', () => {
   test('is rendered', () => {
     const component = render(
-      <EuiSuperSelect {...requiredProps} />
+      <EuiSuperSelect {...requiredProps} onChange={() => {}} />
     );
 
     expect(component)
       .toMatchSnapshot();
   });
+
+  describe('props', () => {
+    test('options are rendered', () => {
+      const component = render(
+        <EuiSuperSelect
+          options={[
+            { value: '1', inputDisplay: 'Option #1' },
+            { value: '2', inputDisplay: 'Option #2' }
+          ]}
+          onChange={() => {}}
+        />
+      );
+
+      expect(component)
+        .toMatchSnapshot();
+    });
+
+    test('valueSelected is rendered', () => {
+      const component = render(
+        <EuiSuperSelect
+          options={[
+            { value: '1', inputDisplay: 'Option #1' },
+            { value: '2', inputDisplay: 'Option #2' }
+          ]}
+          valueOfSelected="1"
+          onChange={() => {}}
+        />
+      );
+
+      expect(component)
+        .toMatchSnapshot();
+    });
+
+    test('custom display is propagated to dropdown', () => {
+      const component = render(
+        <EuiSuperSelect
+          options={[
+            { value: '1', inputDisplay: 'Option #1', dropdownDisplay: 'Custom Display #1' },
+            { value: '2', inputDisplay: 'Option #2', dropdownDisplay: 'Custom Display #2' }
+          ]}
+          onChange={() => {}}
+        />
+      );
+
+      expect(component)
+        .toMatchSnapshot();
+    });
+  });
 });
diff --git a/src/components/form/super_select/super_select_control.js b/src/components/form/super_select/super_select_control.js
index 590c95b0918..af699f95b35 100644
--- a/src/components/form/super_select/super_select_control.js
+++ b/src/components/form/super_select/super_select_control.js
@@ -47,7 +47,7 @@ export const EuiSuperSelectControl = ({
   let selectedValue;
   if (value) {
     const selectedOption = options.find(option => option.value === value);
-    selectedValue = selectedOption.text;
+    selectedValue = selectedOption.inputDisplay;
   }
 
   const icon = {
@@ -103,7 +103,7 @@ EuiSuperSelectControl.propTypes = {
   id: PropTypes.string,
   options: PropTypes.arrayOf(PropTypes.shape({
     value: PropTypes.node.isRequired,
-    text: PropTypes.node.isRequired
+    inputDisplay: PropTypes.node.isRequired
   })).isRequired,
   isInvalid: PropTypes.bool,
   fullWidth: PropTypes.bool,
diff --git a/src/components/form/super_select/super_select_control.test.js b/src/components/form/super_select/super_select_control.test.js
index 5448c47ffcd..6e2e901b72f 100644
--- a/src/components/form/super_select/super_select_control.test.js
+++ b/src/components/form/super_select/super_select_control.test.js
@@ -13,4 +13,77 @@ describe('EuiSuperSelectControl', () => {
     expect(component)
       .toMatchSnapshot();
   });
+
+  describe('props', () => {
+    test('options are rendered', () => {
+      const component = render(
+        <EuiSuperSelectControl
+          options={[
+            { value: '1', inputDisplay: 'Option #1' },
+            { value: '2', inputDisplay: 'Option #2' }
+          ]}
+        />
+      );
+
+      expect(component)
+        .toMatchSnapshot();
+    });
+
+    test('fullWidth is rendered', () => {
+      const component = render(
+        <EuiSuperSelectControl fullWidth/>
+      );
+
+      expect(component)
+        .toMatchSnapshot();
+    });
+
+    test('compressed is rendered', () => {
+      const component = render(
+        <EuiSuperSelectControl compressed/>
+      );
+
+      expect(component)
+        .toMatchSnapshot();
+    });
+
+    test('isLoading is rendered', () => {
+      const component = render(
+        <EuiSuperSelectControl isLoading/>
+      );
+
+      expect(component)
+        .toMatchSnapshot();
+    });
+
+    test('disabled options are rendered', () => {
+      const component = render(
+        <EuiSuperSelectControl
+          options={[
+            { value: '1', inputDisplay: 'Option #1', disabled: false },
+            { value: '2', inputDisplay: 'Option #2', disabled: true }
+          ]}
+        />
+      );
+
+      expect(component)
+        .toMatchSnapshot();
+    });
+
+    test('value option is rendered', () => {
+      const component = render(
+        <EuiSuperSelectControl
+          options={[
+            { value: '1', inputDisplay: 'Option #1' },
+            { value: '2', inputDisplay: 'Option #2' }
+          ]}
+          value={'1'}
+          onChange={() => {}}
+        />
+      );
+
+      expect(component)
+        .toMatchSnapshot();
+    });
+  });
 });