Vis LESS to SASS (cont.) (#23199) (#23330)

2018-09-19 16:28:33 -04:00 · 2018-09-19 16:28:33 -04:00 · 4beb2c604e
commit 4beb2c604e
parent 4e7d0305ff
42 changed files with 189 additions and 290 deletions
--- a/src/core_plugins/kbn_vislib_vis_types/public/controls/gauge_options.html
+++ b/src/core_plugins/kbn_vislib_vis_types/public/controls/gauge_options.html
@ -123,7 +123,7 @@

    <div id="gaugeOptionsRanges" ng-show="showColorRange" class="kuiSideBarCollapsibleSection">
      <div class="kuiSideBarSection">
-        <table class="vis-editor-agg-editor-ranges form-group" ng-show="editorState.params.gauge.colorsRange.length">
+        <table class="visEditorAgg__rangesTable form-group" ng-show="editorState.params.gauge.colorsRange.length">
          <tr>
            <th scope="col">
              <label id="gaugeOptionsCustomRangeFrom">From</label>
--- a/src/core_plugins/kbn_vislib_vis_types/public/controls/heatmap_options.html
+++ b/src/core_plugins/kbn_vislib_vis_types/public/controls/heatmap_options.html
@ -118,7 +118,7 @@
      <div class="kuiSideBarSection">
        <table
          data-test-subj="heatmapCustomRangesTable"
-          class="vis-editor-agg-editor-ranges form-group"
+          class="visEditorAgg__rangesTable form-group"
          ng-show="editorState.params.colorsRange.length">
          <tr>
            <th scope="col">
--- a/src/core_plugins/markdown_vis/public/markdown_vis.less
+++ b/src/core_plugins/markdown_vis/public/markdown_vis.less
@ -1,30 +1,8 @@
-@import (reference) "~ui/styles/mixins.less";
-
 .markdown-vis {
  padding: 1em;
  width: 100%;
 }

-.visEditor {
-
-  &.visEditor--markdown {
-
-    .visualization-options {
-      .flex-parent();
-      flex: 1 1 auto;
-    }
-
-    .markdown-vis-options {
-      .flex-parent();
-      flex: 1 1 auto;
-
-      textarea {
-        flex: 1 1 auto;
-        resize: none;
-      }
-
-    }
-
-  }
-
+#markdownVisInput {
+  resize: none;
 }
--- a/src/core_plugins/markdown_vis/public/markdown_vis_params.html
+++ b/src/core_plugins/markdown_vis/public/markdown_vis_params.html
@ -1,20 +1,20 @@
 <div class="kuiSideBarSection">
-  <div class="markdown-vis-options form-group">
-    <div>
+  <div class="form-group">
+    <div class="clearfix form-group">
      <label
+        class="pull-left"
        for="markdownVisInput"
        i18n-id="markdownVis.params.markdownLabel"
        i18n-default-message="Markdown"
-      >
-      </label>
+      ></label>
      <small class="pull-right">
        <a target="_window" href="https://help.github.com/articles/github-flavored-markdown/">
+          <icon aria-hidden="true" size="'s'" type="'link'"></icon>
          <span
            i18n-id="markdownVis.params.helpLinkLabel"
            i18n-default-message="Help"
          >
          </span>
-          <i aria-hidden="true" class="fa fa-link"></i>
        </a>
      </small>
    </div>
--- a/src/core_plugins/metric_vis/public/metric_vis_params.html
+++ b/src/core_plugins/metric_vis/public/metric_vis_params.html
@ -41,7 +41,7 @@

    <div id="metricOptionsRanges" ng-show="showColorRange" class="kuiSideBarCollapsibleSection">
      <div class="kuiSideBarSection">
-        <table class="vis-editor-agg-editor-ranges form-group" ng-show="editorState.params.metric.colorsRange.length">
+        <table class="visEditorAgg__rangesTable form-group" ng-show="editorState.params.metric.colorsRange.length">
          <tr>
            <th>
              <label id="metricOptionsCustomRangeFrom">From</label>
--- a/src/core_plugins/region_map/public/region_map.less
+++ b/src/core_plugins/region_map/public/region_map.less
@ -4,4 +4,11 @@
  left: 0;
  width: 100%;
  height: 100%;
+
+}
+
+region_map-vis-params {
+  .ems-hotlink {
+    font-size: 10px;
+  }
 }
--- a/src/core_plugins/region_map/public/region_map_vis_params.html
+++ b/src/core_plugins/region_map/public/region_map_vis_params.html
@ -21,15 +21,15 @@
      </div>
    </div>

-    <div class="kuiSideBarFormRow" ng-hide="!editorState.params.emsHotLink">
+    <div class="form-group clearfix" ng-hide="!editorState.params.emsHotLink">
        <a
-          class="ems-hotlink"
+          class="ems-hotlink pull-right"
          target="_blank"
          rel="noopener noreferrer"
          ng-href="{{editorState.params.emsHotLink}}"
          target="_blank"
          title="Preview {{editorState.params.selectedLayer.name}} on the Elastic Maps Service"
