From 8f86ad1e4f14e8589c1685b3e8d440cc7cbc01b2 Mon Sep 17 00:00:00 2001
From: Ryan Keairns <contactryank@gmail.com>
Date: Wed, 26 Sep 2018 14:11:19 -0500
Subject: [PATCH] autocomplete ui cleanup

---
 .../components/autocomplete/autocomplete.js   |  6 ++---
 .../components/autocomplete/autocomplete.scss | 24 +++++++++++++-----
 .../components/expression/expression.js       | 10 +-------
 .../expression_input/argument_reference.js    | 10 ++++----
 .../expression_input/function_reference.js    | 25 +++++++++++++------
 x-pack/plugins/canvas/public/style/main.scss  |  2 +-
 6 files changed, 45 insertions(+), 32 deletions(-)

diff --git a/x-pack/plugins/canvas/public/components/autocomplete/autocomplete.js b/x-pack/plugins/canvas/public/components/autocomplete/autocomplete.js
index 2c45ea91bf0c9..0900cb8a6da53 100644
--- a/x-pack/plugins/canvas/public/components/autocomplete/autocomplete.js
+++ b/x-pack/plugins/canvas/public/components/autocomplete/autocomplete.js
@@ -6,7 +6,7 @@
 
 import React from 'react';
 import PropTypes from 'prop-types';
