From 0e9329d3f2db0347023789fe74d6db2439a23311 Mon Sep 17 00:00:00 2001
From: Caroline Horn <549577+cchaos@users.noreply.github.com>
Date: Wed, 19 Sep 2018 13:56:21 -0400
Subject: [PATCH] Vis LESS to SASS (cont.) (#23199)

---
 .../public/controls/gauge_options.html        |   2 +-
 .../public/controls/heatmap_options.html      |   2 +-
 .../markdown_vis/public/markdown_vis.less     |  26 +--
 .../public/markdown_vis_params.html           |  10 +-
 .../metric_vis/public/metric_vis_params.html  |   2 +-
 .../region_map/public/region_map.less         |   7 +
 .../public/region_map_vis_params.html         |   6 +-
 .../public/editors/tile_map_vis_params.html   |   4 +-
 .../agg_types/controls/date_ranges.html       |   2 +-
 .../agg_types/controls/extended_bounds.html   |   2 +-
 src/ui/public/agg_types/controls/field.html   |   4 +-
 src/ui/public/agg_types/controls/filters.html |   6 +-
 .../public/agg_types/controls/ip_ranges.html  |   4 +-
 .../public/agg_types/controls/order_agg.html  |   2 +-
 .../agg_types/controls/order_and_size.html    |   2 +-
 .../agg_types/controls/other_bucket.html      |   8 +-
 .../public/agg_types/controls/precision.html  |  12 +-
 src/ui/public/agg_types/controls/ranges.html  |   2 +-
 src/ui/public/agg_types/controls/sub_agg.html |   2 +-
 .../public/agg_types/controls/sub_metric.html |   2 +-
 .../controls/top_aggregate_and_size.html      |   6 +-
 .../public/agg_types/controls/top_sort.html   |   2 +-
 src/ui/public/vis/_index.scss                 |   1 +
 .../editor_options_group.test.js.snap         |   6 +-
 .../components/_editor_options_group.scss     |   3 +
 .../public/vis/editors/components/_index.scss |   1 +
 .../components/editor_options_group.js        |   4 +-
 .../components/editor_options_group.less      |   3 -
 src/ui/public/vis/editors/default/_agg.scss   | 160 ++++--------------
 .../vis/editors/default/_agg_group.scss       |  19 +++
 .../vis/editors/default/_agg_params.scss      |  12 ++
 .../vis/editors/default/_agg_select.scss      |  18 ++
 src/ui/public/vis/editors/default/_index.scss |  17 +-
 .../public/vis/editors/default/_sidebar.scss  |  56 ++----
 .../vis/editors/default/advanced_toggle.html  |   4 +-
 src/ui/public/vis/editors/default/agg.html    |  18 +-
 .../public/vis/editors/default/agg_add.html   |   7 +-
 .../public/vis/editors/default/agg_group.html |  12 +-
 .../vis/editors/default/agg_params.html       |   8 +-
 .../vis/editors/default/agg_select.html       |   8 +-
 .../vis/editors/default/vis_options.html      |   1 -
 .../functional/page_objects/visualize_page.js |   2 +-
 42 files changed, 187 insertions(+), 288 deletions(-)
 create mode 100644 src/ui/public/vis/editors/components/_editor_options_group.scss
 create mode 100644 src/ui/public/vis/editors/components/_index.scss
 delete mode 100644 src/ui/public/vis/editors/components/editor_options_group.less
 create mode 100644 src/ui/public/vis/editors/default/_agg_group.scss
 create mode 100644 src/ui/public/vis/editors/default/_agg_params.scss
 create mode 100644 src/ui/public/vis/editors/default/_agg_select.scss

diff --git 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
index add04d4ceec3d7..451d2d280e128f 100644
--- 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>
diff --git 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
index 00fd90a935c5ff..a427f32cdff7d7 100644
--- 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">
diff --git a/src/core_plugins/markdown_vis/public/markdown_vis.less b/src/core_plugins/markdown_vis/public/markdown_vis.less
index e3421982508495..e2bd489daa7501 100644
--- 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;
 }
diff --git a/src/core_plugins/markdown_vis/public/markdown_vis_params.html b/src/core_plugins/markdown_vis/public/markdown_vis_params.html
index dae00442726b9a..2167dca3e52bbc 100644
--- 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>
diff --git a/src/core_plugins/metric_vis/public/metric_vis_params.html b/src/core_plugins/metric_vis/public/metric_vis_params.html
index 03a0a84c1a81b1..84db2d91e23f9c 100644
--- 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 scope="col">
               <label id="metricOptionsCustomRangeFrom">From</label>
diff --git a/src/core_plugins/region_map/public/region_map.less b/src/core_plugins/region_map/public/region_map.less
index 192ca71e05b803..0b4bb68528e69a 100644
--- 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;
+  }
 }
