Combo box design prototype

docs/src/services/routes/routes.js

@@ -27,6 +27,9 @@ import CallOutExample
 import CodeExample
   from '../../views/code/code_example';
 
+import ComboBoxExample
+  from '../../views/combo_box/combo_box_example';
+
 import ContextMenuExample
   from '../../views/context_menu/context_menu_example';
 
@@ -135,6 +138,10 @@ const components = [{
   name: 'Code',
   component: CodeExample,
   hasReact: true,
+}, {
+  name: 'ComboBox',
+  component: ComboBoxExample,
+  hasReact: true,
 }, {
   name: 'ContextMenu',
   component: ContextMenuExample,

docs/src/views/combo_box/combo_box.js

@@ -0,0 +1,50 @@
+import React, {
+  Component,
+} from 'react';
+
+import {
+  EuiComboBox,
+} from '../../../../src/components';
+
+export default class extends Component {
+  constructor(props) {
+    super(props);
+
+    this.state = {
+      isPopoverOpen: false,
+    };
+  }
+
+  closePopover() {
+    this.setState({
+      isPopoverOpen: false,
+    });
+  }
+
+  render() {
+    return (
+      <EuiComboBox
+        optionTypeName="Dota 2 character"
+        options={[
+          { value: 'Ancient Apparition', text: 'Ancient Apparition' },
+          { value: 'Dazzle', text: 'Dazzle' },
+          { value: 'Disruptor', text: 'Disruptor' },
+          { value: 'Doom', text: 'Doom' },
+          { value: 'Dragon Knight', text: 'Dragon Knight' },
+          { value: 'Drow', text: 'Drow' },
+          { value: 'Earthshaker', text: 'Earthshaker' },
+          { value: 'Ember Spirit', text: 'Ember Spirit' },
+          { value: 'Juggernaut', text: 'Juggernaut' },
+          { value: 'Lion', text: 'Lion' },
+          { value: 'Skywrath Mage', text: 'Skywrath Mage' },
+        ]}
+        selectedOptions={[
+          { value: 'option_one', text: 'Tidehunter' },
+          { value: 'option_two', text: 'Wisp' },
+        ]}
+        isPopoverOpen={this.state.isPopoverOpen}
+        closePopover={this.closePopover.bind(this)}
+      />
+    );
+  }
+}

docs/src/views/combo_box/combo_box_example.js

@@ -0,0 +1,45 @@
+import React from 'react';
+
+import { renderToHtml } from '../../services';
+
+import {
+  GuidePage,
+  GuideSection,
+  GuideSectionTypes,
+} from '../../components';
+
+import {
+  EuiCode,
+  EuiCallOut,
+  EuiSpacer,
+} from '../../../../src/components';
+
+import ComboBox from './combo_box';
+const comboBoxSource = require('!!raw-loader!./combo_box');
+const comboBoxHtml = renderToHtml(ComboBox);
+
+export default props => (
+  <GuidePage title={props.route.name}>
+    <EuiCallOut
+      title="This is a design prototype only. Do not use."
+      type="danger"
+    />
+    <EuiSpacer />
+    <GuideSection
+      title="ComboBox"
+      source={[{
+        type: GuideSectionTypes.JS,
+        code: comboBoxSource,
+      }, {
+        type: GuideSectionTypes.HTML,
+        code: comboBoxHtml,
+      }]}
+      text={
+        <p>
+          Design prototype of <EuiCode>ComboBox</EuiCode> component. It is not usable.
+        </p>
+      }
+      demo={<ComboBox />}
+    />
+  </GuidePage>
+);

src/components/form/_index.scss

@@ -68,6 +68,7 @@ $euiFormBackgroundColor: tintOrShade($euiColorLightestShade, 60%, 25%);
 }
 
 @import 'checkbox/index';
+@import 'combo_box/index';
 @import 'field_number/index';
 @import 'field_password/index';
 @import 'field_search/index';

src/components/form/combo_box/_combo_box.scss

@@ -0,0 +1,74 @@
+.euiComboBox {
+  @include euiFormControlSize;
+  position: relative;
+
+  .euiComboBox__inputWrap {
+    @include euiFormControlStyle;
+    @include euiFormControlWithIcon($isIconOptional: true);
+    padding: $euiSizeXS;
+
+    &:hover {
+      cursor: text;
+    }
+  }
+
+  .euiComboBox__input {
+    padding: 0;
+    border: none;
+    background: transparent;
+    font-size: $euiFontSizeS;
+    font-family: $euiFontFamily;
+    color: $euiTextColor;
+    margin: $euiSizeXS;
+  }
+
+  .euiComboBox__panel {
+    position: absolute;
+    top: 100%;
+    left: -1px;
+    right: -1px;
+    border-radius: 0 0 $euiBorderRadius $euiBorderRadius;
+    visibility: hidden;
+    opacity: 0;
+    border-top: none;
+    transition:
+      visibility $euiAnimSpeedNormal $euiAnimSlightResistance,
+      opacity $euiAnimSpeedNormal $euiAnimSlightResistance;
+  }
+
+  .euiComoboBox__empty {
+    @include euiFontSizeS;
+    padding: $euiSizeS;
+    text-align: center;
+    color: $euiColorDarkShade;
+  }
+
+  .euiComboBox__rowWrap {
+    @include euiScrollBar;
+
+    padding: $euiSizeS;
+    max-height: 200px;
+    overflow-y: auto;
+  }
+
+  .euiComboBox__footer {
+    padding: $euiSizeS;
+    border-top: $euiBorderThin;
+    background: $euiFormBackgroundColor;
+  }
+  &.euiComboBox-isOpen {
+    .euiComboBox__panel {
+      visibility: visible;
+      opacity: 1;
+    }
+
+    .euiComboBox__inputWrap {
+      background: $euiColorEmptyShade;
+      box-shadow:
+        0 4px 4px -2px rgba(0, 0, 0, 0.1),
+        0 0 0 1px rgba(0,0,0,0.16),
+        inset 0 0 0 0 $euiColorEmptyShade,
+        inset 0 -2px 0 0 $euiColorPrimary;
+    }
+  }
+}

src/components/form/combo_box/_combo_box_pill.scss

@@ -0,0 +1,40 @@
+.euiComboBoxPill {
+  font-size: $euiSizeM;
+  line-height: $euiSizeL;
+  display: inline-block;
+  text-decoration: none;
+  border: solid 1px transparent;
+  border-radius: $euiSizeL;
+  padding: 0 $euiSizeS;
+  background-color: transparent;
+  white-space: nowrap;
+  vertical-align: middle;
+  border-color: $euiColorLightShade;
+  background-color: $euiColorEmptyShade;
+  margin: $euiSizeXS;
+  margin-right: 0;
+
+  .euiComboBoxPill__close {
+    width: $euiSizeM;
+    height: $euiSizeM;
+    margin-left: $euiSizeXS;
+    border: none;
+    vertical-align: middle;
+
+    &:hover {
+      .euiComboBoxPill__closeIcon {
+        fill: $euiColorDanger;
+      }
+    }
+
+    &:focus {
+      background: transparentize($euiColorDanger, .9);
+    }
+
+    svg {
+      width: $euiSizeM;
+      height: $euiSizeM;
+      vertical-align: top !important;
+    }
+  }
+}

src/components/form/combo_box/_combo_box_row.scss

@@ -0,0 +1,17 @@
+.euiComboBoxRow {
+  font-size: $euiFontSizeS;
+  padding: $euiSizeXS $euiSizeS;
+  width: 100%;
+  text-align: left;
+  border: $euiBorderThin;
+  border-color: transparent;
+
+  &:hover {
+    text-decoration: underline;
+  }
+  &:focus {
+    cursor: pointer;
+    color: $euiColorPrimary;
+    background-color: $euiFocusBackgroundColor;
+  }
+}

src/components/form/combo_box/_index.scss

@@ -0,0 +1,3 @@
+@import 'combo_box';
+@import 'combo_box_pill';
+@import 'combo_box_row';