-        >Preview on EMS
+        ><icon aria-hidden size="'s'" type="'link'" /> Preview on EMS
        </a>
    </div>

--- a/src/core_plugins/tile_map/public/editors/tile_map_vis_params.html
+++ b/src/core_plugins/tile_map/public/editors/tile_map_vis_params.html
@ -33,7 +33,7 @@
      <label>
        Cluster size
      </label>
-      <div class="vis-editor-agg-form-row">
+      <div class="visEditorAgg__formRow--flex">
        <input
          name="heatClusterSize"
          ng-model="editorState.params.heatClusterSize"
@ -44,7 +44,7 @@
          max="3.0"
          step="0.1"
          >
-        <div class="vis-editor-agg-form-value">
+        <div class="visEditorAgg__sliderValue">
          {{editorState.params.heatClusterSize}}
        </div>
      </div>
--- a/src/ui/public/agg_types/controls/date_ranges.html
+++ b/src/ui/public/agg_types/controls/date_ranges.html
@ -1,5 +1,5 @@
 <div>
-    <table class="vis-editor-agg-editor-ranges form-group" ng-show="agg.params.ranges.length">
+    <table class="visEditorAgg__rangesTable form-group" ng-show="agg.params.ranges.length">
      <tr>
        <th scope="col">
          <label id="visEditorDateRangeFrom{{agg.id}}">From</label>
--- a/src/ui/public/agg_types/controls/extended_bounds.html
+++ b/src/ui/public/agg_types/controls/extended_bounds.html
@ -9,7 +9,7 @@
      ></icon-tip>
    </label>
  </div>
-  <div class="vis-editor-agg-form-row">
+  <div class="visEditorAgg__formRow--flex">
    <div class="form-group">
      <label
        id="extendedBoundsMinLabel{{agg.id}}"
--- a/src/ui/public/agg_types/controls/field.html
+++ b/src/ui/public/agg_types/controls/field.html
@ -7,7 +7,7 @@
    title="Aggregation Field"
    name="field"
    required
-    class="vis-editor-field-ui-select field-select"
+    class="visEditorAggSelect__select field-select"
    ng-show="indexedFields.length"
    ng-model="agg.params.field"
    on-select="aggParam.onChange(agg)"
@ -23,7 +23,7 @@
    >
      <div
        data-test-subj="{{field.displayName}}"
-        class="vis-editor-field-ui-select__field-entry"
+        class="eui-textTruncate"
        ng-bind-html="field.displayName | highlight: $select.search"
        title="{{field.displayName}}"
      ></div>
--- a/src/ui/public/agg_types/controls/filters.html
+++ b/src/ui/public/agg_types/controls/filters.html
@ -1,12 +1,12 @@
 <div class="form-group">
  <div ng-repeat="filter in agg.params.filters">
-    <div class="vis-editor-agg-header">
-      <label for="visEditorFilterInput{{agg.id}}">
+    <div class="visEditorAggHeader">
+      <label class="visEditorAggHeader__title visEditorAggHeader__title--grow" for="visEditorFilterInput{{agg.id}}">
          Filter {{$index + 1}}
          <span ng-if="filter.label">- {{ filter.label }}</span>
      </label>

-      <div class="kuiButtonGroup kuiButtonGroup--united">
+      <div class="visEditorAggHeader__controls kuiButtonGroup kuiButtonGroup--united">
        <button
          ng-click="showConfig = !showConfig"
          type="button"
--- a/src/ui/public/agg_types/controls/ip_ranges.html
+++ b/src/ui/public/agg_types/controls/ip_ranges.html
@ -8,7 +8,7 @@
  <div class="euiSpacer euiSpacer--s"></div>

  <div ng-show="agg.params.ipRangeType != 'mask'">
-    <table class="vis-editor-agg-editor-ranges form-group" ng-show="agg.params.ranges.fromTo.length">
+    <table class="visEditorAgg__rangesTable form-group" ng-show="agg.params.ranges.fromTo.length">
      <tr>
        <th scope="col">
          <label id="visEditorIpRangeFromLabel{{agg.id}}">From</label>
@ -66,7 +66,7 @@
  </div>

  <div ng-show="agg.params.ipRangeType == 'mask'">
-    <table class="vis-editor-agg-editor-ranges form-group" ng-show="agg.params.ranges.mask.length">
+    <table class="visEditorAgg__rangesTable form-group" ng-show="agg.params.ranges.mask.length">
      <tr>
        <th scope="col">
          <label id="visEditorIpRangeCidrLabel{{agg.id}}">CIDR Mask</label>
--- a/src/ui/public/agg_types/controls/order_agg.html
+++ b/src/ui/public/agg_types/controls/order_agg.html
@ -23,7 +23,7 @@
      </option>
    </select>
  </div>