diff --git a/src/core_plugins/region_map/public/region_map_vis_params.html b/src/core_plugins/region_map/public/region_map_vis_params.html
index c846a0cfc6a29a..997050e3f8c5d9 100644
--- 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>
 
diff --git 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
index bdb71a54629d0c..9afc714e43e5c8 100644
--- 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>
diff --git a/src/ui/public/agg_types/controls/date_ranges.html b/src/ui/public/agg_types/controls/date_ranges.html
index 5096f394b6f805..33347e7123b661 100644
--- 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>
diff --git a/src/ui/public/agg_types/controls/extended_bounds.html b/src/ui/public/agg_types/controls/extended_bounds.html
index 67c8bf54aa2dfc..7965b272bf4cc3 100644
--- 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}}"
diff --git a/src/ui/public/agg_types/controls/field.html b/src/ui/public/agg_types/controls/field.html
index fcac6015af69c9..8d0f5e12468f84 100644
--- 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>
diff --git a/src/ui/public/agg_types/controls/filters.html b/src/ui/public/agg_types/controls/filters.html
index 78dc13ab51a8ea..4c65c43aff49c5 100644
--- 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"
diff --git a/src/ui/public/agg_types/controls/ip_ranges.html b/src/ui/public/agg_types/controls/ip_ranges.html
index 34e46d7e709f7d..a3a75fd9a575a9 100644
--- 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>
diff --git a/src/ui/public/agg_types/controls/order_agg.html b/src/ui/public/agg_types/controls/order_agg.html
index 3dc09c56dd35f3..3c31e51157de4f 100644
--- 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"
diff --git a/src/ui/public/agg_types/controls/order_and_size.html b/src/ui/public/agg_types/controls/order_and_size.html
index 85ae4a4d1af277..6a5626b3e140ec 100644
--- 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
diff --git a/src/ui/public/agg_types/controls/other_bucket.html b/src/ui/public/agg_types/controls/other_bucket.html
index 31a6a2db564559..a846157049f91e 100644
--- 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
diff --git a/src/ui/public/agg_types/controls/precision.html b/src/ui/public/agg_types/controls/precision.html
index f0aeb600dc9d55..be61c32e88a4f8 100644
--- 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"
diff --git a/src/ui/public/agg_types/controls/ranges.html b/src/ui/public/agg_types/controls/ranges.html
index 0c28d243e2ed6f..94084d803e099c 100644
--- 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>
diff --git a/src/ui/public/agg_types/controls/sub_agg.html b/src/ui/public/agg_types/controls/sub_agg.html
index 9d882b9aa003cf..88f404657b5faf 100644
--- 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()"
diff --git a/src/ui/public/agg_types/controls/sub_metric.html b/src/ui/public/agg_types/controls/sub_metric.html
index 937a25cb8c7f6e..323cdcbac1499f 100644
--- 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]"
diff --git a/src/ui/public/agg_types/controls/top_aggregate_and_size.html b/src/ui/public/agg_types/controls/top_aggregate_and_size.html
index 19b36687efdbdb..f4962a8ca0e1eb 100644
--- 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
diff --git a/src/ui/public/agg_types/controls/top_sort.html b/src/ui/public/agg_types/controls/top_sort.html
index 25f09c4fff0d36..a90ef5e8222393 100644
--- 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"
diff --git a/src/ui/public/vis/_index.scss b/src/ui/public/vis/_index.scss
index ea7269f1a213bc..92d0edf345f0b1 100644
--- 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';
diff --git 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
index 72f1102a0a8497..756c0b183d25a7 100644
--- 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"
diff --git a/src/ui/public/vis/editors/components/_editor_options_group.scss b/src/ui/public/vis/editors/components/_editor_options_group.scss
new file mode 100644
index 00000000000000..23164a21627820
--- /dev/null
+++ b/src/ui/public/vis/editors/components/_editor_options_group.scss
@@ -0,0 +1,3 @@
+.visEditorOptionsGroup__panel + .visEditorOptionsGroup__panel {
+  margin-top: $euiSizeS;
+}
diff --git a/src/ui/public/vis/editors/components/_index.scss b/src/ui/public/vis/editors/components/_index.scss
new file mode 100644
index 00000000000000..af09ec30b381e2
--- /dev/null
+++ b/src/ui/public/vis/editors/components/_index.scss
@@ -0,0 +1 @@
+@import './editor_options_group';
diff --git a/src/ui/public/vis/editors/components/editor_options_group.js b/src/ui/public/vis/editors/components/editor_options_group.js
index 910d3e0cf0e8ff..6f9fe3ff02ed6c 100644
--- 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')()}
diff --git a/src/ui/public/vis/editors/components/editor_options_group.less b/src/ui/public/vis/editors/components/editor_options_group.less
deleted file mode 100644
index e47fba05c3132e..00000000000000
--- a/src/ui/public/vis/editors/components/editor_options_group.less
+++ /dev/null
@@ -1,3 +0,0 @@
-.editorOptionsGroup__panel + .editorOptionsGroup__panel {
-  margin-top: 8px;
-}
diff --git a/src/ui/public/vis/editors/default/_agg.scss b/src/ui/public/vis/editors/default/_agg.scss
index 93d6011062be3e..5916a2e0881244 100644
--- 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;
-}
-
-vis-editor-agg-group {
-  @include flex-parent(0, 1, auto);
-}
-
-.vis-editor-agg-group {
-  @include flex-parent(0, 1, auto);
-  color: $euiColorDarkShade;
-}
+//
+// Header -- found in agg.html
+//
 
