Addressing PR comments

src-docs/src/views/form_controls/form_controls_example.js

@@ -182,6 +182,14 @@ export const FormControlsExample = {
       type: GuideSectionTypes.HTML,
       code: selectHtml,
     }],
+    text: (
+      <p>
+        This component renders a basic HTML <code>&lt;select&gt;</code> element. If you need more customization
+        for how the options and/or selected values render, use the <EuiLink href="/#/forms/superselect">EuiSuperSelect</EuiLink>.
+        Another option is to use the <EuiLink href="/#/forms/combo-box">EuiComboBox</EuiLink>, which has search and multi-select
+        capabilities, but also has restrictions on how items are rendered.
+      </p>
+    ),
     props: {
       EuiSelect,
     },

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

@@ -1,6 +1,5 @@
 import React, {
   Component,
-  Fragment,
 } from 'react';
 
 import {
@@ -52,14 +51,12 @@ export default class extends Component {
 
   render() {
     return (
-      <Fragment>
-        <EuiSuperSelect
-          options={this.options}
-          valueOfSelected={this.state.value}
-          onChange={this.onChange}
-          aria-label="Health levels"
-        />
-      </Fragment>
+      <EuiSuperSelect
+        options={this.options}
+        valueOfSelected={this.state.value}
+        onChange={this.onChange}
+        aria-label="Health levels"
+      />
     );
   }
 }

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

@@ -68,16 +68,14 @@ export default class extends Component {
 
   render() {
     return (
-      <Fragment>
-        <EuiSuperSelect
-          options={this.options}
-          valueOfSelected={this.state.value}
-          onChange={this.onChange}
-          itemLayoutAlign="top"
-          hasDividers
-          aria-label="Use aria labels when no actual label is in use"
-        />
-      </Fragment>
+      <EuiSuperSelect
+        options={this.options}
+        valueOfSelected={this.state.value}
+        onChange={this.onChange}
+        itemLayoutAlign="top"
+        hasDividers
+        aria-label="Use aria labels when no actual label is in use"
+      />
     );
   }
 }

src/components/form/super_select/_super_select.scss

@@ -1,6 +1,8 @@
 /*
  * 1. Make popover the same width as the form control
  * 2. Style popover similar to combobox
+ * 3. Need specificity to override default popover styles
+ * 4. Use attribute selector to match popover position without needing the full popover class name
  */
 
 .euiSuperSelect.euiPopover { /* 3 */
@@ -12,23 +14,19 @@
   }
 }
 
-.euiSuperSelect__popoverPanel[class*="bottom"] {
+.euiSuperSelect__popoverPanel[class*="bottom"] { /* 4 */
   border-top-color: transparentize($euiBorderColor, .2);
   border-top-right-radius: 0; /* 2 */
   border-top-left-radius: 0; /* 2 */
 }
 
-.euiSuperSelect__popoverPanel[class*="top"] {
+.euiSuperSelect__popoverPanel[class*="top"] { /* 4 */
   border-bottom-color: transparentize($euiBorderColor, .2);
   border-bottom-right-radius: 0; /* 2 */
   border-bottom-left-radius: 0; /* 2 */
   @include euiBottomShadowFlat; /* 2 */
 }
 
-.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;
 }

src/components/form/super_select/_super_select_control.scss

@@ -3,7 +3,7 @@
  * 2. Ensure the descenders don't get cut off
  */
 
- .euiSuperSelectControl {
+.euiSuperSelectControl {
   @include euiFormControlStyle;
   @include euiFormControlWithIcon($side: "right"); /* 1 */
   @include euiFormControlIsLoading($isNextToIcon: true);