-  <div ng-show="agg.params.orderAgg" class="vis-editor-agg-order-agg">
+  <div ng-show="agg.params.orderAgg" class="visEditorAgg__subAgg">
    <vis-editor-agg-params
      index-pattern="agg.getIndexPattern()"
      agg="agg.params.orderAgg"
--- a/src/ui/public/agg_types/controls/order_and_size.html
+++ b/src/ui/public/agg_types/controls/order_and_size.html
@ -1,5 +1,5 @@
 <div>
-  <div class="vis-editor-agg-form-row">
+  <div class="visEditorAgg__formRow--flex">
    <div ng-if="agg.type.params.byName.order" class="form-group">
      <label for="visEditorOrderByOrder{{agg.id}}">Order</label>
      <select
--- a/src/ui/public/agg_types/controls/other_bucket.html
+++ b/src/ui/public/agg_types/controls/other_bucket.html
@ -1,5 +1,5 @@
 <div>
-  <div class="vis-editor-agg-form-row">
+  <div class="visEditorAgg__formRow--flex">
    <div class="form-group">
      <label>
        <input
@ -16,7 +16,7 @@
      </label>
    </div>
  </div>
-  <div class="vis-editor-agg-form-row" ng-if="agg.params.otherBucket">
+  <div class="visEditorAgg__formRow--flex" ng-if="agg.params.otherBucket">
    <div class="form-group">
      <label>
        Label for other bucket
@ -30,7 +30,7 @@
      </div>
    </div>
  </div>
-  <div class="vis-editor-agg-form-row">
+  <div class="visEditorAgg__formRow--flex">
    <div class="form-group">
      <label>
        <input
@ -48,7 +48,7 @@
      </label>
    </div>
  </div>
-  <div class="vis-editor-agg-form-row" ng-show="agg.params.missingBucket">
+  <div class="visEditorAgg__formRow--flex" ng-show="agg.params.missingBucket">
    <div class="form-group">
      <label>
        Label for missing values
--- a/src/ui/public/agg_types/controls/precision.html
+++ b/src/ui/public/agg_types/controls/precision.html
@ -1,7 +1,7 @@
-<div class="vis-editor-agg-form-row" ng-controller="agg.type.params.byName.precision.controller">
+<div class="visEditorAgg__formRow--flex" ng-controller="agg.type.params.byName.precision.controller">
  <div ng-if="!agg.params.autoPrecision" class="form-group">
    <label for="visEditorMapPrecision{{agg.id}}">Precision</label>
-    <div class="vis-editor-agg-form-row">
+    <div class="visEditorAgg__formRow--flex">
      <input
        id="visEditorMapPrecision{{agg.id}}"
        name="precision"
@ -12,14 +12,14 @@
        min="1"
        max="{{config.get('visualization:tileMap:maxPrecision')}}"
        >
-      <div class="form-group vis-editor-agg-form-value">
+      <div class="visEditorAgg__sliderValue">
        {{agg.params.precision}}
      </div>
    </div>
  </div>
 </div>

-<div class="vis-option-item">
+<div>
  <label>
    <input type="checkbox"
    name="autoPrecision"
@ -28,7 +28,7 @@
  </label>
 </div>

-<div class="vis-option-item">
+<div>
  <label>
    <input type="checkbox"
           name="useGeocentroid"
@ -37,7 +37,7 @@
  </label>
 </div>

-<div class="vis-option-item">
+<div>
  <label>
    <input
      type="checkbox"
--- a/src/ui/public/agg_types/controls/ranges.html
+++ b/src/ui/public/agg_types/controls/ranges.html
@ -1,4 +1,4 @@
-<table class="vis-editor-agg-editor-ranges form-group" ng-show="agg.params.ranges.length">
+<table class="visEditorAgg__rangesTable form-group" ng-show="agg.params.ranges.length">
  <tr>
    <th scope="col">
      <label id="visEditorRangeFrom{{agg.id}}">From</label>
--- a/src/ui/public/agg_types/controls/sub_agg.html
+++ b/src/ui/public/agg_types/controls/sub_agg.html
@ -22,7 +22,7 @@
      </option>
    </select>
  </div>
-  <div ng-if="agg.params.metricAgg === 'custom'" class="vis-editor-agg-order-agg">
+  <div ng-if="agg.params.metricAgg === 'custom'" class="visEditorAgg__subAgg">
    <ng-form name="customMetricForm">
      <vis-editor-agg-params
        index-pattern="agg.getIndexPattern()"
--- a/src/ui/public/agg_types/controls/sub_metric.html
+++ b/src/ui/public/agg_types/controls/sub_metric.html
@ -1,7 +1,7 @@
 <div ng-controller="aggParam.controller">
  <div class="form-group" ng-if="agg.params[aggType]">
    <label>{{aggTitle}}</label>
-    <div class="vis-editor-agg-order-agg">
+    <div class="visEditorAgg__subAgg">
      <ng-form name="{{aggType}}Form">
        <vis-editor-agg-params
          agg="agg.params[aggType]"
