Moving super_select to super_select_control and

putting popover stuff into super_select
elastic · Jun 12, 2018 · bb7ef4a · bb7ef4a
1 parent 723bb0c
commit bb7ef4a
Show file tree

Hide file tree

Showing 20 changed files with 474 additions and 240 deletions.
diff --git a/src-docs/src/views/super_select/super_select.js b/src-docs/src/views/super_select/super_select.js
@@ -6,11 +6,10 @@ import React, {
 import {
   EuiSuperSelect,
   EuiSpacer,
-  EuiContextMenuItem,
-  EuiContextMenuPanel,
-  EuiPopover,
   EuiText,
   EuiIcon,
+  EuiContextMenuItem,
+  EuiHorizontalRule,
 } from '../../../../src/components';
 
 export default class extends Component {
@@ -23,9 +22,10 @@ export default class extends Component {
         text: 'Option one',
         display: (
           <Fragment>
-            <EuiText size="s">
-              <h3>Option one</h3>
-              <p>Has a short description giving more detail to the option.</p>
+            <strong>Option one</strong>
+            <EuiSpacer size="xs" />
+            <EuiText size="s" color="subdued">
+              <p className="euiTextColor--subdued">Has a short description giving more detail to the option.</p>
             </EuiText>
           </Fragment>
         ),
@@ -39,9 +39,10 @@ export default class extends Component {
         ),
         display: (
           <Fragment>
-            <EuiText size="s">
-              <h3>Option Two</h3>
-              <p>Has a short description giving more detail to the option.</p>
+            <strong>Option two</strong>
+            <EuiSpacer size="xs" />
+            <EuiText size="s" color="subdued">
+              <p className="euiTextColor--subdued">Has a short description giving more detail to the option.</p>
             </EuiText>
           </Fragment>
         ),
@@ -51,9 +52,10 @@ export default class extends Component {
         text: 'Option three has a super long text to see if it will truncate or what',
         display: (
           <Fragment>
-            <EuiText size="s">
-              <h3>Option Three</h3>
-              <p>Has a short description giving more detail to the option.</p>
+            <strong>Option three</strong>
+            <EuiSpacer size="xs" />
+            <EuiText size="s" color="subdued">
+              <p className="euiTextColor--subdued">Has a short description giving more detail to the option.</p>
             </EuiText>
           </Fragment>
         ),
@@ -66,18 +68,6 @@ export default class extends Component {
     };
   }
 
-  onButtonClick = () => {
-    this.setState(prevState => ({
-      isPopoverOpen: !prevState.isPopoverOpen,
-    }));
-  };
-
-  closePopover = () => {
-    this.setState({
-      isPopoverOpen: false,
-    });
-  };
-
   onChange = e => {
     this.setState({
       value: e.target.value,
@@ -92,44 +82,35 @@ export default class extends Component {
   };
 
   render() {
-    const button = (
-      <EuiSuperSelect
-        options={this.options}
-        value={this.state.value}
-        onChange={this.onChange}
-        onClick={this.onButtonClick}
-        aria-label="Use aria labels when no actual label is in use"
-      />
-    );
-
     const items = this.options.map((option, index) => {
       return (
-        <EuiContextMenuItem
-          key={index}
-          icon={this.state.value === option.value ? "check" : "empty"}
-          onClick={() => this.itemClicked(option.value)}
-        >
-          {option.display}
-        </EuiContextMenuItem>
+        <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>
-        <EuiPopover
-          style={{ width: '100%', maxWidth: '400px' }}
-          id="singlePanel"
-          button={button}
+        <EuiSuperSelect
+          options={this.options}
+          value={this.state.value}
+          onChange={this.onChange}
           isOpen={this.state.isPopoverOpen}
-          closePopover={this.closePopover}
-          panelPaddingSize="none"
-          anchorPosition="downRight"
+          aria-label="Use aria labels when no actual label is in use"
         >
-          <EuiContextMenuPanel
-            items={items}
-            style={{ width: '100%' }}
-          />
-        </EuiPopover>
+          {items}
+        </EuiSuperSelect>
 
         <EuiSpacer size="m" />
 
@@ -139,7 +120,9 @@ export default class extends Component {
           onChange={this.onChange}
           disabled
           aria-label="Use aria labels when no actual label is in use"
-        />
+        >
+          {items}
+        </EuiSuperSelect>
 
         <EuiSpacer size="m" />
 
@@ -149,7 +132,9 @@ export default class extends Component {
           onChange={this.onChange}
           isLoading
           aria-label="Use aria labels when no actual label is in use"
-        />
+        >
+          {items}
+        </EuiSuperSelect>
 
         <EuiSpacer size="m" />
 
@@ -160,7 +145,9 @@ export default class extends Component {
           isLoading
           disabled
           aria-label="Use aria labels when no actual label is in use"
-        />
+        >
+          {items}
+        </EuiSuperSelect>
 
         <EuiSpacer size="m" />
 
@@ -169,7 +156,9 @@ export default class extends Component {
           value={this.state.value}
           onChange={this.onChange}
           compressed
-        />
+        >
+          {items}
+        </EuiSuperSelect>
       </Fragment>
     );
   }

diff --git a/src/components/basic_table/__snapshots__/collapsed_item_actions.test.js.snap b/src/components/basic_table/__snapshots__/collapsed_item_actions.test.js.snap
@@ -29,12 +29,14 @@ exports[`CollapsedItemActions render 1`] = `
         <EuiContextMenuItem
           disabled={false}
           icon={undefined}
+          layoutAlign="center"
           onClick={[Function]}
           toolTipPosition="right"
         >
           default1
         </EuiContextMenuItem>,
         <EuiContextMenuItem
+          layoutAlign="center"
           onClick={[Function]}
           toolTipPosition="right"
         />,

diff --git a/src/components/context_menu/__snapshots__/context_menu_panel.test.js.snap b/src/components/context_menu/__snapshots__/context_menu_panel.test.js.snap
@@ -116,7 +116,7 @@ exports[`EuiContextMenuPanel updating items and content updates to items should
 "<EuiContextMenuPanel items={{...}} hasFocus={true}>
   <div className=\\"euiContextMenuPanel\\" onKeyDown={[Function]} tabIndex=\\"0\\" onAnimationEnd={[Function]}>
     <div>
-      <EuiContextMenuItem data-counter={0} toolTipPosition=\\"right\\" buttonRef={[Function: bound ]}>
+      <EuiContextMenuItem data-counter={0} toolTipPosition=\\"right\\" layoutAlign=\\"center\\" buttonRef={[Function: bound ]}>
         <button disabled={[undefined]} className=\\"euiContextMenuItem\\" type=\\"button\\" data-counter={0}>
           <span className=\\"euiContextMenu__itemLayout\\">
             <span className=\\"euiContextMenuItem__text\\">
@@ -125,7 +125,7 @@ exports[`EuiContextMenuPanel updating items and content updates to items should
           </span>
         </button>
       </EuiContextMenuItem>
-      <EuiContextMenuItem data-counter={1} toolTipPosition=\\"right\\" buttonRef={[Function: bound ]}>
+      <EuiContextMenuItem data-counter={1} toolTipPosition=\\"right\\" layoutAlign=\\"center\\" buttonRef={[Function: bound ]}>
         <button disabled={[undefined]} className=\\"euiContextMenuItem\\" type=\\"button\\" data-counter={1}>
           <span className=\\"euiContextMenu__itemLayout\\">
             <span className=\\"euiContextMenuItem__text\\">
@@ -143,7 +143,7 @@ exports[`EuiContextMenuPanel updating items and content updates to items should
 "<EuiContextMenuPanel items={{...}} hasFocus={true}>
   <div className=\\"euiContextMenuPanel\\" onKeyDown={[Function]} tabIndex=\\"0\\" onAnimationEnd={[Function]}>
     <div>
-      <EuiContextMenuItem data-counter={0} toolTipPosition=\\"right\\" buttonRef={[Function: bound ]}>
+      <EuiContextMenuItem data-counter={0} toolTipPosition=\\"right\\" layoutAlign=\\"center\\" buttonRef={[Function: bound ]}>
         <button disabled={[undefined]} className=\\"euiContextMenuItem\\" type=\\"button\\" data-counter={0}>
           <span className=\\"euiContextMenu__itemLayout\\">
             <span className=\\"euiContextMenuItem__text\\">
@@ -152,7 +152,7 @@ exports[`EuiContextMenuPanel updating items and content updates to items should
           </span>
         </button>
       </EuiContextMenuItem>
-      <EuiContextMenuItem data-counter={1} toolTipPosition=\\"right\\" buttonRef={[Function: bound ]}>
+      <EuiContextMenuItem data-counter={1} toolTipPosition=\\"right\\" layoutAlign=\\"center\\" buttonRef={[Function: bound ]}>
         <button disabled={[undefined]} className=\\"euiContextMenuItem\\" type=\\"button\\" data-counter={1}>
           <span className=\\"euiContextMenu__itemLayout\\">
             <span className=\\"euiContextMenuItem__text\\">
@@ -190,7 +190,7 @@ exports[`EuiContextMenuPanel updating items and content updates to items should
 "<EuiContextMenuPanel watchedItemProps={{...}} items={{...}} hasFocus={true}>
   <div className=\\"euiContextMenuPanel\\" onKeyDown={[Function]} tabIndex=\\"0\\" onAnimationEnd={[Function]}>
     <div>
-      <EuiContextMenuItem data-counter={0} toolTipPosition=\\"right\\" buttonRef={[Function: bound ]}>
+      <EuiContextMenuItem data-counter={0} toolTipPosition=\\"right\\" layoutAlign=\\"center\\" buttonRef={[Function: bound ]}>
         <button disabled={[undefined]} className=\\"euiContextMenuItem\\" type=\\"button\\" data-counter={0}>
           <span className=\\"euiContextMenu__itemLayout\\">
             <span className=\\"euiContextMenuItem__text\\">
@@ -199,7 +199,7 @@ exports[`EuiContextMenuPanel updating items and content updates to items should
           </span>
         </button>
       </EuiContextMenuItem>
-      <EuiContextMenuItem data-counter={1} toolTipPosition=\\"right\\" buttonRef={[Function: bound ]}>
+      <EuiContextMenuItem data-counter={1} toolTipPosition=\\"right\\" layoutAlign=\\"center\\" buttonRef={[Function: bound ]}>
         <button disabled={[undefined]} className=\\"euiContextMenuItem\\" type=\\"button\\" data-counter={1}>
           <span className=\\"euiContextMenu__itemLayout\\">
             <span className=\\"euiContextMenuItem__text\\">
@@ -217,7 +217,7 @@ exports[`EuiContextMenuPanel updating items and content updates to items should
 "<EuiContextMenuPanel watchedItemProps={{...}} items={{...}} hasFocus={true}>
   <div className=\\"euiContextMenuPanel\\" onKeyDown={[Function]} tabIndex=\\"0\\" onAnimationEnd={[Function]}>
     <div>
-      <EuiContextMenuItem data-counter={2} toolTipPosition=\\"right\\" buttonRef={[Function: bound ]}>
+      <EuiContextMenuItem data-counter={2} toolTipPosition=\\"right\\" layoutAlign=\\"center\\" buttonRef={[Function: bound ]}>
         <button disabled={[undefined]} className=\\"euiContextMenuItem\\" type=\\"button\\" data-counter={2}>
           <span className=\\"euiContextMenu__itemLayout\\">
             <span className=\\"euiContextMenuItem__text\\">
@@ -226,7 +226,7 @@ exports[`EuiContextMenuPanel updating items and content updates to items should
           </span>
         </button>
       </EuiContextMenuItem>
-      <EuiContextMenuItem data-counter={3} toolTipPosition=\\"right\\" buttonRef={[Function: bound ]}>
+      <EuiContextMenuItem data-counter={3} toolTipPosition=\\"right\\" layoutAlign=\\"center\\" buttonRef={[Function: bound ]}>
         <button disabled={[undefined]} className=\\"euiContextMenuItem\\" type=\\"button\\" data-counter={3}>
           <span className=\\"euiContextMenu__itemLayout\\">
             <span className=\\"euiContextMenuItem__text\\">

diff --git a/src/components/context_menu/_context_menu.scss b/src/components/context_menu/_context_menu.scss
@@ -24,8 +24,3 @@ $euiContextMenuWidth: $euiSize * 16;
   .euiContextMenu__icon {
     margin-right: $euiSizeS;
   }
-
-  .euiContextMenu__itemLayout {
-    display: flex;
-    align-items: center;
-  }
diff --git a/src/components/context_menu/_context_menu_item.scss b/src/components/context_menu/_context_menu_item.scss
@@ -34,3 +34,19 @@
   .euiContextMenuItem__arrow {
     align-self: flex-end;
   }
+
+  .euiContextMenu__itemLayout {
+    display: flex;
+    align-items: center;
+
+    &.euiContextMenu__itemLayout--bottom {
+      align-items: flex-end;
+    }
+    &.euiContextMenu__itemLayout--top {
+      align-items: flex-start;
+    }
+
+    .euiContextMenu__icon {
+      flex-shrink: 0;
+    }
+  }
diff --git a/src/components/context_menu/context_menu_item.js b/src/components/context_menu/context_menu_item.js
@@ -10,6 +10,14 @@ import { EuiToolTip } from '../tool_tip';
 
 import { getSecureRelForTarget } from '../../services';
 
+const layoutAlignToClassNames = {
+  center: null,
+  top: 'euiContextMenu__itemLayout--top',
+  bottom: 'euiContextMenu__itemLayout--bottom',
+};
+
+export const LAYOUT_ALIGN = Object.keys(layoutAlignToClassNames);
+
 export class EuiContextMenuItem extends Component {
   static propTypes = {
     children: PropTypes.node,
@@ -40,6 +48,10 @@ export class EuiContextMenuItem extends Component {
     href: PropTypes.string,
     target: PropTypes.string,
     rel: PropTypes.string,
+    /**
+     * How to align icon with content of button
+     */
+    layoutAlign: PropTypes.oneOf(LAYOUT_ALIGN),
   };
 
   render() {
@@ -51,6 +63,7 @@ export class EuiContextMenuItem extends Component {
       icon,
       buttonRef,
       disabled,
+      layoutAlign,
       toolTipTitle,
       toolTipContent,
       toolTipPosition,
@@ -98,8 +111,10 @@ export class EuiContextMenuItem extends Component {
       'euiContextMenuItem-isDisabled': disabled,
     });
 
+    const layoutClasses = classNames('euiContextMenu__itemLayout', layoutAlignToClassNames[layoutAlign]);
+
     const buttonInner = (
-      <span className="euiContextMenu__itemLayout">
+      <span className={layoutClasses}>
         {iconInstance}
         <span className="euiContextMenuItem__text">
           {children}
@@ -162,4 +177,5 @@ export class EuiContextMenuItem extends Component {
 
 EuiContextMenuItem.defaultProps = {
   toolTipPosition: "right",
+  layoutAlign: "center",
 };
diff --git a/src/components/form/index.js b/src/components/form/index.js
@@ -20,7 +20,10 @@ export {
 } from './radio';
 export { EuiRange } from './range';
 export { EuiSelect } from './select';
-export { EuiSuperSelect } from './super_select';
+export {
+  EuiSuperSelect,
+  EuiSuperSelectControl,
+} from './super_select';
 export { EuiSwitch } from './switch';
 export { EuiTextArea } from './text_area';
 export { EuiValidatableControl } from './validatable_control';