Merge pull request #16 from ryankeairns/rk/autocomplete

Design tweaks for autocomplete
lukasolson · Sep 26, 2018 · abeff58 · abeff58
2 parents d3d2e5c + 8f86ad1
commit abeff58
Show file tree

Hide file tree

Showing 6 changed files with 45 additions and 32 deletions.
diff --git 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
@@ -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;
 }
diff --git 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
@@ -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
@@ -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
@@ -24,7 +24,7 @@
 .canvasTextArea--code {
   @include euiScrollBar;
   font-size: $euiFontSize;
-  font-family: monospace;
+  font-family: $euiCodeFontFamily;
   width: 100%;
   max-width: 100%;
 }