--- a/src/ui/public/agg_types/controls/top_aggregate_and_size.html
+++ b/src/ui/public/agg_types/controls/top_aggregate_and_size.html
@ -1,5 +1,5 @@
-<div ng-controller="aggParam.controller" class="vis-editor-agg-form-row">
-  <div class="form-group vis-editor-agg-form-row__even-split">
+<div ng-controller="aggParam.controller" class="visEditorAgg__formRow--flex">
+  <div class="form-group visEditorAgg__formRow--split">
    <label for="visEditorTopHitsAggregate{{agg.id}}">
      Aggregate with
      <icon-tip
@ -16,7 +16,7 @@
      class="form-control"
    ></select>
  </div>
-  <div class="form-group vis-editor-agg-form-row__even-split">
+  <div class="form-group visEditorAgg__formRow--split">
    <label for="visEditorTopHitsSize{{agg.id}}">
      Size
      <icon-tip
--- a/src/ui/public/agg_types/controls/top_sort.html
+++ b/src/ui/public/agg_types/controls/top_sort.html
@ -7,7 +7,7 @@
    name="field"
    sortField
    title="Sort on"
-    class="vis-editor-field-ui-select"
+    class="visEditorAggSelect__select"
    ng-show="sortFieldOptions.length"
    ng-model="agg.params.sortField"
    uis-open-close="limit = 100"
