Refine design.

- Make suggestions popover charts instead of pushing the down.
- Align controls to top of expression input if the textarea is resized to be tall.- Tweak interval styles to look nice.

src/core_plugins/timelion/public/app.less

@@ -28,11 +28,13 @@
 
 /**
  * 1. Anchor suggestions beneath input.
+ * 2. Allow for option of positioning suggestions absolutely.
  */
 .timelionSearchInputContainer {
   flex: 1 1 auto;
   display: flex;
   flex-direction: column; /* 1 */
+  position: relative; /* 2 */
 }
 
 .timelion-container {
@@ -95,19 +97,6 @@
   opacity: 0.50;
 }
 
-.timelion-interval-custom {
-  width: 60px;
-}
-
-.timelion-interval-presets {
-  width: 90px;
-}
-
-.timelion-interval-presets-compact {
-  width: 10px;
-  padding-left: 0;
-}
-
 timelion-interval {
   display: flex;
 }

src/core_plugins/timelion/public/directives/timelion_expression_input.html

@@ -18,5 +18,6 @@
     suggestions="functionSuggestions.list"
     selected-index="functionSuggestions.index"
     on-click-suggestion="onClickSuggestion(suggestionIndex)"
+    should-popover="shouldPopoverSuggestions"
   ></timelion-expression-suggestions>
 </div>

src/core_plugins/timelion/public/directives/timelion_expression_input.js

@@ -44,6 +44,7 @@ app.directive('timelionExpressionInput', function ($http, $timeout) {
       rows: '=',
       sheet: '=',
       updateChart: '&',
+      shouldPopoverSuggestions: '@',
     },
     replace: true,
     template: timelionExpressionInputTemplate,

src/core_plugins/timelion/public/directives/timelion_expression_suggestions/timelion_expression_suggestions.html

@@ -1,5 +1,6 @@
 <div
   class="suggestions"
+  ng-class="{ 'suggestions-isPopover': shouldPopover === 'true' }"
   data-suggestions-list
 >
   <div

src/core_plugins/timelion/public/directives/timelion_expression_suggestions/timelion_expression_suggestions.js

@@ -9,6 +9,7 @@ app.directive('timelionExpressionSuggestions', () => {
       suggestions: '=',
       selectedIndex: '=',
       onClickSuggestion: '&',
+      shouldPopover: '=',
     },
     replace: true,
     template,

src/core_plugins/timelion/public/directives/timelion_interval/timelion_interval.html

@@ -1,14 +1,12 @@
 <input
   input-focus
-  class="kuiTextInput"
+  class="kuiTextInput timelion-interval-custom"
   ng-show="interval === 'other'"
-  ng-class="{'timelion-interval-custom ': inHeader}"
+  ng-class="{ 'timelion-interval-custom-compact': interval === 'other' }"
   ng-model="otherInterval"
->
-
-<select
-  class="timelion-interval-presets kuiSelect"
+><select
+  class="kuiSelect timelion-interval-presets"
   ng-options="intervalOption for intervalOption in intervalOptions"
-  ng-class="{'timelion-interval-presets-compact': interval === 'other'}"
+  ng-class="{ 'timelion-interval-presets-compact': interval === 'other' }"
   ng-model="interval"
 ></select>

src/core_plugins/timelion/public/index.html

@@ -24,14 +24,15 @@
       <form
         role="form"
         ng-submit="search()"
-        class="kuiFieldGroup kuiVerticalRhythm"
+        class="kuiFieldGroup kuiFieldGroup--alignTop kuiVerticalRhythm"
       >
         <div class="kuiFieldGroupSection kuiFieldGroupSection--wide">
           <div class="kuiLocalSearch timelionLocalSearch">
             <timelion-expression-input
               sheet="state.sheet[state.selected]"
               rows="1"
               update-chart="search()"
+              should-popover-suggestions="true"
             ></timelion-expression-input>
           </div>
         </div>

src/core_plugins/timelion/public/suggestions.less

@@ -34,4 +34,9 @@
       margin-bottom: 0px;
     }
   }
+
+  &.suggestions-isPopover {
+    position: absolute;
+    top: 100%;
+  }
 }

src/core_plugins/timelion/public/vis/timelion_vis_params.html

@@ -7,16 +7,14 @@
   </div>
 
   <div class="form-group">
-    <div class="timelion-vis-editor-expression">
-      <div>
-        <label>Timelion Expression</label>
-      </div>
-
-      <timelion-expression-input
-        sheet="vis.params.expression"
-        rows="9"
-      ></timelion-expression-input>
+    <div>
+      <label>Timelion Expression</label>
     </div>
+
+    <timelion-expression-input
+      sheet="vis.params.expression"
+      rows="9"
+    ></timelion-expression-input>
   </div>
 
 </div>

ui_framework/components/form_layout/_field_group.scss

@@ -6,7 +6,13 @@
   align-items: center; /* 1 */
 }
 
+.kuiFieldGroup--alignTop {
+  align-items: flex-start;
+}
+
 .kuiFieldGroupSection {
+  line-height: $globalLineHeight;
+
   & + & {
     margin-left: 10px;
   }

ui_framework/dist/ui_framework.css

@@ -1034,8 +1034,16 @@ body {
           align-items: center;
   /* 1 */ }
 
-.kuiFieldGroupSection + .kuiFieldGroupSection {
-  margin-left: 10px; }
+.kuiFieldGroup--alignTop {
+  -webkit-box-align: start;
+  -webkit-align-items: flex-start;
+      -ms-flex-align: start;
+          align-items: flex-start; }
+
+.kuiFieldGroupSection {
+  line-height: 1.5; }
+  .kuiFieldGroupSection + .kuiFieldGroupSection {
+    margin-left: 10px; }
 
 .kuiFieldGroupSection--wide {
   -webkit-box-flex: 1;

ui_framework/doc_site/src/views/form_layout/field_group.html

@@ -18,6 +18,8 @@
   </div>
 </div>
 
+<br>
+
 <div class="kuiFieldGroup">
   <div class="kuiFieldGroupSection">
     <input
@@ -34,6 +36,27 @@
   </div>
 </div>
 
+<br>
+
+<div class="kuiFieldGroup kuiFieldGroup--alignTop">
+  <div class="kuiFieldGroupSection">
+    <textarea
+      class="kuiTextArea"
+      placeholder="http://"
+      type="text"
+      rows="5"
+    ></textarea>
+  </div>
+
+  <div class="kuiFieldGroupSection">
+    <button class="kuiButton kuiButton--primary">
+      Ping
+    </button>
+  </div>
+</div>
+
+<br>
+
 <div class="kuiFieldGroup">
   <div class="kuiFieldGroupSection">
     <input