From 95d5eac5bb2c16316c1c1b8c17d54b05507be725 Mon Sep 17 00:00:00 2001
From: Nathan Reese <reese.nathan@gmail.com>
Date: Tue, 19 Dec 2017 16:07:50 -0700
Subject: [PATCH 01/12] update jest tests as best as possible - found some bugs
 that need to be addressed

---
 .../__snapshots__/controls_tab.test.js.snap   | 94 +++++++++++-------
 .../list_control_editor.test.js.snap          | 67 +++++--------
 .../__snapshots__/options_tab.test.js.snap    | 98 +++++++------------
 .../components/editor/control_editor.js       | 97 +++++++++---------
 .../public/components/editor/controls_tab.js  | 65 +++++++-----
 .../public/components/editor/field_select.js  | 36 +++----
 .../components/editor/index_pattern_select.js | 36 +++----
 .../components/editor/list_control_editor.js  | 56 +++++------
 .../editor/list_control_editor.test.js        |  5 +-
 .../public/components/editor/options_tab.js   | 82 +++++++---------
 .../components/editor/range_control_editor.js | 53 +++++-----
 src/ui/public/styles/react-select.less        | 12 ++-
 12 files changed, 346 insertions(+), 355 deletions(-)

diff --git a/src/core_plugins/input_control_vis/public/components/editor/__snapshots__/controls_tab.test.js.snap b/src/core_plugins/input_control_vis/public/components/editor/__snapshots__/controls_tab.test.js.snap
index 99296d67edf26..9b28b5368cbf9 100644
--- a/src/core_plugins/input_control_vis/public/components/editor/__snapshots__/controls_tab.test.js.snap
+++ b/src/core_plugins/input_control_vis/public/components/editor/__snapshots__/controls_tab.test.js.snap
@@ -55,43 +55,71 @@ exports[`renders ControlsTab 1`] = `
     key="2"
     moveControl={[Function]}
   />
-  <div
-    className="kuiSideBarFormRow"
+  <EuiPanel
+    grow={false}
+    hasShadow={false}
+    paddingSize="m"
   >
-    <div
-      className="kuiSideBarFormRow__control kuiFieldGroupSection--wide"
+    <EuiFlexGroup
+      alignItems="stretch"
+      component="div"
+      gutterSize="l"
+      justifyContent="flexStart"
+      responsive={true}
+      wrap={false}
     >
-      <select
-        aria-label="Select control type"
-        className="kuiSelect"
-        onChange={[Function]}
-        value="list"
+      <EuiFlexItem
+        component="div"
+        grow={true}
       >
-        <option
-          value="range"
+        <EuiFormRow
+          fullWidth={false}
+          hasEmptyLabelSpace={false}
+          id="slectControlType"
         >
-          Range slider
-        </option>
-        <option
-          value="list"
+          <EuiSelect
+            fullWidth={false}
+            isLoading={false}
+            onChange={[Function]}
+            options={
+              Array [
+                Object {
+                  "text": "Range slider",
+                  "value": "range",
+                },
+                Object {
+                  "text": "Options list",
+                  "value": "list",
+                },
+              ]
+            }
+            value="list"
+          />
+        </EuiFormRow>
+      </EuiFlexItem>
+      <EuiFlexItem
+        component="div"
+        grow={true}
+      >
+        <EuiFormRow
+          fullWidth={false}
+          hasEmptyLabelSpace={false}
+          id="addControl"
         >
-          Options list
-        </option>
-      </select>
-    </div>
-    <KuiButton
-      buttonType="primary"
-      data-test-subj="inputControlEditorAddBtn"
-      icon={
-        <KuiButtonIcon
-          type="create"
-        />
-      }
-      onClick={[Function]}
-      type="button"
-    >
-      Add
-    </KuiButton>
-  </div>
+          <EuiButton
+            color="primary"
+            data-test-subj="inputControlEditorAddBtn"
+            fill={true}
+            iconSide="left"
+            iconType="plusInCircle"
+            onClick={[Function]}
+            type="button"
+          >
+            Add
+          </EuiButton>
+        </EuiFormRow>
+      </EuiFlexItem>
+    </EuiFlexGroup>
+  </EuiPanel>
 </div>
 `;
diff --git a/src/core_plugins/input_control_vis/public/components/editor/__snapshots__/list_control_editor.test.js.snap b/src/core_plugins/input_control_vis/public/components/editor/__snapshots__/list_control_editor.test.js.snap
index 803263077bf4f..c79cd3a5885ab 100644
--- a/src/core_plugins/input_control_vis/public/components/editor/__snapshots__/list_control_editor.test.js.snap
+++ b/src/core_plugins/input_control_vis/public/components/editor/__snapshots__/list_control_editor.test.js.snap
@@ -14,48 +14,33 @@ exports[`renders ListControlEditor 1`] = `
     onChange={[Function]}
     value="keywordField"
   />
-  <div
-    className="kuiSideBarFormRow"
+  <EuiFormRow
+    fullWidth={false}
+    hasEmptyLabelSpace={false}
+    id="multiselect-0"
   >
-    <label
-      className="kuiSideBarFormRow__label"
-      htmlFor="multiselect-0"
-    >
-      Enable Multiselect
-    </label>
-    <div
-      className="kuiSideBarFormRow__control"
-    >
-      <input
-        checked={true}
-        className="kuiCheckBox"
-        id="multiselect-0"
-        onChange={[Function]}
-        type="checkbox"
-      />
-    </div>
-  </div>
-  <div
-    className="kuiSideBarFormRow"
+    <EuiSwitch
+      checked={true}
+      data-test-subj="listControlMultiselectInput"
+      defaultChecked={false}
+      label="Multiselect"
+      onChange={[Function]}
+    />
+  </EuiFormRow>
+  <EuiFormRow
+    fullWidth={false}
+    hasEmptyLabelSpace={false}
+    id="size-0"
+    label="Size"
   >
-    <label
-      className="kuiSideBarFormRow__label"
-      htmlFor="size-0"
-    >
-      Size
-    </label>
-    <div
-      className="kuiSideBarFormRow__control kuiFieldGroupSection--wide"
-    >
-      <input
-        className="kuiTextInput"
-        id="size-0"
-        min="1"
-        onChange={[Function]}
-        type="number"
-        value={10}
-      />
-    </div>
-  </div>
+    <EuiFieldNumber
+      data-test-subj="listControlSizeInput"
+      fullWidth={false}
+      isLoading={false}
+      min={1}
+      onChange={[Function]}
+      value={10}
+    />
+  </EuiFormRow>
 </div>
 `;
diff --git a/src/core_plugins/input_control_vis/public/components/editor/__snapshots__/options_tab.test.js.snap b/src/core_plugins/input_control_vis/public/components/editor/__snapshots__/options_tab.test.js.snap
index 1c2f00c085511..d441f57b6daf1 100644
--- a/src/core_plugins/input_control_vis/public/components/editor/__snapshots__/options_tab.test.js.snap
+++ b/src/core_plugins/input_control_vis/public/components/editor/__snapshots__/options_tab.test.js.snap
@@ -1,67 +1,41 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`renders OptionsTab 1`] = `
-<div>
-  <div
-    className="sidebar-item"
+<EuiForm>
+  <EuiFormRow
+    fullWidth={false}
+    hasEmptyLabelSpace={false}
+    id="updateFiltersOnChange"
   >
-    <div
-      className="vis-editor-agg-header"
-    >
-      <KuiFieldGroup
-        isAlignedTop={false}
-      >
-        <KuiFieldGroupSection
-          isWide={false}
-        >
-          <KuiCheckBoxLabel
-            data-test-subj="inputControlEditorUpdateFiltersOnChangeCheckbox"
-            isChecked={false}
-            isDisabled={false}
-            onChange={[Function]}
-            text="Update Kibana filters on each change"
-          />
-        </KuiFieldGroupSection>
-      </KuiFieldGroup>
-    </div>
-    <div
-      className="vis-editor-agg-header"
-    >
-      <KuiFieldGroup
-        isAlignedTop={false}
-      >
-        <KuiFieldGroupSection
-          isWide={false}
-        >
-          <KuiCheckBoxLabel
-            data-test-subj="inputControlEditorUseTimeFilterCheckbox"
-            isChecked={false}
-            isDisabled={false}
-            onChange={[Function]}
-            text="Use time filter"
-          />
-        </KuiFieldGroupSection>
-      </KuiFieldGroup>
-    </div>
-    <div
-      className="vis-editor-agg-header"
-    >
-      <KuiFieldGroup
-        isAlignedTop={false}
-      >
-        <KuiFieldGroupSection
-          isWide={false}
-        >
-          <KuiCheckBoxLabel
-            data-test-subj="inputControlEditorPinFiltersCheckbox"
-            isChecked={false}
-            isDisabled={false}
-            onChange={[Function]}
-            text="Pin filters to global state"
-          />
-        </KuiFieldGroupSection>
-      </KuiFieldGroup>
-    </div>
-  </div>
-</div>
+    <EuiSwitch
+      checked={false}
+      data-test-subj="inputControlEditorUpdateFiltersOnChangeCheckbox"
+      label="Update Kibana filters on each change"
+      onChange={[Function]}
+    />
+  </EuiFormRow>
+  <EuiFormRow
+    fullWidth={false}
+    hasEmptyLabelSpace={false}
+    id="useTimeFilter"
+  >
+    <EuiSwitch
+      checked={false}
+      data-test-subj="inputControlEditorUseTimeFilterCheckbox"
+      label="Use time filter"
+      onChange={[Function]}
+    />
+  </EuiFormRow>
+  <EuiFormRow
+    fullWidth={false}
+    hasEmptyLabelSpace={false}
+    id="pinFilters"
+  >
+    <EuiSwitch
+      data-test-subj="inputControlEditorPinFiltersCheckbox"
+      label="Pin filters to global state"
+      onChange={[Function]}
+    />
+  </EuiFormRow>
+</EuiForm>
 `;
diff --git a/src/core_plugins/input_control_vis/public/components/editor/control_editor.js b/src/core_plugins/input_control_vis/public/components/editor/control_editor.js
index 5f373c12defe0..c1f6e51b1a883 100644
--- a/src/core_plugins/input_control_vis/public/components/editor/control_editor.js
+++ b/src/core_plugins/input_control_vis/public/components/editor/control_editor.js
@@ -1,10 +1,18 @@
-import classNames from 'classnames';
 import PropTypes from 'prop-types';
 import React, { Component } from 'react';
 import { RangeControlEditor } from './range_control_editor';
 import { ListControlEditor } from './list_control_editor';
 import { getTitle } from '../../editor_utils';
 