--- a/src/ui/public/vis/_index.scss
+++ b/src/ui/public/vis/_index.scss
@ -1 +1,2 @@
+@import './editors/components/index';
@import './editors/default/index';
--- a/src/ui/public/vis/editors/components/snapshots/editor_options_group.test.js.snap
+++ b/src/ui/public/vis/editors/components/snapshots/editor_options_group.test.js.snap
@ -2,7 +2,7 @@

 exports[`<EditorOptionsGroup/> renders as expected 1`] = `
 <div
-  class="euiPanel euiPanel--paddingMedium euiPanel--flexGrowZero editorOptionsGroup__panel"
+  class="euiPanel euiPanel--paddingMedium euiPanel--flexGrowZero visEditorOptionsGroup__panel"
 >
  <div
    class="euiAccordion euiAccordion-isOpen"
@ -84,7 +84,7 @@ exports[`<EditorOptionsGroup/> renders as expected 1`] = `

 exports[`<EditorOptionsGroup/> renders as expected with actions 1`] = `
 <div
-  class="euiPanel euiPanel--paddingMedium euiPanel--flexGrowZero editorOptionsGroup__panel"
+  class="euiPanel euiPanel--paddingMedium euiPanel--flexGrowZero visEditorOptionsGroup__panel"
 >
  <div
    class="euiAccordion euiAccordion-isOpen"
@ -193,7 +193,7 @@ exports[`<EditorOptionsGroup/> renders as expected with actions 1`] = `

 exports[`<EditorOptionsGroup/> renders as expected with initial collapsed 1`] = `
 <div
-  class="euiPanel euiPanel--paddingMedium euiPanel--flexGrowZero editorOptionsGroup__panel"
+  class="euiPanel euiPanel--paddingMedium euiPanel--flexGrowZero visEditorOptionsGroup__panel"
 >
  <div
    class="euiAccordion"
--- a/src/ui/public/vis/editors/components/_editor_options_group.scss
+++ b/src/ui/public/vis/editors/components/_editor_options_group.scss
@ -0,0 +1,3 @@
+.visEditorOptionsGroup__panel + .visEditorOptionsGroup__panel {
+  margin-top: $euiSizeS;
+}
--- a/src/ui/public/vis/editors/components/_index.scss
+++ b/src/ui/public/vis/editors/components/_index.scss
@ -0,0 +1 @@
+@import './editor_options_group';
--- a/src/ui/public/vis/editors/components/editor_options_group.js
+++ b/src/ui/public/vis/editors/components/editor_options_group.js
@ -20,8 +20,6 @@
 import React from 'react';
 import PropTypes from 'prop-types';

-import './editor_options_group.less';
-
 import {
  EuiAccordion,
  EuiPanel,
@ -40,7 +38,7 @@ function EditorOptionsGroup(props) {
  return (
    <EuiPanel
      grow={false}
-      className="editorOptionsGroup__panel"
+      className="visEditorOptionsGroup__panel"
    >
      <EuiAccordion
        id={htmlIdGenerator('eog')()}
--- a/src/ui/public/vis/editors/components/editor_options_group.less
+++ b/src/ui/public/vis/editors/components/editor_options_group.less
@ -1,3 +0,0 @@
-.editorOptionsGroup__panel + .editorOptionsGroup__panel {
-  margin-top: 8px;
-}
--- a/src/ui/public/vis/editors/default/_agg.scss
+++ b/src/ui/public/vis/editors/default/_agg.scss
@ -1,8 +1,6 @@
-.indented {
-  margin-left: 2em;
-}
+// Entire container -- found in agg_group.html

-.vis-editor-agg {
+.visEditorAgg {
  @include flex-parent();
  width: 100%;
  max-width: 100%;
@ -11,90 +9,67 @@
  flex-basis: 100%;
 }

-// wraps the .vis-editor-agg
-.vis-editor-agg-wrapper {
-  display: flex;
-}
+//
+// Header -- found in agg.html
+//

-vis-editor-agg-group {
-  @include flex-parent(0, 1, auto);
-}
-
-.vis-editor-agg-group {
-  @include flex-parent(0, 1, auto);
-  color: $euiColorDarkShade;
-}
-
-.vis-editor-agg-header {
+.visEditorAggHeader {
  display: flex;
  align-items: center;
  flex: 1 0 auto;
  margin-bottom: $vis-editor-agg-editor-spacing;
 }

-.vis-editor-agg-header-toggle {
+.visEditorAggHeader__toggle {
  flex: 0 0 auto;
  margin-right: $vis-editor-agg-editor-spacing;
-  min-width: 22px;
-  min-height: 22px;
+  min-width: $euiSizeL;
+  min-height: $euiSizeL;
  text-align: center;
 }

-.vis-editor-agg-header-subagg-icon {
-  flex: 0 1 auto;
-  padding-right: 5px;
-}
-
-.vis-editor-agg-header-title {
+.visEditorAggHeader__title {
  flex: 0 0 auto;
-  @include euiTextTruncate;
  font-weight: $euiFontWeightBold;
+  @include euiTextTruncate;
 }

-.vis-editor-agg-header-title--grow {
+.visEditorAggHeader__title--grow {
  flex-grow: 1;
 }

-.vis-editor-agg-header-description {
-  font-weight: normal;
-  padding-right: $vis-editor-agg-editor-spacing;
-  padding-left: 5px;
-  @include euiTextTruncate;
+.visEditorAggHeader__description {
  flex: 1 1 0;
-
-  &.danger {
-    color: $euiColorDanger;
-    font-weight: bold;
-  }
+  font-weight: $euiFontWeightRegular;
+  padding-right: $vis-editor-agg-editor-spacing;
+  padding-left: $euiSizeXS;
+  @include euiTextTruncate;
 }

-.vis-editor-agg-header-controls {
+.visEditorAggHeader__description--danger {
+  color: $euiColorDanger;
+  font-weight: $euiFontWeightBold;
+}
+
+.visEditorAggHeader__controls {
  flex: 0 0 auto;
 }

-.vis-editor-agg-error {
-  margin: $vis-editor-agg-editor-spacing 0;
-  padding: $vis-editor-agg-editor-spacing;
-  text-align: center;
-  background: $euiColorDanger;
-  color: $euiColorEmptyShade;
-  line-height: 1.5;
-}
+//
+// Misc elements -- found in agg_types/controls/*.html
+//

-.vis-editor-agg-editor-ranges {
+.visEditorAgg__rangesTable {
  td {
    padding: 0 $vis-editor-agg-editor-spacing $vis-editor-agg-editor-spacing 0;
+
    &:last-child {
      padding-right: 0;
    }
  }
 }

-.vis-editor-agg-editor-advanced-toggle {
-  text-align: right;
-}
-
-.vis-editor-agg-form-row {
+.visEditorAgg__formRow--flex {
  display: flex;

  > * {
@ -110,92 +85,21 @@ vis-editor-agg-group {
 /**
  * 1. Hack to split child elements evenly.
  */
-.vis-editor-agg-form-row__even-split {
+.visEditorAgg__formRow--split {
  flex: 1 1 0 !important; /* 1 */
 }

-.vis-editor-agg-form-value {
+.visEditorAgg__sliderValue {
  align-self: center;
  margin: 0 0 0 $vis-editor-agg-editor-spacing;
-  font-size: 1.2em;
+  @include euiFontSize;
 }

-.vis-editor-agg-wide-btn {
-  text-align: center;
-}
-
-.vis-editor-agg-wide-btn-add {
-  width: 140px;
-  margin: -2px auto 5px auto;
-  text-align: center;
-  border: 2px solid;
-  border-color: $euiColorLightShade;
-  border-top: 0px;
-  padding: 3px;
-  border-bottom-right-radius: $euiBorderRadius;
-  border-bottom-left-radius: $euiBorderRadius;
-  background-color: $euiColorEmptyShade;
-  font-weight: $euiFontWeightBold;
-
-  &:hover {
-    color: $euiColorDarkestShade;
-    background-color: $euiColorLightShade;
-  }
-}
-
-.vis-editor-agg-add {
-  @include flex-parent();
-}
-
-.vis-editor-agg-add-schemas {
-  margin-bottom: 10px;
-}
-
-.vis-editor-agg-order-agg {
+.visEditorAgg__subAgg {
  border: 2px solid;
  border-color: $euiColorLightShade;
  border-radius: $euiBorderRadius;
  background-color: transparent;
-  margin: $vis-editor-agg-editor-spacing;
+  margin: $vis-editor-agg-editor-spacing 0;
  padding: $vis-editor-agg-editor-spacing;
 }
-
-/**
-* 1. Show invalid state if the user has interacted with the input without selecting an option.
-*/
-.vis-editor-field-ui-select {
-
-  .ui-select-match-text,
-  .vis-editor-field-ui-select__field-entry {
-    @include euiTextTruncate;
-  }
-
-  &.ng-invalid.ng-dirty,
-  &.ng-invalid.ng-touched {
-    .ui-select-match {
-      .btn {
-        border-color: $euiColorDanger; /* 1 */
-      }
-    }
-  }
-}
-
-vis-editor-agg,
-vis-editor-agg-params,
-vis-editor-agg-param,
-vis-editor-vis-options,
-vis-editor-vis-options > * {
-  @include flex-parent();
-}
-
-.vis-editor-config .ems-hotlink {
-  font-size: $euiFontSizeXS; // 12px
-}
-
-.agg-select-label {
-  display: inline !important;
-}
-
-.agg-select-help {
-  float: right;
-}
--- a/src/ui/public/vis/editors/default/_agg_group.scss
+++ b/src/ui/public/vis/editors/default/_agg_group.scss
@ -0,0 +1,19 @@
+.visEditorAggGroup__wrapper {
+  border-top: 0 !important; // override .sidebar-item
+  padding: $euiSizeM;
+  border-radius: $euiBorderRadius;
+  margin-bottom: $vis-editor-agg-editor-spacing;
+  background: $euiColorEmptyShade;
+}
+
+.visEditorAggGroup__title {
+  @include euiFontSizeL;
+  margin-bottom: $vis-editor-agg-editor-spacing !important;
+  padding: 0px !important;
+  text-transform: capitalize;
+}
+
+.visEditorAggGroup {
+  // wraps the .vis-editor-agg
+  color: $euiColorDarkShade;
+}
--- a/src/ui/public/vis/editors/default/_agg_params.scss
+++ b/src/ui/public/vis/editors/default/_agg_params.scss
@ -0,0 +1,12 @@
+.visEditorAggParam__error {
+  margin: $vis-editor-agg-editor-spacing 0;
+  padding: $vis-editor-agg-editor-spacing;
+  text-align: center;
+
+  // Calculate error colors
+  $backgroundColor: tintOrShade($euiColorDanger, 90%, 70%);
+  $textColor: makeHighContrastColor($euiColorDanger, $backgroundColor);
+
+  color: $textColor;
+  background-color: $backgroundColor;
+}
--- a/src/ui/public/vis/editors/default/_agg_select.scss
+++ b/src/ui/public/vis/editors/default/_agg_select.scss
@ -0,0 +1,18 @@
+/**
+* 1. Show invalid state if the user has interacted with the input without selecting an option.
+*/
+.visEditorAggSelect__select {
+
+  .ui-select-match-text {
+    @include euiTextTruncate;
+  }
+
+  &.ng-invalid.ng-dirty,
+  &.ng-invalid.ng-touched {
+    .ui-select-match {
+      .btn {
+        border-color: $euiColorDanger; /* 1 */
+      }
+    }
+  }
+}
--- a/src/ui/public/vis/editors/default/_index.scss
+++ b/src/ui/public/vis/editors/default/_index.scss
@ -9,17 +9,6 @@ $vis-editor-resizer-width: $euiSizeM;

 // Components
@import './agg';
-
-.visualization-options {
-
-  .form-group {
-    margin-bottom: $vis-editor-agg-editor-spacing;
-  }
-  .form-horizontal .control-label {
-    text-align: left;
-  }
-
-  .kuiSideBarSelect {
-    width: 100%;
-  }
-}
+@import './agg_group';
+@import './agg_params';
+@import './agg_select';
--- a/src/ui/public/vis/editors/default/_sidebar.scss
+++ b/src/ui/public/vis/editors/default/_sidebar.scss
@ -1,3 +1,7 @@
+//
+// LAYOUT
+//
+
 .visEditorSidebar__container {
  @include flex-parent(1, 1, auto);
  background-color: $euiColorLightestShade;
@ -5,12 +9,21 @@

 .visEditorSidebar__form {
  @include flex-parent(1, 1, auto);
+}

-  > .vis-edit-sidebar-buttons {
-    flex: 0 0 auto;
+.visEditorSidebar__config {
+  padding: $euiSizeS;
+
+  @include euiBreakpoint('l', 'xl') {
+    @include flex-parent(1, 1, 1px);
+    overflow: auto;
  }
 }

+//
+// NAVIGATION
+//
+
 .visEditorSidebar__indexPattern,
 .visEditorSidebar__nav {
  min-height: auto;
@ -44,7 +57,6 @@
  }
 }

-
 /**
 * 1. TODO: Override bootstrap styles. Remove !important once we're rid of bootstrap.
 */
@ -62,41 +74,3 @@
  line-height: $euiSize;
 }

-.visEditorSidebar__config {
-  @include flex-parent(1, 1, auto);
-  padding: 10px;
-
-  @include euiBreakpoint('l', 'xl') {
-    @include flex-parent(1, 1, 1px);
-    overflow: auto;
-  }
-
-  .ems-hotlink {
-    font-size: $euiFontSizeXS;
-  }
-}
-
-vis-editor-agg-group {
-  @include flex-parent(0, 1, auto);
-
-  .sidebar-item {
-    border-top: 0 !important;
-    padding: $euiSizeM;
-    border-radius: $euiBorderRadius;
-    margin-bottom: $vis-editor-agg-editor-spacing;
-    background: $euiColorEmptyShade;
-  }
-
-  .sidebar-item-title {
-    font-size: $euiFontSizeL;
-    border: inherit !important;
-    margin-bottom: $vis-editor-agg-editor-spacing !important;
-    padding: 0px !important;
-    text-transform: capitalize;
-  }
-}
-
-vis-editor-vis-options,
-vis-editor-vis-options > * {
-  @include flex-parent();
-}
--- a/src/ui/public/vis/editors/default/advanced_toggle.html
+++ b/src/ui/public/vis/editors/default/advanced_toggle.html
@ -1,6 +1,6 @@
-<div class="vis-editor-agg-editor-advanced-toggle">
+<div class="eui-textRight">
  <a ng-click="advancedToggled = !advancedToggled">
    <i aria-hidden="true" class="fa fa-caret-down" ng-class="{'fa-caret-down': advancedToggled, 'fa-caret-left': !advancedToggled}"></i>
    Advanced
  </a>
-</div>
+</div>
--- a/src/ui/public/vis/editors/default/agg.html
+++ b/src/ui/public/vis/editors/default/agg.html
@ -1,5 +1,5 @@
 <!-- header -->
-<div class="vis-editor-agg-header">
+<div class="visEditorAggHeader">

  <!-- open/close editor -->
  <button
@ -9,27 +9,27 @@
    aria-controls="visAggEditorParams{{agg.id}}"
    type="button"
    data-test-subj="toggleEditor"
-    class="kuiButton kuiButton--primary kuiButton--small vis-editor-agg-header-toggle">
+    class="visEditorAggHeader__toggle kuiButton kuiButton--primary kuiButton--small">
    <i aria-hidden="true" ng-class="{ 'fa-caret-down': editorOpen, 'fa-caret-right': !editorOpen }" class="fa"></i>
  </button>

  <!-- title -->
-  <span class="vis-editor-agg-header-title" ng-class="{'vis-editor-agg-header-title--grow': editorOpen}">
+  <span class="visEditorAggHeader__title" ng-class="{'visEditorAggHeader__title--grow': editorOpen}">
    {{ agg.schema.title }}
  </span>

  <!-- description -->
-  <span ng-if="!editorOpen && aggForm.$valid" class="vis-editor-agg-header-description" title="{{describe()}}">
+  <span ng-if="!editorOpen && aggForm.$valid" class="visEditorAggHeader__description" title="{{describe()}}">
    {{ describe() }}
  </span>

  <!-- error -->
-  <span ng-if="!editorOpen && aggForm.$invalid" class="vis-editor-agg-header-description danger" title="{{aggForm.describeErrors()}}">
+  <span ng-if="!editorOpen && aggForm.$invalid" class="visEditorAggHeader__description visEditorAggHeader__description--danger" title="{{aggForm.describeErrors()}}">
    {{ aggForm.describeErrors() }}
  </span>

  <!-- controls !!!actually disabling buttons will break tooltips¡¡¡ -->
-  <div class="vis-editor-agg-header-controls kuiButtonGroup kuiButtonGroup--united">
+  <div class="visEditorAggHeader__controls kuiButtonGroup kuiButtonGroup--united">
    <!-- disable aggregation -->
    <button
      ng-if="agg.enabled && canRemove(agg)"
@ -94,12 +94,10 @@
  agg="agg"
  group-name="groupName"
  ng-show="editorOpen"
-  index-pattern="vis.indexPattern"
-  class="vis-editor-agg-editor">
+  index-pattern="vis.indexPattern">
 </vis-editor-agg-params>

 <vis-editor-agg-add
  ng-if="$index + 1 === stats.count"
-  ng-hide="dragging"
-  class="vis-editor-agg-add vis-editor-agg-add-subagg">
+  ng-hide="dragging">
 </vis-editor-agg-add>
--- a/src/ui/public/vis/editors/default/agg_add.html
+++ b/src/ui/public/vis/editors/default/agg_add.html
@ -1,6 +1,5 @@
-<div ng-show="add.form" class="vis-editor-agg-add-schemas">
+<div ng-show="add.form">
  <label>Select {{ groupName }} type</label>
-  <div class="euiSpacer euiSpacer--s"></div>
  <ul class="form-group list-group list-group-menu">
    <li
      tabindex="0"
@ -16,11 +15,13 @@
  </ul>
 </div>

+<div class="euiSpacer euiSpacer--s"></div>
+
 <div
  ng-if="stats.max > stats.count"
  ng-init="add.form = stats.count < 1 ? !add.form : add.form"
  ng-click="add.form = !add.form"
-  class="vis-editor-agg-wide-btn">
+  class="eui-textCenter">

  <div ng-if="!add.form">
    <button
--- a/src/ui/public/vis/editors/default/agg_group.html
+++ b/src/ui/public/vis/editors/default/agg_group.html
@ -1,14 +1,14 @@
-<div class="sidebar-item">
-  <div class="sidebar-item-title">
+<div class="sidebar-item visEditorAggGroup__wrapper">
+  <div class="sidebar-item-title visEditorAggGroup__title">
    {{ groupName }}
  </div>

-  <div ng-class="groupName" draggable-container="group" class="vis-editor-agg-group">
-    <div ng-repeat="agg in group track by agg.id" data-test-subj="aggregationEditor{{agg.id}}" draggable-item="agg" class="vis-editor-agg-wrapper">
+  <div ng-class="groupName" draggable-container="group" class="visEditorAggGroup">
+    <div ng-repeat="agg in group track by agg.id" data-test-subj="aggregationEditor{{agg.id}}" draggable-item="agg">
      <!-- agg.html - controls for aggregation -->
-      <ng-form vis-editor-agg name="aggForm" class="vis-editor-agg"></ng-form>
+      <ng-form vis-editor-agg name="aggForm" class="visEditorAgg"></ng-form>
    </div>

-    <vis-editor-agg-add ng-if="stats.count === 0" data-test-subj="addAggregationButton" class="vis-editor-agg-add"></vis-editor-agg-add>
+    <vis-editor-agg-add ng-if="stats.count === 0" data-test-subj="addAggregationButton"></vis-editor-agg-add>
  </div>
 </div>
--- a/src/ui/public/vis/editors/default/agg_params.html
+++ b/src/ui/public/vis/editors/default/agg_params.html
@ -1,5 +1,5 @@
 <div ng-if="aggIsTooLow" class="form-group">
-  <p class="vis-editor-agg-error">
+  <p class="visEditorAggParam__error">
    "{{ agg.schema.title }}" aggs must run before all other buckets!
  </p>
  <input
@ -11,16 +11,16 @@
 </div>

 <div ng-if="agg.error" class="form-group">
-  <p class="vis-editor-agg-error ng-binding">
+  <p class="visEditorAggParam__error ng-binding">
    {{agg.error}}
  </p>
 </div>

 <div ng-if="agg.schema.deprecate" class="form-group">
-  <p ng-show="agg.schema.deprecateMessage" class="vis-editor-agg-error">
+  <p ng-show="agg.schema.deprecateMessage" class="visEditorAggParam__error">
    {{ agg.schema.deprecateMessage }}
  </p>
-  <p ng-show="!agg.schema.deprecateMessage" class="vis-editor-agg-error">
+  <p ng-show="!agg.schema.deprecateMessage" class="visEditorAggParam__error">
    "{{ agg.schema.title }}" has been deprecated.
  </p>
 </div>
--- a/src/ui/public/vis/editors/default/agg_select.html
+++ b/src/ui/public/vis/editors/default/agg_select.html
@ -1,11 +1,11 @@
 <div class="form-group">
  <div>
-    <label ng-if="$index < 1 || groupName !== 'buckets'" class="agg-select-label">Aggregation</label>
-    <label ng-if="$index >= 1 && groupName === 'buckets'" class="agg-select-label">Sub Aggregation</label>
+    <label ng-if="$index < 1 || groupName !== 'buckets'" class="eui-displayInline">Aggregation</label>
+    <label ng-if="$index >= 1 && groupName === 'buckets'" class="eui-displayInline">Sub Aggregation</label>
    <a
      ng-if="aggHelpLink"
      href="{{aggHelpLink}}"
-      class="agg-select-help"
+      class="pull-right"
      target="_blank"
      rel="noopener noreferrer"
    >
@ -16,7 +16,7 @@
  <ui-select
    required
    name="agg"
-    class="vis-editor-field-ui-select agg-select"
+    class="visEditorAggSelect__select agg-select"
    data-test-subj="visEditorAggSelect"
    ng-model="agg.type"
  >
--- a/src/ui/public/vis/editors/default/vis_options.html
+++ b/src/ui/public/vis/editors/default/vis_options.html
@ -1,5 +1,4 @@
  <!-- Visualization and other editing UI gets inserted in here. -->
  <div
    data-visualization-options
-    class="visualization-options"
  ></div>
--- a/test/functional/page_objects/visualize_page.js
+++ b/test/functional/page_objects/visualize_page.js
@ -1134,7 +1134,7 @@ export function VisualizePageProvider({ getService, getPageObjects }) {
    }

    async getBucketErrorMessage() {
-      const error = await find.byCssSelector('.vis-editor-agg-error');
+      const error = await find.byCssSelector('.visEditorAggParam__error');
      const errorMessage = await error.getProperty('innerText');
      log.debug(errorMessage);
      return errorMessage;