-.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;
+.visEditorAggHeader__description {
+  flex: 1 1 0;
+  font-weight: $euiFontWeightRegular;
   padding-right: $vis-editor-agg-editor-spacing;
-  padding-left: 5px;
+  padding-left: $euiSizeXS;
   @include euiTextTruncate;
-  flex: 1 1 0;
+}
 
-  &.danger {
-    color: $euiColorDanger;
-    font-weight: bold;
-  }
+.visEditorAggHeader__description--danger {
+  color: $euiColorDanger;
+  font-weight: $euiFontWeightBold;
 }
 
-.vis-editor-agg-header-controls {
+.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;
-}
-
-.vis-editor-agg-wide-btn {
-  text-align: center;
+  @include euiFontSize;
 }
 
-.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;
-}
diff --git a/src/ui/public/vis/editors/default/_agg_group.scss b/src/ui/public/vis/editors/default/_agg_group.scss
new file mode 100644
index 00000000000000..afcab8e95f58c0
--- /dev/null
+++ 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;
+}
diff --git a/src/ui/public/vis/editors/default/_agg_params.scss b/src/ui/public/vis/editors/default/_agg_params.scss
new file mode 100644
index 00000000000000..edac56480dc865
--- /dev/null
+++ 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;
+}
diff --git a/src/ui/public/vis/editors/default/_agg_select.scss b/src/ui/public/vis/editors/default/_agg_select.scss
new file mode 100644
index 00000000000000..e34dddd3f1a66e
--- /dev/null
+++ 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 */
+      }
+    }
+  }
+}
diff --git a/src/ui/public/vis/editors/default/_index.scss b/src/ui/public/vis/editors/default/_index.scss
index 931485392867a0..6bf25fbdab8254 100644
--- 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';
diff --git a/src/ui/public/vis/editors/default/_sidebar.scss b/src/ui/public/vis/editors/default/_sidebar.scss
index 0d4356321ae381..3c3b9ee8a8be40 100644
--- 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);
+}
+
+.visEditorSidebar__config {
+  padding: $euiSizeS;
 
-  > .vis-edit-sidebar-buttons {
-    flex: 0 0 auto;
+  @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();
-}
diff --git a/src/ui/public/vis/editors/default/advanced_toggle.html b/src/ui/public/vis/editors/default/advanced_toggle.html
index 46fa98de80757e..d5d7a7ea24057d 100644
--- 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>
\ No newline at end of file
+</div>
diff --git a/src/ui/public/vis/editors/default/agg.html b/src/ui/public/vis/editors/default/agg.html
index c8ccdeff89b16f..baba3554a9c3b0 100644
--- 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>
diff --git a/src/ui/public/vis/editors/default/agg_add.html b/src/ui/public/vis/editors/default/agg_add.html
index 1579d19395ebbe..c3877d79d97c34 100644
--- 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
diff --git a/src/ui/public/vis/editors/default/agg_group.html b/src/ui/public/vis/editors/default/agg_group.html
index 2176e60b25c2c2..a1718f72b351e6 100644
--- 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>
diff --git a/src/ui/public/vis/editors/default/agg_params.html b/src/ui/public/vis/editors/default/agg_params.html
index 4ab75f4c18f1a9..1b809849d448b9 100644
--- 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>
diff --git a/src/ui/public/vis/editors/default/agg_select.html b/src/ui/public/vis/editors/default/agg_select.html
index 1a966dd31eb75b..768c8626b5dc6d 100644
--- 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"
   >
diff --git a/src/ui/public/vis/editors/default/vis_options.html b/src/ui/public/vis/editors/default/vis_options.html
index 1de8b4257de661..51a4c296b5b798 100644
--- 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>
diff --git a/test/functional/page_objects/visualize_page.js b/test/functional/page_objects/visualize_page.js
index aa2a0b17e38f35..eb69352ac2efec 100644
--- 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;