+import {
+  EuiButtonIcon,
+  EuiFieldText,
+  EuiForm,
+  EuiFormRow,
+  EuiPanel,
+  EuiText,
+} from '@elastic/eui';
+
 export class ControlEditor extends Component {
 
   state = {
@@ -77,80 +85,65 @@ export class ControlEditor extends Component {
 
     const labelId = `controlLabel${this.props.controlIndex}`;
     return (
-      <div>
-        <div className="kuiSideBarFormRow">
-          <label className="kuiSideBarFormRow__label" htmlFor={labelId}>
-            Label
-          </label>
-          <div className="kuiSideBarFormRow__control kuiFieldGroupSection--wide">
-            <input
-              className="kuiTextInput"
-              id={labelId}
-              type="text"
-              value={this.props.controlParams.label}
-              onChange={this.changeLabel}
-            />
-          </div>
-        </div>
+      <EuiForm>
+        <EuiFormRow
+          id={labelId}
+          label="Control Label"
+        >
+          <EuiFieldText
+            value={this.props.controlParams.label}
+            onChange={this.changeLabel}
+          />
+        </EuiFormRow>
 
         {controlEditor}
-      </div>
+      </EuiForm>
     );
   }
 
   render() {
-    const visibilityToggleClasses = classNames('fa', {
-      'fa-caret-right': !this.state.isEditorCollapsed,
-      'fa-caret-down': this.state.isEditorCollapsed
-    });
+    const visibilityToggleIcon = this.state.isEditorCollapsed ? 'arrowDown' : 'arrowRight';
 
     return (
-      <div className="sidebar-item">
-        <div className="vis-editor-agg-header">
-          <button
+      <EuiPanel grow={false}>
+        <div>
+          <EuiButtonIcon
             aria-label={this.state.isEditorCollapsed ? 'Close Editor' : 'Open Editor'}
             onClick={this.handleToggleControlVisibility}
-            type="button"
-            className="kuiButton kuiButton--primary kuiButton--small vis-editor-agg-header-toggle"
-          >
-            <i aria-hidden="true" className={visibilityToggleClasses} />
-          </button>
-          <span className="vis-editor-agg-header-title ng-binding">
-            {getTitle(this.props.controlParams, this.props.controlIndex)}
-          </span>
-          <div className="vis-editor-agg-header-controls kuiButtonGroup kuiButtonGroup--united">
-            <button
+            iconType={visibilityToggleIcon}
+          />
+          <EuiText style={{ display: 'inline' }}>
+            <span>
+              {getTitle(this.props.controlParams, this.props.controlIndex)}
+            </span>
+          </EuiText>
+          <div style={{ float: 'right' }}>
+            <EuiButtonIcon
               aria-label="Move control down"
-              type="button"
-              className="kuiButton kuiButton--small"
+              color="secondary"
               onClick={this.moveDownControl}
+              iconType="arrowDown"
               data-test-subj={`inputControlEditorMoveDownControl${this.props.controlIndex}`}
-            >
-              <i aria-hidden="true" className="fa fa-chevron-down" />
-            </button>
-            <button
+            />
+            <EuiButtonIcon
               aria-label="Move control up"
-              type="button"
-              className="kuiButton kuiButton--small"
+              color="secondary"
               onClick={this.moveUpControl}
+              iconType="arrowUp"
               data-test-subj={`inputControlEditorMoveUpControl${this.props.controlIndex}`}
-            >
-              <i aria-hidden="true" className="fa fa-chevron-up" />
-            </button>
-            <button
+            />
+            <EuiButtonIcon
               aria-label="Remove control"
-              className="kuiButton kuiButton--danger kuiButton--small"
-              type="button"
+              color="danger"
               onClick={this.removeControl}
+              iconType="cross"
               data-test-subj={`inputControlEditorRemoveControl${this.props.controlIndex}`}
-            >
-              <i aria-hidden="true" className="fa fa-times" />
-            </button>
+            />
           </div>
         </div>
 
         {this.state.isEditorCollapsed && this.renderEditor()}
-      </div>
+      </EuiPanel>
     );
   }
 }
diff --git a/src/core_plugins/input_control_vis/public/components/editor/controls_tab.js b/src/core_plugins/input_control_vis/public/components/editor/controls_tab.js
index 28e7ad4836026..9ea25ac73f694 100644
--- a/src/core_plugins/input_control_vis/public/components/editor/controls_tab.js
+++ b/src/core_plugins/input_control_vis/public/components/editor/controls_tab.js
@@ -2,9 +2,17 @@ import _ from 'lodash';
 import PropTypes from 'prop-types';
 import React, { Component } from 'react';
 import { ControlEditor } from './control_editor';
-import { KuiButton, KuiButtonIcon } from 'ui_framework/components';
 import { addControl, moveControl, newControl, removeControl, setControl } from '../../editor_utils';
 
+import {
+  EuiButton,
+  EuiFlexGroup,
+  EuiFlexItem,
+  EuiFormRow,
+  EuiPanel,
+  EuiSelect,
+} from '@elastic/eui';
+
 export class ControlsTab extends Component {
 
   state = {
@@ -103,28 +111,39 @@ export class ControlsTab extends Component {
 
         {this.renderControls()}
 
-        <div className="kuiSideBarFormRow">
-          <div className="kuiSideBarFormRow__control kuiFieldGroupSection--wide">
-            <select
-              aria-label="Select control type"
-              className="kuiSelect"
-              value={this.state.type}
-              onChange={evt => this.setState({ type: evt.target.value })}
-            >
-              <option value="range">Range slider</option>
-              <option value="list">Options list</option>
-            </select>
-          </div>
-          <KuiButton
-            buttonType="primary"
-            type="button"
-            icon={<KuiButtonIcon type="create" />}
-            onClick={this.handleAddControl}
-            data-test-subj="inputControlEditorAddBtn"
-          >
-            Add
-          </KuiButton>
-        </div>
+        <EuiPanel grow={false}>
+          <EuiFlexGroup>
+            <EuiFlexItem>
+              <EuiFormRow
+                id="slectControlType"
+              >
+                <EuiSelect
+                  options={[
+                    { value: 'range', text: 'Range slider' },
+                    { value: 'list', text: 'Options list' },
+                  ]}
+                  value={this.state.type}
+                  onChange={evt => this.setState({ type: evt.target.value })}
+                />
+              </EuiFormRow>
+            </EuiFlexItem>
+            <EuiFlexItem>
+              <EuiFormRow
+                id="addControl"
+              >
+                <EuiButton
+                  fill
+                  onClick={this.handleAddControl}
+                  iconType="plusInCircle"
+                  data-test-subj="inputControlEditorAddBtn"
+                >
+                  Add
+                </EuiButton>
+              </EuiFormRow>
+            </EuiFlexItem>
+          </EuiFlexGroup>
+        </EuiPanel>
+
       </div>
     );
   }
diff --git a/src/core_plugins/input_control_vis/public/components/editor/field_select.js b/src/core_plugins/input_control_vis/public/components/editor/field_select.js
index a9607a21a4409..87291a5f89191 100644
--- a/src/core_plugins/input_control_vis/public/components/editor/field_select.js
+++ b/src/core_plugins/input_control_vis/public/components/editor/field_select.js
@@ -2,7 +2,11 @@ import _ from 'lodash';
 import PropTypes from 'prop-types';
 import React, { Component } from 'react';
 import Select from 'react-select';
-import { htmlIdGenerator } from '@elastic/eui';
+
+import {
+  EuiFormRow,
+  htmlIdGenerator,
+} from '@elastic/eui';
 
 export class FieldSelect extends Component {
   constructor(props) {
@@ -62,22 +66,20 @@ export class FieldSelect extends Component {
     const idGenerator = htmlIdGenerator();
     const selectId = idGenerator('indexPatternSelect');
     return (
-      <div className="kuiSideBarFormRow">
-        <label className="kuiSideBarFormRow__label" htmlFor={selectId}>
-          Field
-        </label>
-        <div className="kuiSideBarFormRow__control kuiFieldGroupSection--wide">
-          <Select
-            className="field-react-select"
-            placeholder="Select field..."
-            value={this.props.value}
-            options={this.state.fields}
-            onChange={this.props.onChange}
-            resetValue={''}
-            inputProps={{ id: selectId }}
-          />
-        </div>
-      </div>
+      <EuiFormRow
+        id={selectId}
+        label="Index Pattern"
+      >
+        <Select
+          className="field-react-select"
+          placeholder="Select field..."
+          value={this.props.value}
+          options={this.state.fields}
+          onChange={this.props.onChange}
+          resetValue={''}
+          inputProps={{ id: selectId }}
+        />
+      </EuiFormRow>
     );
   }
 }
diff --git a/src/core_plugins/input_control_vis/public/components/editor/index_pattern_select.js b/src/core_plugins/input_control_vis/public/components/editor/index_pattern_select.js
index eaf69ebe37652..b4e68c184c5b6 100644
--- a/src/core_plugins/input_control_vis/public/components/editor/index_pattern_select.js
+++ b/src/core_plugins/input_control_vis/public/components/editor/index_pattern_select.js
@@ -1,7 +1,11 @@
 import PropTypes from 'prop-types';
 import React, { Component } from 'react';
 import Select from 'react-select';
-import { htmlIdGenerator } from '@elastic/eui';
+
+import {
+  EuiFormRow,
+  htmlIdGenerator,
+} from '@elastic/eui';
 
 export class IndexPatternSelect extends Component {
   constructor(props) {
@@ -26,22 +30,20 @@ export class IndexPatternSelect extends Component {
     const idGenerator = htmlIdGenerator();
     const selectId = idGenerator('indexPatternSelect');
     return (
-      <div className="kuiSideBarFormRow">
-        <label className="kuiSideBarFormRow__label" htmlFor={selectId}>
-          Index Pattern
-        </label>
-        <div className="kuiSideBarFormRow__control kuiFieldGroupSection--wide">
-          <Select.Async
-            className="index-pattern-react-select"
-            placeholder="Select index pattern..."
-            value={this.props.value}
-            loadOptions={this.loadOptions}
-            onChange={this.props.onChange}
-            resetValue={''}
-            inputProps={{ id: selectId }}
-          />
-        </div>
-      </div>
+      <EuiFormRow
+        id={selectId}
+        label="Index Pattern"
+      >
+        <Select.Async
+          className="index-pattern-react-select"
+          placeholder="Select index pattern..."
+          value={this.props.value}
+          loadOptions={this.loadOptions}
+          onChange={this.props.onChange}
+          resetValue={''}
+          inputProps={{ id: selectId }}
+        />
+      </EuiFormRow>
     );
   }
 }
diff --git a/src/core_plugins/input_control_vis/public/components/editor/list_control_editor.js b/src/core_plugins/input_control_vis/public/components/editor/list_control_editor.js
index 6508cb87d8add..67a1215f51b4a 100644
--- a/src/core_plugins/input_control_vis/public/components/editor/list_control_editor.js
+++ b/src/core_plugins/input_control_vis/public/components/editor/list_control_editor.js
@@ -3,6 +3,12 @@ import React from 'react';
 import { IndexPatternSelect } from './index_pattern_select';
 import { FieldSelect } from './field_select';
 
+import {
+  EuiFormRow,
+  EuiFieldNumber,
+  EuiSwitch,
+} from '@elastic/eui';
+
 function filterField(field) {
   return field.aggregatable && ['number', 'boolean', 'date', 'ip', 'string'].includes(field.type);
 }
@@ -34,36 +40,28 @@ export function ListControlEditor(props) {
         getIndexPattern={props.getIndexPattern}
       />
 
-      <div className="kuiSideBarFormRow">
-        <label className="kuiSideBarFormRow__label" htmlFor={multiselectId}>
-          Enable Multiselect
-        </label>
-        <div className="kuiSideBarFormRow__control">
-          <input
-            id={multiselectId}
-            className="kuiCheckBox"
-            type="checkbox"
-            checked={props.controlParams.options.multiselect}
-            onChange={handleMultiselectChange}
-          />
-        </div>
-      </div>
+      <EuiFormRow
+        id={multiselectId}
+      >
+        <EuiSwitch
+          label="Multiselect"
+          checked={props.controlParams.options.multiselect}
+          onChange={handleMultiselectChange}
+          data-test-subj="listControlMultiselectInput"
+        />
+      </EuiFormRow>
 
-      <div className="kuiSideBarFormRow">
-        <label className="kuiSideBarFormRow__label" htmlFor={sizeId}>
-          Size
-        </label>
-        <div className="kuiSideBarFormRow__control kuiFieldGroupSection--wide">
-          <input
-            id={sizeId}
-            className="kuiTextInput"
-            type="number"
-            min="1"
-            value={props.controlParams.options.size}
-            onChange={handleSizeChange}
-          />
-        </div>
-      </div>
+      <EuiFormRow
+        id={sizeId}
+        label="Size"
+      >
+        <EuiFieldNumber
+          min={1}
+          value={props.controlParams.options.size}
+          onChange={handleSizeChange}
+          data-test-subj="listControlSizeInput"
+        />
+      </EuiFormRow>
 
     </div>
   );
diff --git a/src/core_plugins/input_control_vis/public/components/editor/list_control_editor.test.js b/src/core_plugins/input_control_vis/public/components/editor/list_control_editor.test.js
index da9dd2e3d44e8..2251a7a5a0a34 100644
--- a/src/core_plugins/input_control_vis/public/components/editor/list_control_editor.test.js
+++ b/src/core_plugins/input_control_vis/public/components/editor/list_control_editor.test.js
@@ -1,6 +1,7 @@
 import React from 'react';
 import sinon from 'sinon';
 import { mount, shallow } from 'enzyme';
+import { findTestSubject } from '@elastic/eui/lib/test';
 
 import {
   ListControlEditor,
@@ -82,7 +83,7 @@ test('handleCheckboxOptionChange - multiselect', () => {
     handleCheckboxOptionChange={handleCheckboxOptionChange}
     handleNumberOptionChange={handleNumberOptionChange}
   />);
-  const checkbox = component.find('#multiselect-0');
+  const checkbox = findTestSubject(component, 'listControlMultiselectInput');
   checkbox.simulate('change', { target: { checked: true } });
   sinon.assert.notCalled(handleFieldNameChange);
   sinon.assert.notCalled(handleIndexPatternChange);
@@ -112,7 +113,7 @@ test('handleNumberOptionChange - size', () => {
     handleCheckboxOptionChange={handleCheckboxOptionChange}
     handleNumberOptionChange={handleNumberOptionChange}
   />);
-  const input = component.find('#size-0');
+  const input = findTestSubject(component, 'listControlSizeInput');
   input.simulate('change', { target: { value: 7 } });
   sinon.assert.notCalled(handleCheckboxOptionChange);
   sinon.assert.notCalled(handleFieldNameChange);
diff --git a/src/core_plugins/input_control_vis/public/components/editor/options_tab.js b/src/core_plugins/input_control_vis/public/components/editor/options_tab.js
index cb80f9c716b89..6ae87726ed25f 100644
--- a/src/core_plugins/input_control_vis/public/components/editor/options_tab.js
+++ b/src/core_plugins/input_control_vis/public/components/editor/options_tab.js
@@ -1,10 +1,12 @@
 import _ from 'lodash';
 import PropTypes from 'prop-types';
 import React, { Component } from 'react';
+
 import {
-  KuiFieldGroup,
-  KuiFieldGroupSection,
-  KuiCheckBoxLabel } from 'ui_framework/components';
+  EuiForm,
+  EuiFormRow,
+  EuiSwitch,
+} from '@elastic/eui';
 
 export class OptionsTab extends Component {
 
@@ -28,50 +30,40 @@ export class OptionsTab extends Component {
 
   render() {
     return (
-      <div>
-
-        <div className="sidebar-item">
-          <div className="vis-editor-agg-header">
-            <KuiFieldGroup>
-              <KuiFieldGroupSection>
-                <KuiCheckBoxLabel
-                  text="Update Kibana filters on each change"
-                  isChecked={this.props.scope.vis.params.updateFiltersOnChange}
-                  onChange={this.handleUpdateFiltersChange}
-                  data-test-subj="inputControlEditorUpdateFiltersOnChangeCheckbox"
-                />
-              </KuiFieldGroupSection>
-            </KuiFieldGroup>
-          </div>
-
-          <div className="vis-editor-agg-header">
-            <KuiFieldGroup>
-              <KuiFieldGroupSection>
-                <KuiCheckBoxLabel
-                  text="Use time filter"
-                  isChecked={this.props.scope.vis.params.useTimeFilter}
-                  onChange={this.handleUseTimeFilter}
-                  data-test-subj="inputControlEditorUseTimeFilterCheckbox"
-                />
-              </KuiFieldGroupSection>
-            </KuiFieldGroup>
-          </div>
+      <EuiForm>
+        <EuiFormRow
+          id="updateFiltersOnChange"
+        >
+          <EuiSwitch
+            label="Update Kibana filters on each change"
+            checked={this.props.scope.vis.params.updateFiltersOnChange}
+            onChange={this.handleUpdateFiltersChange}
+            data-test-subj="inputControlEditorUpdateFiltersOnChangeCheckbox"
+          />
+        </EuiFormRow>
 
-          <div className="vis-editor-agg-header">
-            <KuiFieldGroup>
-              <KuiFieldGroupSection>
-                <KuiCheckBoxLabel
-                  text="Pin filters to global state"
-                  isChecked={this.props.scope.vis.params.pinFilters}
-                  onChange={this.handlePinFilters}
-                  data-test-subj="inputControlEditorPinFiltersCheckbox"
-                />
-              </KuiFieldGroupSection>
-            </KuiFieldGroup>
-          </div>
-        </div>
+        <EuiFormRow
+          id="useTimeFilter"
+        >
+          <EuiSwitch
+            label="Use time filter"
+            checked={this.props.scope.vis.params.useTimeFilter}
+            onChange={this.handleUseTimeFilter}
+            data-test-subj="inputControlEditorUseTimeFilterCheckbox"
+          />
+        </EuiFormRow>
 
-      </div>
+        <EuiFormRow
+          id="pinFilters"
+        >
+          <EuiSwitch
+            label="Pin filters to global state"
+            checked={this.props.scope.vis.params.pinFilters}
+            onChange={this.handlePinFilters}
+            data-test-subj="inputControlEditorPinFiltersCheckbox"
+          />
+        </EuiFormRow>
+      </EuiForm>
     );
   }
 }
diff --git a/src/core_plugins/input_control_vis/public/components/editor/range_control_editor.js b/src/core_plugins/input_control_vis/public/components/editor/range_control_editor.js
index fbc4a5a7b9f12..028156000731c 100644
--- a/src/core_plugins/input_control_vis/public/components/editor/range_control_editor.js
+++ b/src/core_plugins/input_control_vis/public/components/editor/range_control_editor.js
@@ -3,6 +3,11 @@ import React from 'react';
 import { IndexPatternSelect } from './index_pattern_select';
 import { FieldSelect } from './field_select';
 
+import {
+  EuiFormRow,
+  EuiFieldNumber,
+} from '@elastic/eui';
+
 function filterField(field) {
   return field.type === 'number';
 }
@@ -33,36 +38,26 @@ export function RangeControlEditor(props) {
         getIndexPattern={props.getIndexPattern}
       />
 
-      <div className="kuiSideBarFormRow">
-        <label className="kuiSideBarFormRow__label" htmlFor={stepSizeId}>
-          Step Size
-        </label>
-        <div className="kuiSideBarFormRow__control kuiFieldGroupSection--wide">
-          <input
-            id={stepSizeId}
-            className="kuiTextInput"
-            type="number"
-            value={props.controlParams.options.step}
-            onChange={handleStepChange}
-          />
-        </div>
-      </div>
+      <EuiFormRow
+        id={stepSizeId}
+        label="Step Size"
+      >
+        <EuiFieldNumber
+          value={props.controlParams.options.step}
+          onChange={handleStepChange}
+        />
+      </EuiFormRow>
 
-      <div className="kuiSideBarFormRow">
-        <label className="kuiSideBarFormRow__label" htmlFor={decimalPlacesId}>
-          Decimal Places
-        </label>
-        <div className="kuiSideBarFormRow__control kuiFieldGroupSection--wide">
-          <input
-            id={decimalPlacesId}
-            className="kuiTextInput"
-            type="number"
-            min="0"
-            value={props.controlParams.options.decimalPlaces}
-            onChange={handleDecimalPlacesChange}
-          />
-        </div>
-      </div>
+      <EuiFormRow
+        id={decimalPlacesId}
+        label="Decimal Places"
+      >
+        <EuiFieldNumber
+          min={0}
+          value={props.controlParams.options.decimalPlaces}
+          onChange={handleDecimalPlacesChange}
+        />
+      </EuiFormRow>
 
     </div>
   );
diff --git a/src/ui/public/styles/react-select.less b/src/ui/public/styles/react-select.less
index 90fe978783c9c..259b060a0d109 100644
--- a/src/ui/public/styles/react-select.less
+++ b/src/ui/public/styles/react-select.less
@@ -18,20 +18,22 @@
   opacity: 0.35;
 }
 .Select-control {
-  background-color: #fff;
-  border-radius: 4px;
-  border: 1px solid #DEDEDE;
-  color: #191E23;
+  background: #fbfbfb;
+  color: #3F3F3F;
   cursor: default;
   display: table;
   border-spacing: 0;
   border-collapse: separate;
-  height: 36px;
+  height: 40px;
   outline: none;
   overflow: hidden;
   position: relative;
   width: 100%;
   font-size: 14px;
+  border: none;
+  box-shadow: 0 2px 2px -1px rgba(0, 0, 0, 0.1), 0 0 0 1px rgba(0, 0, 0, 0.08), inset -400px 0 0 0 #fbfbfb;
+  transition: box-shadow 250ms ease-in, background 250ms ease-in, -webkit-box-shadow 250ms ease-in;
+  border-radius: 0;
 }
 .Select-control .Select-input:focus {
   outline: none;

From 8753ee3d902215be9973128f757200ae0d3c14c7 Mon Sep 17 00:00:00 2001
From: Nathan Reese <reese.nathan@gmail.com>
Date: Wed, 20 Dec 2017 06:40:08 -0700
Subject: [PATCH 02/12] use EuiAccordion to hide/show control editor

---
 .../components/editor/control_editor.js       | 88 ++++++++-----------
 1 file changed, 38 insertions(+), 50 deletions(-)

diff --git a/src/core_plugins/input_control_vis/public/components/editor/control_editor.js b/src/core_plugins/input_control_vis/public/components/editor/control_editor.js
index c1f6e51b1a883..33b014188a51d 100644
--- a/src/core_plugins/input_control_vis/public/components/editor/control_editor.js
+++ b/src/core_plugins/input_control_vis/public/components/editor/control_editor.js
@@ -5,26 +5,16 @@ import { ListControlEditor } from './list_control_editor';
 import { getTitle } from '../../editor_utils';
 
 import {
+  EuiAccordion,
   EuiButtonIcon,
   EuiFieldText,
   EuiForm,
   EuiFormRow,
   EuiPanel,
-  EuiText,
 } from '@elastic/eui';
 
 export class ControlEditor extends Component {
 
-  state = {
-    isEditorCollapsed: true
-  }
-
-  handleToggleControlVisibility = () => {
-    this.setState(prevState => (
-      {  isEditorCollapsed: !prevState.isEditorCollapsed }
-    ));
-  }
-
   changeLabel = (evt) => {
     this.props.handleLabelChange(this.props.controlIndex, evt);
   }
@@ -101,48 +91,46 @@ export class ControlEditor extends Component {
     );
   }
 
-  render() {
-    const visibilityToggleIcon = this.state.isEditorCollapsed ? 'arrowDown' : 'arrowRight';
+  renderEditorButtons() {
+    return (
+      <div>
+        <EuiButtonIcon
+          aria-label="Move control down"
+          color="secondary"
+          onClick={this.moveDownControl}
+          iconType="arrowDown"
+          data-test-subj={`inputControlEditorMoveDownControl${this.props.controlIndex}`}
+        />
+        <EuiButtonIcon
+          aria-label="Move control up"
+          color="secondary"
+          onClick={this.moveUpControl}
+          iconType="arrowUp"
+          data-test-subj={`inputControlEditorMoveUpControl${this.props.controlIndex}`}
+        />
+        <EuiButtonIcon
+          aria-label="Remove control"
+          color="danger"
+          onClick={this.removeControl}
+          iconType="cross"
+          data-test-subj={`inputControlEditorRemoveControl${this.props.controlIndex}`}
+        />
+      </div>
+    );
+  }
 
+  render() {
     return (
       <EuiPanel grow={false}>
-        <div>
-          <EuiButtonIcon
-            aria-label={this.state.isEditorCollapsed ? 'Close Editor' : 'Open Editor'}
-            onClick={this.handleToggleControlVisibility}
-            iconType={visibilityToggleIcon}
-          />
-          <EuiText style={{ display: 'inline' }}>
-            <span>
-              {getTitle(this.props.controlParams, this.props.controlIndex)}
-            </span>
-          </EuiText>
-          <div style={{ float: 'right' }}>
-            <EuiButtonIcon
-              aria-label="Move control down"
-              color="secondary"
-              onClick={this.moveDownControl}
-              iconType="arrowDown"
-              data-test-subj={`inputControlEditorMoveDownControl${this.props.controlIndex}`}
-            />
-            <EuiButtonIcon
-              aria-label="Move control up"
-              color="secondary"
-              onClick={this.moveUpControl}
-              iconType="arrowUp"
-              data-test-subj={`inputControlEditorMoveUpControl${this.props.controlIndex}`}
-            />
-            <EuiButtonIcon
-              aria-label="Remove control"
-              color="danger"
-              onClick={this.removeControl}
-              iconType="cross"
-              data-test-subj={`inputControlEditorRemoveControl${this.props.controlIndex}`}
-            />
-          </div>
-        </div>
-
-        {this.state.isEditorCollapsed && this.renderEditor()}
+
+        <EuiAccordion
+          id="controlEditorAccordion"
+          buttonContent={getTitle(this.props.controlParams, this.props.controlIndex)}
+          extraAction={this.renderEditorButtons()}
+        >
+          {this.renderEditor()}
+        </EuiAccordion>
+
       </EuiPanel>
     );
   }

From 4c5a0e3555438ed93950c90e3d0834aca96af8ce Mon Sep 17 00:00:00 2001
From: Nathan Reese <reese.nathan@gmail.com>
Date: Mon, 8 Jan 2018 11:00:12 -0700
Subject: [PATCH 03/12] set control editor to be open on load

---
 .../input_control_vis/public/components/editor/control_editor.js | 1 +
 1 file changed, 1 insertion(+)

diff --git a/src/core_plugins/input_control_vis/public/components/editor/control_editor.js b/src/core_plugins/input_control_vis/public/components/editor/control_editor.js
index 33b014188a51d..9500badf5a7a9 100644
--- a/src/core_plugins/input_control_vis/public/components/editor/control_editor.js
+++ b/src/core_plugins/input_control_vis/public/components/editor/control_editor.js
@@ -127,6 +127,7 @@ export class ControlEditor extends Component {
           id="controlEditorAccordion"
           buttonContent={getTitle(this.props.controlParams, this.props.controlIndex)}
           extraAction={this.renderEditorButtons()}
+          initialIsOpen={true}
         >
           {this.renderEditor()}
         </EuiAccordion>

From e8c6d42e60e24462fb8181e9678ceffcbbdbf284 Mon Sep 17 00:00:00 2001
From: Nathan Reese <reese.nathan@gmail.com>
Date: Mon, 8 Jan 2018 11:20:05 -0700
Subject: [PATCH 04/12] small changes

---
 .../public/components/editor/controls_tab.js                  | 1 +
 .../public/components/editor/controls_tab.less                | 3 +++
 .../public/components/editor/field_select.js                  | 4 ++--
 .../kibana/public/visualize/editor/styles/_editor.less        | 4 ----
 4 files changed, 6 insertions(+), 6 deletions(-)
 create mode 100644 src/core_plugins/input_control_vis/public/components/editor/controls_tab.less

diff --git a/src/core_plugins/input_control_vis/public/components/editor/controls_tab.js b/src/core_plugins/input_control_vis/public/components/editor/controls_tab.js
index 9ea25ac73f694..2df77580386ce 100644
--- a/src/core_plugins/input_control_vis/public/components/editor/controls_tab.js
+++ b/src/core_plugins/input_control_vis/public/components/editor/controls_tab.js
@@ -1,3 +1,4 @@
+import './controls_tab.less';
 import _ from 'lodash';
 import PropTypes from 'prop-types';
 import React, { Component } from 'react';
diff --git a/src/core_plugins/input_control_vis/public/components/editor/controls_tab.less b/src/core_plugins/input_control_vis/public/components/editor/controls_tab.less
new file mode 100644
index 0000000000000..c7a2c4118c047
--- /dev/null
+++ b/src/core_plugins/input_control_vis/public/components/editor/controls_tab.less
@@ -0,0 +1,3 @@
+.euiAccordion__childWrapper {
+  overflow: visible;
+}
diff --git a/src/core_plugins/input_control_vis/public/components/editor/field_select.js b/src/core_plugins/input_control_vis/public/components/editor/field_select.js
index 87291a5f89191..82bfcc0ac3624 100644
--- a/src/core_plugins/input_control_vis/public/components/editor/field_select.js
+++ b/src/core_plugins/input_control_vis/public/components/editor/field_select.js
@@ -64,11 +64,11 @@ export class FieldSelect extends Component {
     }
 
     const idGenerator = htmlIdGenerator();
-    const selectId = idGenerator('indexPatternSelect');
+    const selectId = idGenerator('fieldSelect');
     return (
       <EuiFormRow
         id={selectId}
-        label="Index Pattern"
+        label="Field"
       >
         <Select
           className="field-react-select"
diff --git a/src/core_plugins/kibana/public/visualize/editor/styles/_editor.less b/src/core_plugins/kibana/public/visualize/editor/styles/_editor.less
index fed051ef5645a..7a0f26f1f7008 100644
--- a/src/core_plugins/kibana/public/visualize/editor/styles/_editor.less
+++ b/src/core_plugins/kibana/public/visualize/editor/styles/_editor.less
@@ -184,10 +184,6 @@
         > .vis-edit-sidebar-buttons {
           flex: 0 0 auto;
         }
-
-        label {
-          margin-bottom: 0px;
-        }
       }
     }
 

From 062aa73ae3401da4f8fcca32a46fdf17651e7ff6 Mon Sep 17 00:00:00 2001
From: Nathan Reese <reese.nathan@gmail.com>
Date: Mon, 22 Jan 2018 09:25:57 -0700
Subject: [PATCH 05/12] fix editor jest tests

---
 .../list_control_editor.test.js.snap          |  1 -
 .../range_control_editor.test.js.snap         | 68 ++++++++-----------
 .../components/editor/control_editor.js       |  4 +-
 .../components/editor/range_control_editor.js |  2 +
 .../editor/range_control_editor.test.js       |  7 +-
 5 files changed, 34 insertions(+), 48 deletions(-)

diff --git a/src/core_plugins/input_control_vis/public/components/editor/__snapshots__/list_control_editor.test.js.snap b/src/core_plugins/input_control_vis/public/components/editor/__snapshots__/list_control_editor.test.js.snap
index c79cd3a5885ab..8a045dbda6fd8 100644
--- a/src/core_plugins/input_control_vis/public/components/editor/__snapshots__/list_control_editor.test.js.snap
+++ b/src/core_plugins/input_control_vis/public/components/editor/__snapshots__/list_control_editor.test.js.snap
@@ -22,7 +22,6 @@ exports[`renders ListControlEditor 1`] = `
     <EuiSwitch
       checked={true}
       data-test-subj="listControlMultiselectInput"
-      defaultChecked={false}
       label="Multiselect"
       onChange={[Function]}
     />
diff --git a/src/core_plugins/input_control_vis/public/components/editor/__snapshots__/range_control_editor.test.js.snap b/src/core_plugins/input_control_vis/public/components/editor/__snapshots__/range_control_editor.test.js.snap
index 0c640431ca64c..727436334cd3d 100644
--- a/src/core_plugins/input_control_vis/public/components/editor/__snapshots__/range_control_editor.test.js.snap
+++ b/src/core_plugins/input_control_vis/public/components/editor/__snapshots__/range_control_editor.test.js.snap
@@ -14,48 +14,34 @@ exports[`renders RangeControlEditor 1`] = `
     onChange={[Function]}
     value="numberField"
   />
-  <div
-    className="kuiSideBarFormRow"
+  <EuiFormRow
+    fullWidth={false}
+    hasEmptyLabelSpace={false}
+    id="stepSize-0"
+    label="Step Size"
   >
-    <label
-      className="kuiSideBarFormRow__label"
-      htmlFor="stepSize-0"
-    >
-      Step Size
-    </label>
-    <div
-      className="kuiSideBarFormRow__control kuiFieldGroupSection--wide"
-    >
-      <input
-        className="kuiTextInput"
-        id="stepSize-0"
-        onChange={[Function]}
-        type="number"
-        value={1}
-      />
-    </div>
-  </div>
-  <div
-    className="kuiSideBarFormRow"
+    <EuiFieldNumber
+      data-test-subj="rangeControlSizeInput0"
+      fullWidth={false}
+      isLoading={false}
+      onChange={[Function]}
+      value={1}
+    />
+  </EuiFormRow>
+  <EuiFormRow
+    fullWidth={false}
+    hasEmptyLabelSpace={false}
+    id="decimalPlaces-0"
+    label="Decimal Places"
   >
-    <label
-      className="kuiSideBarFormRow__label"
-      htmlFor="decimalPlaces-0"
-    >
-      Decimal Places
-    </label>
-    <div
-      className="kuiSideBarFormRow__control kuiFieldGroupSection--wide"
-    >
-      <input
-        className="kuiTextInput"
-        id="decimalPlaces-0"
-        min="0"
-        onChange={[Function]}
-        type="number"
-        value={0}
-      />
-    </div>
-  </div>
+    <EuiFieldNumber
+      data-test-subj="rangeControlDecimalPlacesInput0"
+      fullWidth={false}
+      isLoading={false}
+      min={0}
+      onChange={[Function]}
+      value={0}
+    />
+  </EuiFormRow>
 </div>
 `;
diff --git a/src/core_plugins/input_control_vis/public/components/editor/control_editor.js b/src/core_plugins/input_control_vis/public/components/editor/control_editor.js
index 9500badf5a7a9..962831835ff9f 100644
--- a/src/core_plugins/input_control_vis/public/components/editor/control_editor.js
+++ b/src/core_plugins/input_control_vis/public/components/editor/control_editor.js
@@ -96,14 +96,14 @@ export class ControlEditor extends Component {
       <div>
         <EuiButtonIcon
           aria-label="Move control down"
-          color="secondary"
+          color="primary"
           onClick={this.moveDownControl}
           iconType="arrowDown"
           data-test-subj={`inputControlEditorMoveDownControl${this.props.controlIndex}`}
         />
         <EuiButtonIcon
           aria-label="Move control up"
-          color="secondary"
+          color="primary"
           onClick={this.moveUpControl}
           iconType="arrowUp"
           data-test-subj={`inputControlEditorMoveUpControl${this.props.controlIndex}`}
diff --git a/src/core_plugins/input_control_vis/public/components/editor/range_control_editor.js b/src/core_plugins/input_control_vis/public/components/editor/range_control_editor.js
index 028156000731c..65b15f8553f31 100644
--- a/src/core_plugins/input_control_vis/public/components/editor/range_control_editor.js
+++ b/src/core_plugins/input_control_vis/public/components/editor/range_control_editor.js
@@ -45,6 +45,7 @@ export function RangeControlEditor(props) {
         <EuiFieldNumber
           value={props.controlParams.options.step}
           onChange={handleStepChange}
+          data-test-subj={`rangeControlSizeInput${props.controlIndex}`}
         />
       </EuiFormRow>
 
@@ -56,6 +57,7 @@ export function RangeControlEditor(props) {
           min={0}
           value={props.controlParams.options.decimalPlaces}
           onChange={handleDecimalPlacesChange}
+          data-test-subj={`rangeControlDecimalPlacesInput${props.controlIndex}`}
         />
       </EuiFormRow>
 
diff --git a/src/core_plugins/input_control_vis/public/components/editor/range_control_editor.test.js b/src/core_plugins/input_control_vis/public/components/editor/range_control_editor.test.js
index 80f0a471b9d08..f46a78aa1bb5b 100644
--- a/src/core_plugins/input_control_vis/public/components/editor/range_control_editor.test.js
+++ b/src/core_plugins/input_control_vis/public/components/editor/range_control_editor.test.js
@@ -1,6 +1,7 @@
 import React from 'react';
 import sinon from 'sinon';
 import { mount, shallow } from 'enzyme';
+import { findTestSubject } from '@elastic/eui/lib/test';
 
 import {
   RangeControlEditor,
@@ -77,8 +78,7 @@ test('handleNumberOptionChange - step', () => {
     handleIndexPatternChange={handleIndexPatternChange}
     handleNumberOptionChange={handleNumberOptionChange}
   />);
-  const input = component.find('#stepSize-0');
-  input.simulate('change', { target: { value: 0.5 } });
+  findTestSubject(component, 'rangeControlSizeInput0').simulate('change', { target: { value: 0.5 } });
   sinon.assert.notCalled(handleFieldNameChange);
   sinon.assert.notCalled(handleIndexPatternChange);
   const expectedControlIndex = 0;
@@ -105,8 +105,7 @@ test('handleNumberOptionChange - decimalPlaces', () => {
     handleIndexPatternChange={handleIndexPatternChange}
     handleNumberOptionChange={handleNumberOptionChange}
   />);
-  const input = component.find('#decimalPlaces-0');
-  input.simulate('change', { target: { value: 2 } });
+  findTestSubject(component, 'rangeControlDecimalPlacesInput0').simulate('change', { target: { value: 2 } });
   sinon.assert.notCalled(handleFieldNameChange);
   sinon.assert.notCalled(handleIndexPatternChange);
   const expectedControlIndex = 0;

From 71145a01f2819893d70ac224a9b4ca9d10bf8c0a Mon Sep 17 00:00:00 2001
From: Nathan Reese <reese.nathan@gmail.com>
Date: Mon, 22 Jan 2018 10:31:54 -0700
Subject: [PATCH 06/12] update visualization components to EUI

---
 .../public/components/vis/form_row.js         | 18 ++--
 .../components/vis/input_control_vis.js       | 90 +++++++++----------
 2 files changed, 54 insertions(+), 54 deletions(-)

diff --git a/src/core_plugins/input_control_vis/public/components/vis/form_row.js b/src/core_plugins/input_control_vis/public/components/vis/form_row.js
index 4747afdb78750..df5f58ebf3c77 100644
--- a/src/core_plugins/input_control_vis/public/components/vis/form_row.js
+++ b/src/core_plugins/input_control_vis/public/components/vis/form_row.js
@@ -3,6 +3,10 @@ import React from 'react';
 import { Tooltip } from 'pivotal-ui/react/tooltip';
 import { OverlayTrigger } from 'pivotal-ui/react/overlay-trigger';
 
+import {
+  EuiFormRow,
+} from '@elastic/eui';
+
 export function FormRow(props) {
   let control = props.children;
   if (!props.control.isEnabled()) {
@@ -17,17 +21,13 @@ export function FormRow(props) {
   }
 
   return (
-    <div
-      className="kuiVerticalRhythm"
+    <EuiFormRow
+      label={props.label}
+      id={props.id}
       data-test-subj={'inputControl' + props.controlIndex}
     >
-      <label className="kuiLabel kuiVerticalRhythmSmall" htmlFor={props.id}>
-        {props.label}
-      </label>
-      <div className="kuiVerticalRhythmSmall">
-        {control}
-      </div>
-    </div>
+      {control}
+    </EuiFormRow>
   );
 }
 
diff --git a/src/core_plugins/input_control_vis/public/components/vis/input_control_vis.js b/src/core_plugins/input_control_vis/public/components/vis/input_control_vis.js
index f5b173c5ac6a3..1d9e6f9a2dcff 100644
--- a/src/core_plugins/input_control_vis/public/components/vis/input_control_vis.js
+++ b/src/core_plugins/input_control_vis/public/components/vis/input_control_vis.js
@@ -3,12 +3,11 @@ import React, { Component } from 'react';
 import { RangeControl } from './range_control';
 import { ListControl } from './list_control';
 import {
-  KuiFieldGroup,
-  KuiFieldGroupSection,
-  KuiButton,
-  KuiFlexGroup,
-  KuiFlexItem
-} from 'ui_framework/components';
+  EuiButton,
+  EuiFlexGroup,
+  EuiFlexItem,
+  EuiFormRow,
+} from '@elastic/eui';
 
 export class InputControlVis extends Component {
   constructor(props) {
@@ -58,50 +57,51 @@ export class InputControlVis extends Component {
           throw new Error(`Unhandled control type ${control.type}`);
       }
       return (
-        <KuiFlexItem key={control.id} style={{ minWidth: '250px' }}>
+        <EuiFlexItem key={control.id} style={{ minWidth: '250px' }}>
           {controlComponent}
-        </KuiFlexItem>
+        </EuiFlexItem>
       );
     });
   }
 
   renderStagingButtons() {
     return (
-      <KuiFieldGroup className="actions">
-        <KuiFieldGroupSection>
-          <KuiButton
-            buttonType="primary"
-            type="button"
-            onClick={this.handleSubmit}
-            disabled={!this.props.hasChanges()}
-            data-test-subj="inputControlSubmitBtn"
-          >
-            Apply changes
-          </KuiButton>
-        </KuiFieldGroupSection>
-        <KuiFieldGroupSection>
-          <KuiButton
-            buttonType="basic"
-            type="button"
-            onClick={this.handleReset}
-            disabled={!this.props.hasChanges()}
-            data-test-subj="inputControlCancelBtn"
-          >
-            Cancel changes
-          </KuiButton>
-        </KuiFieldGroupSection>
-        <KuiFieldGroupSection>
-          <KuiButton
-            buttonType="basic"
-            type="button"
-            onClick={this.handleClearAll}
-            disabled={!this.props.hasValues()}
-            data-test-subj="inputControlClearBtn"
-          >
-            Clear form
-          </KuiButton>
-        </KuiFieldGroupSection>
-      </KuiFieldGroup>
+      <EuiFlexGroup style={{ maxWidth: '250px' }}>
+        <EuiFlexItem>
+          <EuiFormRow>
+            <EuiButton
+              fill
+              onClick={this.handleSubmit}
+              disabled={!this.props.hasChanges()}
+              data-test-subj="inputControlSubmitBtn"
+            >
+              Apply changes
+            </EuiButton>
+          </EuiFormRow>
+        </EuiFlexItem>
+        <EuiFlexItem>
+          <EuiFormRow>
+            <EuiButton
+              onClick={this.handleReset}
+              disabled={!this.props.hasChanges()}
+              data-test-subj="inputControlCancelBtn"
+            >
+              Cancel changes
+            </EuiButton>
+          </EuiFormRow>
+        </EuiFlexItem>
+        <EuiFlexItem>
+          <EuiFormRow>
+            <EuiButton
+              onClick={this.handleClearAll}
+              disabled={!this.props.hasValues()}
+              data-test-subj="inputControlClearBtn"
+            >
+              Clear form
+            </EuiButton>
+          </EuiFormRow>
+        </EuiFlexItem>
+      </EuiFlexGroup>
     );
   }
 
@@ -113,9 +113,9 @@ export class InputControlVis extends Component {
 
     return (
       <div className="inputControlVis">
-        <KuiFlexGroup wrap>
+        <EuiFlexGroup wrap>
           {this.renderControls()}
-        </KuiFlexGroup>
+        </EuiFlexGroup>
         {stagingButtons}
       </div>
     );

From 2fb55de13fb2cf41db7401226382a2e7544dcfa8 Mon Sep 17 00:00:00 2001
From: Nathan Reese <reese.nathan@gmail.com>
Date: Mon, 22 Jan 2018 11:37:05 -0700
Subject: [PATCH 07/12] fix jest tests and updated range control to EUI

---
 .../vis/__snapshots__/form_row.test.js.snap   |  80 ++-
 .../input_control_vis.test.js.snap            | 480 ++++++++++++------
 .../__snapshots__/range_control.test.js.snap  |  71 ++-
 .../public/components/vis/range_control.js    |  61 ++-
 .../input_control_vis/public/vis.less         |   6 +-
 5 files changed, 426 insertions(+), 272 deletions(-)

diff --git a/src/core_plugins/input_control_vis/public/components/vis/__snapshots__/form_row.test.js.snap b/src/core_plugins/input_control_vis/public/components/vis/__snapshots__/form_row.test.js.snap
index 65d023a64bd0f..985c4f7fe0d19 100644
--- a/src/core_plugins/input_control_vis/public/components/vis/__snapshots__/form_row.test.js.snap
+++ b/src/core_plugins/input_control_vis/public/components/vis/__snapshots__/form_row.test.js.snap
@@ -1,60 +1,46 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`renders disabled control with tooltip 1`] = `
-<div
-  className="kuiVerticalRhythm"
+<EuiFormRow
   data-test-subj="inputControl0"
+  fullWidth={false}
+  hasEmptyLabelSpace={false}
+  id="controlId"
+  label="test control"
 >
-  <label
-    className="kuiLabel kuiVerticalRhythmSmall"
-    htmlFor="controlId"
+  <OverlayTrigger
+    display={false}
+    isSticky={false}
+    overlay={
+      <Tooltip
+        className="inputControlDisabledTooltip"
+        isSticky={false}
+        size="auto"
+        visible={true}
+      />
+    }
+    pin={true}
+    placement="top"
+    theme="dark"
+    trigger="hover"
   >
-    test control
-  </label>
-  <div
-    className="kuiVerticalRhythmSmall"
-  >
-    <OverlayTrigger
-      display={false}
-      isSticky={false}
-      overlay={
-        <Tooltip
-          className="inputControlDisabledTooltip"
-          isSticky={false}
-          size="auto"
-          visible={true}
-        />
-      }
-      pin={true}
-      placement="top"
-      theme="dark"
-      trigger="hover"
-    >
-      <div>
-        My Control
-      </div>
-    </OverlayTrigger>
-  </div>
-</div>
+    <div>
+      My Control
+    </div>
+  </OverlayTrigger>
+</EuiFormRow>
 `;
 
 exports[`renders enabled control 1`] = `
-<div
-  className="kuiVerticalRhythm"
+<EuiFormRow
   data-test-subj="inputControl0"
+  fullWidth={false}
+  hasEmptyLabelSpace={false}
+  id="controlId"
+  label="test control"
 >
-  <label
-    className="kuiLabel kuiVerticalRhythmSmall"
-    htmlFor="controlId"
-  >
-    test control
-  </label>
-  <div
-    className="kuiVerticalRhythmSmall"
-  >
-    <div>
-      My Control
-    </div>
+  <div>
+    My Control
   </div>
-</div>
+</EuiFormRow>
 `;
diff --git a/src/core_plugins/input_control_vis/public/components/vis/__snapshots__/input_control_vis.test.js.snap b/src/core_plugins/input_control_vis/public/components/vis/__snapshots__/input_control_vis.test.js.snap
index 4c87d914e2a68..c30f15bbd9d0a 100644
--- a/src/core_plugins/input_control_vis/public/components/vis/__snapshots__/input_control_vis.test.js.snap
+++ b/src/core_plugins/input_control_vis/public/components/vis/__snapshots__/input_control_vis.test.js.snap
@@ -4,13 +4,16 @@ exports[`Apply and Cancel change btns enabled when there are changes 1`] = `
 <div
   className="inputControlVis"
 >
-  <KuiFlexGroup
+  <EuiFlexGroup
     alignItems="stretch"
-    gutterSize="large"
+    component="div"
+    gutterSize="l"
     justifyContent="flexStart"
+    responsive={true}
     wrap={true}
   >
-    <KuiFlexItem
+    <EuiFlexItem
+      component="div"
       grow={true}
       key="mock-list-control"
       style={
@@ -47,52 +50,85 @@ exports[`Apply and Cancel change btns enabled when there are changes 1`] = `
         controlIndex={0}
         stageFilter={[Function]}
       />
-    </KuiFlexItem>
-  </KuiFlexGroup>
-  <KuiFieldGroup
-    className="actions"
-    isAlignedTop={false}
+    </EuiFlexItem>
+  </EuiFlexGroup>
+  <EuiFlexGroup
+    alignItems="stretch"
+    component="div"
+    gutterSize="l"
+    justifyContent="flexStart"
+    responsive={true}
+    style={
+      Object {
+        "maxWidth": "250px",
+      }
+    }
+    wrap={false}
   >
-    <KuiFieldGroupSection
-      isWide={false}
+    <EuiFlexItem
+      component="div"
+      grow={true}
     >
-      <KuiButton
-        buttonType="primary"
-        data-test-subj="inputControlSubmitBtn"
-        disabled={false}
-        onClick={[Function]}
-        type="button"
+      <EuiFormRow
+        fullWidth={false}
+        hasEmptyLabelSpace={false}
       >
-        Apply changes
-      </KuiButton>
-    </KuiFieldGroupSection>
-    <KuiFieldGroupSection
-      isWide={false}
+        <EuiButton
+          color="primary"
+          data-test-subj="inputControlSubmitBtn"
+          disabled={false}
+          fill={true}
+          iconSide="left"
+          onClick={[Function]}
+          type="button"
+        >
+          Apply changes
+        </EuiButton>
+      </EuiFormRow>
+    </EuiFlexItem>
+    <EuiFlexItem
+      component="div"
+      grow={true}
     >
-      <KuiButton
-        buttonType="basic"
-        data-test-subj="inputControlCancelBtn"
-        disabled={false}
-        onClick={[Function]}
-        type="button"
+      <EuiFormRow
+        fullWidth={false}
+        hasEmptyLabelSpace={false}
       >
-        Cancel changes
-      </KuiButton>
-    </KuiFieldGroupSection>
-    <KuiFieldGroupSection
-      isWide={false}
+        <EuiButton
+          color="primary"
+          data-test-subj="inputControlCancelBtn"
+          disabled={false}
+          fill={false}
+          iconSide="left"
+          onClick={[Function]}
+          type="button"
+        >
+          Cancel changes
+        </EuiButton>
+      </EuiFormRow>
+    </EuiFlexItem>
+    <EuiFlexItem
+      component="div"
+      grow={true}
     >
-      <KuiButton
-        buttonType="basic"
-        data-test-subj="inputControlClearBtn"
-        disabled={true}
-        onClick={[Function]}
-        type="button"
+      <EuiFormRow
+        fullWidth={false}
+        hasEmptyLabelSpace={false}
       >
-        Clear form
-      </KuiButton>
-    </KuiFieldGroupSection>
-  </KuiFieldGroup>
+        <EuiButton
+          color="primary"
+          data-test-subj="inputControlClearBtn"
+          disabled={true}
+          fill={false}
+          iconSide="left"
+          onClick={[Function]}
+          type="button"
+        >
+          Clear form
+        </EuiButton>
+      </EuiFormRow>
+    </EuiFlexItem>
+  </EuiFlexGroup>
 </div>
 `;
 
@@ -100,13 +136,16 @@ exports[`Clear btns enabled when there are values 1`] = `
 <div
   className="inputControlVis"
 >
-  <KuiFlexGroup
+  <EuiFlexGroup
     alignItems="stretch"
-    gutterSize="large"
+    component="div"
+    gutterSize="l"
     justifyContent="flexStart"
+    responsive={true}
     wrap={true}
   >
-    <KuiFlexItem
+    <EuiFlexItem
+      component="div"
       grow={true}
       key="mock-list-control"
       style={
@@ -143,52 +182,85 @@ exports[`Clear btns enabled when there are values 1`] = `
         controlIndex={0}
         stageFilter={[Function]}
       />
-    </KuiFlexItem>
-  </KuiFlexGroup>
-  <KuiFieldGroup
-    className="actions"
-    isAlignedTop={false}
+    </EuiFlexItem>
+  </EuiFlexGroup>
+  <EuiFlexGroup
+    alignItems="stretch"
+    component="div"
+    gutterSize="l"
+    justifyContent="flexStart"
+    responsive={true}
+    style={
+      Object {
+        "maxWidth": "250px",
+      }
+    }
+    wrap={false}
   >
-    <KuiFieldGroupSection
-      isWide={false}
+    <EuiFlexItem
+      component="div"
+      grow={true}
     >
-      <KuiButton
-        buttonType="primary"
-        data-test-subj="inputControlSubmitBtn"
-        disabled={true}
-        onClick={[Function]}
-        type="button"
+      <EuiFormRow
+        fullWidth={false}
+        hasEmptyLabelSpace={false}
       >
-        Apply changes
-      </KuiButton>
-    </KuiFieldGroupSection>
-    <KuiFieldGroupSection
-      isWide={false}
+        <EuiButton
+          color="primary"
+          data-test-subj="inputControlSubmitBtn"
+          disabled={true}
+          fill={true}
+          iconSide="left"
+          onClick={[Function]}
+          type="button"
+        >
+          Apply changes
+        </EuiButton>
+      </EuiFormRow>
+    </EuiFlexItem>
+    <EuiFlexItem
+      component="div"
+      grow={true}
     >
-      <KuiButton
-        buttonType="basic"
-        data-test-subj="inputControlCancelBtn"
-        disabled={true}
-        onClick={[Function]}
-        type="button"
+      <EuiFormRow
+        fullWidth={false}
+        hasEmptyLabelSpace={false}
       >
-        Cancel changes
-      </KuiButton>
-    </KuiFieldGroupSection>
-    <KuiFieldGroupSection
-      isWide={false}
+        <EuiButton
+          color="primary"
+          data-test-subj="inputControlCancelBtn"
+          disabled={true}
+          fill={false}
+          iconSide="left"
+          onClick={[Function]}
+          type="button"
+        >
+          Cancel changes
+        </EuiButton>
+      </EuiFormRow>
+    </EuiFlexItem>
+    <EuiFlexItem
+      component="div"
+      grow={true}
     >
-      <KuiButton
-        buttonType="basic"
-        data-test-subj="inputControlClearBtn"
-        disabled={false}
-        onClick={[Function]}
-        type="button"
+      <EuiFormRow
+        fullWidth={false}
+        hasEmptyLabelSpace={false}
       >
-        Clear form
-      </KuiButton>
-    </KuiFieldGroupSection>
-  </KuiFieldGroup>
+        <EuiButton
+          color="primary"
+          data-test-subj="inputControlClearBtn"
+          disabled={false}
+          fill={false}
+          iconSide="left"
+          onClick={[Function]}
+          type="button"
+        >
+          Clear form
+        </EuiButton>
+      </EuiFormRow>
+    </EuiFlexItem>
+  </EuiFlexGroup>
 </div>
 `;
 
@@ -196,13 +268,16 @@ exports[`Renders list control 1`] = `
 <div
   className="inputControlVis"
 >
-  <KuiFlexGroup
+  <EuiFlexGroup
     alignItems="stretch"
-    gutterSize="large"
+    component="div"
+    gutterSize="l"
     justifyContent="flexStart"
+    responsive={true}
     wrap={true}
   >
-    <KuiFlexItem
+    <EuiFlexItem
+      component="div"
       grow={true}
       key="mock-list-control"
       style={
@@ -239,52 +314,85 @@ exports[`Renders list control 1`] = `
         controlIndex={0}
         stageFilter={[Function]}
       />
-    </KuiFlexItem>
-  </KuiFlexGroup>
-  <KuiFieldGroup
-    className="actions"
-    isAlignedTop={false}
+    </EuiFlexItem>
+  </EuiFlexGroup>
+  <EuiFlexGroup
+    alignItems="stretch"
+    component="div"
+    gutterSize="l"
+    justifyContent="flexStart"
+    responsive={true}
+    style={
+      Object {
+        "maxWidth": "250px",
+      }
+    }
+    wrap={false}
   >
-    <KuiFieldGroupSection
-      isWide={false}
+    <EuiFlexItem
+      component="div"
+      grow={true}
     >
-      <KuiButton
-        buttonType="primary"
-        data-test-subj="inputControlSubmitBtn"
-        disabled={true}
-        onClick={[Function]}
-        type="button"
+      <EuiFormRow
+        fullWidth={false}
+        hasEmptyLabelSpace={false}
       >
-        Apply changes
-      </KuiButton>
-    </KuiFieldGroupSection>
-    <KuiFieldGroupSection
-      isWide={false}
+        <EuiButton
+          color="primary"
+          data-test-subj="inputControlSubmitBtn"
+          disabled={true}
+          fill={true}
+          iconSide="left"
+          onClick={[Function]}
+          type="button"
+        >
+          Apply changes
+        </EuiButton>
+      </EuiFormRow>
+    </EuiFlexItem>
+    <EuiFlexItem
+      component="div"
+      grow={true}
     >
-      <KuiButton
-        buttonType="basic"
-        data-test-subj="inputControlCancelBtn"
-        disabled={true}
-        onClick={[Function]}
-        type="button"
+      <EuiFormRow
+        fullWidth={false}
+        hasEmptyLabelSpace={false}
       >
-        Cancel changes
-      </KuiButton>
-    </KuiFieldGroupSection>
-    <KuiFieldGroupSection
-      isWide={false}
+        <EuiButton
+          color="primary"
+          data-test-subj="inputControlCancelBtn"
+          disabled={true}
+          fill={false}
+          iconSide="left"
+          onClick={[Function]}
+          type="button"
+        >
+          Cancel changes
+        </EuiButton>
+      </EuiFormRow>
+    </EuiFlexItem>
+    <EuiFlexItem
+      component="div"
+      grow={true}
     >
-      <KuiButton
-        buttonType="basic"
-        data-test-subj="inputControlClearBtn"
-        disabled={true}
-        onClick={[Function]}
-        type="button"
+      <EuiFormRow
+        fullWidth={false}
+        hasEmptyLabelSpace={false}
       >
-        Clear form
-      </KuiButton>
-    </KuiFieldGroupSection>
-  </KuiFieldGroup>
+        <EuiButton
+          color="primary"
+          data-test-subj="inputControlClearBtn"
+          disabled={true}
+          fill={false}
+          iconSide="left"
+          onClick={[Function]}
+          type="button"
+        >
+          Clear form
+        </EuiButton>
+      </EuiFormRow>
+    </EuiFlexItem>
+  </EuiFlexGroup>
 </div>
 `;
 
@@ -292,13 +400,16 @@ exports[`Renders range control 1`] = `
 <div
   className="inputControlVis"
 >
-  <KuiFlexGroup
+  <EuiFlexGroup
     alignItems="stretch"
-    gutterSize="large"
+    component="div"
+    gutterSize="l"
     justifyContent="flexStart"
+    responsive={true}
     wrap={true}
   >
-    <KuiFlexItem
+    <EuiFlexItem
+      component="div"
       grow={true}
       key="mock-range-control"
       style={
@@ -329,51 +440,84 @@ exports[`Renders range control 1`] = `
         controlIndex={0}
         stageFilter={[Function]}
       />
-    </KuiFlexItem>
-  </KuiFlexGroup>
-  <KuiFieldGroup
-    className="actions"
-    isAlignedTop={false}
+    </EuiFlexItem>
+  </EuiFlexGroup>
+  <EuiFlexGroup
+    alignItems="stretch"
+    component="div"
+    gutterSize="l"
+    justifyContent="flexStart"
+    responsive={true}
+    style={
+      Object {
+        "maxWidth": "250px",
+      }
+    }
+    wrap={false}
   >
-    <KuiFieldGroupSection
-      isWide={false}
+    <EuiFlexItem
+      component="div"
+      grow={true}
     >
-      <KuiButton
-        buttonType="primary"
-        data-test-subj="inputControlSubmitBtn"
-        disabled={true}
-        onClick={[Function]}
-        type="button"
+      <EuiFormRow
+        fullWidth={false}
+        hasEmptyLabelSpace={false}
       >
-        Apply changes
-      </KuiButton>
-    </KuiFieldGroupSection>
-    <KuiFieldGroupSection
-      isWide={false}
+        <EuiButton
+          color="primary"
+          data-test-subj="inputControlSubmitBtn"
+          disabled={true}
+          fill={true}
+          iconSide="left"
+          onClick={[Function]}
+          type="button"
+        >
+          Apply changes
+        </EuiButton>
+      </EuiFormRow>
+    </EuiFlexItem>
+    <EuiFlexItem
+      component="div"
+      grow={true}
     >
-      <KuiButton
-        buttonType="basic"
-        data-test-subj="inputControlCancelBtn"
-        disabled={true}
-        onClick={[Function]}
-        type="button"
+      <EuiFormRow
+        fullWidth={false}
+        hasEmptyLabelSpace={false}
       >
-        Cancel changes
-      </KuiButton>
-    </KuiFieldGroupSection>
-    <KuiFieldGroupSection
-      isWide={false}
+        <EuiButton
+          color="primary"
+          data-test-subj="inputControlCancelBtn"
+          disabled={true}
+          fill={false}
+          iconSide="left"
+          onClick={[Function]}
+          type="button"
+        >
+          Cancel changes
+        </EuiButton>
+      </EuiFormRow>
+    </EuiFlexItem>
+    <EuiFlexItem
+      component="div"
+      grow={true}
     >
-      <KuiButton
-        buttonType="basic"
-        data-test-subj="inputControlClearBtn"
-        disabled={true}
-        onClick={[Function]}
-        type="button"
+      <EuiFormRow
+        fullWidth={false}
+        hasEmptyLabelSpace={false}
       >
-        Clear form
-      </KuiButton>
-    </KuiFieldGroupSection>
-  </KuiFieldGroup>
+        <EuiButton
+          color="primary"
+          data-test-subj="inputControlClearBtn"
+          disabled={true}
+          fill={false}
+          iconSide="left"
+          onClick={[Function]}
+          type="button"
+        >
+          Clear form
+        </EuiButton>
+      </EuiFormRow>
+    </EuiFlexItem>
+  </EuiFlexGroup>
 </div>
 `;
diff --git a/src/core_plugins/input_control_vis/public/components/vis/__snapshots__/range_control.test.js.snap b/src/core_plugins/input_control_vis/public/components/vis/__snapshots__/range_control.test.js.snap
index caef5b328c19f..e11993d6b3dbd 100644
--- a/src/core_plugins/input_control_vis/public/components/vis/__snapshots__/range_control.test.js.snap
+++ b/src/core_plugins/input_control_vis/public/components/vis/__snapshots__/range_control.test.js.snap
@@ -25,20 +25,34 @@ exports[`renders RangeControl 1`] = `
   id="mock-range-control"
   label="range control"
 >
-  <div>
-    <input
-      className="kuiTextInput"
-      disabled={false}
-      id="mock-range-control_min"
-      max={100}
-      min={0}
-      name="min"
-      onChange={[Function]}
-      type="number"
-      value=""
-    />
-    <div
+  <EuiFlexGroup
+    alignItems="stretch"
+    component="div"
+    gutterSize="l"
+    justifyContent="flexStart"
+    responsive={true}
+    wrap={false}
+  >
+    <EuiFlexItem
+      component="div"
+      grow={false}
+    >
+      <input
+        className="euiFieldNumber"
+        disabled={false}
+        id="mock-range-control_min"
+        max={100}
+        min={0}
+        name="min"
+        onChange={[Function]}
+        type="number"
+        value=""
+      />
+    </EuiFlexItem>
+    <EuiFlexItem
       className="inputRangeContainer"
+      component="div"
+      grow={true}
     >
       <InputRange
         allowSameValues={false}
@@ -72,18 +86,23 @@ exports[`renders RangeControl 1`] = `
           }
         }
       />
-    </div>
-    <input
-      className="kuiTextInput"
-      disabled={false}
-      id="mock-range-control_max"
-      max={100}
-      min={0}
-      name="max"
-      onChange={[Function]}
-      type="number"
-      value=""
-    />
-  </div>
+    </EuiFlexItem>
+    <EuiFlexItem
+      component="div"
+      grow={false}
+    >
+      <input
+        className="euiFieldNumber"
+        disabled={false}
+        id="mock-range-control_max"
+        max={100}
+        min={0}
+        name="max"
+        onChange={[Function]}
+        type="number"
+        value=""
+      />
+    </EuiFlexItem>
+  </EuiFlexGroup>
 </FormRow>
 `;
diff --git a/src/core_plugins/input_control_vis/public/components/vis/range_control.js b/src/core_plugins/input_control_vis/public/components/vis/range_control.js
index f1027a5f0b580..ea57042e279b2 100644
--- a/src/core_plugins/input_control_vis/public/components/vis/range_control.js
+++ b/src/core_plugins/input_control_vis/public/components/vis/range_control.js
@@ -4,6 +4,11 @@ import React, { Component } from 'react';
 import InputRange from 'react-input-range';
 import { FormRow } from './form_row';
 
+import {
+  EuiFlexGroup,
+  EuiFlexItem,
+} from '@elastic/eui';
+
 const toState = (props) => {
   const state = {
     sliderValue: props.control.value,
@@ -81,19 +86,21 @@ export class RangeControl extends Component {
 
   renderControl() {
     return (
-      <div>
-        <input
-          id={`${this.props.control.id}_min`}
-          disabled={!this.props.control.isEnabled()}
-          name="min"
-          type="number"
-          className="kuiTextInput"
-          value={this.state.minValue}
-          min={this.props.control.min}
-          max={this.props.control.max}
-          onChange={this.handleInputChange}
-        />
-        <div className="inputRangeContainer">
+      <EuiFlexGroup>
+        <EuiFlexItem grow={false}>
+          <input
+            id={`${this.props.control.id}_min`}
+            disabled={!this.props.control.isEnabled()}
+            name="min"
+            type="number"
+            className="euiFieldNumber"
+            value={this.state.minValue}
+            min={this.props.control.min}
+            max={this.props.control.max}
+            onChange={this.handleInputChange}
+          />
+        </EuiFlexItem>
+        <EuiFlexItem className="inputRangeContainer">
           <InputRange
             disabled={!this.props.control.isEnabled()}
             maxValue={this.props.control.max}
@@ -106,19 +113,21 @@ export class RangeControl extends Component {
             ariaLabelledby={this.props.control.id}
             formatLabel={this.formatLabel}
           />
-        </div>
-        <input
-          id={`${this.props.control.id}_max`}
-          disabled={!this.props.control.isEnabled()}
-          name="max"
-          type="number"
-          className="kuiTextInput"
-          value={this.state.maxValue}
-          min={this.props.control.min}
-          max={this.props.control.max}
-          onChange={this.handleInputChange}
-        />
-      </div>
+        </EuiFlexItem>
+        <EuiFlexItem grow={false}>
+          <input
+            id={`${this.props.control.id}_max`}
+            disabled={!this.props.control.isEnabled()}
+            name="max"
+            type="number"
+            className="euiFieldNumber"
+            value={this.state.maxValue}
+            min={this.props.control.min}
+            max={this.props.control.max}
+            onChange={this.handleInputChange}
+          />
+        </EuiFlexItem>
+      </EuiFlexGroup>
     );
   }
 
diff --git a/src/core_plugins/input_control_vis/public/vis.less b/src/core_plugins/input_control_vis/public/vis.less
index b49f6c4f33a6a..f68335c216f5e 100644
--- a/src/core_plugins/input_control_vis/public/vis.less
+++ b/src/core_plugins/input_control_vis/public/vis.less
@@ -6,7 +6,7 @@
 
   .inputRangeContainer {
     display: inline-block;
-    width: 70%;
+    margin: 30px 0 0 0;
   }
 
   input.kuiTextInput {
@@ -30,10 +30,6 @@
   .input-range__label-container {
     left: 0% !important;
   }
-
-  .actions {
-    margin-top: 5px;
-  }
 }
 
 visualization.input_control_vis {

From 54d4b03bed107a7eefd8a80054a5e53403bdc8b8 Mon Sep 17 00:00:00 2001
From: Nathan Reese <reese.nathan@gmail.com>
Date: Mon, 22 Jan 2018 12:53:05 -0700
Subject: [PATCH 08/12] fix bug in range control input logic

---
 .../__snapshots__/range_control.test.js.snap  | 155 +++++++++--------
 .../public/components/vis/range_control.js    | 158 +++++++++++-------
 2 files changed, 175 insertions(+), 138 deletions(-)

diff --git a/src/core_plugins/input_control_vis/public/components/vis/__snapshots__/range_control.test.js.snap b/src/core_plugins/input_control_vis/public/components/vis/__snapshots__/range_control.test.js.snap
index e11993d6b3dbd..0a0b6495ed604 100644
--- a/src/core_plugins/input_control_vis/public/components/vis/__snapshots__/range_control.test.js.snap
+++ b/src/core_plugins/input_control_vis/public/components/vis/__snapshots__/range_control.test.js.snap
@@ -25,84 +25,91 @@ exports[`renders RangeControl 1`] = `
   id="mock-range-control"
   label="range control"
 >
-  <EuiFlexGroup
-    alignItems="stretch"
-    component="div"
-    gutterSize="l"
-    justifyContent="flexStart"
-    responsive={true}
-    wrap={false}
+  <EuiFormRow
+    error={Array []}
+    fullWidth={false}
+    hasEmptyLabelSpace={false}
+    isInvalid={false}
   >
-    <EuiFlexItem
+    <EuiFlexGroup
+      alignItems="stretch"
       component="div"
-      grow={false}
+      gutterSize="l"
+      justifyContent="flexStart"
+      responsive={true}
+      wrap={false}
     >
-      <input
-        className="euiFieldNumber"
-        disabled={false}
-        id="mock-range-control_min"
-        max={100}
-        min={0}
-        name="min"
-        onChange={[Function]}
-        type="number"
-        value=""
-      />
-    </EuiFlexItem>
-    <EuiFlexItem
-      className="inputRangeContainer"
-      component="div"
-      grow={true}
-    >
-      <InputRange
-        allowSameValues={false}
-        ariaLabelledby="mock-range-control"
-        classNames={
-          Object {
-            "activeTrack": "input-range__track input-range__track--active",
-            "disabledInputRange": "input-range input-range--disabled",
-            "inputRange": "input-range",
-            "labelContainer": "input-range__label-container",
-            "maxLabel": "input-range__label input-range__label--max",
-            "minLabel": "input-range__label input-range__label--min",
-            "slider": "input-range__slider",
-            "sliderContainer": "input-range__slider-container",
-            "track": "input-range__track input-range__track--background",
-            "valueLabel": "input-range__label input-range__label--value",
+      <EuiFlexItem
+        component="div"
+        grow={false}
+      >
+        <input
+          className="euiFieldNumber"
+          disabled={false}
+          id="mock-range-control_min"
+          max={100}
+          min={0}
+          name="min"
+          onChange={[Function]}
+          type="number"
+          value=""
+        />
+      </EuiFlexItem>
+      <EuiFlexItem
+        className="inputRangeContainer"
+        component="div"
+        grow={true}
+      >
+        <InputRange
+          allowSameValues={false}
+          ariaLabelledby="mock-range-control"
+          classNames={
+            Object {
+              "activeTrack": "input-range__track input-range__track--active",
+              "disabledInputRange": "input-range input-range--disabled",
+              "inputRange": "input-range",
+              "labelContainer": "input-range__label-container",
+              "maxLabel": "input-range__label input-range__label--max",
+              "minLabel": "input-range__label input-range__label--min",
+              "slider": "input-range__slider",
+              "sliderContainer": "input-range__slider-container",
+              "track": "input-range__track input-range__track--background",
+              "valueLabel": "input-range__label input-range__label--value",
+            }
           }
-        }
-        disabled={false}
-        draggableTrack={true}
-        formatLabel={[Function]}
-        maxValue={100}
-        minValue={0}
-        onChange={[Function]}
-        onChangeComplete={[Function]}
-        step={1}
-        value={
-          Object {
-            "max": 0,
-            "min": 0,
+          disabled={false}
+          draggableTrack={true}
+          formatLabel={[Function]}
+          maxValue={100}
+          minValue={0}
+          onChange={[Function]}
+          onChangeComplete={[Function]}
+          step={1}
+          value={
+            Object {
+              "max": 0,
+              "min": 0,
+            }
           }
-        }
-      />
-    </EuiFlexItem>
-    <EuiFlexItem
-      component="div"
-      grow={false}
-    >
-      <input
-        className="euiFieldNumber"
-        disabled={false}
-        id="mock-range-control_max"
-        max={100}
-        min={0}
-        name="max"
-        onChange={[Function]}
-        type="number"
-        value=""
-      />
-    </EuiFlexItem>
-  </EuiFlexGroup>
+        />
+      </EuiFlexItem>
+      <EuiFlexItem
+        component="div"
+        grow={false}
+      >
+        <input
+          className="euiFieldNumber"
+          disabled={false}
+          id="mock-range-control_max"
+          max={100}
+          min={0}
+          name="max"
+          onChange={[Function]}
+          type="number"
+          value=""
+        />
+      </EuiFlexItem>
+    </EuiFlexGroup>
+  </EuiFormRow>
 </FormRow>
 `;
diff --git a/src/core_plugins/input_control_vis/public/components/vis/range_control.js b/src/core_plugins/input_control_vis/public/components/vis/range_control.js
index ea57042e279b2..5531f836fadc3 100644
--- a/src/core_plugins/input_control_vis/public/components/vis/range_control.js
+++ b/src/core_plugins/input_control_vis/public/components/vis/range_control.js
@@ -5,6 +5,7 @@ import InputRange from 'react-input-range';
 import { FormRow } from './form_row';
 
 import {
+  EuiFormRow,
   EuiFlexGroup,
   EuiFlexItem,
 } from '@elastic/eui';
@@ -13,7 +14,10 @@ const toState = (props) => {
   const state = {
     sliderValue: props.control.value,
     minValue: '',
-    maxValue: ''
+    isMinValid: true,
+    maxValue: '',
+    isMaxValid: true,
+    errorMsgs: [],
   };
   if (props.control.hasValue()) {
     state.minValue = props.control.value.min;
@@ -37,7 +41,10 @@ export class RangeControl extends Component {
     this.setState({
       sliderValue: value,
       minValue: value.min,
-      maxValue: value.max
+      isMinValid: true,
+      maxValue: value.max,
+      isMaxValid: true,
+      errorMsgs: [],
     });
   }
 
@@ -45,30 +52,48 @@ export class RangeControl extends Component {
     this.props.stageFilter(this.props.controlIndex, value);
   }
 
-  handleInputChange = (evt) => {
-    let inputValue = parseFloat(evt.target.value);
-    if (inputValue < this.props.control.min) {
-      inputValue = this.props.control.min;
-    } else if (inputValue > this.props.control.max) {
-      inputValue = this.props.control.max;
+  handleMinChange = (evt) => {
+    const min = parseFloat(evt.target.value);
+    const max = this.state.maxValue;
+    if (isNaN(min)) {
+      this.handleOnChangeComplete({
+        min: this.props.control.min,
+        max: max
+      });
+      return;
+    } else if (min > max) {
+      this.setState({
+        minValue: min,
+        isMinValid: false,
+        errorMsgs: ['min must be less than max'],
+      });
+      return;
     }
 
-    let otherValue;
-    if ('min' === evt.target.name) {
-      otherValue = this.props.control.value.max;
-    } else {
-      otherValue = this.props.control.value.min;
-    }
+    this.handleOnChangeComplete({
+      min: min,
+      max: max
+    });
+  }
 
-    let min;
-    let max;
-    if (inputValue < otherValue) {
-      min = inputValue;
-      max = otherValue;
-    } else {
-      min = otherValue;
-      max = inputValue;
+  handleMaxChange = (evt) => {
+    const min = this.state.minValue;
+    const max = parseFloat(evt.target.value);
+    if (isNaN(max)) {
+      this.handleOnChangeComplete({
+        min: min,
+        max: this.props.control.max
+      });
+      return;
+    } else if (max < min) {
+      this.setState({
+        maxValue: max,
+        isMinValid: false,
+        errorMsgs: ['max must be greater than min'],
+      });
+      return;
     }
+
     this.handleOnChangeComplete({
       min: min,
       max: max
@@ -86,48 +111,53 @@ export class RangeControl extends Component {
 
   renderControl() {
     return (
-      <EuiFlexGroup>
-        <EuiFlexItem grow={false}>
-          <input
-            id={`${this.props.control.id}_min`}
-            disabled={!this.props.control.isEnabled()}
-            name="min"
-            type="number"
-            className="euiFieldNumber"
-            value={this.state.minValue}
-            min={this.props.control.min}
-            max={this.props.control.max}
-            onChange={this.handleInputChange}
-          />
-        </EuiFlexItem>
-        <EuiFlexItem className="inputRangeContainer">
-          <InputRange
-            disabled={!this.props.control.isEnabled()}
-            maxValue={this.props.control.max}
-            minValue={this.props.control.min}
-            step={this.props.control.options.step}
-            value={this.state.sliderValue}
-            onChange={this.handleOnChange}
-            onChangeComplete={this.handleOnChangeComplete}
-            draggableTrack={true}
-            ariaLabelledby={this.props.control.id}
-            formatLabel={this.formatLabel}
-          />
-        </EuiFlexItem>
-        <EuiFlexItem grow={false}>
-          <input
-            id={`${this.props.control.id}_max`}
-            disabled={!this.props.control.isEnabled()}
-            name="max"
-            type="number"
-            className="euiFieldNumber"
-            value={this.state.maxValue}
-            min={this.props.control.min}
-            max={this.props.control.max}
-            onChange={this.handleInputChange}
-          />
-        </EuiFlexItem>
-      </EuiFlexGroup>
+      <EuiFormRow
+        isInvalid={!this.state.isMinValid || !this.state.isMaxValid}
+        error={this.state.errorMsgs}
+      >
+        <EuiFlexGroup>
+          <EuiFlexItem grow={false}>
+            <input
+              id={`${this.props.control.id}_min`}
+              disabled={!this.props.control.isEnabled()}
+              name="min"
+              type="number"
+              className="euiFieldNumber"
+              value={this.state.minValue}
+              min={this.props.control.min}
+              max={this.props.control.max}
+              onChange={this.handleMinChange}
+            />
+          </EuiFlexItem>
+          <EuiFlexItem className="inputRangeContainer">
+            <InputRange
+              disabled={!this.props.control.isEnabled()}
+              maxValue={this.props.control.max}
+              minValue={this.props.control.min}
+              step={this.props.control.options.step}
+              value={this.state.sliderValue}
+              onChange={this.handleOnChange}
+              onChangeComplete={this.handleOnChangeComplete}
+              draggableTrack={true}
+              ariaLabelledby={this.props.control.id}
+              formatLabel={this.formatLabel}
+            />
+          </EuiFlexItem>
+          <EuiFlexItem grow={false}>
+            <input
+              id={`${this.props.control.id}_max`}
+              disabled={!this.props.control.isEnabled()}
+              name="max"
+              type="number"
+              className="euiFieldNumber"
+              value={this.state.maxValue}
+              min={this.props.control.min}
+              max={this.props.control.max}
+              onChange={this.handleMaxChange}
+            />
+          </EuiFlexItem>
+        </EuiFlexGroup>
+      </EuiFormRow>
     );
   }
 

From ad2a85a14c683819313f3b4bdcaf0fbdd0ea43d8 Mon Sep 17 00:00:00 2001
From: Nathan Reese <reese.nathan@gmail.com>
Date: Mon, 22 Jan 2018 12:58:39 -0700
Subject: [PATCH 09/12] fix button layout

---
 .../input_control_vis.test.js.snap            | 44 +++++--------------
 .../components/vis/input_control_vis.js       |  8 ++--
 2 files changed, 16 insertions(+), 36 deletions(-)

diff --git a/src/core_plugins/input_control_vis/public/components/vis/__snapshots__/input_control_vis.test.js.snap b/src/core_plugins/input_control_vis/public/components/vis/__snapshots__/input_control_vis.test.js.snap
index c30f15bbd9d0a..795a85f412e8c 100644
--- a/src/core_plugins/input_control_vis/public/components/vis/__snapshots__/input_control_vis.test.js.snap
+++ b/src/core_plugins/input_control_vis/public/components/vis/__snapshots__/input_control_vis.test.js.snap
@@ -58,16 +58,11 @@ exports[`Apply and Cancel change btns enabled when there are changes 1`] = `
     gutterSize="l"
     justifyContent="flexStart"
     responsive={true}
-    style={
-      Object {
-        "maxWidth": "250px",
-      }
-    }
     wrap={false}
   >
     <EuiFlexItem
       component="div"
-      grow={true}
+      grow={false}
     >
       <EuiFormRow
         fullWidth={false}
@@ -88,7 +83,7 @@ exports[`Apply and Cancel change btns enabled when there are changes 1`] = `
     </EuiFlexItem>
     <EuiFlexItem
       component="div"
-      grow={true}
+      grow={false}
     >
       <EuiFormRow
         fullWidth={false}
@@ -109,7 +104,7 @@ exports[`Apply and Cancel change btns enabled when there are changes 1`] = `
     </EuiFlexItem>
     <EuiFlexItem
       component="div"
-      grow={true}
+      grow={false}
     >
       <EuiFormRow
         fullWidth={false}
@@ -190,16 +185,11 @@ exports[`Clear btns enabled when there are values 1`] = `
     gutterSize="l"
     justifyContent="flexStart"
     responsive={true}
-    style={
-      Object {
-        "maxWidth": "250px",
-      }
-    }
     wrap={false}
   >
     <EuiFlexItem
       component="div"
-      grow={true}
+      grow={false}
     >
       <EuiFormRow
         fullWidth={false}
@@ -220,7 +210,7 @@ exports[`Clear btns enabled when there are values 1`] = `
     </EuiFlexItem>
     <EuiFlexItem
       component="div"
-      grow={true}
+      grow={false}
     >
       <EuiFormRow
         fullWidth={false}
@@ -241,7 +231,7 @@ exports[`Clear btns enabled when there are values 1`] = `
     </EuiFlexItem>
     <EuiFlexItem
       component="div"
-      grow={true}
+      grow={false}
     >
       <EuiFormRow
         fullWidth={false}
@@ -322,16 +312,11 @@ exports[`Renders list control 1`] = `
     gutterSize="l"
     justifyContent="flexStart"
     responsive={true}
-    style={
-      Object {
-        "maxWidth": "250px",
-      }
-    }
     wrap={false}
   >
     <EuiFlexItem
       component="div"
-      grow={true}
+      grow={false}
     >
       <EuiFormRow
         fullWidth={false}
@@ -352,7 +337,7 @@ exports[`Renders list control 1`] = `
     </EuiFlexItem>
     <EuiFlexItem
       component="div"
-      grow={true}
+      grow={false}
     >
       <EuiFormRow
         fullWidth={false}
@@ -373,7 +358,7 @@ exports[`Renders list control 1`] = `
     </EuiFlexItem>
     <EuiFlexItem
       component="div"
-      grow={true}
+      grow={false}
     >
       <EuiFormRow
         fullWidth={false}
@@ -448,16 +433,11 @@ exports[`Renders range control 1`] = `
     gutterSize="l"
     justifyContent="flexStart"
     responsive={true}
-    style={
-      Object {
-        "maxWidth": "250px",
-      }
-    }
     wrap={false}
   >
     <EuiFlexItem
       component="div"
-      grow={true}
+      grow={false}
     >
       <EuiFormRow
         fullWidth={false}
@@ -478,7 +458,7 @@ exports[`Renders range control 1`] = `
     </EuiFlexItem>
     <EuiFlexItem
       component="div"
-      grow={true}
+      grow={false}
     >
       <EuiFormRow
         fullWidth={false}
@@ -499,7 +479,7 @@ exports[`Renders range control 1`] = `
     </EuiFlexItem>
     <EuiFlexItem
       component="div"
-      grow={true}
+      grow={false}
     >
       <EuiFormRow
         fullWidth={false}
diff --git a/src/core_plugins/input_control_vis/public/components/vis/input_control_vis.js b/src/core_plugins/input_control_vis/public/components/vis/input_control_vis.js
index 1d9e6f9a2dcff..f64f88306be96 100644
--- a/src/core_plugins/input_control_vis/public/components/vis/input_control_vis.js
+++ b/src/core_plugins/input_control_vis/public/components/vis/input_control_vis.js
@@ -66,8 +66,8 @@ export class InputControlVis extends Component {
 
   renderStagingButtons() {
     return (
-      <EuiFlexGroup style={{ maxWidth: '250px' }}>
-        <EuiFlexItem>
+      <EuiFlexGroup>
+        <EuiFlexItem grow={false}>
           <EuiFormRow>
             <EuiButton
               fill
@@ -79,7 +79,7 @@ export class InputControlVis extends Component {
             </EuiButton>
           </EuiFormRow>
         </EuiFlexItem>
-        <EuiFlexItem>
+        <EuiFlexItem grow={false}>
           <EuiFormRow>
             <EuiButton
               onClick={this.handleReset}
@@ -90,7 +90,7 @@ export class InputControlVis extends Component {
             </EuiButton>
           </EuiFormRow>
         </EuiFlexItem>
-        <EuiFlexItem>
+        <EuiFlexItem grow={false}>
           <EuiFormRow>
             <EuiButton
               onClick={this.handleClearAll}

From c26d486297e5050e2b0bd571a1157c40dbcddb9d Mon Sep 17 00:00:00 2001
From: Nathan Reese <reese.nathan@gmail.com>
Date: Mon, 22 Jan 2018 16:20:40 -0700
Subject: [PATCH 10/12] fix dashboard grid resize test

---
 .../components/editor/control_editor.js       |  2 +-
 .../input_control_vis.test.js.snap            |  4 ++
 .../components/vis/input_control_vis.js       |  6 ++-
 .../public/components/vis/range_control.js    | 38 +++++++++++++++----
 .../apps/dashboard/_dashboard_grid.js         |  7 ++--
 5 files changed, 45 insertions(+), 12 deletions(-)

diff --git a/src/core_plugins/input_control_vis/public/components/editor/control_editor.js b/src/core_plugins/input_control_vis/public/components/editor/control_editor.js
index 962831835ff9f..f5383123f936a 100644
--- a/src/core_plugins/input_control_vis/public/components/editor/control_editor.js
+++ b/src/core_plugins/input_control_vis/public/components/editor/control_editor.js
@@ -121,7 +121,7 @@ export class ControlEditor extends Component {
 
   render() {
     return (
-      <EuiPanel grow={false}>
+      <EuiPanel grow={false} style={{ zIndex: 1 }}>
 
         <EuiAccordion
           id="controlEditorAccordion"
diff --git a/src/core_plugins/input_control_vis/public/components/vis/__snapshots__/input_control_vis.test.js.snap b/src/core_plugins/input_control_vis/public/components/vis/__snapshots__/input_control_vis.test.js.snap
index 795a85f412e8c..d7142d599df4e 100644
--- a/src/core_plugins/input_control_vis/public/components/vis/__snapshots__/input_control_vis.test.js.snap
+++ b/src/core_plugins/input_control_vis/public/components/vis/__snapshots__/input_control_vis.test.js.snap
@@ -14,6 +14,7 @@ exports[`Apply and Cancel change btns enabled when there are changes 1`] = `
   >
     <EuiFlexItem
       component="div"
+      data-test-subj="inputControlItem"
       grow={true}
       key="mock-list-control"
       style={
@@ -141,6 +142,7 @@ exports[`Clear btns enabled when there are values 1`] = `
   >
     <EuiFlexItem
       component="div"
+      data-test-subj="inputControlItem"
       grow={true}
       key="mock-list-control"
       style={
@@ -268,6 +270,7 @@ exports[`Renders list control 1`] = `
   >
     <EuiFlexItem
       component="div"
+      data-test-subj="inputControlItem"
       grow={true}
       key="mock-list-control"
       style={
@@ -395,6 +398,7 @@ exports[`Renders range control 1`] = `
   >
     <EuiFlexItem
       component="div"
+      data-test-subj="inputControlItem"
       grow={true}
       key="mock-range-control"
       style={
diff --git a/src/core_plugins/input_control_vis/public/components/vis/input_control_vis.js b/src/core_plugins/input_control_vis/public/components/vis/input_control_vis.js
index f64f88306be96..2eae33673d13a 100644
--- a/src/core_plugins/input_control_vis/public/components/vis/input_control_vis.js
+++ b/src/core_plugins/input_control_vis/public/components/vis/input_control_vis.js
@@ -57,7 +57,11 @@ export class InputControlVis extends Component {
           throw new Error(`Unhandled control type ${control.type}`);
       }
       return (
-        <EuiFlexItem key={control.id} style={{ minWidth: '250px' }}>
+        <EuiFlexItem
+          key={control.id}
+          style={{ minWidth: '250px' }}
+          data-test-subj="inputControlItem"
+        >
           {controlComponent}
         </EuiFlexItem>
       );
diff --git a/src/core_plugins/input_control_vis/public/components/vis/range_control.js b/src/core_plugins/input_control_vis/public/components/vis/range_control.js
index 5531f836fadc3..49b15ead52097 100644
--- a/src/core_plugins/input_control_vis/public/components/vis/range_control.js
+++ b/src/core_plugins/input_control_vis/public/components/vis/range_control.js
@@ -56,11 +56,23 @@ export class RangeControl extends Component {
     const min = parseFloat(evt.target.value);
     const max = this.state.maxValue;
     if (isNaN(min)) {
-      this.handleOnChangeComplete({
-        min: this.props.control.min,
-        max: max
+      if (max === '') {
+        this.setState({
+          minValue: '',
+          isMinValid: true,
+          maxValue: '',
+          isMaxValid: true,
+          errorMsgs: [],
+        });
+        return;
+      }
+      this.setState({
+        minValue: '',
+        isMinValid: false,
+        errorMsgs: ['both min and max must be set'],
       });
       return;
+
     } else if (min > max) {
       this.setState({
         minValue: min,
@@ -80,15 +92,27 @@ export class RangeControl extends Component {
     const min = this.state.minValue;
     const max = parseFloat(evt.target.value);
     if (isNaN(max)) {
-      this.handleOnChangeComplete({
-        min: min,
-        max: this.props.control.max
+      if (min === '') {
+        this.setState({
+          minValue: '',
+          isMinValid: true,
+          maxValue: '',
+          isMaxValid: true,
+          errorMsgs: [],
+        });
+        return;
+      }
+      this.setState({
+        maxValue: '',
+        isMaxValid: false,
+        errorMsgs: ['both min and max must be set'],
       });
       return;
+
     } else if (max < min) {
       this.setState({
         maxValue: max,
-        isMinValid: false,
+        isMaxValid: false,
         errorMsgs: ['max must be greater than min'],
       });
       return;
diff --git a/test/functional/apps/dashboard/_dashboard_grid.js b/test/functional/apps/dashboard/_dashboard_grid.js
index dfa033667a300..666d9d8f336fb 100644
--- a/test/functional/apps/dashboard/_dashboard_grid.js
+++ b/test/functional/apps/dashboard/_dashboard_grid.js
@@ -4,6 +4,7 @@ export default function ({ getService, getPageObjects }) {
   const retry = getService('retry');
   const find = getService('find');
   const remote = getService('remote');
+  const testSubjects = getService('testSubjects');
   const PageObjects = getPageObjects(['dashboard', 'header', 'common']);
 
   describe('dashboard grid', () => {
@@ -66,7 +67,7 @@ export default function ({ getService, getPageObjects }) {
             .releaseMouseButton();
 
           await retry.try(async () => {
-            const controls = await find.allByCssSelector('.inputControlVis .kuiFlexItem');
+            const controls = await testSubjects.findAll('inputControlItem');
             expect(controls.length).to.equal(3);
             const control0Position = await controls[0].getPosition();
             const control1Position = await controls[1].getPosition();
@@ -86,7 +87,7 @@ export default function ({ getService, getPageObjects }) {
             .releaseMouseButton();
 
           await retry.try(async () => {
-            const controls = await find.allByCssSelector('.inputControlVis .kuiFlexItem');
+            const controls = await testSubjects.findAll('inputControlItem');
             expect(controls.length).to.equal(3);
             const control0Position = await controls[0].getPosition();
             const control1Position = await controls[1].getPosition();
@@ -98,7 +99,7 @@ export default function ({ getService, getPageObjects }) {
         });
 
         it('Should position controls inside panel', async () => {
-          const controls = await find.allByCssSelector('.inputControlVis .kuiFlexItem');
+          const controls = await testSubjects.findAll('inputControlItem');
           expect(controls.length).to.equal(3);
           const control0Size = await controls[0].getSize();
           const control1Size = await controls[1].getSize();

From be203241ae155f38eb232721140598dad357a167 Mon Sep 17 00:00:00 2001
From: Nathan Reese <reese.nathan@gmail.com>
Date: Thu, 25 Jan 2018 11:20:32 -0700
Subject: [PATCH 11/12] add space between panels, change button order, switch
 to sort icons

---
 .../__snapshots__/controls_tab.test.js.snap   |  2 +-
 .../components/editor/control_editor.js       |  9 ++-
 .../components/editor/control_editor.less     |  4 ++
 .../public/components/editor/controls_tab.js  |  2 +-
 .../input_control_vis.test.js.snap            | 56 +++++++++----------
 .../components/vis/input_control_vis.js       | 18 +++---
 6 files changed, 49 insertions(+), 42 deletions(-)
 create mode 100644 src/core_plugins/input_control_vis/public/components/editor/control_editor.less

diff --git a/src/core_plugins/input_control_vis/public/components/editor/__snapshots__/controls_tab.test.js.snap b/src/core_plugins/input_control_vis/public/components/editor/__snapshots__/controls_tab.test.js.snap
index 9b28b5368cbf9..87bb3ef701d7e 100644
--- a/src/core_plugins/input_control_vis/public/components/editor/__snapshots__/controls_tab.test.js.snap
+++ b/src/core_plugins/input_control_vis/public/components/editor/__snapshots__/controls_tab.test.js.snap
@@ -99,7 +99,7 @@ exports[`renders ControlsTab 1`] = `
       </EuiFlexItem>
       <EuiFlexItem
         component="div"
-        grow={true}
+        grow={false}
       >
         <EuiFormRow
           fullWidth={false}
diff --git a/src/core_plugins/input_control_vis/public/components/editor/control_editor.js b/src/core_plugins/input_control_vis/public/components/editor/control_editor.js
index f5383123f936a..8d122aed92c04 100644
--- a/src/core_plugins/input_control_vis/public/components/editor/control_editor.js
+++ b/src/core_plugins/input_control_vis/public/components/editor/control_editor.js
@@ -1,3 +1,4 @@
+import './control_editor.less';
 import PropTypes from 'prop-types';
 import React, { Component } from 'react';
 import { RangeControlEditor } from './range_control_editor';
@@ -11,6 +12,7 @@ import {
   EuiForm,
   EuiFormRow,
   EuiPanel,
+  EuiSpacer,
 } from '@elastic/eui';
 
 export class ControlEditor extends Component {
@@ -98,14 +100,14 @@ export class ControlEditor extends Component {
           aria-label="Move control down"
           color="primary"
           onClick={this.moveDownControl}
-          iconType="arrowDown"
+          iconType="sortUp"
           data-test-subj={`inputControlEditorMoveDownControl${this.props.controlIndex}`}
         />
         <EuiButtonIcon
           aria-label="Move control up"
           color="primary"
           onClick={this.moveUpControl}
-          iconType="arrowUp"
+          iconType="sortDown"
           data-test-subj={`inputControlEditorMoveUpControl${this.props.controlIndex}`}
         />
         <EuiButtonIcon
@@ -121,7 +123,7 @@ export class ControlEditor extends Component {
 
   render() {
     return (
-      <EuiPanel grow={false} style={{ zIndex: 1 }}>
+      <EuiPanel grow={false} className="controlEditorPanel" style={{ zIndex: 1 }}>
 
         <EuiAccordion
           id="controlEditorAccordion"
@@ -129,6 +131,7 @@ export class ControlEditor extends Component {
           extraAction={this.renderEditorButtons()}
           initialIsOpen={true}
         >
+          <EuiSpacer size="s" />
           {this.renderEditor()}
         </EuiAccordion>
 
diff --git a/src/core_plugins/input_control_vis/public/components/editor/control_editor.less b/src/core_plugins/input_control_vis/public/components/editor/control_editor.less
new file mode 100644
index 0000000000000..f32c16dc45886
--- /dev/null
+++ b/src/core_plugins/input_control_vis/public/components/editor/control_editor.less
@@ -0,0 +1,4 @@
+.controlEditorPanel {
+  z-index: 1;
+  margin-bottom: 8px;
+}
diff --git a/src/core_plugins/input_control_vis/public/components/editor/controls_tab.js b/src/core_plugins/input_control_vis/public/components/editor/controls_tab.js
index 2df77580386ce..f463e9fea0e2b 100644
--- a/src/core_plugins/input_control_vis/public/components/editor/controls_tab.js
+++ b/src/core_plugins/input_control_vis/public/components/editor/controls_tab.js
@@ -128,7 +128,7 @@ export class ControlsTab extends Component {
                 />
               </EuiFormRow>
             </EuiFlexItem>
-            <EuiFlexItem>
+            <EuiFlexItem grow={false}>
               <EuiFormRow
                 id="addControl"
               >
diff --git a/src/core_plugins/input_control_vis/public/components/vis/__snapshots__/input_control_vis.test.js.snap b/src/core_plugins/input_control_vis/public/components/vis/__snapshots__/input_control_vis.test.js.snap
index d7142d599df4e..4334067645eac 100644
--- a/src/core_plugins/input_control_vis/public/components/vis/__snapshots__/input_control_vis.test.js.snap
+++ b/src/core_plugins/input_control_vis/public/components/vis/__snapshots__/input_control_vis.test.js.snap
@@ -71,14 +71,14 @@ exports[`Apply and Cancel change btns enabled when there are changes 1`] = `
       >
         <EuiButton
           color="primary"
-          data-test-subj="inputControlSubmitBtn"
-          disabled={false}
-          fill={true}
+          data-test-subj="inputControlClearBtn"
+          disabled={true}
+          fill={false}
           iconSide="left"
           onClick={[Function]}
           type="button"
         >
-          Apply changes
+          Clear form
         </EuiButton>
       </EuiFormRow>
     </EuiFlexItem>
@@ -113,14 +113,14 @@ exports[`Apply and Cancel change btns enabled when there are changes 1`] = `
       >
         <EuiButton
           color="primary"
-          data-test-subj="inputControlClearBtn"
-          disabled={true}
-          fill={false}
+          data-test-subj="inputControlSubmitBtn"
+          disabled={false}
+          fill={true}
           iconSide="left"
           onClick={[Function]}
           type="button"
         >
-          Clear form
+          Apply changes
         </EuiButton>
       </EuiFormRow>
     </EuiFlexItem>
@@ -199,14 +199,14 @@ exports[`Clear btns enabled when there are values 1`] = `
       >
         <EuiButton
           color="primary"
-          data-test-subj="inputControlSubmitBtn"
-          disabled={true}
-          fill={true}
+          data-test-subj="inputControlClearBtn"
+          disabled={false}
+          fill={false}
           iconSide="left"
           onClick={[Function]}
           type="button"
         >
-          Apply changes
+          Clear form
         </EuiButton>
       </EuiFormRow>
     </EuiFlexItem>
@@ -241,14 +241,14 @@ exports[`Clear btns enabled when there are values 1`] = `
       >
         <EuiButton
           color="primary"
-          data-test-subj="inputControlClearBtn"
-          disabled={false}
-          fill={false}
+          data-test-subj="inputControlSubmitBtn"
+          disabled={true}
+          fill={true}
           iconSide="left"
           onClick={[Function]}
           type="button"
         >
-          Clear form
+          Apply changes
         </EuiButton>
       </EuiFormRow>
     </EuiFlexItem>
@@ -327,14 +327,14 @@ exports[`Renders list control 1`] = `
       >
         <EuiButton
           color="primary"
-          data-test-subj="inputControlSubmitBtn"
+          data-test-subj="inputControlClearBtn"
           disabled={true}
-          fill={true}
+          fill={false}
           iconSide="left"
           onClick={[Function]}
           type="button"
         >
-          Apply changes
+          Clear form
         </EuiButton>
       </EuiFormRow>
     </EuiFlexItem>
@@ -369,14 +369,14 @@ exports[`Renders list control 1`] = `
       >
         <EuiButton
           color="primary"
-          data-test-subj="inputControlClearBtn"
+          data-test-subj="inputControlSubmitBtn"
           disabled={true}
-          fill={false}
+          fill={true}
           iconSide="left"
           onClick={[Function]}
           type="button"
         >
-          Clear form
+          Apply changes
         </EuiButton>
       </EuiFormRow>
     </EuiFlexItem>
@@ -449,14 +449,14 @@ exports[`Renders range control 1`] = `
       >
         <EuiButton
           color="primary"
-          data-test-subj="inputControlSubmitBtn"
+          data-test-subj="inputControlClearBtn"
           disabled={true}
-          fill={true}
+          fill={false}
           iconSide="left"
           onClick={[Function]}
           type="button"
         >
-          Apply changes
+          Clear form
         </EuiButton>
       </EuiFormRow>
     </EuiFlexItem>
@@ -491,14 +491,14 @@ exports[`Renders range control 1`] = `
       >
         <EuiButton
           color="primary"
-          data-test-subj="inputControlClearBtn"
+          data-test-subj="inputControlSubmitBtn"
           disabled={true}
-          fill={false}
+          fill={true}
           iconSide="left"
           onClick={[Function]}
           type="button"
         >
-          Clear form
+          Apply changes
         </EuiButton>
       </EuiFormRow>
     </EuiFlexItem>
diff --git a/src/core_plugins/input_control_vis/public/components/vis/input_control_vis.js b/src/core_plugins/input_control_vis/public/components/vis/input_control_vis.js
index 2eae33673d13a..be5d3921a0b29 100644
--- a/src/core_plugins/input_control_vis/public/components/vis/input_control_vis.js
+++ b/src/core_plugins/input_control_vis/public/components/vis/input_control_vis.js
@@ -74,12 +74,11 @@ export class InputControlVis extends Component {
         <EuiFlexItem grow={false}>
           <EuiFormRow>
             <EuiButton
-              fill
-              onClick={this.handleSubmit}
-              disabled={!this.props.hasChanges()}
-              data-test-subj="inputControlSubmitBtn"
+              onClick={this.handleClearAll}
+              disabled={!this.props.hasValues()}
+              data-test-subj="inputControlClearBtn"
             >
-              Apply changes
+              Clear form
             </EuiButton>
           </EuiFormRow>
         </EuiFlexItem>
@@ -97,11 +96,12 @@ export class InputControlVis extends Component {
         <EuiFlexItem grow={false}>
           <EuiFormRow>
             <EuiButton
-              onClick={this.handleClearAll}
-              disabled={!this.props.hasValues()}
-              data-test-subj="inputControlClearBtn"
+              fill
+              onClick={this.handleSubmit}
+              disabled={!this.props.hasChanges()}
+              data-test-subj="inputControlSubmitBtn"
             >
-              Clear form
+              Apply changes
             </EuiButton>
           </EuiFormRow>
         </EuiFlexItem>

From 97cd91b2517fe3f44d4d921687df0892579c8b47 Mon Sep 17 00:00:00 2001
From: Nathan Reese <reese.nathan@gmail.com>
Date: Mon, 29 Jan 2018 19:45:38 -0700
Subject: [PATCH 12/12] remove style attribute from component, fix spelling of
 id

---
 .../components/editor/__snapshots__/controls_tab.test.js.snap   | 2 +-
 .../public/components/editor/control_editor.js                  | 2 +-
 .../input_control_vis/public/components/editor/controls_tab.js  | 2 +-
 3 files changed, 3 insertions(+), 3 deletions(-)

diff --git a/src/core_plugins/input_control_vis/public/components/editor/__snapshots__/controls_tab.test.js.snap b/src/core_plugins/input_control_vis/public/components/editor/__snapshots__/controls_tab.test.js.snap
index 87bb3ef701d7e..02c390c73b2cd 100644
--- a/src/core_plugins/input_control_vis/public/components/editor/__snapshots__/controls_tab.test.js.snap
+++ b/src/core_plugins/input_control_vis/public/components/editor/__snapshots__/controls_tab.test.js.snap
@@ -75,7 +75,7 @@ exports[`renders ControlsTab 1`] = `
         <EuiFormRow
           fullWidth={false}
           hasEmptyLabelSpace={false}
-          id="slectControlType"
+          id="selectControlType"
         >
           <EuiSelect
             fullWidth={false}
diff --git a/src/core_plugins/input_control_vis/public/components/editor/control_editor.js b/src/core_plugins/input_control_vis/public/components/editor/control_editor.js
index 8d122aed92c04..9a8a36aac14b1 100644
--- a/src/core_plugins/input_control_vis/public/components/editor/control_editor.js
+++ b/src/core_plugins/input_control_vis/public/components/editor/control_editor.js
@@ -123,7 +123,7 @@ export class ControlEditor extends Component {
 
   render() {
     return (
-      <EuiPanel grow={false} className="controlEditorPanel" style={{ zIndex: 1 }}>
+      <EuiPanel grow={false} className="controlEditorPanel">
 
         <EuiAccordion
           id="controlEditorAccordion"
diff --git a/src/core_plugins/input_control_vis/public/components/editor/controls_tab.js b/src/core_plugins/input_control_vis/public/components/editor/controls_tab.js
index f463e9fea0e2b..152c4f8025d3b 100644
--- a/src/core_plugins/input_control_vis/public/components/editor/controls_tab.js
+++ b/src/core_plugins/input_control_vis/public/components/editor/controls_tab.js
@@ -116,7 +116,7 @@ export class ControlsTab extends Component {
           <EuiFlexGroup>
             <EuiFlexItem>
               <EuiFormRow
-                id="slectControlType"
+                id="selectControlType"
               >
                 <EuiSelect
                   options={[