-import { EuiFlexGroup, EuiFlexItem, EuiPanel, EuiText, keyCodes } from '@elastic/eui';
+import { EuiFlexGroup, EuiFlexItem, EuiPanel, EuiTitle, keyCodes } from '@elastic/eui';
 import { startCase } from 'lodash';
 
 /**
@@ -202,9 +202,9 @@ export class Autocomplete extends React.Component {
                     {this.props.items.map((item, i, items) => (
                       <div key={i}>
                         {i === 0 || items[i - 1].type !== item.type ? (
-                          <EuiText className="autocompleteType">
+                          <EuiTitle className="autocompleteType" size="xs">
                             <h3>{startCase(item.type)}</h3>
-                          </EuiText>
+                          </EuiTitle>
                         ) : (
                           ''
                         )}
diff --git a/x-pack/plugins/canvas/public/components/autocomplete/autocomplete.scss b/x-pack/plugins/canvas/public/components/autocomplete/autocomplete.scss
index 3f8c431094631..c9da34d87d0a1 100644
--- a/x-pack/plugins/canvas/public/components/autocomplete/autocomplete.scss
+++ b/x-pack/plugins/canvas/public/components/autocomplete/autocomplete.scss
@@ -4,24 +4,28 @@
 
 .autocompletePopup {
   position: absolute;
-  top: -300px;
-  height: 300px;
+  top: -262px;
+  height: 260px;
   width: 100%;
 }
 
+.autocompleteItems {
+  border-right: $euiBorderThin;
+}
+
 .autocompleteItems, .autocompleteReference {
-  height: 298px;
+  height: 258px;
   overflow: auto;
   @include euiScrollBar;
 }
 
 .autocompleteReference {
-  padding: $euiSizeS;
-  border-left: $euiBorderThin;
+  padding: $euiSizeS $euiSizeM;
+  background-color: tintOrShade($euiColorLightestShade, 65%, 20%);
 }
 
 .autocompleteItem {
-  padding: $euiSizeS;
+  padding: $euiSizeS $euiSizeM;
   overflow: hidden;
   white-space: nowrap;
   text-overflow: ellipsis;
@@ -36,4 +40,12 @@
 
 .autocompleteType {
   padding: $euiSizeS;
+}
+
+.autocompleteTable .euiTable {
+  background-color: transparent;
+}
+
+.autocompleteDescList .euiDescriptionList__description {
+  margin-right: $euiSizeS;
 }
\ No newline at end of file
diff --git a/x-pack/plugins/canvas/public/components/expression/expression.js b/x-pack/plugins/canvas/public/components/expression/expression.js
index 5ed941145b802..9644bb05d31d3 100644
--- a/x-pack/plugins/canvas/public/components/expression/expression.js
+++ b/x-pack/plugins/canvas/public/components/expression/expression.js
@@ -6,14 +6,7 @@
 
 import React from 'react';
 import PropTypes from 'prop-types';
-import {
-  EuiPanel,
-  EuiButton,
-  EuiButtonEmpty,
-  EuiFlexGroup,
-  EuiFlexItem,
-  EuiSpacer,
-} from '@elastic/eui';
+import { EuiPanel, EuiButton, EuiButtonEmpty, EuiFlexGroup, EuiFlexItem } from '@elastic/eui';
 import { ExpressionInput } from '../expression_input';
 
 export const Expression = ({
@@ -32,7 +25,6 @@ export const Expression = ({
         value={formState.expression}
         onChange={updateValue}
       />
-      <EuiSpacer size="m" />
       <EuiFlexGroup justifyContent="flexEnd" gutterSize="s">
         <EuiFlexItem grow={false}>
           <EuiButtonEmpty size="s" color={formState.dirty ? 'danger' : 'primary'} onClick={done}>
diff --git a/x-pack/plugins/canvas/public/components/expression_input/argument_reference.js b/x-pack/plugins/canvas/public/components/expression_input/argument_reference.js
index a6be994230dbb..dd72f0080024b 100644
--- a/x-pack/plugins/canvas/public/components/expression_input/argument_reference.js
+++ b/x-pack/plugins/canvas/public/components/expression_input/argument_reference.js
@@ -7,19 +7,19 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 import Markdown from 'markdown-it';
-import { EuiText, EuiSpacer, EuiDescriptionList } from '@elastic/eui';
+import { EuiTitle, EuiText, EuiSpacer, EuiDescriptionList } from '@elastic/eui';
 
 const md = new Markdown();
 
 export const ArgumentReference = ({ argDef }) => (
   <div>
-    <EuiText>
+    <EuiTitle size="xs">
       <h3>{argDef.name}</h3>
-    </EuiText>
-    <EuiSpacer />
+    </EuiTitle>
+    <EuiSpacer size="s" />
 
     <EuiText dangerouslySetInnerHTML={getHelp(argDef)} />
-    <EuiSpacer />
+    <EuiSpacer size="s" />
 
     <EuiDescriptionList type="inline" compressed listItems={getArgListItems(argDef)} />
   </div>
diff --git a/x-pack/plugins/canvas/public/components/expression_input/function_reference.js b/x-pack/plugins/canvas/public/components/expression_input/function_reference.js
index a5cd435b76dc9..0f9076b7613a8 100644
--- a/x-pack/plugins/canvas/public/components/expression_input/function_reference.js
+++ b/x-pack/plugins/canvas/public/components/expression_input/function_reference.js
@@ -7,25 +7,34 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 import Markdown from 'markdown-it';
-import { EuiText, EuiSpacer, EuiBasicTable, EuiDescriptionList } from '@elastic/eui';
+import { EuiTitle, EuiText, EuiSpacer, EuiBasicTable, EuiDescriptionList } from '@elastic/eui';
 import { startCase } from 'lodash';
 
 const md = new Markdown();
 
 export const FunctionReference = ({ fnDef }) => (
   <div>
-    <EuiText>
+    <EuiTitle size="xs">
       <h3>{fnDef.name}</h3>
-    </EuiText>
-    <EuiSpacer />
+    </EuiTitle>
+    <EuiSpacer size="s" />
 
     <EuiText dangerouslySetInnerHTML={getHelp(fnDef)} />
-    <EuiSpacer />
+    <EuiSpacer size="m" />
 
-    <EuiDescriptionList type="inline" compressed listItems={getFnListItems(fnDef)} />
-    <EuiSpacer />
+    <EuiDescriptionList
+      type="inline"
+      className="autocompleteDescList"
+      compressed
+      listItems={getFnListItems(fnDef)}
+    />
+    <EuiSpacer size="m" />
 
-    <EuiBasicTable items={getArgItems(fnDef.args)} columns={getArgColumns()} />
+    <EuiBasicTable
+      className="autocompleteTable"
+      items={getArgItems(fnDef.args)}
+      columns={getArgColumns()}
+    />
   </div>
 );
 
diff --git a/x-pack/plugins/canvas/public/style/main.scss b/x-pack/plugins/canvas/public/style/main.scss
index d6079ec13e3f9..d88e42cb390e4 100644
--- a/x-pack/plugins/canvas/public/style/main.scss
+++ b/x-pack/plugins/canvas/public/style/main.scss
@@ -24,7 +24,7 @@
 .canvasTextArea--code {
   @include euiScrollBar;
   font-size: $euiFontSize;
-  font-family: monospace;
+  font-family: $euiCodeFontFamily;
   width: 100%;
   max-width: 100%;
 }