Visualize sidebar design updates (#29658)

* Bring over all ui-select styles and convert color vars

* Some bootstrap dark theming

* Consolidating non-EUI form control styles

* Update some tutorial pieces set to EUI

* Fix up visualize editor sidebar as best as I can

* PR feedback

- comment for image
- euiScrollbar
- euiBorderThick

* Fix advanced toggle test

* Don’t show IE’s select arrow

packages/kbn-ui-framework/dist/kui_dark.css

@@ -467,7 +467,7 @@ main {
   border-bottom-left-radius: 4px; }
 
 .kuiButtonGroup--united .kuiButton + .kuiButton {
-  margin-left: 2px; }
+  margin-left: 0; }
 
 .kuiButtonGroup--fullWidth {
   display: -webkit-box;

packages/kbn-ui-framework/dist/kui_light.css

@@ -467,7 +467,7 @@ main {
   border-bottom-left-radius: 4px; }
 
 .kuiButtonGroup--united .kuiButton + .kuiButton {
-  margin-left: 2px; }
+  margin-left: 0; }
 
 .kuiButtonGroup--fullWidth {
   display: -webkit-box;

packages/kbn-ui-framework/src/components/button/button_group/_button_group.scss

@@ -30,7 +30,7 @@
   }
 
   .kuiButton + .kuiButton {
-    margin-left: 2px;
+    margin-left: 0;
   }
 }
 

src/legacy/core_plugins/kbn_vislib_vis_types/public/controls/gauge_options.html

@@ -1,41 +1,41 @@
-<div class="kuiSideBarSection">
-  <div class="kuiSideBarFormRow">
+<div class="visEditorSidebar__section">
+  <div class="visEditorSidebar__formRow">
     <label
-      class="kuiSideBarFormRow__label"
+      class="visEditorSidebar__formLabel"
       for="gaugeType"
       i18n-id="kbnVislibVisTypes.controls.gaugeOptions.gaugeTypeLabel"
       i18n-default-message="Gauge Type"
     ></label>
-    <div class="kuiSideBarFormRow__control">
+    <div class="visEditorSidebar__formControl">
       <select
         id="gaugeType"
-        class="kuiSelect kuiSideBarSelect"
+        class="kuiSelect visEditorSidebar__select"
         ng-model="editorState.params.gauge.gaugeType"
         ng-options="mode for mode in collections.gaugeTypes"
       ></select>
     </div>
   </div>
 
-  <div class="kuiSideBarFormRow">
+  <div class="visEditorSidebar__formRow">
     <label
-      class="kuiSideBarFormRow__label"
+      class="visEditorSidebar__formLabel"
       for="percentageMode"
       i18n-id="kbnVislibVisTypes.controls.gaugeOptions.percentageModeLabel"
       i18n-default-message="Percentage Mode"
     ></label>
-    <div class="kuiSideBarFormRow__control">
+    <div class="visEditorSidebar__formControl">
       <input class="kuiCheckBox" id="percentageMode" type="checkbox" ng-model="editorState.params.gauge.percentageMode">
     </div>
   </div>
 
-  <div class="kuiSideBarFormRow" ng-hide="editorState.params.gauge.type === 'simple'">
+  <div class="visEditorSidebar__formRow" ng-hide="editorState.params.gauge.type === 'simple'">
     <label
-      class="kuiSideBarFormRow__label"
+      class="visEditorSidebar__formLabel"
       for="verticalSplit"
       i18n-id="kbnVislibVisTypes.controls.gaugeOptions.verticalSplitLabel"
       i18n-default-message="Vertical Split"
     ></label>
-    <div class="kuiSideBarFormRow__control">
+    <div class="visEditorSidebar__formControl">
       <input class="kuiCheckBox" id="verticalSplit" type="checkbox" ng-model="editorState.params.gauge.verticalSplit">&nbsp;
       <icon-tip
         content="'Shows gauges one under another'"
@@ -44,15 +44,15 @@
     </div>
   </div>
 
-  <div class="kuiSideBarFormRow">
+  <div class="visEditorSidebar__formRow">
     <label
-      class="kuiSideBarFormRow__label"
+      class="visEditorSidebar__formLabel"
       for="displayWarnings"
       i18n-id="kbnVislibVisTypes.controls.gaugeOptions.displayWarningsLabel"
       i18n-default-message="Display warnings"
     ></label>
 
-    <div class="kuiSideBarFormRow__control">
+    <div class="visEditorSidebar__formControl">
       <input class="kuiCheckBox" id="displayWarnings" type="checkbox" ng-model="editorState.params.isDisplayWarning">
       &nbsp;
       <icon-tip
@@ -62,41 +62,41 @@
     </div>
   </div>
 
-  <div class="kuiSideBarFormRow">
+  <div class="visEditorSidebar__formRow">
     <label
-      class="kuiSideBarFormRow__label"
+      class="visEditorSidebar__formLabel"
       for="addLegend"
       i18n-id="kbnVislibVisTypes.controls.gaugeOptions.showLegendLabel"
       i18n-default-message="Show Legend"
     ></label>
-    <div class="kuiSideBarFormRow__control">
+    <div class="visEditorSidebar__formControl">
       <input class="kuiCheckBox" id="addLegend" type="checkbox" ng-model="editorState.params.addLegend">
     </div>
   </div>
 
-  <div class="kuiSideBarFormRow">
+  <div class="visEditorSidebar__formRow">
     <label
-      class="kuiSideBarFormRow__label"
+      class="visEditorSidebar__formLabel"
       for="showLabels"
       i18n-id="kbnVislibVisTypes.controls.gaugeOptions.showLabelsLabel"
       i18n-default-message="Show Labels"
     ></label>
-    <div class="kuiSideBarFormRow__control">
+    <div class="visEditorSidebar__formControl">
       <input class="kuiCheckBox" id="showLabels" type="checkbox" ng-model="editorState.params.gauge.labels.show">
     </div>
   </div>
 
-  <div class="kuiSideBarFormRow" ng-show="editorState.params.gauge.labels.show">
+  <div class="visEditorSidebar__formRow" ng-show="editorState.params.gauge.labels.show">
     <label
-      class="kuiSideBarFormRow__label"
+      class="visEditorSidebar__formLabel"
       for="subText"
       i18n-id="kbnVislibVisTypes.controls.gaugeOptions.subTextLabel"
       i18n-default-message="Sub Text"
     ></label>
-    <div class="kuiSideBarFormRow__control">
+    <div class="visEditorSidebar__formControl">
       <input
         id="subText"
-        class="kuiInput kuiSideBarInput"
+        class="kuiInput visEditorSidebar__input"
         ng-model="editorState.params.gauge.style.subText"
         type="text"
       >
@@ -104,17 +104,17 @@
   </div>
 
   <div
-    class="kuiSideBarFormRow"
+    class="visEditorSidebar__formRow"
     ng-hide="editorState.params.gauge.type === 'simple'"
     ng-show="editorState.params.gauge.colorsRange.length > 1"
   >
     <label
-      class="kuiSideBarFormRow__label"
+      class="visEditorSidebar__formLabel"
       for="extendRange"
       i18n-id="kbnVislibVisTypes.controls.gaugeOptions.autoExtendRangeLabel"
       i18n-default-message="Auto Extend Range"
     ></label>
-    <div class="kuiSideBarFormRow__control">
+    <div class="visEditorSidebar__formControl">
       <input class="kuiCheckBox" id="extendRange" type="checkbox" ng-model="editorState.params.gauge.extendRange">
       &nbsp;
       <icon-tip
@@ -124,274 +124,259 @@
     </div>
   </div>
 
-  <div>
-    <div class="kuiSideBarCollapsibleTitle">
+  <div class="visEditorSidebar__collapsible--margin">
+    <div class="visEditorSidebar__collapsibleTitle">
       <div
         kbn-accessible-click
         aria-expanded="{{!!showColorRange}}"
         aria-controls="gaugeOptionsRanges"
         aria-label="Toggle range options"
-        class="kuiSideBarCollapsibleTitle__label"
+        class="visEditorSidebar__collapsibleTitleLabel"
         ng-click="showColorRange = !showColorRange"
       >
+      <icon color="'primary'" aria-hidden="true" ng-if="showColorRange" type="'arrowDown'" size="'s'"></icon>
+      <icon color="'primary'" aria-hidden="true" ng-if="!showColorRange" type="'arrowRight'" size="'s'"></icon>
+
       <span
-        aria-hidden="true"
-        ng-class="{ 'fa-caret-down': showColorRange, 'fa-caret-right': !showColorRange }"
-        class="fa fa-caret-right kuiSideBarCollapsibleTitle__caret"
-      ></span>
-      <span
-        class="kuiSideBarCollapsibleTitle__text"
+        class="visEditorSidebar__collapsibleTitleText"
         i18n-id="kbnVislibVisTypes.controls.gaugeOptions.rangesTitle"
         i18n-default-message="Ranges"
       ></span>
       </div>
     </div>
 
-    <div id="gaugeOptionsRanges" ng-show="showColorRange" class="kuiSideBarCollapsibleSection">
-      <div class="kuiSideBarSection">
-        <table class="visEditorAgg__rangesTable form-group" ng-show="editorState.params.gauge.colorsRange.length">
-          <tr>
-            <th scope="col">
-              <label
-                id="gaugeOptionsCustomRangeFrom"
-                i18n-id="kbnVislibVisTypes.controls.gaugeOptions.fromTitle"
-                i18n-default-message="From"
-              ></label>
-            </th>
-            <th scope="col" colspan="2">
-              <label
-                id="gaugeOptionsCustomRangeTo"
-                i18n-id="kbnVislibVisTypes.controls.gaugeOptions.toTitle"
-                i18n-default-message="To"
-              ></label>
-            </th>
-          </tr>
+    <div id="gaugeOptionsRanges" ng-show="showColorRange">
 
-          <tr ng-repeat="range in editorState.params.gauge.colorsRange track by $index">
-            <td>
-              <input
-                aria-labelledby="gaugeOptionsCustomRangeFrom"
-                ng-model="range.from"
-                type="number"
-                class="form-control"
-                name="range.from"
-                greater-or-equal-than="{{getGreaterThan($index)}}"
-                required
-                step="any" />
-            </td>
-            <td>
-              <input
-                aria-labelledby="gaugeOptionsCustomRangeTo"
-                ng-model="range.to"
-                type="number"
-                class="form-control"
-                name="range.to"
-                greater-or-equal-than="{{range.from}}"
-                required
-                step="any" />
-            </td>
-            <td>
-              <button
-                type="button"
-                ng-click="removeRange($index)"
-                ng-show="editorState.params.gauge.colorsRange.length > 1"
-                class="kuiButton kuiButton--danger kuiButton--small">
-                <i class="fa fa-times"></i>
-              </button>
-            </td>
-          </tr>
-        </table>
+      <table class="visEditorAgg__rangesTable form-group" ng-show="editorState.params.gauge.colorsRange.length">
+        <tr>
+          <th scope="col">
+            <label
+              id="gaugeOptionsCustomRangeFrom"
+              i18n-id="kbnVislibVisTypes.controls.gaugeOptions.fromTitle"
+              i18n-default-message="From"
+            ></label>
+          </th>
+          <th scope="col" colspan="2">
+            <label
+              id="gaugeOptionsCustomRangeTo"
+              i18n-id="kbnVislibVisTypes.controls.gaugeOptions.toTitle"
+              i18n-default-message="To"
+            ></label>
+          </th>
+        </tr>
 
-        <div class="hintbox" ng-show="!editorState.params.gauge.colorsRange.length">
-          <p>
-            <i class="fa fa-danger text-danger"></i>
-            <span
-              i18n-id="kbnVislibVisTypes.controls.gaugeOptions.specifiedRangeNumberWarningMessage"
-              i18n-default-message="{required} You must specify at least one range."
-              i18n-values="{ html_required: '<strong>' + requiredText + '</strong>' }"
-            ></span>
-          </p>
-        </div>
+        <tr ng-repeat="range in editorState.params.gauge.colorsRange track by $index">
+          <td>
+            <input
+              aria-labelledby="gaugeOptionsCustomRangeFrom"
+              ng-model="range.from"
+              type="number"
+              class="form-control"
+              name="range.from"
+              greater-or-equal-than="{{getGreaterThan($index)}}"
+              required
+              step="any" />
+          </td>
+          <td>
+            <input
+              aria-labelledby="gaugeOptionsCustomRangeTo"
+              ng-model="range.to"
+              type="number"
+              class="form-control"
+              name="range.to"
+              greater-or-equal-than="{{range.from}}"
+              required
+              step="any" />
+          </td>
+          <td>
+            <button
+              type="button"
+              ng-click="removeRange($index)"
+              ng-show="editorState.params.gauge.colorsRange.length > 1"
+              class="kuiButton kuiButton--danger kuiButton--small">
+              <i class="fa fa-times"></i>
+            </button>
+          </td>
+        </tr>
+      </table>
 
-        <div
-          ng-click="addRange()"
-          class="kuiButton kuiButton--primary kuiButton--fullWidth"
-          i18n-id="kbnVislibVisTypes.controls.gaugeOptions.addRangeTitle"
-          i18n-default-message="Add Range"
-        ></div>
-        <div class="euiSpacer euiSpacer--s"></div>
-        <div
-          class="text text-center text-info"
-          i18n-id="kbnVislibVisTypes.controls.gaugeOptions.howToChangeColorsDescription"
-          i18n-default-message="Note: colors can be changed in the legend"
-        ></div>
+      <div class="hintbox" ng-show="!editorState.params.gauge.colorsRange.length">
+        <p>
+          <i class="fa fa-danger text-danger"></i>
+          <span
+            i18n-id="kbnVislibVisTypes.controls.gaugeOptions.specifiedRangeNumberWarningMessage"
+            i18n-default-message="{required} You must specify at least one range."
+            i18n-values="{ html_required: '<strong>' + requiredText + '</strong>' }"
+          ></span>
+        </p>
       </div>
+
+      <div
+        ng-click="addRange()"
+        class="kuiButton kuiButton--primary kuiButton--fullWidth"
+        i18n-id="kbnVislibVisTypes.controls.gaugeOptions.addRangeTitle"
+        i18n-default-message="Add Range"
+      ></div>
+      <div class="euiSpacer euiSpacer--s"></div>
+      <div
+        class="text text-center text-info"
+        i18n-id="kbnVislibVisTypes.controls.gaugeOptions.howToChangeColorsDescription"
+        i18n-default-message="Note: colors can be changed in the legend"
+      ></div>
+
     </div>
   </div>
-  <div ng-show="editorState.params.gauge.colorsRange.length > 1">
-    <div class="kuiSideBarCollapsibleTitle">
+
+  <div class="visEditorSidebar__collapsible--margin" ng-show="editorState.params.gauge.colorsRange.length > 1">
+    <div class="visEditorSidebar__collapsibleTitle">
       <div
         kbn-accessible-click
         aria-expanded="{{!!showColorOptions}}"
         aria-controls="gaugeOptionsColors"
         aria-label="Toggle color options"
-        class="kuiSideBarCollapsibleTitle__label"
+        class="visEditorSidebar__collapsibleTitleLabel"
         ng-click="showColorOptions = !showColorOptions"
       >
+      <icon color="'primary'" aria-hidden="true" ng-if="showColorOptions" type="'arrowDown'" size="'s'"></icon>
+      <icon color="'primary'" aria-hidden="true" ng-if="!showColorOptions" type="'arrowRight'" size="'s'"></icon>
+
       <span
-        aria-hidden="true"
-        ng-class="{
-        'fa-caret-down': showColorOptions,
-        'fa-caret-right': !showColorOptions
-        }"
-        class="fa fa-caret-right kuiSideBarCollapsibleTitle__caret"
-      ></span>
-      <span
-        class="kuiSideBarCollapsibleTitle__text"
+        class="visEditorSidebar__collapsibleTitleText"
         i18n-id="kbnVislibVisTypes.controls.gaugeOptions.colorOptionsTitle"
         i18n-default-message="Color Options"
       ></span>
       </div>
     </div>
-    <div id="gaugeOptionsColors" ng-if="showColorOptions" class="kuiSideBarCollapsibleSection">
-      <div class="kuiSideBarSection">
-        <div class="kuiSideBarFormRow">
-          <label
-            class="kuiSideBarFormRow__label"
-            for="colorSchema"
-            i18n-id="kbnVislibVisTypes.controls.gaugeOptions.colorSchemaLabel"
-            i18n-default-message="Color Schema"
-          ></label>
-          <div class="kuiSideBarFormRow__control">
-            <select
-              id="colorSchema"
-              class="kuiSelect kuiSideBarSelect"
-              ng-model="editorState.params.gauge.colorSchema"
-              ng-options="mode.id as mode.label for mode in collections.colorSchemas"
-            ></select>
-          </div>
-          <div
-            class="text-info text-center"
-            ng-show="customColors"
-            ng-click="resetColors()"
-            i18n-id="kbnVislibVisTypes.controls.gaugeOptions.resetColorsTitle"
-            i18n-default-message="reset colors"
-          ></div>
-        </div>
+    <div id="gaugeOptionsColors" ng-if="showColorOptions">
 
-        <div class="kuiSideBarFormRow">
-          <label
-            class="kuiSideBarFormRow__label"
-            for="invertColors"
-            i18n-id="kbnVislibVisTypes.controls.gaugeOptions.reverseColorSchemaLabel"
-            i18n-default-message="Reverse Color Schema"
-          ></label>
-          <div class="kuiSideBarFormRow__control">
-            <input class="kuiCheckBox" id="invertColors" type="checkbox" ng-model="editorState.params.gauge.invertColors">
-          </div>
+      <div class="visEditorSidebar__formRow">
+        <label
+          class="visEditorSidebar__formLabel"
+          for="colorSchema"
+          i18n-id="kbnVislibVisTypes.controls.gaugeOptions.colorSchemaLabel"
+          i18n-default-message="Color Schema"
+        ></label>
+        <div class="visEditorSidebar__formControl">
+          <select
+            id="colorSchema"
+            class="kuiSelect visEditorSidebar__select"
+            ng-model="editorState.params.gauge.colorSchema"
+            ng-options="mode.id as mode.label for mode in collections.colorSchemas"
+          ></select>
+        </div>
+        <div
+          class="text-info text-center"
+          ng-show="customColors"
+          ng-click="resetColors()"
+          i18n-id="kbnVislibVisTypes.controls.gaugeOptions.resetColorsTitle"
+          i18n-default-message="reset colors"
+        ></div>
+      </div>
+
+      <div class="visEditorSidebar__formRow">
+        <label
+          class="visEditorSidebar__formLabel"
+          for="invertColors"
+          i18n-id="kbnVislibVisTypes.controls.gaugeOptions.reverseColorSchemaLabel"
+          i18n-default-message="Reverse Color Schema"
+        ></label>
+        <div class="visEditorSidebar__formControl">
+          <input class="kuiCheckBox" id="invertColors" type="checkbox" ng-model="editorState.params.gauge.invertColors">
         </div>
       </div>
+
     </div>
   </div>
 
-  <div>
-    <div class="kuiSideBarCollapsibleTitle">
+  <div class="visEditorSidebar__collapsible--margin">
+    <div class="visEditorSidebar__collapsibleTitle">
       <div
         kbn-accessible-click
         aria-expanded="{{!!showStyle}}"
         aria-controls="gaugeOptionsStyle"
         aria-label="Toggle style options"
-        class="kuiSideBarCollapsibleTitle__label"
+        class="visEditorSidebar__collapsibleTitleLabel"
         ng-click="showStyle = !showStyle"
       >
+        <icon color="'primary'" aria-hidden="true" ng-if="showStyle" type="'arrowDown'" size="'s'"></icon>
+        <icon color="'primary'" aria-hidden="true" ng-if="!showStyle" type="'arrowRight'" size="'s'"></icon>
+
         <span
-          aria-hidden="true"
-          ng-class="{
-          'fa-caret-down': showStyle,
-          'fa-caret-right': !showStyle
-          }"
-          class="fa fa-caret-right kuiSideBarCollapsibleTitle__caret"
-        ></span>
-        <span
-          class="kuiSideBarCollapsibleTitle__text"
+          class="visEditorSidebar__collapsibleTitleText"
           i18n-id="kbnVislibVisTypes.controls.gaugeOptions.styleTitle"
           i18n-default-message="Style"
         ></span>
       </div>
     </div>
-    <div id="gaugeOptionsStyle" ng-if="showStyle" class="kuiSideBarCollapsibleSection">
-
-      <div class="kuiSideBarSection">
-        <div ng-hide="editorState.params.gauge.type === 'simple'">
-          <div class="kuiSideBarFormRow" ng-show="editorState.params.gauge.colorsRange.length > 1">
-            <label
-              class="kuiSideBarFormRow__label"
-              for="labelColor"
-              i18n-id="kbnVislibVisTypes.controls.gaugeOptions.colorLabelsLabel"
-              i18n-default-message="Color Labels"
-            ></label>
-            <div class="kuiSideBarFormRow__control">
-              <input class="kuiCheckBox" id="labelColor" type="checkbox" ng-model="editorState.params.gauge.style.labelColor">
-            </div>
-          </div>
-          <div class="kuiSideBarFormRow">
-            <label
-              class="kuiSideBarFormRow__label"
-              for="showScale"
-              i18n-id="kbnVislibVisTypes.controls.gaugeOptions.showScaleLabel"
-              i18n-default-message="Show Scale"
-            ></label>
-            <div class="kuiSideBarFormRow__control">
-              <input class="kuiCheckBox" id="showScale" type="checkbox" ng-model="editorState.params.gauge.scale.show">
-            </div>
+    <div id="gaugeOptionsStyle" ng-if="showStyle">
+      <div ng-hide="editorState.params.gauge.type === 'simple'">
+        <div class="visEditorSidebar__formRow" ng-show="editorState.params.gauge.colorsRange.length > 1">
+          <label
+            class="visEditorSidebar__formLabel"
+            for="labelColor"
+            i18n-id="kbnVislibVisTypes.controls.gaugeOptions.colorLabelsLabel"
+            i18n-default-message="Color Labels"
+          ></label>
+          <div class="visEditorSidebar__formControl">
+            <input class="kuiCheckBox" id="labelColor" type="checkbox" ng-model="editorState.params.gauge.style.labelColor">
           </div>
         </div>
-        <div ng-show="editorState.params.gauge.type === 'simple'">
-          <div class="kuiSideBarFormRow">
-            <label
-              class="kuiSideBarFormRow__label"
-              for="gaugeColorMode"
-              i18n-id="kbnVislibVisTypes.controls.gaugeOptions.colorLabel"
-              i18n-default-message="Color"
-            ></label>
-            <div class="kuiSideBarFormRow__control">
-              <select
-                id="gaugeColorMode"
-                class="kuiSelect kuiSideBarSelect"
-                ng-model="editorState.params.gauge.gaugeColorMode"
-                ng-options="mode for mode in collections.gaugeColorMode"
-              ></select>
-            </div>
-          </div>
-          <div class="kuiSideBarFormRow">
-            <label
-              class="kuiSideBarFormRow__label"
-              for="backColor"
-              i18n-id="kbnVislibVisTypes.controls.gaugeOptions.backTextColorLabel"
-              i18n-default-message="Back/Text Color"
-            ></label>
-            <div class="kuiSideBarFormRow__control">
-              <input
-                id="backTextColor"
-                class="kuiInput kuiSideBarInput"
-                ng-model="editorState.params.gauge.style.bgFill"
-              >
-            </div>
-          </div>
-          <div class="kuiSideBarFormRow">
-            <label
-              class="kuiSideBarFormRow__label"
-              for="showScale"
-              i18n-id="kbnVislibVisTypes.controls.gaugeOptions.fontSizeLabel"
-              i18n-default-message="Font Size ({fontSize}pt)"
-              i18n-values="{ fontSize: editorState.params.gauge.style.fontSize }"
-            ></label>
-            <div class="kuiSideBarFormRow__control">
-              <input type="range" ng-model="editorState.params.gauge.style.fontSize" class="form-control" min="12" max="120" />
-            </div>
+        <div class="visEditorSidebar__formRow">
+          <label
+            class="visEditorSidebar__formLabel"
+            for="showScale"
+            i18n-id="kbnVislibVisTypes.controls.gaugeOptions.showScaleLabel"
+            i18n-default-message="Show Scale"
+          ></label>
+          <div class="visEditorSidebar__formControl">
+            <input class="kuiCheckBox" id="showScale" type="checkbox" ng-model="editorState.params.gauge.scale.show">
+          </div>
+        </div>
+      </div>
+      <div ng-show="editorState.params.gauge.type === 'simple'">
+        <div class="visEditorSidebar__formRow">
+          <label
+            class="visEditorSidebar__formLabel"
+            for="gaugeColorMode"
+            i18n-id="kbnVislibVisTypes.controls.gaugeOptions.colorLabel"
+            i18n-default-message="Color"
+          ></label>
+          <div class="visEditorSidebar__formControl">
+            <select
+              id="gaugeColorMode"
+              class="kuiSelect visEditorSidebar__select"
+              ng-model="editorState.params.gauge.gaugeColorMode"
+              ng-options="mode for mode in collections.gaugeColorMode"
+            ></select>
+          </div>
+        </div>
+        <div class="visEditorSidebar__formRow">
+          <label
+            class="visEditorSidebar__formLabel"
+            for="backColor"
+            i18n-id="kbnVislibVisTypes.controls.gaugeOptions.backTextColorLabel"
+            i18n-default-message="Back/Text Color"
+          ></label>
+          <div class="visEditorSidebar__formControl">
+            <input
+              id="backTextColor"
+              class="kuiInput visEditorSidebar__input"
+              ng-model="editorState.params.gauge.style.bgFill"
+            >
+          </div>
+        </div>
+        <div class="visEditorSidebar__formRow">
+          <label
+            class="visEditorSidebar__formLabel"
+            for="showScale"
+            i18n-id="kbnVislibVisTypes.controls.gaugeOptions.fontSizeLabel"
+            i18n-default-message="Font Size ({fontSize}pt)"
+            i18n-values="{ fontSize: editorState.params.gauge.style.fontSize }"
+          ></label>
+          <div class="visEditorSidebar__formControl">
+            <input type="range" ng-model="editorState.params.gauge.style.fontSize" class="form-control" min="12" max="120" />
           </div>
         </div>
-
       </div>
     </div>
   </div>

src/legacy/core_plugins/kbn_vislib_vis_types/public/controls/heatmap_options.html

@@ -1,15 +1,15 @@
 <div>
-  <div class="kuiSideBarFormRow">
+  <div class="visEditorSidebar__formRow">
     <label
-      class="kuiSideBarFormRow__label"
+      class="visEditorSidebar__formLabel"
       for="colorSchema"
       i18n-id="kbnVislibVisTypes.controls.heatmapOptions.colorSchemaLabel"
       i18n-default-message="Color Schema"
     ></label>
-    <div class="kuiSideBarFormRow__control">
+    <div class="visEditorSidebar__formControl">
       <select
         id="colorSchema"
-        class="kuiSelect kuiSideBarSelect"
+        class="kuiSelect visEditorSidebar__select"
         ng-model="editorState.params.colorSchema"
         ng-options="mode.id as mode.label for mode in collections.colorSchemas"
       ></select>
@@ -24,71 +24,71 @@
     ></div>
   </div>
 
-  <div class="kuiSideBarFormRow">
+  <div class="visEditorSidebar__formRow">
     <label
-      class="kuiSideBarFormRow__label"
+      class="visEditorSidebar__formLabel"
       for="invertColors"
       i18n-id="kbnVislibVisTypes.controls.heatmapOptions.reverseColorSchemaLabel"
       i18n-default-message="Reverse Color Schema"
     ></label>
-    <div class="kuiSideBarFormRow__control">
+    <div class="visEditorSidebar__formControl">
       <input class="kuiCheckBox" id="invertColors" type="checkbox" ng-model="editorState.params.invertColors">
     </div>
   </div>
 
-  <div class="kuiSideBarFormRow">
+  <div class="visEditorSidebar__formRow">
     <label
-      class="kuiSideBarFormRow__label"
+      class="visEditorSidebar__formLabel"
       for="axisScale"
       i18n-id="kbnVislibVisTypes.controls.heatmapOptions.colorScaleLabel"
       i18n-default-message="Color Scale"
     ></label>
-    <div class="kuiSideBarFormRow__control">
+    <div class="visEditorSidebar__formControl">
       <select
         id="axisScale"
-        class="kuiSelect kuiSideBarSelect"
+        class="kuiSelect visEditorSidebar__select"
         ng-model="editorState.params.valueAxes[0].scale.type"
         ng-options="mode for mode in collections.scales"
       ></select>
     </div>
   </div>
 
-  <div class="kuiSideBarFormRow">
+  <div class="visEditorSidebar__formRow">
     <label
-      class="kuiSideBarFormRow__label"
+      class="visEditorSidebar__formLabel"
       for="defaultYExtents"
       i18n-id="kbnVislibVisTypes.controls.heatmapOptions.scaleToDataBoundsLabel"
       i18n-default-message="Scale to Data Bounds"
     ></label>
-    <div class="kuiSideBarFormRow__control">
+    <div class="visEditorSidebar__formControl">
       <input class="kuiCheckBox" id="defaultYExtents" type="checkbox" ng-model="editorState.params.valueAxes[0].scale.defaultYExtents">
     </div>
   </div>
 
-  <div class="kuiSideBarFormRow" ng-if="!editorState.params.setColorRange">
+  <div class="visEditorSidebar__formRow" ng-if="!editorState.params.setColorRange">
     <label
-      class="kuiSideBarFormRow__label"
+      class="visEditorSidebar__formLabel"
       for="percentageMode"
       i18n-id="kbnVislibVisTypes.controls.heatmapOptions.percentageModeLabel"
       i18n-default-message="Percentage Mode"
     ></label>
-    <div class="kuiSideBarFormRow__control">
+    <div class="visEditorSidebar__formControl">
       <input class="kuiCheckBox" id="percentageMode" type="checkbox" ng-model="editorState.params.percentageMode">
     </div>
   </div>
 
-  <div class="kuiSideBarFormRow" ng-if="!editorState.params.setColorRange">
+  <div class="visEditorSidebar__formRow" ng-if="!editorState.params.setColorRange">
     <label
-      class="kuiSideBarFormRow__label"
+      class="visEditorSidebar__formLabel"
       for="colorsNumber"
       i18n-id="kbnVislibVisTypes.controls.heatmapOptions.colorsNumberLabel"
       i18n-default-message="Number of colors"
     ></label>
-    <div class="kuiSideBarFormRow__control">
+    <div class="visEditorSidebar__formControl">
       <input
         data-test-subj="heatmapOptionsColorsNumberInput"
         id="colorsNumber"
-        class="kuiSideBarInput"
+        class="visEditorSidebar__input"
         ng-model="editorState.params.colorsNumber"
         type="number"
         greater-than="1"
@@ -97,23 +97,21 @@
     </div>
   </div>
 
-  <div>
-    <div class="kuiSideBarCollapsibleTitle">
+  <div class="visEditorSidebar__collapsible--margin">
+    <div class="visEditorSidebar__collapsibleTitle">
       <div
-        class="kuiSideBarCollapsibleTitle__label"
+        class="visEditorSidebar__collapsibleTitleLabel"
         ng-click="toggleColorRangeSection()"
         kbn-accessible-click
         aria-expanded="{{!!showColorRange}}"
         aria-controls="heatmapOptionsRanges"
         aria-label="Toggle custom ranges options"
       >
+        <icon color="'primary'" aria-hidden="true" ng-if="showColorRange" type="'arrowDown'" size="'s'"></icon>
+        <icon color="'primary'" aria-hidden="true" ng-if="!showColorRange" type="'arrowRight'" size="'s'"></icon>
+
         <span
-          aria-hidden="true"
-          ng-class="{ 'fa-caret-down': showColorRange, 'fa-caret-right': !showColorRange }"
-          class="kuiIcon fa-caret-right kuiSideBarCollapsibleTitle__caret"
-        ></span>
-        <span
-          class="kuiSideBarCollapsibleTitle__text"
+          class="visEditorSidebar__collapsibleTitleText"
           i18n-id="kbnVislibVisTypes.controls.heatmapOptions.customRangesTitle"
           i18n-default-message="Custom Ranges"
         ></span>
@@ -123,7 +121,6 @@
         aria-label="Enable custom ranges"
         ng-model="editorState.params.setColorRange"
         type="checkbox"
-        class="kuiSideBarSectionTitle__action"
         ng-click="toggleColorRangeSection(true)"
         kbn-accessible-click
       >
@@ -133,109 +130,104 @@
       id="heatmapOptionsRanges"
       ng-if="editorState.params.setColorRange"
       ng-show="showColorRange"
-      class="kuiSideBarCollapsibleSection"
     >
-      <div class="kuiSideBarSection">
-        <table
-          data-test-subj="heatmapCustomRangesTable"
-          class="visEditorAgg__rangesTable form-group"
-          ng-show="editorState.params.colorsRange.length">
-          <tr>
-            <th scope="col">
-              <label
-                id="heatmapCustomRangeFrom"
-                i18n-id="kbnVislibVisTypes.controls.heatmapOptions.fromLabel"
-                i18n-default-message="From"
-              ></label>
-            </th>
-            <th scope="col" colspan="2">
-              <label
-                id="heatmapCustomRangeTo"
-                i18n-id="kbnVislibVisTypes.controls.heatmapOptions.toLabel"
-                i18n-default-message="To"
-              ></label>
-            </th>
-          </tr>
 
-          <tr ng-repeat="range in editorState.params.colorsRange track by $index">
-            <td>
-              <input
-                aria-labelledby="heatmapCustomRangeFrom"
-                ng-model="range.from"
-                type="number"
-                class="form-control"
-                name="range.from"
-                greater-or-equal-than="{{getGreaterThan($index)}}"
-                step="any" />
-            </td>
-            <td>
-              <input
-                aria-labelledby="heatmapCustomRangeTo"
-                ng-model="range.to"
-                type="number"
-                class="form-control"
-                name="range.to"
-                greater-than="range.from"
-                step="any" />
-            </td>
-            <td>
-              <button
-                type="button"
-                ng-click="removeRange($index)"
-                class="kuiButton kuiButton--danger kuiButton--small"
-              >
-                <span class="kuiIcon fa-times"></span>
-              </button>
-            </td>
-          </tr>
-        </table>
+      <table
+        data-test-subj="heatmapCustomRangesTable"
+        class="visEditorAgg__rangesTable form-group"
+        ng-show="editorState.params.colorsRange.length">
+        <tr>
+          <th scope="col">
+            <label
+              id="heatmapCustomRangeFrom"
+              i18n-id="kbnVislibVisTypes.controls.heatmapOptions.fromLabel"
+              i18n-default-message="From"
+            ></label>
+          </th>
+          <th scope="col" colspan="2">
+            <label
+              id="heatmapCustomRangeTo"
+              i18n-id="kbnVislibVisTypes.controls.heatmapOptions.toLabel"
+              i18n-default-message="To"
+            ></label>
+          </th>
+        </tr>
 
-        <div class="hintbox" ng-show="!editorState.params.colorsRange.length">
-          <p
-            i18n-id="kbnVislibVisTypes.controls.heatmapOptions.specifiedRangeNumberWarningMessage"
-            i18n-default-message="{icon} {required} You must specify at least one range."
-            i18n-values="{
-              html_icon: '<span class=\'kuiIcon fa-danger text-danger\'></span>',
-              html_required: '<strong>' + requiredText + '</strong>'
-            }"
-          ></p>
-        </div>
+        <tr ng-repeat="range in editorState.params.colorsRange track by $index">
+          <td>
+            <input
+              aria-labelledby="heatmapCustomRangeFrom"
+              ng-model="range.from"
+              type="number"
+              class="form-control"
+              name="range.from"
+              greater-or-equal-than="{{getGreaterThan($index)}}"
+              step="any" />
+          </td>
+          <td>
+            <input
+              aria-labelledby="heatmapCustomRangeTo"
+              ng-model="range.to"
+              type="number"
+              class="form-control"
+              name="range.to"
+              greater-than="range.from"
+              step="any" />
+          </td>
+          <td>
+            <button
+              type="button"
+              ng-click="removeRange($index)"
+              class="kuiButton kuiButton--danger kuiButton--small"
+            >
+              <span class="kuiIcon fa-times"></span>
+            </button>
+          </td>
+        </tr>
+      </table>
 
-        <button
-          ng-click="addRange()"
-          class="kuiButton kuiButton--primary kuiButton--fullWidth"
-          data-test-subj="heatmapAddRangeButton"
-          i18n-id="kbnVislibVisTypes.controls.heatmapOptions.addRangeButtonLabel"
-          i18n-default-message="Add Range"
-        ></button>
-        <div class="euiSpacer euiSpacer--s"></div>
-        <div
-          class="text text-center text-info"
-          i18n-id="kbnVislibVisTypes.controls.heatmapOptions.howToChangeColorsDescription"
-          i18n-default-message="Note: colors can be changed in the legend"
-        ></div>
+      <div class="hintbox" ng-show="!editorState.params.colorsRange.length">
+        <p
+          i18n-id="kbnVislibVisTypes.controls.heatmapOptions.specifiedRangeNumberWarningMessage"
+          i18n-default-message="{icon} {required} You must specify at least one range."
+          i18n-values="{
+            html_icon: '<span class=\'kuiIcon fa-danger text-danger\'></span>',
+            html_required: '<strong>' + requiredText + '</strong>'
+          }"
+        ></p>
       </div>
+
+      <button
+        ng-click="addRange()"
+        class="kuiButton kuiButton--primary kuiButton--fullWidth"
+        data-test-subj="heatmapAddRangeButton"
+        i18n-id="kbnVislibVisTypes.controls.heatmapOptions.addRangeButtonLabel"
+        i18n-default-message="Add Range"
+      ></button>
+      <div class="euiSpacer euiSpacer--s"></div>
+      <div
+        class="text text-center text-info"
+        i18n-id="kbnVislibVisTypes.controls.heatmapOptions.howToChangeColorsDescription"
+        i18n-default-message="Note: colors can be changed in the legend"
+      ></div>
+
     </div>
   </div>
-  <div>
-    <div class="kuiSideBarCollapsibleTitle">
+
+  <div class="visEditorSidebar__collapsible--margin">
+    <div class="visEditorSidebar__collapsibleTitle">
       <div
-        class="kuiSideBarCollapsibleTitle__label"
+        class="visEditorSidebar__collapsibleTitleLabel"
         ng-click="toggleLabelSection()"
         kbn-accessible-click
         aria-expanded="{{!!showLabels}}"
         aria-controls="heatmapOptionsLabels"
       >
+        <icon color="'primary'" aria-hidden="true" ng-if="showLabels" type="'arrowDown'" size="'s'"></icon>
+        <icon color="'primary'" aria-hidden="true" ng-if="!showLabels" type="'arrowRight'" size="'s'"></icon>
+
         <span
-          aria-hidden="true"
-          ng-class="{
-          'fa-caret-down': showLabels,
-          'fa-caret-right': !showLabels
-          }"
-          class="kuiIcon fa-caret-right kuiSideBarCollapsibleTitle__caret"
-        ></span>
-        <span
-          class="kuiSideBarCollapsibleTitle__text"
+          class="visEditorSidebar__collapsibleTitleText"
           i18n-id="kbnVislibVisTypes.controls.heatmapOptions.showLabelsTitle"
           i18n-default-message="Show Labels"
         ></span>
@@ -244,56 +236,54 @@
         aria-label="Show labels"
         ng-model="editorState.params.valueAxes[0].labels.show"
         type="checkbox"
-        class="kuiSideBarSectionTitle__action"
       >
     </div>
     <div
       id="heatmapOptionsLabels"
       ng-if="editorState.params.valueAxes[0].labels.show"
       ng-show="showLabels"
-      class="kuiSideBarCollapsibleSection"
     >
-      <div class="kuiSideBarSection">
-        <div class="kuiSideBarFormRow">
-          <label
-            class="kuiSideBarFormRow__label"
-            for="rotateLabels"
-            i18n-id="kbnVislibVisTypes.controls.heatmapOptions.rotateLabel"
-            i18n-default-message="Rotate"
-          ></label>
-          <div class="kuiSideBarFormRow__control">
-            <input class="kuiCheckBox" id="rotateLabels" type="checkbox" ng-model="options.rotateLabels">
-          </div>
-        </div>
 
-        <div class="kuiSideBarFormRow">
-          <label
-            class="kuiSideBarFormRow__label"
-            for="overwriteColor"
-            i18n-id="kbnVislibVisTypes.controls.heatmapOptions.overwriteAutomaticColorLabel"
-            i18n-default-message="Overwrite automatic color"
-          ></label>
-          <div class="kuiSideBarFormRow__control">
-            <input class="kuiCheckBox" id="overwriteColor" type="checkbox" ng-model="editorState.params.valueAxes[0].labels.overwriteColor">
-          </div>
-        </div>
-
-        <div class="kuiSideBarFormRow" ng-show="editorState.params.valueAxes[0].labels.overwriteColor">
-          <label
-            class="kuiSideBarFormRow__label"
-            for="labelColor"
-            i18n-id="kbnVislibVisTypes.controls.heatmapOptions.colorLabel"
-            i18n-default-message="Color"
-          ></label>
-          <div class="kuiSideBarFormRow__control">
-            <input
-              id="labelColor"
-              class="kuiSideBarInput"
-              ng-model="editorState.params.valueAxes[0].labels.color"
-            >
-          </div>
+      <div class="visEditorSidebar__formRow visEditorSidebar__formRow--expand">
+        <label
+          class="visEditorSidebar__formLabel"
+          for="rotateLabels"
+          i18n-id="kbnVislibVisTypes.controls.heatmapOptions.rotateLabel"
+          i18n-default-message="Rotate"
+        ></label>
+        <div class="visEditorSidebar__formControl">
+          <input class="kuiCheckBox" id="rotateLabels" type="checkbox" ng-model="options.rotateLabels">
         </div>
       </div>
+
+      <div class="visEditorSidebar__formRow visEditorSidebar__formRow--expand">
+        <label
+          class="visEditorSidebar__formLabel"
+          for="overwriteColor"
+          i18n-id="kbnVislibVisTypes.controls.heatmapOptions.overwriteAutomaticColorLabel"
+          i18n-default-message="Overwrite automatic color"
+        ></label>
+        <div class="visEditorSidebar__formControl">
+          <input class="kuiCheckBox" id="overwriteColor" type="checkbox" ng-model="editorState.params.valueAxes[0].labels.overwriteColor">
+        </div>
+      </div>
+
+      <div class="visEditorSidebar__formRow" ng-show="editorState.params.valueAxes[0].labels.overwriteColor">
+        <label
+          class="visEditorSidebar__formLabel"
+          for="labelColor"
+          i18n-id="kbnVislibVisTypes.controls.heatmapOptions.colorLabel"
+          i18n-default-message="Color"
+        ></label>
+        <div class="visEditorSidebar__formControl">
+          <input
+            id="labelColor"
+            class="visEditorSidebar__input"
+            ng-model="editorState.params.valueAxes[0].labels.color"
+          >
+        </div>
+      </div>
+
     </div>
   </div>
 

src/legacy/core_plugins/kbn_vislib_vis_types/public/controls/point_series/category_axis.html

@@ -1,64 +1,60 @@
-<div class="kuiSideBarSection kuiSideBarSection__main">
-  <div class="kuiSideBarSectionTitle">
+<div class="visEditorSidebar__section kuiSideBarSection__main">
+  <div class="visEditorSidebar__sectionTitle">
     <div
-      class="kuiSideBarSectionTitle__text"
       i18n-id="kbnVislibVisTypes.controls.pointSeries.categoryAxis.xAxisTitle"
       i18n-default-message="X-Axis"
     ></div>
   </div>
 
   <!-- General -->
-  <div class="kuiSideBarSection">
-    <div class="kuiSideBarFormRow">
-      <label
-        class="kuiSideBarFormRow__label"
-        for="categoryAxisShow"
-        i18n-id="kbnVislibVisTypes.controls.pointSeries.categoryAxis.showLabel"
-        i18n-default-message="Show"
-      ></label>
-      <div class="kuiSideBarFormRow__control">
-        <input class="kuiCheckBox" id="categoryAxisShow" type="checkbox" ng-model="editorState.params.categoryAxes[0].show">
-      </div>
-    </div>
-
-    <div class="kuiSideBarFormRow">
-      <label
-        class="kuiSideBarFormRow__label"
-        for="categoryAxisPosition"
-        i18n-id="kbnVislibVisTypes.controls.pointSeries.categoryAxis.positionLabel"
-        i18n-default-message="Position"
-      ></label>
-      <div class="kuiSideBarFormRow__control">
-        <select
-          id="categoryAxisPosition"
-          class="kuiSelect kuiSideBarSelect"
-          ng-model="editorState.params.categoryAxes[0].position"
-          ng-options="mode for mode in vis.type.editorConfig.collections.positions"
-        ></select>
-      </div>
+  <div class="visEditorSidebar__formRow">
+    <label
+      class="visEditorSidebar__formLabel"
+      for="categoryAxisShow"
+      i18n-id="kbnVislibVisTypes.controls.pointSeries.categoryAxis.showLabel"
+      i18n-default-message="Show"
+    ></label>
+    <div class="visEditorSidebar__formControl">
+      <input class="kuiCheckBox" id="categoryAxisShow" type="checkbox" ng-model="editorState.params.categoryAxes[0].show">
     </div>
   </div>
 
+  <div class="visEditorSidebar__formRow">
+    <label
+      class="visEditorSidebar__formLabel"
+      for="categoryAxisPosition"
+      i18n-id="kbnVislibVisTypes.controls.pointSeries.categoryAxis.positionLabel"
+      i18n-default-message="Position"
+    ></label>
+    <div class="visEditorSidebar__formControl">
+      <select
+        id="categoryAxisPosition"
+        class="kuiSelect visEditorSidebar__select"
+        ng-model="editorState.params.categoryAxes[0].position"
+        ng-options="mode for mode in vis.type.editorConfig.collections.positions"
+      ></select>
+    </div>
+  </div>
+
+
   <!-- Advanced options -->
-  <div class="kuiSideBarSection">
+  <div class="visEditorSidebar__collapsible--margin">
     <a
-      class="kuiSideBarOptionsLink small"
+      class="small"
       ng-click="isCategoryAxisAdvancedOptionsOpen = !isCategoryAxisAdvancedOptionsOpen"
       kbn-accessible-click
     >
+
+      <icon class="visEditorSidebar__advancedLinkIcon" color="'primary'" aria-hidden="true" ng-if="isCategoryAxisAdvancedOptionsOpen" type="'arrowDown'" size="'s'"></icon>
+      <icon class="visEditorSidebar__advancedLinkIcon" color="'primary'" aria-hidden="true" ng-if="!isCategoryAxisAdvancedOptionsOpen" type="'arrowRight'" size="'s'"></icon>
+
+
       <span
-        aria-hidden="true"
-        ng-class="{ 'fa-caret-down': isCategoryAxisAdvancedOptionsOpen, 'fa-caret-right': !isCategoryAxisAdvancedOptionsOpen }"
-        class="kuiIcon fa-caret-right kuiSideBarOptionsLink__caret"
-      ></span>
-      <span
-        class="kuiSideBarOptionsLink__text"
         ng-show="!isCategoryAxisAdvancedOptionsOpen"
         i18n-id="kbnVislibVisTypes.controls.pointSeries.categoryAxis.showAdvancedOptionsLabel"
         i18n-default-message="Show Advanced Options"
       ></span>
       <span
-        class="kuiSideBarOptionsLink__text"
         ng-show="isCategoryAxisAdvancedOptionsOpen"
         i18n-id="kbnVislibVisTypes.controls.pointSeries.categoryAxis.hideAdvancedOptionsLabel"
         i18n-default-message="Hide Advanced Options"
@@ -67,71 +63,70 @@
 
     <div ng-show="isCategoryAxisAdvancedOptionsOpen">
       <!-- Labels -->
-      <div class="kuiSideBarSection">
-        <h6
-          class="kuiSideBarFormSectionTitle"
-          i18n-id="kbnVislibVisTypes.controls.pointSeries.categoryAxis.labelsTitle"
-          i18n-default-message="Labels"
-        ></h6>
+      <h6
+        class="visEditorSidebar__formTitle"
+        i18n-id="kbnVislibVisTypes.controls.pointSeries.categoryAxis.labelsTitle"
+        i18n-default-message="Labels"
+      ></h6>
 
-        <div class="kuiSideBarFormRow">
-          <label
-            class="kuiSideBarFormRow__label"
-            for="categoryAxisShowLabels"
-            i18n-id="kbnVislibVisTypes.controls.pointSeries.categoryAxis.showLabelsLabel"
-            i18n-default-message="Show Labels"
-          ></label>
-          <div class="kuiSideBarFormRow__control">
-            <input class="kuiCheckBox" id="categoryAxisShowLabels" type="checkbox" ng-model="editorState.params.categoryAxes[0].labels.show">
-          </div>
-        </div>
-
-        <div class="kuiSideBarFormRow">
-          <label
-            class="kuiSideBarFormRow__label"
-            for="categoryAxisShowFilter"
-            i18n-id="kbnVislibVisTypes.controls.pointSeries.categoryAxis.filterLabelsLabel"
-            i18n-default-message="Filter Labels"
-          ></label>
-          <div class="kuiSideBarFormRow__control">
-            <input class="kuiCheckBox" id="categoryAxisShowFilter" type="checkbox" ng-model="editorState.params.categoryAxes[0].labels.filter">
-          </div>
-        </div>
-
-        <div class="kuiSideBarFormRow">
-          <label
-            class="kuiSideBarFormRow__label"
-            for="categoryAxisRotateLabels"
-            i18n-id="kbnVislibVisTypes.controls.pointSeries.categoryAxis.rotateLabel"
-            i18n-default-message="Rotate"
-          ></label>
-          <div class="kuiSideBarFormRow__control">
-            <select
-              id="categoryAxisRotateLabels"
-              class="kuiSelect kuiSideBarSelect"
-              ng-model="editorState.params.categoryAxes[0].labels.rotate"
-              ng-options="mode.value as mode.name for mode in rotateOptions"
-            ></select>
-          </div>
-        </div>
-
-        <div class="kuiSideBarFormRow">
-          <label
-            class="kuiSideBarFormRow__label"
-            for="categoryAxisTruncateLabels"
-            i18n-id="kbnVislibVisTypes.controls.pointSeries.categoryAxis.truncateLabel"
-            i18n-default-message="Truncate"
-          ></label>
-          <div class="kuiSideBarFormRow__control">
-            <input
-              id="categoryAxisTruncateLabels"
-              class="kuiInput kuiSideBarInput"
-              type="number"
-              ng-model="editorState.params.categoryAxes[0].labels.truncate"
-            >
-          </div>
+      <div class="visEditorSidebar__formRow">
+        <label
+          class="visEditorSidebar__formLabel"
+          for="categoryAxisShowLabels"
+          i18n-id="kbnVislibVisTypes.controls.pointSeries.categoryAxis.showLabelsLabel"
+          i18n-default-message="Show Labels"
+        ></label>
+        <div class="visEditorSidebar__formControl">
+          <input class="kuiCheckBox" id="categoryAxisShowLabels" type="checkbox" ng-model="editorState.params.categoryAxes[0].labels.show">
         </div>
       </div>
+
+      <div class="visEditorSidebar__formRow">
+        <label
+          class="visEditorSidebar__formLabel"
+          for="categoryAxisShowFilter"
+          i18n-id="kbnVislibVisTypes.controls.pointSeries.categoryAxis.filterLabelsLabel"
+          i18n-default-message="Filter Labels"
+        ></label>
+        <div class="visEditorSidebar__formControl">
+          <input class="kuiCheckBox" id="categoryAxisShowFilter" type="checkbox" ng-model="editorState.params.categoryAxes[0].labels.filter">
+        </div>
+      </div>
+
+      <div class="visEditorSidebar__formRow">
+        <label
+          class="visEditorSidebar__formLabel"
+          for="categoryAxisRotateLabels"
+          i18n-id="kbnVislibVisTypes.controls.pointSeries.categoryAxis.rotateLabel"
+          i18n-default-message="Rotate"
+        ></label>
+        <div class="visEditorSidebar__formControl">
+          <select
+            id="categoryAxisRotateLabels"
+            class="kuiSelect visEditorSidebar__select"
+            ng-model="editorState.params.categoryAxes[0].labels.rotate"
+            ng-options="mode.value as mode.name for mode in rotateOptions"
+          ></select>
+        </div>
+      </div>
+
+      <div class="visEditorSidebar__formRow">
+        <label
+          class="visEditorSidebar__formLabel"
+          for="categoryAxisTruncateLabels"
+          i18n-id="kbnVislibVisTypes.controls.pointSeries.categoryAxis.truncateLabel"
+          i18n-default-message="Truncate"
+        ></label>
+        <div class="visEditorSidebar__formControl">
+          <input
+            id="categoryAxisTruncateLabels"
+            class="kuiInput visEditorSidebar__input"
+            type="number"
+            ng-model="editorState.params.categoryAxes[0].labels.truncate"
+          >
+        </div>
+      </div>
+
     </div>
   </div>
 

src/legacy/core_plugins/kbn_vislib_vis_types/public/controls/point_series/grid.html

@@ -1,64 +1,59 @@
-<div>
-  <div class="kuiSideBarCollapsibleTitle">
+<div class="visEditorSidebar__collapsible--margin">
+  <div class="visEditorSidebar__collapsibleTitle">
     <div
-      class="kuiSideBarCollapsibleTitle__label"
+      class="visEditorSidebar__collapsibleTitleLabel"
       ng-click="isGridOpen = !isGridOpen"
       kbn-accessible-click
       aria-expanded="{{!!isGridOpen}}"
       aria-controls="visGridOptions"
       aria-label="Toggle grid options"
     >
+      <icon color="'primary'"aria-hidden="true"ng-if="isGridOpen"type="'arrowDown'"size="'s'"></icon>
+      <icon color="'primary'"aria-hidden="true"ng-if="!isGridOpen"type="'arrowRight'"size="'s'"></icon>
+
       <span
-        aria-hidden="true"
-        ng-class="{ 'fa-caret-down': isGridOpen, 'fa-caret-right': !isGridOpen }"
-        class="kuiIcon fa-caret-right kuiSideBarCollapsibleTitle__caret"
-      ></span>
-      <span
-        class="kuiSideBarCollapsibleTitle__text"
+        class="visEditorSidebar__collapsibleTitleText"
         i18n-id="kbnVislibVisTypes.controls.pointSeries.gridAxis.gridText"
         i18n-default-message="Grid"
       ></span>
     </div>
   </div>
 
-  <div id="visGridOptions" ng-show="isGridOpen" class="kuiSideBarCollapsibleSection">
+  <div id="visGridOptions" ng-show="isGridOpen">
     <!-- General -->
-    <div class="kuiSideBarSection">
-      <div class="kuiSideBarFormRow">
-        <label
-          class="kuiSideBarFormRow__label"
-          for="showCategoryLines"
-          i18n-id="kbnVislibVisTypes.controls.pointSeries.gridAxis.xAxisLinesLabel"
-          i18n-default-message="X-Axis Lines"
-        ></label>
-        <div class="kuiSideBarFormRow__control">
-          <input class="kuiCheckBox" id="showCategoryLines" type="checkbox" ng-model="editorState.params.grid.categoryLines">
-        </div>
+    <div class="visEditorSidebar__formRow">
+      <label
+        class="visEditorSidebar__formLabel"
+        for="showCategoryLines"
+        i18n-id="kbnVislibVisTypes.controls.pointSeries.gridAxis.xAxisLinesLabel"
+        i18n-default-message="X-Axis Lines"
+      ></label>
+      <div class="visEditorSidebar__formControl">
+        <input class="kuiCheckBox" id="showCategoryLines" type="checkbox" ng-model="editorState.params.grid.categoryLines">
       </div>
-
-      <div class="kuiSideBarFormRow">
-        <label
-          class="kuiSideBarFormRow__label"
-          for="gridAxis"
-          i18n-id="kbnVislibVisTypes.controls.pointSeries.gridAxis.yAxisLinesLabel"
-          i18n-default-message="Y-Axis Lines"
-        ></label>
-        <div class="kuiSideBarFormRow__control">
-          <select
-            id="gridAxis"
-            class="kuiSelect kuiSideBarSelect"
-            ng-model="editorState.params.grid.valueAxis"
-            ng-options="axis.id as axis.name for axis in editorState.params.valueAxes track by axis.id"
-          >
-            <option
-              value=""
-              i18n-id="kbnVislibVisTypes.controls.pointSeries.gridAxis.dontShowLabel"
-              i18n-default-message="Don't show"
-            ></option>
-          </select>
-        </div>
-      </div>
-
     </div>
 
+    <div class="visEditorSidebar__formRow">
+      <label
+        class="visEditorSidebar__formLabel"
+        for="gridAxis"
+        i18n-id="kbnVislibVisTypes.controls.pointSeries.gridAxis.yAxisLinesLabel"
+        i18n-default-message="Y-Axis Lines"
+      ></label>
+      <div class="visEditorSidebar__formControl">
+        <select
+          id="gridAxis"
+          class="kuiSelect visEditorSidebar__select"
+          ng-model="editorState.params.grid.valueAxis"
+          ng-options="axis.id as axis.name for axis in editorState.params.valueAxes track by axis.id"
+        >
+          <option
+            value=""
+            i18n-id="kbnVislibVisTypes.controls.pointSeries.gridAxis.dontShowLabel"
+            i18n-default-message="Don't show"
+          ></option>
+        </select>
+      </div>
+    </div>
   </div>
+</div>

src/legacy/core_plugins/kbn_vislib_vis_types/public/controls/point_series/series.html

@@ -1,7 +1,6 @@
-<div class="kuiSideBarSection kuiSideBarSection__main">
-  <div class="kuiSideBarSectionTitle">
+<div class="visEditorSidebar__section kuiSideBarSection__main">
+  <div class="visEditorSidebar__sectionTitle">
     <div
-      class="kuiSideBarSectionTitle__text"
       i18n-id="kbnVislibVisTypes.controls.pointSeries.series.metricsTitle"
       i18n-default-message="Metrics"
     ></div>
@@ -9,155 +8,149 @@
 
   <div
     ng-repeat="chart in editorState.params.seriesParams track by $index"
-    class="kuiSideBarSection"
+    class="visEditorSidebar__section visEditorSidebar__collapsible"
   >
-    <div class="kuiSideBarCollapsibleTitle">
+    <div class="visEditorSidebar__collapsibleTitle">
       <div
         ng-init="isSeriesOpen = ($index === 0)"
-        class="kuiSideBarCollapsibleTitle__label"
+        class="visEditorSidebar__collapsibleTitleLabel"
         ng-click="isSeriesOpen = !isSeriesOpen"
         kbn-accessible-click
         aria-expanded="{{!!isSeriesOpen}}"
         aria-controls="visSeriesOptions{{$index}}"
         aria-label="Toggle {{chart.data.label}} options"
       >
-        <span
-          aria-hidden="true"
-          ng-class="{ 'fa-caret-down': isSeriesOpen, 'fa-caret-right': !isSeriesOpen }"
-          class="kuiIcon fa-caret-right kuiSideBarCollapsibleTitle__caret"
-        ></span>
-        <span class="kuiSideBarCollapsibleTitle__text">
+        <icon color="'primary'" aria-hidden="true" ng-if="isSeriesOpen" type="'arrowDown'" size="'s'"></icon>
+        <icon color="'primary'" aria-hidden="true" ng-if="!isSeriesOpen" type="'arrowRight'" size="'s'"></icon>
+
+        <span class="visEditorSidebar__collapsibleTitleText">
           {{chart.data.label}}
         </span>
       </div>
     </div>
 
-    <div id="visSeriesOptions{{$index}}" ng-show="isSeriesOpen" class="kuiSideBarCollapsibleSection">
+    <div id="visSeriesOptions{{$index}}" ng-show="isSeriesOpen">
       <!-- General -->
-      <div class="kuiSideBarSection">
-
-        <div class="kuiSideBarFormRow">
-          <label
-            class="kuiSideBarFormRow__label"
-            for="{{ 'seriesType' + $index }}"
-            i18n-id="kbnVislibVisTypes.controls.pointSeries.series.chartTypeLabel"
-            i18n-default-message="Chart Type"
-          ></label>
-          <div class="kuiSideBarFormRow__control">
-            <select
-              id="{{ 'seriesType' + $index }}"
-              class="kuiSelect kuiSideBarSelect"
-              ng-model="chart.type"
-              ng-options="mode.value as mode.text for mode in vis.type.editorConfig.collections.chartTypes"
-            ></select>
-          </div>
+      <div class="visEditorSidebar__formRow">
+        <label
+          class="visEditorSidebar__formLabel"
+          for="{{ 'seriesType' + $index }}"
+          i18n-id="kbnVislibVisTypes.controls.pointSeries.series.chartTypeLabel"
+          i18n-default-message="Chart Type"
+        ></label>
+        <div class="visEditorSidebar__formControl">
+          <select
+            id="{{ 'seriesType' + $index }}"
+            class="kuiSelect visEditorSidebar__select"
+            ng-model="chart.type"
+            ng-options="mode.value as mode.text for mode in vis.type.editorConfig.collections.chartTypes"
+          ></select>
         </div>
+      </div>
 
-        <div class="kuiSideBarFormRow">
-          <label
-            class="kuiSideBarFormRow__label"
-            for="{{ 'seriesMode' + $index }}"
-            i18n-id="kbnVislibVisTypes.controls.pointSeries.series.modeLabel"
-            i18n-default-message="Mode"
-          ></label>
-          <div class="kuiSideBarFormRow__control">
-            <select
-              id="{{ 'seriesMode' + $index }}"
-              class="kuiSelect kuiSideBarSelect"
-              ng-model="chart.mode"
-              ng-options="mode for mode in vis.type.editorConfig.collections.chartModes"
-            ></select>
-          </div>
+      <div class="visEditorSidebar__formRow">
+        <label
+          class="visEditorSidebar__formLabel"
+          for="{{ 'seriesMode' + $index }}"
+          i18n-id="kbnVislibVisTypes.controls.pointSeries.series.modeLabel"
+          i18n-default-message="Mode"
+        ></label>
+        <div class="visEditorSidebar__formControl">
+          <select
+            id="{{ 'seriesMode' + $index }}"
+            class="kuiSelect visEditorSidebar__select"
+            ng-model="chart.mode"
+            ng-options="mode for mode in vis.type.editorConfig.collections.chartModes"
+          ></select>
         </div>
+      </div>
 
-        <div class="kuiSideBarFormRow">
+      <div class="visEditorSidebar__formRow">
+        <label
+          class="visEditorSidebar__formLabel"
+          for="{{ 'seriesValueAxis' + $index }}"
+          i18n-id="kbnVislibVisTypes.controls.pointSeries.series.valueAxisLabel"
+          i18n-default-message="Value Axis"
+        ></label>
+        <div class="visEditorSidebar__formControl">
+          <select
+            id="{{ 'seriesValueAxis' + $index }}"
+            class="kuiSelect visEditorSidebar__select"
+            ng-model="chart.valueAxis"
+            ng-change="changeValueAxis($index)"
+          >
+            <option ng-repeat="axis in editorState.params.valueAxes track by axis.id" value="{{axis.id}}">{{axis.name}}</option>
+            <option
+              value="new"
+              i18n-id="kbnVislibVisTypes.controls.pointSeries.series.newAxisLabel"
+              i18n-default-message="New Axis…"
+            ></option>
+          </select>
+        </div>
+      </div>
+
+      <div ng-show="chart.type == 'line' || chart.type == 'area'">
+        <div class="visEditorSidebar__formRow">
           <label
-            class="kuiSideBarFormRow__label"
-            for="{{ 'seriesValueAxis' + $index }}"
-            i18n-id="kbnVislibVisTypes.controls.pointSeries.series.valueAxisLabel"
-            i18n-default-message="Value Axis"
+            class="visEditorSidebar__formLabel"
+            for="{{ 'lineMode' + $index }}"
+            i18n-id="kbnVislibVisTypes.controls.pointSeries.series.lineModeLabel"
+            i18n-default-message="Line Mode"
           ></label>
-          <div class="kuiSideBarFormRow__control">
+          <div class="visEditorSidebar__formControl">
             <select
-              id="{{ 'seriesValueAxis' + $index }}"
-              class="kuiSelect kuiSideBarSelect"
-              ng-model="chart.valueAxis"
-              ng-change="changeValueAxis($index)"
+              id="{{ 'lineMode' + $index }}"
+              class="kuiSelect visEditorSidebar__select"
+              ng-model="chart.interpolate"
+              ng-options="mode.value as mode.text for mode in vis.type.editorConfig.collections.interpolationModes"
             >
-              <option ng-repeat="axis in editorState.params.valueAxes track by axis.id" value="{{axis.id}}">{{axis.name}}</option>
-              <option
-                value="new"
-                i18n-id="kbnVislibVisTypes.controls.pointSeries.series.newAxisLabel"
-                i18n-default-message="New Axis…"
-              ></option>
             </select>
           </div>
         </div>
-
-        <div ng-show="chart.type == 'line' || chart.type == 'area'">
-          <div class="kuiSideBarFormRow">
-            <label
-              class="kuiSideBarFormRow__label"
-              for="{{ 'lineMode' + $index }}"
-              i18n-id="kbnVislibVisTypes.controls.pointSeries.series.lineModeLabel"
-              i18n-default-message="Line Mode"
-            ></label>
-            <div class="kuiSideBarFormRow__control">
-              <select
-                id="{{ 'lineMode' + $index }}"
-                class="kuiSelect kuiSideBarSelect"
-                ng-model="chart.interpolate"
-                ng-options="mode.value as mode.text for mode in vis.type.editorConfig.collections.interpolationModes"
-              >
-              </select>
-            </div>
-          </div>
-        </div>
-        <div ng-show="chart.type == 'line'">
-          <div class="kuiSideBarFormRow">
-            <label
-              class="kuiSideBarFormRow__label"
-              for="{{ 'drawLines' + $index }}"
-              i18n-id="kbnVislibVisTypes.controls.pointSeries.series.showLineLabel"
-              i18n-default-message="Show Line"
-            ></label>
-            <div class="kuiSideBarFormRow__control">
-              <input class="kuiCheckBox" id="{{ 'drawLines' + $index }}" type="checkbox" ng-model="chart.drawLinesBetweenPoints">
-            </div>
-          </div>
-
-          <div class="kuiSideBarFormRow">
-            <label
-              class="kuiSideBarFormRow__label"
-              for="{{ 'showCircles' + $index }}"
-              i18n-id="kbnVislibVisTypes.controls.pointSeries.series.showCirclesLabel"
-              i18n-default-message="Show Circles"
-            ></label>
-            <div class="kuiSideBarFormRow__control">
-              <input class="kuiCheckBox" id="{{ 'showCircles' + $index }}" type="checkbox" ng-model="chart.showCircles">
-            </div>
-          </div>
-
-          <div class="kuiSideBarFormRow">
-            <label
-              class="kuiSideBarFormRow__label"
-              i18n-id="kbnVislibVisTypes.controls.pointSeries.series.lineWidthLabel"
-              i18n-default-message="Line Width"
-            ></label>
-            <div class="kuiSideBarFormRow__control">
-              <input name="lineWidth"
-                     class="kuiInput kuiSideBarInput"
-                     type="number"
-                     step="0.5"
-                     ng-model="chart.lineWidth"
-              >
-            </div>
-          </div>
-
-        </div>
       </div>
+      <div ng-show="chart.type == 'line'">
+        <div class="visEditorSidebar__formRow">
+          <label
+            class="visEditorSidebar__formLabel"
+            for="{{ 'drawLines' + $index }}"
+            i18n-id="kbnVislibVisTypes.controls.pointSeries.series.showLineLabel"
+            i18n-default-message="Show Line"
+          ></label>
+          <div class="visEditorSidebar__formControl">
+            <input class="kuiCheckBox" id="{{ 'drawLines' + $index }}" type="checkbox" ng-model="chart.drawLinesBetweenPoints">
+          </div>
+        </div>
+
+        <div class="visEditorSidebar__formRow">
+          <label
+            class="visEditorSidebar__formLabel"
+            for="{{ 'showCircles' + $index }}"
+            i18n-id="kbnVislibVisTypes.controls.pointSeries.series.showCirclesLabel"
+            i18n-default-message="Show Circles"
+          ></label>
+          <div class="visEditorSidebar__formControl">
+            <input class="kuiCheckBox" id="{{ 'showCircles' + $index }}" type="checkbox" ng-model="chart.showCircles">
+          </div>
+        </div>
+
+        <div class="visEditorSidebar__formRow">
+          <label
+            class="visEditorSidebar__formLabel"
+            i18n-id="kbnVislibVisTypes.controls.pointSeries.series.lineWidthLabel"
+            i18n-default-message="Line Width"
+          ></label>
+          <div class="visEditorSidebar__formControl">
+            <input name="lineWidth"
+                   class="kuiInput visEditorSidebar__input"
+                   type="number"
+                   step="0.5"
+                   ng-model="chart.lineWidth"
+            >
+          </div>
+        </div>
+
+      </div>
+
     </div>
   </div>
-
-  <div style="height: 10px"></div>
 </div>

src/legacy/core_plugins/kbn_vislib_vis_types/public/controls/point_series/value_axes.html

@@ -1,7 +1,6 @@
-<div class="kuiSideBarSection kuiSideBarSection__main">
-  <div class="kuiSideBarSectionTitle">
+<div class="visEditorSidebar__section kuiSideBarSection__main">
+  <div class="visEditorSidebar__sectionTitle">
     <div
-      class="kuiSideBarSectionTitle__text"
       i18n-id="kbnVislibVisTypes.controls.pointSeries.valueAxes.yAxisTitle"
       i18n-default-message="Y-Axes"
     ></div>
@@ -13,35 +12,34 @@
       tooltip="Add Y axis"
       tooltip-append-to-body="true"
       type="button"
-      class="kuiIcon fa-plus kuiSideBarSectionTitle__action"
-    ></button>
+    >
+      <icon color="'primary'" aria-hidden="true" type="'plusInCircleFilled'" size="'m'"></icon>
+    </button>
   </div>
 
   <div
     ng-repeat="axis in editorState.params.valueAxes track by axis.id"
-    class="kuiSideBarSection"
+    class="visEditorSidebar__section visEditorSidebar__collapsible"
   >
-    <div class="kuiSideBarCollapsibleTitle">
+    <div class="visEditorSidebar__collapsibleTitle">
       <div
         data-test-subj="toggleYAxisOptions-{{axis.id}}"
-        class="kuiSideBarCollapsibleTitle__label"
+        class="visEditorSidebar__collapsibleTitleLabel"
         ng-click="isValueAxisOpen = !isValueAxisOpen"
         kbn-accessible-click
         aria-expanded="{{!!isValueAxisOpen}}"
         aria-controls="axisOptions{{axis.id}}"
         aria-label="Toggle {{axis.name}} options"
       >
-        <span
-          aria-hidden="true"
-          ng-class="{ 'fa-caret-down': isValueAxisOpen, 'fa-caret-right': !isValueAxisOpen }"
-          class="kuiIcon fa-caret-right kuiSideBarCollapsibleTitle__caret"
-        ></span>
-        <span class="kuiSideBarCollapsibleTitle__text">
+        <icon class="kuiSideBarOptionsLink__caret" color="'primary'" aria-hidden="true" ng-if="isValueAxisOpen" type="'arrowDown'" size="'s'"></icon>
+        <icon class="kuiSideBarOptionsLink__caret" color="'primary'" aria-hidden="true" ng-if="!isValueAxisOpen" type="'arrowRight'" size="'s'"></icon>
+
+        <span class="visEditorSidebar__collapsibleTitleText">
           {{axis.name}}
         </span>
       </div>
 
-      <div tooltip="{{getSeries(axis)}}">{{getSeriesShort(axis)}}</div>
+      <div class="visEditorSidebar__collapsibleTitleDescription" tooltip="{{getSeries(axis)}}">{{getSeriesShort(axis)}}</div>
 
       <button
         ng-hide="editorState.params.valueAxes.length === 1"
@@ -50,109 +48,108 @@
         tooltip="Remove Y axis"
         tooltip-append-to-body="true"
         type="button"
-        class="kuiIcon fa-remove kuiSideBarCollapsibleTitle__action"
-      ></button>
+      >
+        <icon color="'danger'" aria-hidden="true" type="'cross'" size="'m'"></icon>
+      </button>
     </div>
 
-    <div id="axisOptions{{axis.id}}" ng-show="isValueAxisOpen" class="kuiSideBarCollapsibleSection">
+    <div id="axisOptions{{axis.id}}" ng-show="isValueAxisOpen">
       <!-- General -->
-      <div class="kuiSideBarSection">
-        <div class="kuiSideBarFormRow">
-          <label
-            class="kuiSideBarFormRow__label"
-            for="{ 'valueAxisShow' + $index }"
-            i18n-id="kbnVislibVisTypes.controls.pointSeries.valueAxes.showLabel"
-            i18n-default-message="Show"
-          ></label>
-          <div class="kuiSideBarFormRow__control">
-            <input class="kuiCheckBox" id="{ 'valueAxisShow' + $index }" type="checkbox" ng-model="axis.show">
-          </div>
-        </div>
 
-        <div class="kuiSideBarFormRow">
-          <label
-            class="kuiSideBarFormRow__label"
-            for="{{ 'valueAxisTitle' + $index }}"
-            i18n-id="kbnVislibVisTypes.controls.pointSeries.valueAxes.titleLabel"
-            i18n-default-message="Title"
-          ></label>
-          <div class="kuiSideBarFormRow__control">
-            <input
-              id="{{ 'valueAxisTitle' + $index }}"
-              class="kuiInput kuiSideBarInput"
-              type="text"
-              ng-model="axis.title.text"
-            >
-          </div>
-        </div>
-
-        <div class="kuiSideBarFormRow">
-          <label
-            class="kuiSideBarFormRow__label"
-            for="{{ 'valueAxisPosition' + $index }}"
-            i18n-id="kbnVislibVisTypes.controls.pointSeries.valueAxes.positionLabel"
-            i18n-default-message="Position"
-          ></label>
-          <div class="kuiSideBarFormRow__control">
-            <select
-              id="{{ 'valueAxisPosition' + $index }}"
-              class="kuiSelect kuiSideBarSelect"
-              ng-change="updateAxisName(axis)"
-              ng-model="axis.position"
-              ng-options="mode disable when isPositionDisabled(mode) for mode in vis.type.editorConfig.collections.positions"
-            ></select>
-          </div>
-        </div>
-
-        <div class="kuiSideBarFormRow">
-          <label
-            class="kuiSideBarFormRow__label"
-            for="{{ 'valueAxisMode' + $index }}"
-            i18n-id="kbnVislibVisTypes.controls.pointSeries.valueAxes.modeLabel"
-            i18n-default-message="Mode"
-          ></label>
-          <div class="kuiSideBarFormRow__control">
-            <select
-              id="{{ 'valueAxisMode' + $index }}"
-              class="kuiSelect kuiSideBarSelect"
-              ng-model="axis.scale.mode"
-              ng-options="mode for mode in vis.type.editorConfig.collections.axisModes"
-            ></select>
-          </div>
-        </div>
-
-        <div class="kuiSideBarFormRow">
-          <label
-            class="kuiSideBarFormRow__label"
-            for="{{ 'valueAxisScaleType' + $index }}"
-            i18n-id="kbnVislibVisTypes.controls.pointSeries.valueAxes.scaleTypeLabel"
-            i18n-default-message="Scale Type"
-          ></label>
-          <div class="kuiSideBarFormRow__control">
-            <select
-              data-test-subj="scaleSelectYAxis-{{axis.id}}"
-              id="{{ 'valueAxisScaleType' + $index }}"
-              class="kuiSelect kuiSideBarSelect"
-              ng-model="axis.scale.type"
-              ng-options="type for type in vis.type.editorConfig.collections.scaleTypes"
-            ></select>
-          </div>
+      <div class="visEditorSidebar__formRow">
+        <label
+          class="visEditorSidebar__formLabel"
+          for="{ 'valueAxisShow' + $index }"
+          i18n-id="kbnVislibVisTypes.controls.pointSeries.valueAxes.showLabel"
+          i18n-default-message="Show"
+        ></label>
+        <div class="visEditorSidebar__formControl">
+          <input class="kuiCheckBox" id="{ 'valueAxisShow' + $index }" type="checkbox" ng-model="axis.show">
         </div>
       </div>
 
+      <div class="visEditorSidebar__formRow">
+        <label
+          class="visEditorSidebar__formLabel"
+          for="{{ 'valueAxisTitle' + $index }}"
+          i18n-id="kbnVislibVisTypes.controls.pointSeries.valueAxes.titleLabel"
+          i18n-default-message="Title"
+        ></label>
+        <div class="visEditorSidebar__formControl">
+          <input
+            id="{{ 'valueAxisTitle' + $index }}"
+            class="kuiInput visEditorSidebar__input"
+            type="text"
+            ng-model="axis.title.text"
+          >
+        </div>
+      </div>
+
+      <div class="visEditorSidebar__formRow">
+        <label
+          class="visEditorSidebar__formLabel"
+          for="{{ 'valueAxisPosition' + $index }}"
+          i18n-id="kbnVislibVisTypes.controls.pointSeries.valueAxes.positionLabel"
+          i18n-default-message="Position"
+        ></label>
+        <div class="visEditorSidebar__formControl">
+          <select
+            id="{{ 'valueAxisPosition' + $index }}"
+            class="kuiSelect visEditorSidebar__select"
+            ng-change="updateAxisName(axis)"
+            ng-model="axis.position"
+            ng-options="mode disable when isPositionDisabled(mode) for mode in vis.type.editorConfig.collections.positions"
+          ></select>
+        </div>
+      </div>
+
+      <div class="visEditorSidebar__formRow">
+        <label
+          class="visEditorSidebar__formLabel"
+          for="{{ 'valueAxisMode' + $index }}"
+          i18n-id="kbnVislibVisTypes.controls.pointSeries.valueAxes.modeLabel"
+          i18n-default-message="Mode"
+        ></label>
+        <div class="visEditorSidebar__formControl">
+          <select
+            id="{{ 'valueAxisMode' + $index }}"
+            class="kuiSelect visEditorSidebar__select"
+            ng-model="axis.scale.mode"
+            ng-options="mode for mode in vis.type.editorConfig.collections.axisModes"
+          ></select>
+        </div>
+      </div>
+
+      <div class="visEditorSidebar__formRow">
+        <label
+          class="visEditorSidebar__formLabel"
+          for="{{ 'valueAxisScaleType' + $index }}"
+          i18n-id="kbnVislibVisTypes.controls.pointSeries.valueAxes.scaleTypeLabel"
+          i18n-default-message="Scale Type"
+        ></label>
+        <div class="visEditorSidebar__formControl">
+          <select
+            data-test-subj="scaleSelectYAxis-{{axis.id}}"
+            id="{{ 'valueAxisScaleType' + $index }}"
+            class="kuiSelect visEditorSidebar__select"
+            ng-model="axis.scale.type"
+            ng-options="type for type in vis.type.editorConfig.collections.scaleTypes"
+          ></select>
+        </div>
+      </div>
+
+
       <!-- Advanced options -->
-      <div class="kuiSideBarSection">
+      <div class="visEditorSidebar__collapsible--margin">
         <a
           data-test-subj="toggleYAxisAdvancedOptions-{{axis.id}}"
-          class="kuiSideBarOptionsLink small"
+          class="small"
           ng-click="isValueAxisAdvancedOptionsOpen = !isValueAxisAdvancedOptionsOpen"
           kbn-accessible-click
         >
-          <span
-            aria-hidden="true"
-            ng-class="{ 'fa-caret-down': isValueAxisAdvancedOptionsOpen, 'fa-caret-right': !isValueAxisAdvancedOptionsOpen }"
-            class="kuiIcon fa-caret-right kuiSideBarOptionsLink__caret"
-          ></span>
+          <icon class="visEditorSidebar__advancedLinkIcon" color="'primary'" aria-hidden="true" ng-if="isValueAxisAdvancedOptionsOpen" type="'arrowDown'" size="'s'"></icon>
+          <icon class="visEditorSidebar__advancedLinkIcon" color="'primary'" aria-hidden="true" ng-if="!isValueAxisAdvancedOptionsOpen" type="'arrowRight'" size="'s'"></icon>
+
           <span
             class="kuiSideBarOptionsLink__text"
             ng-show="!isValueAxisAdvancedOptionsOpen"
@@ -170,158 +167,154 @@
         <div ng-show="isValueAxisAdvancedOptionsOpen">
 
           <!-- Labels -->
-          <div class="kuiSideBarSection">
-            <h6
-              class="kuiSideBarFormSectionTitle"
-              i18n-id="kbnVislibVisTypes.controls.pointSeries.valueAxes.labelsTitle"
-              i18n-default-message="Labels"
-            ></h6>
+          <h6
+            class="visEditorSidebar__formTitle"
+            i18n-id="kbnVislibVisTypes.controls.pointSeries.valueAxes.labelsTitle"
+            i18n-default-message="Labels"
+          ></h6>
 
-            <div class="kuiSideBarFormRow">
-              <label
-                class="kuiSideBarFormRow__label"
-                for="{{ 'valueAxisShowLabels' + $index }}"
-                i18n-id="kbnVislibVisTypes.controls.pointSeries.valueAxes.showLabelsLabel"
-                i18n-default-message="Show Labels"
-              ></label>
-              <div class="kuiSideBarFormRow__control">
-                <input class="kuiCheckBox" id="{{ 'valueAxisShowLabels' + $index }}" type="checkbox" ng-model="axis.labels.show">
-              </div>
-            </div>
-
-            <div class="kuiSideBarFormRow">
-              <label
-                class="kuiSideBarFormRow__label"
-                for="{{ 'valueAxisFilterLabels' + $index }}"
-                i18n-id="kbnVislibVisTypes.controls.pointSeries.valueAxes.filterLabelsLabel"
-                i18n-default-message="Filter Labels"
-              ></label>
-              <div class="kuiSideBarFormRow__control">
-                <input
-                  data-test-subj="yAxisFilterLabelsCheckbox-{{axis.id}}"
-                  class="kuiCheckBox"
-                  id="{{ 'valueAxisFilterLabels' + $index }}"
-                  type="checkbox"
-                  ng-model="axis.labels.filter"
-                >
-              </div>
-            </div>
-
-            <div class="kuiSideBarFormRow">
-              <label
-                class="kuiSideBarFormRow__label"
-                for="{{ 'valueAxisRotateLabels' + $index }}"
-                i18n-id="kbnVislibVisTypes.controls.pointSeries.valueAxes.rotateLabel"
-                i18n-default-message="Rotate"
-              ></label>
-              <div class="kuiSideBarFormRow__control">
-                <select
-                  id="{{ 'valueAxisRotateLabels' + $index }}"
-                  class="kuiSelect kuiSideBarSelect"
-                  ng-model="axis.labels.rotate"
-                  ng-options="mode.value as mode.name for mode in rotateOptions"
-                ></select>
-              </div>
-            </div>
-
-            <div class="kuiSideBarFormRow">
-              <label
-                class="kuiSideBarFormRow__label"
-                for="{{ 'valueAxisTruncateLabels' + $index }}"
-                i18n-id="kbnVislibVisTypes.controls.pointSeries.valueAxes.truncateLabel"
-                i18n-default-message="Truncate"
-              ></label>
-              <div class="kuiSideBarFormRow__control">
-                <input
-                  id="{{ 'valueAxisTruncateLabels' + $index }}"
-                  class="kuiInput kuiSideBarInput"
-                  type="number"
-                  ng-model="axis.labels.truncate"
-                >
-              </div>
+          <div class="visEditorSidebar__formRow">
+            <label
+              class="visEditorSidebar__formLabel"
+              for="{{ 'valueAxisShowLabels' + $index }}"
+              i18n-id="kbnVislibVisTypes.controls.pointSeries.valueAxes.showLabelsLabel"
+              i18n-default-message="Show Labels"
+            ></label>
+            <div class="visEditorSidebar__formControl">
+              <input class="kuiCheckBox" id="{{ 'valueAxisShowLabels' + $index }}" type="checkbox" ng-model="axis.labels.show">
             </div>
           </div>
 
+          <div class="visEditorSidebar__formRow">
+            <label
+              class="visEditorSidebar__formLabel"
+              for="{{ 'valueAxisFilterLabels' + $index }}"
+              i18n-id="kbnVislibVisTypes.controls.pointSeries.valueAxes.filterLabelsLabel"
+              i18n-default-message="Filter Labels"
+            ></label>
+            <div class="visEditorSidebar__formControl">
+              <input
+                data-test-subj="yAxisFilterLabelsCheckbox-{{axis.id}}"
+                class="kuiCheckBox"
+                id="{{ 'valueAxisFilterLabels' + $index }}"
+                type="checkbox"
+                ng-model="axis.labels.filter"
+              >
+            </div>
+          </div>
+
+          <div class="visEditorSidebar__formRow">
+            <label
+              class="visEditorSidebar__formLabel"
+              for="{{ 'valueAxisRotateLabels' + $index }}"
+              i18n-id="kbnVislibVisTypes.controls.pointSeries.valueAxes.rotateLabel"
+              i18n-default-message="Rotate"
+            ></label>
+            <div class="visEditorSidebar__formControl">
+              <select
+                id="{{ 'valueAxisRotateLabels' + $index }}"
+                class="kuiSelect visEditorSidebar__select"
+                ng-model="axis.labels.rotate"
+                ng-options="mode.value as mode.name for mode in rotateOptions"
+              ></select>
+            </div>
+          </div>
+
+          <div class="visEditorSidebar__formRow">
+            <label
+              class="visEditorSidebar__formLabel"
+              for="{{ 'valueAxisTruncateLabels' + $index }}"
+              i18n-id="kbnVislibVisTypes.controls.pointSeries.valueAxes.truncateLabel"
+              i18n-default-message="Truncate"
+            ></label>
+            <div class="visEditorSidebar__formControl">
+              <input
+                id="{{ 'valueAxisTruncateLabels' + $index }}"
+                class="kuiInput visEditorSidebar__input"
+                type="number"
+                ng-model="axis.labels.truncate"
+              >
+            </div>
+          </div>
+
+
           <!-- Custom Extents -->
-          <div class="kuiSideBarSection">
-            <h6
-              class="kuiSideBarFormSectionTitle"
-              i18n-id="kbnVislibVisTypes.controls.pointSeries.valueAxes.customExtentsTitle"
-              i18n-default-message="Custom Extents"
-            ></h6>
+          <h6
+            class="visEditorSidebar__formTitle"
+            i18n-id="kbnVislibVisTypes.controls.pointSeries.valueAxes.customExtentsTitle"
+            i18n-default-message="Custom Extents"
+          ></h6>
 
-            <div class="kuiSideBarFormRow">
-              <label
-                class="kuiSideBarFormRow__label"
-                for="{ 'defaultYExtents' + $index }"
-                i18n-id="kbnVislibVisTypes.controls.pointSeries.valueAxes.scaleToDataBoundsLabel"
-                i18n-default-message="Scale to Data Bounds"
-              ></label>
-              <div class="kuiSideBarFormRow__control">
-                <input class="kuiCheckBox" id="{ 'defaultYExtents' + $index }" type="checkbox" ng-model="axis.scale.defaultYExtents">
-              </div>
-            </div>
-
-            <div class="kuiSideBarFormRow">
-              <label
-                class="kuiSideBarFormRow__label"
-                for="{ 'setYExtents' + $index }"
-                i18n-id="kbnVislibVisTypes.controls.pointSeries.valueAxes.setAxisExtentsLabel"
-                i18n-default-message="Set Axis Extents"
-              ></label>
-              <div class="kuiSideBarFormRow__control">
-                <input class="kuiCheckBox" id="{ 'setYExtents' + $index }" type="checkbox" ng-model="axis.scale.setYExtents" ng-change="updateExtents(axis)">
-              </div>
-            </div>
-
-            <div ng-if="axis.scale.setYExtents">
-              <div class="kuiSideBarFormRow">
-                <label
-                  class="kuiSideBarFormRow__label"
-                  i18n-id="kbnVislibVisTypes.controls.pointSeries.valueAxes.maxLabel"
-                  i18n-default-message="Max"
-                ></label>
-                <div class="kuiSideBarFormRow__control">
-                  <input
-                    name="yMax"
-                    class="kuiInput kuiSideBarInput"
-                    type="number"
-                    step="0.1"
-                    ng-model="axis.scale.max"
-                  >
-                </div>
-              </div>
-
-              <div class="kuiSideBarFormRow">
-                <label
-                  class="kuiSideBarFormRow__label"
-                  i18n-id="kbnVislibVisTypes.controls.pointSeries.valueAxes.minLabel"
-                  i18n-default-message="Min"
-                ></label>
-                <div class="kuiSideBarFormRow__control">
-                  <input
-                    name="yMin"
-                    class="kuiInput kuiSideBarInput"
-                    type="number"
-                    step="0.1"
-                    greater-than="{{axis.scale.type === 'log' ? 0 : ''}}"
-                    ng-model="axis.scale.min"
-                  >
-                </div>
-              </div>
-              <div ng-show="axis.scale.type === 'log' && axis.scale.min <= 0">
-                <span
-                  class="text-danger"
-                  i18n-id="kbnVislibVisTypes.controls.pointSeries.valueAxes.minNeededScaleText"
-                  i18n-default-message="Min must exceed 0 when a log scale is selected"
-                ></span>
-              </div>
+          <div class="visEditorSidebar__formRow visEditorSidebar__formRow--expand">
+            <label
+              class="visEditorSidebar__formLabel"
+              for="{ 'defaultYExtents' + $index }"
+              i18n-id="kbnVislibVisTypes.controls.pointSeries.valueAxes.scaleToDataBoundsLabel"
+              i18n-default-message="Scale to Data Bounds"
+            ></label>
+            <div class="visEditorSidebar__formControl">
+              <input class="kuiCheckBox" id="{ 'defaultYExtents' + $index }" type="checkbox" ng-model="axis.scale.defaultYExtents">
             </div>
           </div>
+
+          <div class="visEditorSidebar__formRow visEditorSidebar__formRow--expand">
+            <label
+              class="visEditorSidebar__formLabel"
+              for="{ 'setYExtents' + $index }"
+              i18n-id="kbnVislibVisTypes.controls.pointSeries.valueAxes.setAxisExtentsLabel"
+              i18n-default-message="Set Axis Extents"
+            ></label>
+            <div class="visEditorSidebar__formControl">
+              <input class="kuiCheckBox" id="{ 'setYExtents' + $index }" type="checkbox" ng-model="axis.scale.setYExtents" ng-change="updateExtents(axis)">
+            </div>
+          </div>
+
+          <div ng-if="axis.scale.setYExtents">
+            <div class="visEditorSidebar__formRow">
+              <label
+                class="visEditorSidebar__formLabel"
+                i18n-id="kbnVislibVisTypes.controls.pointSeries.valueAxes.maxLabel"
+                i18n-default-message="Max"
+              ></label>
+              <div class="visEditorSidebar__formControl">
+                <input
+                  name="yMax"
+                  class="kuiInput visEditorSidebar__input"
+                  type="number"
+                  step="0.1"
+                  ng-model="axis.scale.max"
+                >
+              </div>
+            </div>
+
+            <div class="visEditorSidebar__formRow">
+              <label
+                class="visEditorSidebar__formLabel"
+                i18n-id="kbnVislibVisTypes.controls.pointSeries.valueAxes.minLabel"
+                i18n-default-message="Min"
+              ></label>
+              <div class="visEditorSidebar__formControl">
+                <input
+                  name="yMin"
+                  class="kuiInput visEditorSidebar__input"
+                  type="number"
+                  step="0.1"
+                  greater-than="{{axis.scale.type === 'log' ? 0 : ''}}"
+                  ng-model="axis.scale.min"
+                >
+              </div>
+            </div>
+            <div ng-show="axis.scale.type === 'log' && axis.scale.min <= 0">
+              <span
+                class="text-danger"
+                i18n-id="kbnVislibVisTypes.controls.pointSeries.valueAxes.minNeededScaleText"
+                i18n-default-message="Min must exceed 0 when a log scale is selected"
+              ></span>
+            </div>
+          </div>
+
         </div>
       </div>
     </div>
   </div>
-
-  <div style="height: 10px"></div>
 </div>

src/legacy/core_plugins/kbn_vislib_vis_types/public/controls/vislib_basic_options.html

@@ -1,12 +1,12 @@
 <div class="form-group">
-  <div class="kuiSideBarFormRow">
+  <div class="visEditorSidebar__formRow">
     <label
-      class="kuiSideBarFormRow__label"
+      class="visEditorSidebar__formLabel"
       for="visualizeBasicSettingsLegendPosition"
       i18n-id="kbnVislibVisTypes.controls.vislibBasicOptions.legendPositionLabel"
       i18n-default-message="Legend Position"
     ></label>
-    <div class="kuiSideBarFormRow__control">
+    <div class="visEditorSidebar__formControl">
       <select
         id="visualizeBasicSettingsLegendPosition"
         class="form-control"
@@ -17,14 +17,14 @@
     </div>
   </div>
 
-  <div class="kuiSideBarFormRow">
+  <div class="visEditorSidebar__formRow">
     <label
-      class="kuiSideBarFormRow__label"
+      class="visEditorSidebar__formLabel"
       for="showTooltip"
       i18n-id="kbnVislibVisTypes.controls.vislibBasicOptions.showTooltipLabel"
       i18n-default-message="Show Tooltip"
     ></label>
-    <div class="kuiSideBarFormRow__control">
+    <div class="visEditorSidebar__formControl">
       <input id="showTooltip" type="checkbox" ng-model="editorState.params.addTooltip">
     </div>
   </div>

src/legacy/core_plugins/kbn_vislib_vis_types/public/editors/heatmap.html

@@ -1,47 +1,46 @@
-<div class="kuiSideBarSection">
-  <div class="kuiSideBarSectionTitle">
+<div class="visEditorSidebar__section">
+  <div class="visEditorSidebar__sectionTitle">
     <div
-      class="kuiSideBarSectionTitle__text"
       i18n-id="kbnVislibVisTypes.editors.heatmap.basicSettingsTitle"
       i18n-default-message="Basic Settings"
     ></div>
   </div>
 
-  <div class="kuiSideBarFormRow">
+  <div class="visEditorSidebar__formRow">
     <label
-      class="kuiSideBarFormRow__label"
+      class="visEditorSidebar__formLabel"
       for="addTooltip"
       i18n-id="kbnVislibVisTypes.editors.heatmap.showTooltipsLabel"
       i18n-default-message="Show Tooltips"
     ></label>
-    <div class="kuiSideBarFormRow__control">
+    <div class="visEditorSidebar__formControl">
       <input class="kuiCheckBox" id="addTooltip" type="checkbox" ng-model="editorState.params.addTooltip">
     </div>
   </div>
 
-  <div class="kuiSideBarFormRow">
+  <div class="visEditorSidebar__formRow">
     <label
-      class="kuiSideBarFormRow__label"
+      class="visEditorSidebar__formLabel"
       for="enableHover"
       i18n-id="kbnVislibVisTypes.editors.heatmap.highlightLabel"
       i18n-default-message="Highlight"
     ></label>
-    <div class="kuiSideBarFormRow__control">
+    <div class="visEditorSidebar__formControl">
       <input class="kuiCheckBox" id="enableHover" type="checkbox" ng-model="editorState.params.enableHover">
     </div>
   </div>
 
-  <div class="kuiSideBarFormRow" ng-show="editorState.params.addLegend">
+  <div class="visEditorSidebar__formRow" ng-show="editorState.params.addLegend">
     <label
-      class="kuiSideBarFormRow__label"
+      class="visEditorSidebar__formLabel"
       for="legendPosition"
       i18n-id="kbnVislibVisTypes.editors.heatmap.legendPositionLabel"
       i18n-default-message="Legend Position"
     ></label>
-    <div class="kuiSideBarFormRow__control">
+    <div class="visEditorSidebar__formControl">
       <select
         id="legendPosition"
-        class="kuiSelect kuiSideBarSelect"
+        class="kuiSelect visEditorSidebar__select"
         ng-model="editorState.params.legendPosition"
         ng-options="position.value as position.text for position in vis.type.editorConfig.collections.legendPositions"
       ></select>
@@ -49,11 +48,10 @@
   </div>
 </div>
 
-<div class="kuiSideBarSection">
+<div class="visEditorSidebar__section">
 
-  <div class="kuiSideBarSectionTitle">
+  <div class="visEditorSidebar__sectionTitle">
     <div
-      class="kuiSideBarSectionTitle__text"
       i18n-id="kbnVislibVisTypes.editors.heatmap.heatmapSettingsTitle"
       i18n-default-message="Heatmap Settings"
     ></div>

src/legacy/core_plugins/kbn_vislib_vis_types/public/editors/pie.html

@@ -1,21 +1,20 @@
-<div class="kuiSideBarSection">
+<div class="visEditorSidebar__section">
   <div class="form-group">
-    <div class="kuiSideBarSectionTitle">
+    <div class="visEditorSidebar__sectionTitle">
       <div
-        class="kuiSideBarSectionTitle__text"
         i18n-id="kbnVislibVisTypes.editors.pie.pieSettingsTitle"
         i18n-default-message="Pie Settings"
       ></div>
     </div>
 
-    <div class="kuiSideBarFormRow">
+    <div class="visEditorSidebar__formRow">
       <label
-        class="kuiSideBarFormRow__label"
+        class="visEditorSidebar__formLabel"
         for="isDonut"
         i18n-id="kbnVislibVisTypes.editors.pie.donutLabel"
         i18n-default-message="Donut"
       ></label>
-      <div class="kuiSideBarFormRow__control">
+      <div class="visEditorSidebar__formControl">
         <input id="isDonut" name="isDonut" type="checkbox" value="{{isDonut}}"
                ng-checked="editorState.params.isDonut"
                ng-model="editorState.params.isDonut"
@@ -28,63 +27,62 @@
 </div>
 
 <!-- Labels -->
-<div class="kuiSideBarSection">
+<div class="visEditorSidebar__section">
   <div class="form-group">
-    <div class="kuiSideBarSectionTitle">
+    <div class="visEditorSidebar__sectionTitle">
       <div
-        class="kuiSideBarSectionTitle__text"
         i18n-id="kbnVislibVisTypes.editors.pie.labelsSettingsTitle"
         i18n-default-message="Labels Settings"
       ></div>
     </div>
 
-    <div class="kuiSideBarFormRow">
+    <div class="visEditorSidebar__formRow">
       <label
-        class="kuiSideBarFormRow__label"
+        class="visEditorSidebar__formLabel"
         for="showLabels"
         i18n-id="kbnVislibVisTypes.editors.pie.showLabelsLabel"
         i18n-default-message="Show Labels"
       ></label>
-      <div class="kuiSideBarFormRow__control">
+      <div class="visEditorSidebar__formControl">
         <input class="kuiCheckBox" id="showLabels" type="checkbox" ng-model="editorState.params.labels.show">
       </div>
     </div>
 
-    <div class="kuiSideBarFormRow">
+    <div class="visEditorSidebar__formRow">
       <label
-        class="kuiSideBarFormRow__label"
+        class="visEditorSidebar__formLabel"
         for="showLastLevel"
         i18n-id="kbnVislibVisTypes.editors.pie.showTopLevelOnlyLabel"
         i18n-default-message="Show Top Level Only"
       ></label>
-      <div class="kuiSideBarFormRow__control">
+      <div class="visEditorSidebar__formControl">
         <input class="kuiCheckBox" id="showLastLevel" type="checkbox" ng-model="editorState.params.labels.last_level">
       </div>
     </div>
 
-    <div class="kuiSideBarFormRow">
+    <div class="visEditorSidebar__formRow">
       <label
-        class="kuiSideBarFormRow__label"
+        class="visEditorSidebar__formLabel"
         for="showValues"
         i18n-id="kbnVislibVisTypes.editors.pie.showValuesLabel"
         i18n-default-message="Show Values"
       ></label>
-      <div class="kuiSideBarFormRow__control">
+      <div class="visEditorSidebar__formControl">
         <input class="kuiCheckBox" id="showValues" type="checkbox" ng-model="editorState.params.labels.values">
       </div>
     </div>
 
-    <div class="kuiSideBarFormRow">
+    <div class="visEditorSidebar__formRow">
       <label
-        class="kuiSideBarFormRow__label"
+        class="visEditorSidebar__formLabel"
         for="truncateLabels"
         i18n-id="kbnVislibVisTypes.editors.pie.truncateLabel"
         i18n-default-message="Truncate"
       ></label>
-      <div class="kuiSideBarFormRow__control">
+      <div class="visEditorSidebar__formControl">
         <input
           id="truncateLabels"
-          class="kuiInput kuiSideBarInput"
+          class="kuiInput visEditorSidebar__input"
           type="number"
           ng-model="editorState.params.labels.truncate"
         >

src/legacy/core_plugins/kbn_vislib_vis_types/public/editors/point_series.html

@@ -1,51 +1,50 @@
 <div>
   <!-- Global settings -->
-  <div class="kuiSideBarSection">
-    <div class="kuiSideBarSectionTitle">
+  <div class="visEditorSidebar__section">
+    <div class="visEditorSidebar__sectionTitle">
       <div
-        class="kuiSideBarSectionTitle__text"
         i18n-id="kbnVislibVisTypes.editors.pointSeries.settingsTitle"
         i18n-default-message="Settings"
       ></div>
     </div>
 
-    <div class="kuiSideBarFormRow">
+    <div class="visEditorSidebar__formRow">
       <label
-        class="kuiSideBarFormRow__label"
+        class="visEditorSidebar__formLabel"
         for="legendPosition"
         i18n-id="kbnVislibVisTypes.editors.pointSeries.legendPositionLabel"
         i18n-default-message="Legend Position"
       ></label>
-      <div class="kuiSideBarFormRow__control">
+      <div class="visEditorSidebar__formControl">
         <select
           id="legendPosition"
-          class="kuiSelect kuiSideBarSelect"
+          class="kuiSelect visEditorSidebar__select"
           ng-model="editorState.params.legendPosition"
           ng-options="position for position in ['top', 'left', 'right', 'bottom']"
         ></select>
       </div>
     </div>
 
-    <div class="kuiSideBarFormRow">
+    <div class="visEditorSidebar__formRow">
       <label
-        class="kuiSideBarFormRow__label"
+        class="visEditorSidebar__formLabel"
         for="showCursor"
         i18n-id="kbnVislibVisTypes.editors.pointSeries.showTooltipLabel"
         i18n-default-message="Show Tooltip"
       ></label>
-      <div class="kuiSideBarFormRow__control">
+      <div class="visEditorSidebar__formControl">
         <input class="kuiCheckBox" id="showCursor" type="checkbox" ng-model="editorState.params.addTooltip">
       </div>
     </div>
 
-    <div class="kuiSideBarFormRow" ng-show="vis.hasSchemaAgg('segment', 'date_histogram')">
+    <div class="visEditorSidebar__formRow" ng-show="vis.hasSchemaAgg('segment', 'date_histogram')">
       <label
-        class="kuiSideBarFormRow__label"
+        class="visEditorSidebar__formLabel"
         for="currentTimeMarker"
         i18n-id="kbnVislibVisTypes.editors.pointSeries.currentTimeMarkerLabel"
         i18n-default-message="Current Time Marker"
       ></label>
-      <div class="kuiSideBarFormRow__control">
+      <div class="visEditorSidebar__formControl">
         <input class="kuiCheckBox" id="currentTimeMarker" type="checkbox"
                ng-model="editorState.params.addTimeMarker"
                ng-checked="editorState.params.addTimeMarker"
@@ -53,14 +52,14 @@
       </div>
     </div>
 
-    <div class="kuiSideBarFormRow" ng-show="!vis.hasSchemaAgg('segment', 'date_histogram')">
+    <div class="visEditorSidebar__formRow" ng-show="!vis.hasSchemaAgg('segment', 'date_histogram')">
       <label
-        class="kuiSideBarFormRow__label"
+        class="visEditorSidebar__formLabel"
         for="orderBuckets"
         i18n-id="kbnVislibVisTypes.editors.pointSeries.orderBucketsBySumLabel"
         i18n-default-message="Order Buckets by Sum"
       ></label>
-      <div class="kuiSideBarFormRow__control">
+      <div class="visEditorSidebar__formControl">
         <input class="kuiCheckBox" id="orderBuckets" type="checkbox" ng-model="editorState.params.orderBucketsBySum">
       </div>
     </div>

src/legacy/core_plugins/kibana/public/home/components/tutorial/__snapshots__/instruction_set.test.js.snap

@@ -1,23 +1,35 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`render 1`] = `
-<div
-  className="kuiVerticalRhythmLarge"
->
-  <KuiBar
-    className="kuiVerticalRhythm"
+<div>
+  <EuiFlexGroup
+    alignItems="stretch"
+    component="div"
+    direction="row"
+    gutterSize="l"
+    justifyContent="spaceBetween"
+    responsive={false}
+    wrap={true}
   >
-    <KuiBarSection>
-      <div
-        className="kuiTitle"
+    <EuiFlexItem
+      component="div"
+      grow={false}
+    >
+      <EuiTitle
+        size="m"
+        textTransform="none"
       >
-        title1
-      </div>
-    </KuiBarSection>
-    <KuiBarSection />
-  </KuiBar>
+        <h2>
+          title1
+        </h2>
+      </EuiTitle>
+    </EuiFlexItem>
+    <EuiFlexItem
+      component="div"
+      grow={false}
+    />
+  </EuiFlexGroup>
   <EuiTabs
-    className="kuiVerticalRhythm"
     expand={false}
     size="m"
   >
@@ -79,23 +91,35 @@ exports[`render 1`] = `
 `;
 
 exports[`statusCheckState checking status 1`] = `
-<div
-  className="kuiVerticalRhythmLarge"
->
-  <KuiBar
-    className="kuiVerticalRhythm"
+<div>
+  <EuiFlexGroup
+    alignItems="stretch"
+    component="div"
+    direction="row"
+    gutterSize="l"
+    justifyContent="spaceBetween"
+    responsive={false}
+    wrap={true}
   >
-    <KuiBarSection>
-      <div
-        className="kuiTitle"
+    <EuiFlexItem
+      component="div"
+      grow={false}
+    >
+      <EuiTitle
+        size="m"
+        textTransform="none"
       >
-        title1
-      </div>
-    </KuiBarSection>
-    <KuiBarSection />
-  </KuiBar>
+        <h2>
+          title1
+        </h2>
+      </EuiTitle>
+    </EuiFlexItem>
+    <EuiFlexItem
+      component="div"
+      grow={false}
+    />
+  </EuiFlexGroup>
   <EuiTabs
-    className="kuiVerticalRhythm"
     expand={false}
     size="m"
   >
@@ -200,23 +224,35 @@ exports[`statusCheckState checking status 1`] = `
 `;
 
 exports[`statusCheckState failed status check - error 1`] = `
-<div
-  className="kuiVerticalRhythmLarge"
->
-  <KuiBar
-    className="kuiVerticalRhythm"
+<div>
+  <EuiFlexGroup
+    alignItems="stretch"
+    component="div"
+    direction="row"
+    gutterSize="l"
+    justifyContent="spaceBetween"
+    responsive={false}
+    wrap={true}
   >
-    <KuiBarSection>
-      <div
-        className="kuiTitle"
+    <EuiFlexItem
+      component="div"
+      grow={false}
+    >
+      <EuiTitle
+        size="m"
+        textTransform="none"
       >
-        title1
-      </div>
-    </KuiBarSection>
-    <KuiBarSection />
-  </KuiBar>
+        <h2>
+          title1
+        </h2>
+      </EuiTitle>
+    </EuiFlexItem>
+    <EuiFlexItem
+      component="div"
+      grow={false}
+    />
+  </EuiFlexGroup>
   <EuiTabs
-    className="kuiVerticalRhythm"
     expand={false}
     size="m"
   >
@@ -326,23 +362,35 @@ exports[`statusCheckState failed status check - error 1`] = `
 `;
 
 exports[`statusCheckState failed status check - no data 1`] = `
-<div
-  className="kuiVerticalRhythmLarge"
->
-  <KuiBar
-    className="kuiVerticalRhythm"
+<div>
+  <EuiFlexGroup
+    alignItems="stretch"
+    component="div"
+    direction="row"
+    gutterSize="l"
+    justifyContent="spaceBetween"
+    responsive={false}
+    wrap={true}
   >
-    <KuiBarSection>
-      <div
-        className="kuiTitle"
+    <EuiFlexItem
+      component="div"
+      grow={false}
+    >
+      <EuiTitle
+        size="m"
+        textTransform="none"
       >
-        title1
-      </div>
-    </KuiBarSection>
-    <KuiBarSection />
-  </KuiBar>
+        <h2>
+          title1
+        </h2>
+      </EuiTitle>
+    </EuiFlexItem>
+    <EuiFlexItem
+      component="div"
+      grow={false}
+    />
+  </EuiFlexGroup>
   <EuiTabs
-    className="kuiVerticalRhythm"
     expand={false}
     size="m"
   >
@@ -452,23 +500,35 @@ exports[`statusCheckState failed status check - no data 1`] = `
 `;
 
 exports[`statusCheckState initial state - no check has been attempted 1`] = `
-<div
-  className="kuiVerticalRhythmLarge"
->
-  <KuiBar
-    className="kuiVerticalRhythm"
+<div>
+  <EuiFlexGroup
+    alignItems="stretch"
+    component="div"
+    direction="row"
+    gutterSize="l"
+    justifyContent="spaceBetween"
+    responsive={false}
+    wrap={true}
   >
-    <KuiBarSection>
-      <div
-        className="kuiTitle"
+    <EuiFlexItem
+      component="div"
+      grow={false}
+    >
+      <EuiTitle
+        size="m"
+        textTransform="none"
       >
-        title1
-      </div>
-    </KuiBarSection>
-    <KuiBarSection />
-  </KuiBar>
+        <h2>
+          title1
+        </h2>
+      </EuiTitle>
+    </EuiFlexItem>
+    <EuiFlexItem
+      component="div"
+      grow={false}
+    />
+  </EuiFlexGroup>
   <EuiTabs
-    className="kuiVerticalRhythm"
     expand={false}
     size="m"
   >
@@ -573,23 +633,35 @@ exports[`statusCheckState initial state - no check has been attempted 1`] = `
 `;
 
 exports[`statusCheckState successful status check 1`] = `
-<div
-  className="kuiVerticalRhythmLarge"
->
-  <KuiBar
-    className="kuiVerticalRhythm"
+<div>
+  <EuiFlexGroup
+    alignItems="stretch"
+    component="div"
+    direction="row"
+    gutterSize="l"
+    justifyContent="spaceBetween"
+    responsive={false}
+    wrap={true}
   >
-    <KuiBarSection>
-      <div
-        className="kuiTitle"
+    <EuiFlexItem
+      component="div"
+      grow={false}
+    >
+      <EuiTitle
+        size="m"
+        textTransform="none"
       >
-        title1
-      </div>
-    </KuiBarSection>
-    <KuiBarSection />
-  </KuiBar>
+        <h2>
+          title1
+        </h2>
+      </EuiTitle>
+    </EuiFlexItem>
+    <EuiFlexItem
+      component="div"
+      grow={false}
+    />
+  </EuiFlexGroup>
   <EuiTabs
-    className="kuiVerticalRhythm"
     expand={false}
     size="m"
   >

src/legacy/core_plugins/kibana/public/home/components/tutorial/instruction_set.js

@@ -17,13 +17,8 @@
  * under the License.
  */
 
-import classNames from 'classnames';
 import React, { Fragment } from 'react';
 import PropTypes from 'prop-types';
-import {
-  KuiBar,
-  KuiBarSection,
-} from '@kbn/ui-framework/components';
 import { Instruction } from './instruction';
 import { ParameterForm } from './parameter_form';
 import { Content } from './content';
@@ -37,6 +32,8 @@ import {
   EuiFlexItem,
   EuiButton,
   EuiCallOut,
+  EuiButtonEmpty,
+  EuiTitle,
 } from '@elastic/eui';
 import * as StatusCheckStates from './status_check_states';
 
@@ -222,44 +219,37 @@ class InstructionSetUi extends React.Component {
   renderHeader = () => {
     let paramsVisibilityToggle;
     if (this.props.params) {
-      const visibilityToggleClasses = classNames('kuiIcon kuiSideBarCollapsibleTitle__caret', {
-        'fa-caret-right': !this.state.isParamFormVisible,
-        'fa-caret-down': this.state.isParamFormVisible
-      });
       const ariaLabel = this.props.intl.formatMessage({ id: 'kbn.home.tutorial.instructionSet.toggleAriaLabel',
         defaultMessage: 'toggle command parameters visibility'
       });
       paramsVisibilityToggle = (
-        <div className="kuiSideBarCollapsibleTitle" style={{ cursor: 'pointer' }}>
-          <div
-            aria-label={ariaLabel}
-            className="kuiSideBarCollapsibleTitle__label"
-            onClick={this.handleToggleVisibility}
-          >
-            <span className={visibilityToggleClasses} />
-            <span className="kuiSideBarCollapsibleTitle__text">
-              <FormattedMessage
-                id="kbn.home.tutorial.instructionSet.customizeLabel"
-                defaultMessage="Customize your code snippets"
-              />
-            </span>
-          </div>
-        </div>
+        <EuiButtonEmpty
+          iconType={this.state.isParamFormVisible ? 'arrowDown' : 'arrowRight'}
+          aria-label={ariaLabel}
+          onClick={this.handleToggleVisibility}
+        >
+          <FormattedMessage
+            id="kbn.home.tutorial.instructionSet.customizeLabel"
+            defaultMessage="Customize your code snippets"
+          />
+        </EuiButtonEmpty>
       );
     }
 
     return (
-      <KuiBar className="kuiVerticalRhythm">
-        <KuiBarSection>
-          <div className="kuiTitle">
-            {this.props.title}
-          </div>
-        </KuiBarSection>
+      <EuiFlexGroup responsive={false} wrap justifyContent="spaceBetween">
+        <EuiFlexItem grow={false}>
+          <EuiTitle size="m">
+            <h2>
+              {this.props.title}
+            </h2>
+          </EuiTitle>
+        </EuiFlexItem>
 
-        <KuiBarSection>
+        <EuiFlexItem grow={false}>
           {paramsVisibilityToggle}
-        </KuiBarSection>
-      </KuiBar>
+        </EuiFlexItem>
+      </EuiFlexGroup>
     );
   };
 
@@ -276,13 +266,13 @@ class InstructionSetUi extends React.Component {
     }
 
     return (
-      <div className="kuiVerticalRhythmLarge">
+      <div>
 
         {this.renderHeader()}
 
         {paramsForm}
 
-        <EuiTabs className="kuiVerticalRhythm">
+        <EuiTabs>
           {this.renderTabs()}
         </EuiTabs>
 

src/legacy/core_plugins/kibana/public/home/components/tutorial/number_parameter.js

@@ -26,14 +26,14 @@ export function NumberParameter({ id, label, value, setParameter }) {
   };
 
   return (
-    <div className="kuiSideBarFormRow">
+    <div className="visEditorSidebar__formRow">
       <label
-        className="kuiSideBarFormRow__label"
+        className="visEditorSidebar__formLabel"
         htmlFor={id}
       >
         {label}
       </label>
-      <div className="kuiSideBarFormRow__control kuiFieldGroupSection--wide">
+      <div className="visEditorSidebar__formControl kuiFieldGroupSection--wide">
         <input
           className="kuiTextInput"
           type="number"

src/legacy/core_plugins/kibana/public/home/components/tutorial/parameter_form.js

@@ -21,6 +21,7 @@ import React from 'react';
 import PropTypes from 'prop-types';
 import { NumberParameter } from './number_parameter';
 import { StringParameter } from './string_parameter';
+import { EuiPanel } from '@elastic/eui';
 
 export class ParameterForm extends React.Component {
 
@@ -55,13 +56,9 @@ export class ParameterForm extends React.Component {
 
   render() {
     return (
-      <div>
-
-        <div className="kuiSideBarSection">
-          {this.renderInputs()}
-        </div>
-
-      </div>
+      <EuiPanel>
+        {this.renderInputs()}
+      </EuiPanel>
     );
   }
 }

src/legacy/core_plugins/kibana/public/home/components/tutorial/string_parameter.js

@@ -26,13 +26,13 @@ export function StringParameter({ id, label, value, setParameter }) {
   };
 
   return (
-    <div className="kuiSideBarFormRow">
+    <div className="visEditorSidebar__formRow">
       <label
-        className="kuiSideBarFormRow__label"
+        className="visEditorSidebar__formLabel"
       >
         {label}
       </label>
-      <div className="kuiSideBarFormRow__control kuiFieldGroupSection--wide">
+      <div className="visEditorSidebar__formControl kuiFieldGroupSection--wide">
         <input
           className="kuiTextInput"
           type="text"

src/legacy/core_plugins/markdown_vis/public/markdown_vis_params.html

@@ -1,4 +1,4 @@
-<div class="kuiSideBarSection">
+<div class="visEditorSidebar__section">
   <div class="form-group">
     <div class="clearfix form-group">
       <label for="markdownVisInput">Markdown</label>
@@ -13,8 +13,8 @@
         </a>
       </small>
     </div>
-    <div class="kuiSideBarFormRow">
-      <label class="kuiSideBarFormRow__label" for="markdownVisFontSize">
+    <div class="visEditorSidebar__formRow">
+      <label class="visEditorSidebar__formLabel" for="markdownVisFontSize">
         <span
           i18n-id="markdownVis.params.fontSizeLabel"
           i18n-default-message="Font Size ({fontSize}pt)"
@@ -22,19 +22,19 @@
         >
         </span>
       </label>
-      <div class="kuiSideBarFormRow__control">
+      <div class="visEditorSidebar__formControl">
         <input id="markdownVisFontSize" type="range" ng-model="editorState.params.fontSize" class="form-control" min="8" max="36" />
       </div>
     </div>
-    <div class="kuiSideBarFormRow">
+    <div class="visEditorSidebar__formRow">
       <label
-        class="kuiSideBarFormRow__label"
+        class="visEditorSidebar__formLabel"
         for="markdownVisOpenLinksInNewTab"
         i18n-id="markdownVis.params.openLinksLabel"
         i18n-default-message="Open links in new tab"
       >
       </label>
-      <div class="kuiSideBarFormRow__control">
+      <div class="visEditorSidebar__formControl">
         <input
           id="markdownVisOpenLinksInNewTab"
           type="checkbox"

src/legacy/core_plugins/metric_vis/public/metric_vis_params.html

@@ -1,48 +1,46 @@
-<div class="kuiSideBarSection">
+<div class="visEditorSidebar__section">
 
-  <div class="kuiSideBarFormRow">
+  <div class="visEditorSidebar__formRow">
     <label
-      class="kuiSideBarFormRow__label"
+      class="visEditorSidebar__formLabel"
       for="percentageMode"
       i18n-id="metricVis.params.percentageModeLabel"
       i18n-default-message="Percentage Mode"
     >
     </label>
-    <div class="kuiSideBarFormRow__control">
+    <div class="visEditorSidebar__formControl">
       <input class="kuiCheckBox" id="percentageMode" type="checkbox" ng-model="editorState.params.metric.percentageMode">
     </div>
   </div>
 
-  <div class="kuiSideBarFormRow">
+  <div class="visEditorSidebar__formRow">
     <label
-      class="kuiSideBarFormRow__label"
+      class="visEditorSidebar__formLabel"
       for="showLabels"
       i18n-id="metricVis.params.showLabelsLabel"
       i18n-default-message="Show Labels"
     >
     </label>
-    <div class="kuiSideBarFormRow__control">
+    <div class="visEditorSidebar__formControl">
       <input class="kuiCheckBox" id="showLabels" type="checkbox" ng-model="editorState.params.metric.labels.show">
     </div>
   </div>
 
-  <div>
-    <div class="kuiSideBarCollapsibleTitle">
+  <div class="visEditorSidebar__collapsible--margin">
+    <div class="visEditorSidebar__collapsibleTitle">
       <div
         kbn-accessible-click
         aria-expanded="{{!!showColorRange}}"
         aria-controls="metricOptionsRanges"
         aria-label="{{::'metricVis.params.ranges.toggleOptionsAriaLabel' | i18n: { defaultMessage: 'Toggle range options' } }}"
-        class="kuiSideBarCollapsibleTitle__label"
+        class="visEditorSidebar__collapsibleTitleLabel"
         ng-click="showColorRange = !showColorRange"
       >
-      <span
-        aria-hidden="true"
-        ng-class="{ 'fa-caret-down': showColorRange, 'fa-caret-right': !showColorRange }"
-        class="fa fa-caret-right kuiSideBarCollapsibleTitle__caret"
-      ></span>
+        <icon color="'primary'" aria-hidden="true" ng-if="showColorRange" type="'arrowDown'" size="'s'"></icon>
+        <icon color="'primary'" aria-hidden="true" ng-if="!showColorRange" type="'arrowRight'" size="'s'"></icon>
+
         <span
-          class="kuiSideBarCollapsibleTitle__text"
+          class="visEditorSidebar__collapsibleTitleText"
           i18n-id="metricVis.params.rangesTitle"
           i18n-default-message="Ranges"
         >
@@ -50,213 +48,202 @@
       </div>
     </div>
 
-    <div id="metricOptionsRanges" ng-show="showColorRange" class="kuiSideBarCollapsibleSection">
-      <div class="kuiSideBarSection">
-        <table class="visEditorAgg__rangesTable form-group" ng-show="editorState.params.metric.colorsRange.length">
-          <tr>
-            <th scope="col">
-              <label
-                id="metricOptionsCustomRangeFrom"
-                i18n-id="metricVis.params.ranges.fromLabel"
-                i18n-default-message="From"
-              >
-              </label>
-            </th>
-            <th scope="col" colspan="2">
-              <label
-                id="metricOptionsCustomRangeTo"
-                i18n-id="metricVis.params.ranges.toLabel"
-                i18n-default-message="To"
-              >
-              </label>
-            </th>
-          </tr>
+    <div id="metricOptionsRanges" ng-show="showColorRange">
 
-          <tr ng-repeat="range in editorState.params.metric.colorsRange track by $index">
-            <td>
-              <input
-                aria-labelledby="metricOptionsCustomRangeFrom"
-                ng-model="range.from"
-                type="number"
-                class="form-control"
-                name="range.from"
-                greater-or-equal-than="{{getGreaterThan($index)}}"
-                required
-                step="any" />
-            </td>
-            <td>
-              <input
-                aria-labelledby="metricOptionsCustomRangeTo"
-                ng-model="range.to"
-                type="number"
-                class="form-control"
-                name="range.to"
-                greater-or-equal-than="{{range.from}}"
-                required
-                step="any" />
-            </td>
-            <td>
-              <button
-                type="button"
-                ng-click="removeRange($index)"
-                ng-show="editorState.params.metric.colorsRange.length > 1"
-                class="kuiButton kuiButton--danger kuiButton--small">
-                <i class="fa fa-times"></i>
-              </button>
-            </td>
-          </tr>
-        </table>
-
-        <div class="hintbox" ng-show="!editorState.params.metric.colorsRange.length">
-          <p>
-            <i class="fa fa-danger text-danger"></i>
-            <span
-              i18n-id="metricVis.params.ranges.warning.specifyRangeDescription"
-              i18n-default-message="{requiredDescription} You must specify at least one range."
-              i18n-values="{ html_requiredDescription: '<strong>' + editorState.requiredDescription + '</strong>' }"
+      <table class="visEditorAgg__rangesTable form-group" ng-show="editorState.params.metric.colorsRange.length">
+        <tr>
+          <th scope="col">
+            <label
+              id="metricOptionsCustomRangeFrom"
+              i18n-id="metricVis.params.ranges.fromLabel"
+              i18n-default-message="From"
             >
-            </span>
-          </p>
-        </div>
+            </label>
+          </th>
+          <th scope="col" colspan="2">
+            <label
+              id="metricOptionsCustomRangeTo"
+              i18n-id="metricVis.params.ranges.toLabel"
+              i18n-default-message="To"
+            >
+            </label>
+          </th>
+        </tr>
 
-        <div
-          ng-click="addRange()"
-          class="kuiButton kuiButton--primary kuiButton--fullWidth"
-          i18n-id="metricVis.params.ranges.addRangeButtonLabel"
-          i18n-default-message="Add Range"
-        >
-        </div>
+        <tr ng-repeat="range in editorState.params.metric.colorsRange track by $index">
+          <td>
+            <input
+              aria-labelledby="metricOptionsCustomRangeFrom"
+              ng-model="range.from"
+              type="number"
+              class="form-control"
+              name="range.from"
+              greater-or-equal-than="{{getGreaterThan($index)}}"
+              required
+              step="any" />
+          </td>
+          <td>
+            <input
+              aria-labelledby="metricOptionsCustomRangeTo"
+              ng-model="range.to"
+              type="number"
+              class="form-control"
+              name="range.to"
+              greater-or-equal-than="{{range.from}}"
+              required
+              step="any" />
+          </td>
+          <td>
+            <button
+              type="button"
+              ng-click="removeRange($index)"
+              ng-show="editorState.params.metric.colorsRange.length > 1"
+              class="kuiButton kuiButton--danger kuiButton--small">
+              <i class="fa fa-times"></i>
+            </button>
+          </td>
+        </tr>
+      </table>
+
+      <div class="hintbox" ng-show="!editorState.params.metric.colorsRange.length">
+        <p>
+          <i class="fa fa-danger text-danger"></i>
+          <span
+            i18n-id="metricVis.params.ranges.warning.specifyRangeDescription"
+            i18n-default-message="{requiredDescription} You must specify at least one range."
+            i18n-values="{ html_requiredDescription: '<strong>' + editorState.requiredDescription + '</strong>' }"
+          >
+          </span>
+        </p>
       </div>
+
+      <div
+        ng-click="addRange()"
+        class="kuiButton kuiButton--primary kuiButton--fullWidth"
+        i18n-id="metricVis.params.ranges.addRangeButtonLabel"
+        i18n-default-message="Add Range"
+      >
+      </div>
+
     </div>
   </div>
-  <div ng-show="editorState.params.metric.colorsRange.length > 1">
-    <div class="kuiSideBarCollapsibleTitle">
+
+  <div ng-show="editorState.params.metric.colorsRange.length > 1" class="visEditorSidebar__collapsible--margin">
+    <div class="visEditorSidebar__collapsibleTitle">
       <div
         kbn-accessible-click
         aria-expanded="{{!!showColorOptions}}"
         aria-controls="metricOptionsColors"
         aria-label="{{::'metricVis.params.color.toggleOptionsAriaLabel' | i18n: { defaultMessage: 'Toggle color options' } }}"
-        class="kuiSideBarCollapsibleTitle__label"
+        class="visEditorSidebar__collapsibleTitleLabel"
         ng-click="showColorOptions = !showColorOptions"
       >
-      <span
-        aria-hidden="true"
-        ng-class="{
-        'fa-caret-down': showColorOptions,
-        'fa-caret-right': !showColorOptions
-        }"
-        class="fa fa-caret-right kuiSideBarCollapsibleTitle__caret"
-      ></span>
+        <icon color="'primary'" aria-hidden="true" ng-if="showColorOptions" type="'arrowDown'" size="'s'"></icon>
+        <icon color="'primary'" aria-hidden="true" ng-if="!showColorOptions" type="'arrowRight'" size="'s'"></icon>
+
         <span
-          class="kuiSideBarCollapsibleTitle__text"
+          class="visEditorSidebar__collapsibleTitleText"
           i18n-id="metricVis.params.color.colorOptionsTitle"
           i18n-default-message="Color Options"
         >
       </span>
       </div>
     </div>
-    <div id="metricOptionsColors" ng-if="showColorOptions" class="kuiSideBarCollapsibleSection">
-      <div class="kuiSideBarSection">
-        <div class="kuiSideBarFormRow" ng-show="editorState.params.metric.colorsRange.length > 1">
-          <label
-            class="kuiSideBarFormRow__label"
-            for="metricColorMode"
-            i18n-id="metricVis.params.color.useForLabel"
-            i18n-default-message="Use Color For"
-          >
-          </label>
-          <div class="kuiSideBarFormRow__control">
-            <select
-              id="metricColorMode"
-              class="kuiSelect kuiSideBarSelect"
-              ng-model="editorState.params.metric.metricColorMode"
-              ng-options="mode.id as mode.label for mode in collections.metricColorMode"
-            ></select>
-          </div>
-        </div>
-        <div class="kuiSideBarFormRow" ng-show="editorState.params.metric.metricColorMode !== 'None'">
-          <label
-            class="kuiSideBarFormRow__label"
-            for="colorSchema"
-            i18n-id="metricVis.params.color.schemaLabel"
-            i18n-default-message="Color Schema"
-          >
-          </label>
-          <div class="kuiSideBarFormRow__control">
-            <select
-              id="colorSchema"
-              class="kuiSelect kuiSideBarSelect"
-              ng-model="editorState.params.metric.colorSchema"
-              ng-options="mode.id as mode.label for mode in collections.colorSchemas"
-            ></select>
-          </div>
-          <div class="text-info text-center" ng-show="customColors" ng-click="resetColors()"
-            i18n-id="metricVis.params.color.resetColorDescription"
-            i18n-default-message="reset colors"
-          >
-          </div>
-        </div>
+    <div id="metricOptionsColors" ng-if="showColorOptions">
 
-        <div class="kuiSideBarFormRow"  ng-show="editorState.params.metric.metricColorMode !== 'None'">
-          <label
-            class="kuiSideBarFormRow__label"
-            for="invertColors"
-            i18n-id="metricVis.params.color.reverseSchemaLabel"
-            i18n-default-message="Reverse Color Schema"
-          >
-          </label>
-          <div class="kuiSideBarFormRow__control">
-            <input class="kuiCheckBox" id="invertColors" type="checkbox" ng-model="editorState.params.metric.invertColors">
-          </div>
+      <div class="visEditorSidebar__formRow" ng-show="editorState.params.metric.colorsRange.length > 1">
+        <label
+          class="visEditorSidebar__formLabel"
+          for="metricColorMode"
+          i18n-id="metricVis.params.color.useForLabel"
+          i18n-default-message="Use Color For"
+        >
+        </label>
+        <div class="visEditorSidebar__formControl">
+          <select
+            id="metricColorMode"
+            class="kuiSelect visEditorSidebar__select"
+            ng-model="editorState.params.metric.metricColorMode"
+            ng-options="mode.id as mode.label for mode in collections.metricColorMode"
+          ></select>
         </div>
       </div>
+      <div class="visEditorSidebar__formRow" ng-show="editorState.params.metric.metricColorMode !== 'None'">
+        <label
+          class="visEditorSidebar__formLabel"
+          for="colorSchema"
+          i18n-id="metricVis.params.color.schemaLabel"
+          i18n-default-message="Color Schema"
+        >
+        </label>
+        <div class="visEditorSidebar__formControl">
+          <select
+            id="colorSchema"
+            class="kuiSelect visEditorSidebar__select"
+            ng-model="editorState.params.metric.colorSchema"
+            ng-options="mode.id as mode.label for mode in collections.colorSchemas"
+          ></select>
+        </div>
+        <div class="text-info text-center" ng-show="customColors" ng-click="resetColors()"
+          i18n-id="metricVis.params.color.resetColorDescription"
+          i18n-default-message="reset colors"
+        >
+        </div>
+      </div>
+
+      <div class="visEditorSidebar__formRow"  ng-show="editorState.params.metric.metricColorMode !== 'None'">
+        <label
+          class="visEditorSidebar__formLabel"
+          for="invertColors"
+          i18n-id="metricVis.params.color.reverseSchemaLabel"
+          i18n-default-message="Reverse Color Schema"
+        >
+        </label>
+        <div class="visEditorSidebar__formControl">
+          <input class="kuiCheckBox" id="invertColors" type="checkbox" ng-model="editorState.params.metric.invertColors">
+        </div>
+      </div>
+
     </div>
   </div>
 
-  <div>
-    <div class="kuiSideBarCollapsibleTitle">
+  <div class="visEditorSidebar__collapsible--margin">
+    <div class="visEditorSidebar__collapsibleTitle">
       <div
         kbn-accessible-click
         aria-expanded="{{!!showStyle}}"
         aria-controls="metricOptionsStyle"
         aria-label="{{::'metricVis.params.style.toggleOptionsAriaLabel' | i18n: { defaultMessage: 'Toggle style options' } }}"
-        class="kuiSideBarCollapsibleTitle__label"
+        class="visEditorSidebar__collapsibleTitleLabel"
         ng-click="showStyle = !showStyle"
       >
+        <icon color="'primary'" aria-hidden="true" ng-if="showStyle" type="'arrowDown'" size="'s'"></icon>
+        <icon color="'primary'" aria-hidden="true" ng-if="!showStyle" type="'arrowRight'" size="'s'"></icon>
         <span
-          aria-hidden="true"
-          ng-class="{
-          'fa-caret-down': showStyle,
-          'fa-caret-right': !showStyle
-          }"
-          class="fa fa-caret-right kuiSideBarCollapsibleTitle__caret"
-        ></span>
-        <span
-          class="kuiSideBarCollapsibleTitle__text"
+          class="visEditorSidebar__collapsibleTitleText"
           i18n-id="metricVis.params.style.styleTitle"
           i18n-default-message="Style"
         >
         </span>
       </div>
     </div>
-    <div id="metricOptionsStyle" ng-if="showStyle" class="kuiSideBarCollapsibleSection">
 
-      <div class="kuiSideBarSection">
+    <div id="metricOptionsStyle" ng-if="showStyle">
 
-        <div class="kuiSideBarFormRow">
-          <label class="kuiSideBarFormRow__label" for="metricFontSize">
-            <span
-              i18n-id="metricVis.params.style.fontSizeLabel"
-              i18n-default-message="Font Size ({fontSize}pt)"
-              i18n-values="{ fontSize: editorState.params.metric.style.fontSize }"
-            >
-            </span>
-          </label>
-          <div class="kuiSideBarFormRow__control">
-            <input id="metricFontSize" type="range" ng-model="editorState.params.metric.style.fontSize" class="form-control" min="12" max="120" />
-          </div>
+      <div class="visEditorSidebar__formRow">
+        <label class="visEditorSidebar__formLabel" for="metricFontSize">
+          <span
+            i18n-id="metricVis.params.style.fontSizeLabel"
+            i18n-default-message="Font Size ({fontSize}pt)"
+            i18n-values="{ fontSize: editorState.params.metric.style.fontSize }"
+          >
+          </span>
+        </label>
+        <div class="visEditorSidebar__formControl">
+          <input id="metricFontSize" type="range" ng-model="editorState.params.metric.style.fontSize" class="form-control" min="12" max="120" />
         </div>
       </div>
+
     </div>
   </div>
 </div>

src/legacy/core_plugins/region_map/public/region_map_vis_params.html

@@ -1,24 +1,23 @@
-<div class="kuiSideBarSection">
+<div class="visEditorSidebar__section">
   <div class="form-group">
-    <div class="kuiSideBarSectionTitle">
+    <div class="visEditorSidebar__sectionTitle">
       <div
-        class="kuiSideBarSectionTitle__text"
         i18n-id="regionMap.visParams.layerSettingsTitle"
         i18n-default-message="Layer Settings"
       ></div>
     </div>
 
-    <div class="kuiSideBarFormRow">
+    <div class="visEditorSidebar__formRow">
       <label
-        class="kuiSideBarFormRow__label"
+        class="visEditorSidebar__formLabel"
         for="regionMap"
         i18n-id="regionMap.visParams.vectorMapLabel"
         i18n-default-message="Vector map"
       ></label>
-      <div class="kuiSideBarFormRow__control">
+      <div class="visEditorSidebar__formControl">
         <select
           id="regionMap"
-          class="kuiSelect kuiSideBarSelect"
+          class="kuiSelect visEditorSidebar__select"
           ng-model="editorState.params.selectedLayer"
           ng-options="layer.name for layer in collections.vectorLayers track by layer.layerId"
           ng-change="onLayerChange()"
@@ -46,16 +45,16 @@
       </a>
     </div>
 
-    <div class="kuiSideBarFormRow">
+    <div class="visEditorSidebar__formRow">
       <label
-        class="kuiSideBarFormRow__label"
+        class="visEditorSidebar__formLabel"
         for="joinField"
         i18n-id="regionMap.visParams.joinFieldLabel"
         i18n-default-message="Join field"
       ></label>
-      <div class="kuiSideBarFormRow__control">
+      <div class="visEditorSidebar__formControl">
         <select id="joinField"
-          class="kuiSelect kuiSideBarSelect"
+          class="kuiSelect visEditorSidebar__select"
           ng-model="editorState.params.selectedJoinField"
           ng-options="field.description for field in editorState.params.selectedLayer.fields track by field.name"
         >
@@ -67,15 +66,15 @@
         </select>
       </div>
     </div>
-    <div class="kuiSideBarFormRow">
+    <div class="visEditorSidebar__formRow">
       <label
-        class="kuiSideBarFormRow__label"
+        class="visEditorSidebar__formLabel"
         for="displayWarnings"
         i18n-id="regionMap.visParams.displayWarningsLabel"
         i18n-default-message="Display warnings"
       ></label>
 
-      <div class="kuiSideBarFormRow__control">
+      <div class="visEditorSidebar__formControl">
         <input id="displayWarnings" type="checkbox" ng-model="editorState.params.isDisplayWarning">
         &nbsp;
         <icon-tip
@@ -86,14 +85,14 @@
         ></icon-tip>
       </div>
     </div>
-    <div class="kuiSideBarFormRow">
+    <div class="visEditorSidebar__formRow">
       <label
-        class="kuiSideBarFormRow__label"
+        class="visEditorSidebar__formLabel"
         for="onlyShowMatchingShapes"
         i18n-id="regionMap.visParams.showAllShapesLabel"
         i18n-default-message="Show all shapes"
       ></label>
-      <div class="kuiSideBarFormRow__control">
+      <div class="visEditorSidebar__formControl">
         <input id="onlyShowMatchingShapes" type="checkbox" ng-model="editorState.params.showAllShapes">
         &nbsp;
         <icon-tip
@@ -107,42 +106,41 @@
   </div>
 </div>
 
-<div class="kuiSideBarSection">
+<div class="visEditorSidebar__section">
 
-  <div class="kuiSideBarSectionTitle">
+  <div class="visEditorSidebar__sectionTitle">
     <div
-      class="kuiSideBarSectionTitle__text"
       i18n-id="regionMap.visParams.styleSettingsLabel"
       i18n-default-message="Style settings"
     ></div>
   </div>
-  <div class="kuiSideBarFormRow" >
+  <div class="visEditorSidebar__formRow" >
     <label
-      class="kuiSideBarFormRow__label"
+      class="visEditorSidebar__formLabel"
       for="colorSchema"
       i18n-id="regionMap.visParams.colorSchemaLabel"
       i18n-default-message="Color Schema"
     ></label>
-    <div class="kuiSideBarFormRow__control">
+    <div class="visEditorSidebar__formControl">
       <select
         id="colorSchema"
-        class="kuiSelect kuiSideBarSelect"
+        class="kuiSelect visEditorSidebar__select"
         ng-model="editorState.params.colorSchema"
         ng-options="mode.id as mode.label for mode in collections.colorSchemas"
       ></select>
     </div>
   </div>
-  <div class="kuiSideBarFormRow" >
+  <div class="visEditorSidebar__formRow" >
     <label
-      class="kuiSideBarFormRow__label"
+      class="visEditorSidebar__formLabel"
       for="outlineWeight"
       i18n-id="regionMap.visParams.outlineWeightLabel"
       i18n-default-message="Outline weight"
     ></label>
-    <div class="kuiSideBarFormRow__control">
+    <div class="visEditorSidebar__formControl">
       <input
         id="outlineWeight"
-        class="kuiInput kuiSideBarInput"
+        class="kuiInput visEditorSidebar__input"
         type="number"
         ng-model="editorState.params.outlineWeight"
       >
@@ -150,4 +148,4 @@
   </div>
 </div>
 
-<wms-options options="editorState.params.wms" collections="collections"></wms-options>
+<wms-options options="editorState.params.wms" collections="collections"></wms-options>

src/legacy/core_plugins/table_vis/public/table_vis_params.html

@@ -1,5 +1,5 @@
 
-<div class="kuiSideBarSection">
+<div class="visEditorSidebar__section">
   <div class="form-group">
     <label
       for="datatableVisualizationPerPage"

src/legacy/core_plugins/tagcloud/public/tag_cloud_vis_params.html

@@ -1,4 +1,4 @@
-<div class="kuiSideBarSection">
+<div class="visEditorSidebar__section">
   <div class="form-group">
     <div class="form-group">
       <label i18n-id="tagCloud.visParams.textScaleLabel" i18n-default-message="Text Scale"></label>

src/legacy/core_plugins/tile_map/public/editors/tile_map_vis_params.html

@@ -1,5 +1,5 @@
 <!-- vis type specific options -->
-<div class="kuiSideBarSection">
+<div class="visEditorSidebar__section">
   <div class="form-group">
     <label
       for="coordinateMapOptionsMapType"
@@ -18,17 +18,17 @@
   </div>
 
 
-  <div class="kuiSideBarFormRow" >
+  <div class="visEditorSidebar__formRow" >
     <label
-      class="kuiSideBarFormRow__label"
+      class="visEditorSidebar__formLabel"
       for="colorSchema"
       i18n-id="tileMap.visParams.colorSchemaLabel"
       i18n-default-message="Color Schema"
     ></label>
-    <div class="kuiSideBarFormRow__control">
+    <div class="visEditorSidebar__formControl">
       <select
         id="colorSchema"
-        class="kuiSelect kuiSideBarSelect"
+        class="kuiSelect visEditorSidebar__select"
         ng-model="editorState.params.colorSchema"
         ng-options="mode.id as mode.label for mode in vis.type.editorConfig.collections.colorSchemas"
       ></select>
@@ -62,15 +62,15 @@
 
   <vislib-basic-options></vislib-basic-options>
 
-  <div class="kuiSideBarFormRow">
+  <div class="visEditorSidebar__formRow">
     <label
-      class="kuiSideBarFormRow__label"
+      class="visEditorSidebar__formLabel"
       for="desaturateMapTiles"
       i18n-id="tileMap.visParams.desaturateTilesLabel"
       i18n-default-message="Desaturate tiles"
     ></label>
 
-    <div class="kuiSideBarFormRow__control">
+    <div class="visEditorSidebar__formControl">
       <input
         type="checkbox"
         id="desaturateMapTiles"

src/legacy/core_plugins/tile_map/public/editors/wms_options.html

@@ -1,42 +1,41 @@
 <div>
 
 
-  <div class="kuiSideBarSection">
-    <div class="kuiSideBarSectionTitle">
+  <div class="visEditorSidebar__section">
+    <div class="visEditorSidebar__sectionTitle">
       <div
-        class="kuiSideBarSectionTitle__text"
         i18n-id="tileMap.wmsOptions.baseLayerSettingsTitle"
         i18n-default-message="Base Layer Settings"
       ></div>
     </div>
 
 
-    <div class="kuiSideBarFormRow" ng-show="!options.enabled">
+    <div class="visEditorSidebar__formRow" ng-show="!options.enabled">
       <label
-        class="kuiSideBarFormRow__label"
+        class="visEditorSidebar__formLabel"
         for="tmsLayers"
         i18n-id="tileMap.wmsOptions.layersLabel"
         i18n-default-message="Layers"
       ></label>
-      <div class="kuiSideBarFormRow__control">
+      <div class="visEditorSidebar__formControl">
         <select
           id="tmsLayers"
-          class="kuiSelect kuiSideBarSelect"
+          class="kuiSelect visEditorSidebar__select"
           ng-model="options.selectedTmsLayer"
           ng-options="layer.id for layer in collections.tmsLayers track by layer.id"
         ></select>
       </div>
     </div>
 
-    <div class="kuiSideBarFormRow">
+    <div class="visEditorSidebar__formRow">
       <label
-        class="kuiSideBarFormRow__label"
+        class="visEditorSidebar__formLabel"
         for="wmsCompliantMapServer"
         i18n-id="tileMap.wmsOptions.wmsMapServerLabel"
         i18n-default-message="WMS map server"
       ></label>
 
-      <div class="kuiSideBarFormRow__control">
+      <div class="visEditorSidebar__formControl">
         <input
           id="wmsCompliantMapServer"
           type="checkbox"

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

@@ -1,4 +1,4 @@
-<div class="kuiSideBarSection">
+<div class="visEditorSidebar__section">
   <div class="form-group">
     <label
       for="timelionInterval"

src/ui/public/agg_types/controls/filters.html

@@ -1,8 +1,7 @@
 <div class="form-group">
   <div ng-repeat="filter in agg.params.filters">
-    <div class="visEditorAggHeader">
+    <div class="visEditorSidebar__collapsibleTitle">
       <label
-        class="visEditorAggHeader__title visEditorAggHeader__title--grow"
         for="visEditorFilterInput{{agg.id}}"
       >
         <span
@@ -13,7 +12,7 @@
         <span ng-if="filter.label">- {{ filter.label }}</span>
       </label>
 
-      <div class="visEditorAggHeader__controls kuiButtonGroup kuiButtonGroup--united">
+      <div class="kuiButtonGroup kuiButtonGroup--united">
         <button
           ng-click="showConfig = !showConfig"
           type="button"

src/ui/public/agg_types/controls/other_bucket.html

@@ -29,7 +29,7 @@
         <input
           type="text"
           ng-model="agg.params.otherBucketLabel"
-          class="form-control kuiSideBarInput"
+          class="form-control visEditorSidebar__input"
         >
       </div>
     </div>
@@ -65,7 +65,7 @@
         <input
           type="text"
           ng-model="agg.params.missingBucketLabel"
-          class="form-control kuiSideBarInput"
+          class="form-control visEditorSidebar__input"
           ng-disabled="agg.params.field.type !== 'string'"
         >
       </div>

src/ui/public/chrome/_variables.scss

@@ -1,6 +1,3 @@
-
-$kbnChromeGlobalNavBackground: shade($euiColorPrimary, 30%);
-
 $kbnGlobalNavClosedWidth: 53px;
 $kbnGlobalNavOpenWidth: 180px;
 $kbnGlobalNavLogoHeight: 70px;

src/ui/public/chrome/directives/global_nav/_global_nav.scss

@@ -46,7 +46,7 @@
   }
 
   &::-webkit-scrollbar-thumb { /* 4 */
-    background-color: tint($kbnChromeGlobalNavBackground, 50%);
+    background-color: tint($euiColorPrimary, 50%);
   }
 }
 

src/ui/public/styles/_legacy/_index.scss

@@ -2,6 +2,7 @@
 // // KIBANA THEME
 @import './depth';
 @import './base';
+@import './mixins';
 
 // // Components
 @import './components/index';

src/ui/public/styles/_legacy/_mixins.scss

@@ -0,0 +1,56 @@
+// These mixins are temporary helpers to consolidate styles of elements that
+// are not yet converted to use EUI.
+
+// DO NOT CONTINUE TO USE THESE MIXINS
+
+@import '@elastic/eui/src/components/form/variables';
+
+@mixin __legacyInputStyles__bad {
+  &:not([type='range']) {
+    appearance: none;
+  }
+  display: block;
+  width: 100%;
+  height: $euiFormControlCompressedHeight;
+  padding: $euiSizeXS $euiSizeM;
+  @include euiFontSizeS;
+  border: $euiBorderThin;
+  background-color: $euiFormBackgroundColor;
+  color: $euiTextColor;
+  border-radius: $euiBorderRadius;
+  cursor: pointer;
+
+  &:focus {
+    border-color: $euiColorPrimary;
+    outline: none;
+    box-shadow: none;
+  }
+}
+
+@mixin __legacySelectStyles__bad {
+  // Makes the select arrow similar to EUI's arrowDown icon
+  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16'%3E%3Cpath fill='#{hexToRGB($euiTextColor)}' d='M13.0688508,5.15725038 L8.38423975,9.76827428 C8.17054415,9.97861308 7.82999214,9.97914095 7.61576025,9.76827428 L2.93114915,5.15725038 C2.7181359,4.94758321 2.37277319,4.94758321 2.15975994,5.15725038 C1.94674669,5.36691756 1.94674669,5.70685522 2.15975994,5.9165224 L6.84437104,10.5275463 C7.48517424,11.1582836 8.51644979,11.1566851 9.15562896,10.5275463 L13.8402401,5.9165224 C14.0532533,5.70685522 14.0532533,5.36691756 13.8402401,5.15725038 C13.6272268,4.94758321 13.2818641,4.94758321 13.0688508,5.15725038 Z'/%3E%3C/svg%3E");
+  background-size: $euiSize;
+  background-repeat: no-repeat;
+  background-position: calc(100% - #{$euiSizeS});
+  padding-right: $euiSizeXL;
+
+  &::-ms-expand {
+    display: none;
+  }
+
+  &:focus::-ms-value {
+    color: $euiTextColor;
+    background: transparent;
+  }
+}
+
+@mixin __legacyLabelStyles__bad {
+  font-size: $euiFontSizeXS;
+  font-weight: $euiFontWeightSemiBold;
+  color: $euiTextColor;
+
+  &[for] {
+    cursor: pointer;
+  }
+}

src/ui/public/styles/_legacy/components/_index.scss

@@ -3,7 +3,6 @@
 @import './hintbox';
 @import './input';
 @import './kui_forms';
-@import './kui_sidebar';
 @import './list_group_menu';
 @import './navbar';
 @import './config';

src/ui/public/styles/_legacy/components/_kui_forms.scss

@@ -1,11 +1,19 @@
+.form-control {
+  @include __legacyInputStyles__bad;
+}
+
+select.form-control {
+  @include __legacySelectStyles__bad;
+}
+
 .kuiFormSection {
   margin-bottom: $euiSize;
 }
 
 .kuiFormLabel {
+  @include __legacyLabelStyles__bad;
   display: block;
   margin-bottom: 5px;
-  font-weight: 700;
 }
 
 .kuiInputNote {

src/ui/public/styles/_legacy/components/_kui_sidebar.scss

@@ -1,133 +0,0 @@
-.kuiSideBarInput,
-.kuiSideBarSelect {
-  height: $euiSizeL;
-  width: 100%;
-  font-size: $euiFontSizeXS;
-  padding: 0 $euiSize;
-}
-
-.kuiSideBarInput {
-  display: block;
-  color: $euiTextColor;
-  border: $euiBorderThin;
-  border-radius: $euiBorderRadius;
-  padding-left: $euiSizeXS;
-  padding-right: $euiSizeXS;
-}
-
-.kuiSideBarSection {
-  margin-bottom: $euiSizeS;
-  background-color: $euiColorEmptyShade;
-  padding: $euiSizeS;
-  border-radius: $euiBorderRadius;
-
-  label {
-    font-weight: $euiFontWeightBold;
-    display: block;
-  }
-
-  .vis-option-item label {
-    font-weight: $euiFontWeightRegular !important;
-  }
-}
-
-.kuiSideBarSection .kuiSideBarSection .kuiSideBarSection {
-  border-radius: 0;
-  border-left: solid 1px tint($euiColorPrimary, 20%);
-  margin-left: 3px; // Align to caret open
-}
-
-.kuiSideBarSectionTitle {
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-  margin-bottom: $euiSizeS;
-}
-
-.kuiSideBarSectionTitle__text {
-  font-size: $euiFontSizeL;
-  color: $euiColorDarkestShade;
-}
-
-
-.kuiSideBarSectionTitle__action {
-  background-color: transparent; // Override Bootstrap button styles.
-  padding: 0; // 1
-  cursor: pointer;
-  color: $euiColorPrimary;
-  border: none;
-
-  &:hover {
-    color: darken($euiColorPrimary, 10%);
-  }
-}
-
-.kuiSideBarCollapsibleTitle {
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  width: 100%;
-  margin-bottom: $euiSizeS;
-}
-
-.kuiSideBarCollapsibleTitle__label {
-  display: flex;
-  align-items: center;
-}
-
-.kuiSideBarCollapsibleTitle__caret {
-  @include size($euiSizeM + ($euiSizeXS / 2));
-  font-size: $euiFontSizeS !important; // Override FontAwesome .fa styles.
-  color: $euiColorPrimary;
-}
-
-.kuiSideBarCollapsibleTitle__text {
-  font-size: $euiFontSizeS;
-  color: $euiColorPrimary;
-}
-
-/**
- * 1. Override Bootstrap button styles.
- */
-.kuiSideBarCollapsibleTitle__action {
-  background-color: transparent; // 1
-  padding: 0; // 1
-  cursor: pointer;
-  color: $euiColorPrimary;
-  border: none;
-
-  &:hover {
-    color: darken($euiColorPrimary, 10%);
-  }
-}
-
-
-/**
- * 1. Override Bootstrap h1 styles.
- */
-.kuiSideBarFormSectionTitle {
-  font-size: 12px;
-  color: $euiColorDarkShade;
-  margin: 10px 0 !important; // 1
-  padding-bottom: 2px;
-}
-
-.kuiSideBarFormRow {
-  display: flex;
-  align-items: center;
-  min-height: $euiSizeM;
-  margin-bottom: $euiSizeS;
-}
-
-.kuiSideBarFormRow__label {
-  display: flex;
-  align-items: center;
-  flex: 1 1 40% !important; // Override .vis-editor-sidebar styles
-  font-weight: $euiFontWeightBold;
-}
-
-.kuiSideBarFormRow__control {
-  display: flex;
-  align-items: center;
-  flex: 1 1 60%;
-}

src/ui/public/styles/_legacy/components/_list_group_menu.scss

@@ -1,23 +1,23 @@
 .list-group-menu {
   &.select-mode a {
      outline: none;
-     color: tint($euiColorPrimary, 10%);
+     color: tintOrShade($euiColorPrimary, 10%, 10%);
   }
 
   .list-group-menu-item {
     list-style: none;
-    color: tint($euiColorPrimary, 10%);
+    color: tintOrShade($euiColorPrimary, 10%, 10%);
 
     &.active {
       font-weight: bold;
       background-color: $euiColorLightShade;
     }
     &:hover {
-      background-color: tint($euiColorPrimary, 90%);
+      background-color: tintOrShade($euiColorPrimary, 90%, 90%);
     }
     li {
       list-style: none;
-      color: tint($euiColorPrimary, 10%);
+      color: tintOrShade($euiColorPrimary, 10%, 10%);
     }
   }
 }

src/ui/public/styles/_legacy/components/_sidebar.scss

@@ -1,3 +1,5 @@
+// ONLY USED IN DISCOVER
+
 .sidebar-container {
   padding-left: 0px !important;
   padding-right: 0px !important;
@@ -38,15 +40,11 @@
       line-height: normal;
 
       label {
+        @include __legacyLabelStyles__bad;
         margin-bottom: $euiSizeXS;
-        font-weight: $euiFontWeightBold;
         display: block;
       }
 
-      label[for] {
-        cursor: pointer;
-      }
-
       &.active {
         background-color: shade($euiColorLightestShade, 10%);
         color: $euiColorDarkestShade;

src/ui/public/styles/_legacy/components/_ui_select.scss

@@ -1,68 +1,363 @@
-// Overwrites ui-select classes that are loaded through NPM dependencies.
-// Must use important tags here because those files are loaded later.
+@import '@elastic/eui/src/components/button/variables';
+@import '@elastic/eui/src/components/form/variables';
 
-/**
- * 1. Override Bootstrap ui-select component styles. If side padding is > 5px, the component breaks.
+/*!
+ * ui-select
+ * http://github.com/angular-ui/ui-select
+ * Version: 0.19.5 - 2016-10-24T23:13:59.551Z
+ * License: MIT
  */
-.ui-select-multiple.ui-select-bootstrap {
-  padding: 3px 5px 2px !important; // 1
-  border: $euiBorderThin; // 1
-  background-color: $euiColorEmptyShade; // 1
 
-  &.kuiInputError {
-    border-color: $euiColorDanger; // 1
+
+/* Style when highlighting a search. */
+.ui-select-highlight {
+  font-weight: bold;
+}
+
+.ui-select-offscreen {
+  clip: rect(0 0 0 0) !important;
+  width: 1px !important;
+  height: 1px !important;
+  border: 0 !important;
+  margin: 0 !important;
+  padding: 0 !important;
+  overflow: hidden !important;
+  position: absolute !important;
+  outline: 0 !important;
+  left: 0px !important;
+  top: 0px !important;
+}
+
+.ui-select-choices-row:hover {
+  background-color: $euiColorLightestShade;
+}
+
+/* Select2 theme */
+
+/* Mark invalid Select2 */
+.ng-dirty.ng-invalid > a.select2-choice {
+  border-color: $euiColorDanger;
+}
+
+.select2-result-single {
+  padding-left: 0;
+}
+
+.select2-locked > .select2-search-choice-close{
+  display:none;
+}
+
+.select-locked > .ui-select-match-close{
+  display:none;
+}
+
+body > .select2-container.open {
+  z-index: 9999; /* The z-index Select2 applies to the select2-drop */
+}
+
+/* Handle up direction Select2 */
+.ui-select-container[theme="select2"].direction-up .ui-select-match,
+.ui-select-container.select2.direction-up .ui-select-match {
+    border-radius: 4px; /* FIXME hardcoded value :-/ */
+    border-top-left-radius: 0;
+    border-top-right-radius: 0;
+}
+.ui-select-container[theme="select2"].direction-up .ui-select-dropdown,
+.ui-select-container.select2.direction-up .ui-select-dropdown {
+    border-radius: 4px; /* FIXME hardcoded value :-/ */
+    border-bottom-left-radius: 0;
+    border-bottom-right-radius: 0;
+
+    border-top-width: 1px;  /* FIXME hardcoded value :-/ */
+    border-top-style: solid;
+
+    box-shadow: 0 -4px 8px rgba(0, 0, 0, 0.25);
+
+    margin-top: -4px; /* FIXME hardcoded value :-/ */
+}
+.ui-select-container[theme="select2"].direction-up .ui-select-dropdown .select2-search,
+.ui-select-container.select2.direction-up .ui-select-dropdown .select2-search {
+    margin-top: 4px; /* FIXME hardcoded value :-/ */
+}
+.ui-select-container[theme="select2"].direction-up.select2-dropdown-open .ui-select-match,
+.ui-select-container.select2.direction-up.select2-dropdown-open .ui-select-match {
+    border-bottom-color: $euiColorPrimary;
+}
+
+.ui-select-container[theme="select2"] .ui-select-dropdown .ui-select-search-hidden,
+.ui-select-container[theme="select2"] .ui-select-dropdown .ui-select-search-hidden input{
+    opacity: 0;
+    height: 0;
+    min-height: 0;
+    padding: 0;
+    margin: 0;
+    border:0;
+}
+
+/* Bootstrap theme */
+
+/* Helper class to show styles when focus */
+.btn-default-focus {
+  color: $euiTextColor;
+  background-color: $euiColorEmptyShade;
+  border-color: $euiColorPrimary;
+  text-decoration: none;
+  outline: none;
+  box-shadow: none;
+}
+
+.ui-select-bootstrap .ui-select-toggle {
+  @include __legacyInputStyles__bad;
+  @include __legacySelectStyles__bad;
+}
+
+.ui-select-bootstrap .ui-select-toggle > .caret {
+  display: none;
+}
+
+/* Fix Bootstrap dropdown position when inside a input-group */
+.input-group > .ui-select-bootstrap.dropdown {
+  /* Instead of relative */
+  position: static;
+}
+
+.input-group > .ui-select-bootstrap > input.ui-select-search.form-control {
+  border-radius: 4px; /* FIXME hardcoded value :-/ */
+  border-top-right-radius: 0;
+  border-bottom-right-radius: 0;
+}
+.input-group > .ui-select-bootstrap > input.ui-select-search.form-control.direction-up {
+  border-radius: 4px !important; /* FIXME hardcoded value :-/ */
+  border-top-right-radius: 0 !important;
+  border-bottom-right-radius: 0 !important;
+}
+
+.ui-select-bootstrap .ui-select-search-hidden {
+    opacity: 0;
+    height: 0;
+    min-height: 0;
+    padding: 0;
+    margin: 0;
+    border:0;
+}
+
+.ui-select-bootstrap > .ui-select-match > .btn {
+  @include __legacyInputStyles__bad;
+  @include __legacySelectStyles__bad;
+  text-align: left !important; // Instead of center because of .btn
+
+  .ui-select-placeholder {
+    color: $euiColorMediumShade;
+  }
+
+  &:focus,
+  &:active {
+    background-color: $euiColorEmptyShade;
+    color: $euiTextColor;
+    outline: none;
   }
 }
 
-.ui-select-bootstrap .ui-select-choices-row.active > span {
-  background-color: $euiColorPrimary !important;
+.ui-select-bootstrap > .ui-select-match > .caret {
+  display: none;
 }
 
-.ui-select-bootstrap > .ui-select-choices, .ui-select-bootstrap > .ui-select-no-choice {
-  margin-top: $euiSizeXS / 2 !important;
+/* See Scrollable Menu with Bootstrap 3 http://stackoverflow.com/questions/19227496 */
+.ui-select-bootstrap > .ui-select-choices,
+.ui-select-bootstrap > .ui-select-no-choice {
+  width: 100%;
+  height: auto;
+  max-height: $euiSize * 14;
+  overflow-x: hidden;
 }
 
+body > .ui-select-bootstrap.open {
+  z-index: $euiZContentMenu;
+}
+
+.ui-select-multiple.ui-select-bootstrap {
+  height: auto;
+  padding: 3px 5px 2px;
+  border: $euiBorderThin;
+  background-color: $euiFormBackgroundColor;
+
+  &.kuiInputError {
+    border-color: $euiColorDanger;
+  }
+}
+
+.ui-select-multiple.ui-select-bootstrap input.ui-select-search {
+  background-color: transparent !important; /* To prevent double background when disabled */
+  border: none;
+  outline: none;
+  height: 1.666666em;
+  margin-bottom: 3px;
+}
+
+.ui-select-multiple.ui-select-bootstrap .ui-select-match .close {
+  font-size: 1.6em;
+  line-height: 0.75;
+}
+
+.ui-select-multiple.ui-select-bootstrap .ui-select-match-item {
+  outline: 0;
+  margin: 0 3px 3px 0;
+}
+
+.ui-select-multiple .ui-select-match-item {
+  position: relative;
+}
+
+.ui-select-multiple .ui-select-match-item.dropping .ui-select-match-close {
+  pointer-events: none;
+}
+
+.ui-select-multiple:hover .ui-select-match-item.dropping-before:before {
+  content: "";
+  position: absolute;
+  top: 0;
+  right: 100%;
+  height: 100%;
+  margin-right: 2px;
+  border-left: 1px solid $euiColorPrimary;
+}
+
+.ui-select-multiple:hover .ui-select-match-item.dropping-after:after {
+  content: "";
+  position: absolute;
+  top: 0;
+  left: 100%;
+  height: 100%;
+  margin-left: 2px;
+  border-right: 1px solid $euiColorPrimary;
+}
+
+.ui-select-bootstrap .ui-select-choices-row>span {
+  @include euiFontSizeS;
+  @include euiTextTruncate;
+  font-weight: inherit;
+  cursor: pointer;
+  display: block;
+  padding: $euiSizeXS $euiSize;
+  clear: both;
+  color: $euiTextColor;
+  white-space: nowrap;
+
+  &:hover,
+  &:focus {
+    text-decoration: none;
+    color: $euiTextColor;
+    background-color: $euiFocusBackgroundColor;
+  }
+}
+
+
+.ui-select-bootstrap .ui-select-choices-row.active>span {
+    color: $euiTextColor;
+    text-decoration: none;
+    outline: 0;
+    background-color: $euiFocusBackgroundColor;
+}
+
+.ui-select-bootstrap .ui-select-choices-row.disabled>span,
+.ui-select-bootstrap .ui-select-choices-row.active.disabled>span {
+    color: $euiButtonColorDisabled;
+    cursor: not-allowed;
+    background-color: transparent;
+}
+
+/* fix hide/show angular animation */
+.ui-select-match.ng-hide-add,
+.ui-select-search.ng-hide-add {
+    display: none !important;
+}
+
+/* Mark invalid Bootstrap */
+.ui-select-bootstrap.ng-dirty.ng-invalid > button.btn.ui-select-match {
+    border-color: $euiColorDanger;
+}
+
+/* Handle up direction Bootstrap */
+.ui-select-container[theme="bootstrap"].direction-up .ui-select-dropdown {
+  @include euiBottomShadowMedium;
+}
+
+.ui-select-bootstrap .ui-select-match-text {
+    width: 100%;
+    padding-right: 1em;
+}
+.ui-select-bootstrap .ui-select-match-text span {
+    display: inline-block;
+    width: 100%;
+    overflow: hidden;
+}
+.ui-select-bootstrap .ui-select-toggle > a.btn {
+  position: absolute;
+  height: 10px;
+  right: 10px;
+  margin-top: -2px;
+}
+
+/* Spinner */
+.ui-select-refreshing {
+    position: absolute;
+    right: 0;
+    padding: 8px 27px;
+    top: 1px;
+    display: inline-block;
+    font-family: 'Glyphicons Halflings';
+    font-style: normal;
+    font-weight: normal;
+    line-height: 1;
+    -webkit-font-smoothing:antialiased;
+ }
+
+@-webkit-keyframes ui-select-spin {
+  0% {
+    -webkit-transform: rotate(0deg);
+    transform: rotate(0deg);
+  }
+  100% {
+    -webkit-transform: rotate(359deg);
+    transform: rotate(359deg);
+  }
+}
+@keyframes ui-select-spin {
+  0% {
+    -webkit-transform: rotate(0deg);
+    transform: rotate(0deg);
+  }
+  100% {
+    -webkit-transform: rotate(359deg);
+    transform: rotate(359deg);
+  }
+}
+
+.ui-select-spin {
+  -webkit-animation: ui-select-spin 2s infinite linear;
+  animation: ui-select-spin 2s infinite linear;
+}
+
+.ui-select-refreshing.ng-animate {
+  -webkit-animation: none 0s;
+}
+
+
+// Other Custom
+
 /**
  * 1. Fix appearance of ui-select in the Filtering UI.
  */
 .btn-default .ui-select-placeholder {
-  color: tint($euiColorPrimary, 70%); /* 1 */
-}
-
-/**
-* 1. Make ui-select input match other inputs.
-*/
-.ui-select-match {
-  .btn {
-    border: $euiBorderThin; /* 1 */
-    background-color: $euiColorEmptyShade; /* 1 */
-    color: $euiColorDarkestShade; /* 1 */
-
-    .ui-select-placeholder {
-      color: $euiColorMediumShade; /* 1 */
-      padding-right: 1em; /* 1 */
-    }
-
-    &:focus {
-      outline: none;
-    }
-
-    &:active {
-      background-color: $euiColorEmptyShade; /* 1 */
-      color: $euiColorDarkestShade; /* 1 */
-    }
-  }
-
-  &.btn-default-focus {
-    box-shadow: none;
-    outline: none;
-
-    .btn {
-      border-color: $euiColorPrimary;
-    }
-  }
+  color: $euiColorMediumShade; /* 1 */
 }
 
 .uiSelectMatch--ellipsis {
   @include euiTextTruncate;
 }
+
+.ui-select-choices-group-label {
+  @include euiTitle('xxxs');
+  @include euiTextTruncate;
+  padding: $euiSizeXS;
+}

src/ui/public/styles/bootstrap/_custom_variables.less

@@ -103,6 +103,8 @@
 //##
 
 
+//** `<input>` background color
+@input-bg:                       lighten(@gray-lightest, 1.5%);
 //** Placeholder text color
 @input-color-placeholder:        @gray;
 
@@ -139,10 +141,10 @@
 @dropdown-link-active-color:    @white;
 
 //** Disabled dropdown menu item background color.
-@dropdown-link-disabled-color:  @text-muted;
+@dropdown-link-disabled-color:  @gray;
 
 //** Text color for headers within dropdown menus.
-@dropdown-header-color:         @text-muted;
+@dropdown-header-color:         @gray;
 
 // Note: Deprecated @dropdown-caret-color as of v3.1.0
 @dropdown-caret-color:          @gray-base;
@@ -176,7 +178,7 @@
 @navbar-padding-horizontal:        10px;
 
 // Default theme
-@navbar-default-bg:                     lighten(@gray-lighter, 50%);
+@navbar-default-bg:                     @gray-lightest;
 @navbar-default-color:                  @gray5;
 @navbar-default-border:                 transparent;
 @navbar-default-link-color:             @gray5;

src/ui/public/styles/bootstrap/_custom_variables_dark_overrides.less

@@ -0,0 +1,4 @@
+@navbar-default-bg: darken(@gray-lighter, 50%);
+
+//** `<input>` background color
+@input-bg: darken(@gray-lightest, 5%);

src/ui/public/styles/bootstrap/bootstrap_dark.less

@@ -39,6 +39,7 @@
 @import "variables.less";
 @import "_colors_dark.less";
 @import "_custom_variables.less";
+@import "_custom_variables_dark_overrides.less";
 @import "mixins.less";
 
 // Hard to remove, used in many places

src/ui/public/styles/bootstrap/forms.less

@@ -80,7 +80,7 @@
 // Designed to help with the organization and spacing of vertical forms. For
 // horizontal forms, use the predefined grid classes.
 
-.form-group {
+.form-group:not(:empty) {
   margin-bottom: @form-group-margin-bottom;
 }
 

src/ui/public/styles/bootstrap/variables.less

@@ -327,7 +327,7 @@
 @grid-gutter-width:         30px;
 // Navbar collapse
 //** Point at which the navbar becomes uncollapsed.
-@grid-float-breakpoint:     @screen-sm-min;
+@grid-float-breakpoint:     0;
 //** Point at which the navbar begins collapsing.
 @grid-float-breakpoint-max: (@grid-float-breakpoint - 1);
 

src/ui/public/vis/components/tooltip/_tooltip.scss

@@ -1,18 +1,14 @@
-// EUITODO: Use EuiTooltip or create a tooltip mixin
+@import '@elastic/eui/src/components/tool_tip/mixins';
+
 .visTooltip,
 .visTooltip__sizingClone {
-  @include euiBottomShadow($color: $euiColorFullShade);
-  @include euiFontSizeXS;
+  @include euiToolTipStyle('s');
   visibility: hidden;
   pointer-events: none;
   position: fixed;
-  z-index: $euiZLevel9;
-  background-color: tintOrShade($euiColorFullShade, 25%, 90%);
-  color: $euiColorGhost;
-  border-radius: $euiBorderRadius;
   max-width: $euiSizeXL * 10;
   overflow: hidden;
-  overflow-wrap: break-word;
+  padding: 0;
 
   > :last-child {
     margin-bottom: $euiSizeS;

src/ui/public/vis/editors/default/_agg.scss

@@ -1,60 +1,3 @@
-// Entire container -- found in agg_group.html
-
-.visEditorAgg {
-  @include flex-parent();
-  width: 100%;
-  max-width: 100%;
-
-  //IE10/11 - prevent flex item from overflowing
-  flex-basis: 100%;
-}
-
-//
-// Header -- found in agg.html
-//
-
-.visEditorAggHeader {
-  display: flex;
-  align-items: center;
-  flex: 1 0 auto;
-  margin-bottom: $vis-editor-agg-editor-spacing;
-}
-
-.visEditorAggHeader__toggle {
-  flex: 0 0 auto;
-  margin-right: $vis-editor-agg-editor-spacing;
-  min-width: $euiSizeL;
-  min-height: $euiSizeL;
-  text-align: center;
-}
-
-.visEditorAggHeader__title {
-  flex: 0 0 auto;
-  font-weight: $euiFontWeightBold;
-  @include euiTextTruncate;
-}
-
-.visEditorAggHeader__title--grow {
-  flex-grow: 1;
-}
-
-.visEditorAggHeader__description {
-  flex: 1 1 0;
-  font-weight: $euiFontWeightRegular;
-  padding-right: $vis-editor-agg-editor-spacing;
-  padding-left: $euiSizeXS;
-  @include euiTextTruncate;
-}
-
-.visEditorAggHeader__description--danger {
-  color: $euiColorDanger;
-  font-weight: $euiFontWeightBold;
-}
-
-.visEditorAggHeader__controls {
-  flex: 0 0 auto;
-}
-
 //
 // Misc elements -- found in agg_types/controls/*.html
 //
@@ -90,14 +33,13 @@
 }
 
 .visEditorAgg__sliderValue {
+  @include euiFontSize;
   align-self: center;
   margin: 0 0 0 $vis-editor-agg-editor-spacing;
-  @include euiFontSize;
 }
 
 .visEditorAgg__subAgg {
-  border: 2px solid;
-  border-color: $euiColorLightShade;
+  border: $euiBorderThick;
   border-radius: $euiBorderRadius;
   background-color: transparent;
   margin: $vis-editor-agg-editor-spacing 0;

src/ui/public/vis/editors/default/_agg_group.scss

@@ -1,19 +0,0 @@
-.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;
-}

src/ui/public/vis/editors/default/_agg_select.scss

@@ -16,3 +16,7 @@
     }
   }
 }
+
+.visEditorAggSelect__helpLink {
+  @include euiFontSizeXS;
+}

src/ui/public/vis/editors/default/_default.scss

@@ -62,14 +62,6 @@
     flex-basis: $vis-editor-sidebar-basis;
     max-width: calc(100% - #{$vis-editor-resizer-width});
   }
-
-  .kuiSideBarFormRow__label {
-    font-size: $euiFontSizeXS;
-  }
-
-  .form-group {
-    margin-bottom: $vis-editor-agg-editor-spacing;
-  }
 }
 
 /**

src/ui/public/vis/editors/default/_index.scss

@@ -9,6 +9,5 @@ $vis-editor-resizer-width: $euiSizeM;
 
 // Components
 @import './agg';
-@import './agg_group';
 @import './agg_params';
 @import './agg_select';

src/ui/public/vis/editors/default/_sidebar.scss

@@ -1,3 +1,5 @@
+@import '@elastic/eui/src/components/form/variables';
+
 //
 // LAYOUT
 //
@@ -16,6 +18,7 @@
 
   @include euiBreakpoint('l', 'xl') {
     @include flex-parent(1, 1, 1px);
+    @include euiScrollBar;
     overflow: auto;
   }
 }
@@ -24,17 +27,24 @@
 // NAVIGATION
 //
 
-.visEditorSidebar__indexPattern,
-.visEditorSidebar__nav {
-  min-height: auto;
-  border-radius: 0px;
+.visEditorSidebar__indexPattern {
+  font-weight: $euiFontWeightBold;
+  padding: $euiSizeXS $euiSizeS;
+  background-color: shade($euiColorPrimary, 60%);
+  color: $euiColorGhost;
+  line-height: $euiSizeL;
 }
 
-.visEditorSidebar__nav .navbar-right {
-  // Match correct bootstrap container spacing to pull buttons fully right
-  margin-right: -15px;
+.visEditorSidebar__nav {
+  min-height: 0;
+
+  .navbar-right {
+    // Match correct bootstrap container spacing to pull buttons fully right
+    margin-right: -15px;
+  }
 }
 
+
 /**
  * 1. TODO: Override bootstrap styles. Remove !important once we're rid of bootstrap.
  */
@@ -70,7 +80,144 @@
 }
 
 .visEditorSidebar__navButtonLink {
-  // Make the line-height the same size as the icon for better alignement
+  // Make the line-height the same size as the icon for better alignment
   line-height: $euiSize;
 }
 
+//
+// SECTIONS
+//
+
+.visEditorSidebar__section {
+  background-color: $euiColorEmptyShade;
+  padding: $euiSizeS;
+  border-radius: $euiBorderRadius;
+
+  + .visEditorSidebar__section {
+    margin-top: $euiSizeS;
+  }
+
+  label {
+    @include __legacyLabelStyles__bad;
+    display: block;
+  }
+
+  .form-group label {
+    margin-bottom: $euiSizeS;
+  }
+}
+
+.visEditorSidebar__sectionTitle {
+  @include euiFontSizeL;
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  margin-bottom: $euiSizeM;
+  text-transform: capitalize;
+}
+
+// Collapsible section
+
+.visEditorSidebar__collapsible {
+  background-color: transparentize($euiColorLightShade, .85);
+}
+
+.visEditorSidebar__collapsible--margin {
+  margin-top: $euiSizeM;
+}
+
+.visEditorSidebar__collapsible--marginBottom {
+  margin-bottom: $euiSizeM;
+}
+
+.visEditorSidebar__collapsibleTitle {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  width: 100%;
+  line-height: 1.5;
+  white-space: nowrap;
+
+  + * {
+    margin-top: $euiSize;
+    display: block;
+  }
+
+  + .form-group {
+    margin-top: $euiSizeXS;
+  }
+
+  label {
+    margin-bottom: 0 !important; // For filters
+  }
+}
+
+.visEditorSidebar__collapsibleTitleLabel {
+  @include euiFontSizeS;
+  color: $euiColorPrimary;
+  display: flex;
+  align-items: center;
+  margin-right: $euiSizeXS;
+}
+
+.visEditorSidebar__collapsibleTitleText {
+  @include euiTextTruncate;
+  margin-left: $euiSizeS;
+}
+
+.visEditorSidebar__collapsibleTitleDescription {
+  flex: 1 1 0;
+  @include euiTextTruncate;
+}
+
+.visEditorSidebar__collapsibleTitleDescription--danger {
+  color: $euiColorDanger;
+  font-weight: $euiFontWeightBold;
+}
+
+
+//
+// FORMS
+//
+
+.visEditorSidebar__input,
+.visEditorSidebar__select {
+  @include __legacyInputStyles__bad;
+}
+
+.visEditorSidebar__select {
+  @include __legacySelectStyles__bad;
+}
+
+.visEditorSidebar__formTitle {
+  @include euiTitle('xxs');
+  margin: $euiSizeS 0;
+}
+
+.visEditorSidebar__formRow {
+  display: flex;
+  align-items: center;
+  margin-top: $euiSizeM;
+}
+
+.visEditorSidebar__formLabel {
+  display: flex;
+  align-items: center;
+  flex: 1 1 40%;
+  padding-right: $euiSizeXS;
+}
+
+.visEditorSidebar__formControl {
+  display: flex;
+  align-items: center;
+  flex: 1 1 60%;
+}
+
+.visEditorSidebar__formRow--expand {
+  .visEditorSidebar__formLabel,
+  .visEditorSidebar__formControl {
+    flex-basis: auto;
+    flex-grow: 0;
+  }
+}
+

src/ui/public/vis/editors/default/agg.html

@@ -1,103 +1,108 @@
-<!-- header -->
-<div class="visEditorAggHeader">
+<div class="visEditorSidebar__section visEditorSidebar__collapsible visEditorSidebar__collapsible--marginBottom">
+  <!-- header -->
+  <div class="visEditorSidebar__collapsibleTitle">
 
-  <!-- open/close editor -->
-  <button
-    aria-label="{{::'common.ui.vis.editors.agg.toggleEditorButtonAriaLabel' | i18n: { defaultMessage: 'Toggle {schema} editor', values: { schema: agg.schema.title } } }}"
-    ng-click="editorOpen = !editorOpen"
-    aria-expanded="{{ !!editorOpen }}"
-    aria-controls="visAggEditorParams{{agg.id}}"
-    type="button"
-    data-test-subj="toggleEditor"
-    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="visEditorAggHeader__title" ng-class="{'visEditorAggHeader__title--grow': editorOpen}">
-    {{ agg.schema.title }}
-  </span>
-
-  <!-- description -->
-  <span ng-if="!editorOpen && aggForm.$valid" class="visEditorAggHeader__description" title="{{describe()}}">
-    {{ describe() }}
-  </span>
-
-  <!-- error -->
-  <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="visEditorAggHeader__controls kuiButtonGroup kuiButtonGroup--united">
-    <!-- disable aggregation -->
+    <!-- open/close editor -->
     <button
-      ng-if="agg.enabled && canRemove(agg)"
-      ng-click="agg.enabled = false"
-      aria-label="{{::'common.ui.vis.editors.agg.disableAggButtonAriaLabel' | i18n: { defaultMessage: 'Disable aggregation' } }}"
-      tooltip="{{::'common.ui.vis.editors.agg.disableAggButtonTooltip' | i18n: { defaultMessage: 'Disable aggregation' } }}"
-      tooltip-append-to-body="true"
-      data-test-subj="disableAggregationBtn"
+      aria-label="{{::'common.ui.vis.editors.agg.toggleEditorButtonAriaLabel' | i18n: { defaultMessage: 'Toggle {schema} editor', values: { schema: agg.schema.title } } }}"
+      ng-click="editorOpen = !editorOpen"
+      aria-expanded="{{ !!editorOpen }}"
+      aria-controls="visAggEditorParams{{agg.id}}"
       type="button"
-      class="kuiButton kuiButton--basic kuiButton--small">
-      <i aria-hidden="true" class="fa fa-toggle-on"></i>
-    </button>
+      data-test-subj="toggleEditor"
+      class="visEditorSidebar__collapsibleTitleLabel">
 
-    <!-- enable aggregation -->
-    <button
-      ng-if="!agg.enabled"
-      ng-click="agg.enabled = true"
-      aria-label="{{::'common.ui.vis.editors.agg.enableAggButtonAriaLabel' | i18n: { defaultMessage: 'Enable aggregation' } }}"
-      tooltip="{{::'common.ui.vis.editors.agg.enableAggButtonTooltip' | i18n: { defaultMessage: 'Enable aggregation' } }}"
-      tooltip-append-to-body="true"
-      data-test-subj="disableAggregationBtn"
-      type="button"
-      class="kuiButton kuiButton--basic kuiButton--small">
-      <i aria-hidden="true" class="fa fa-toggle-off"></i>
-    </button>
+      <icon aria-hidden="true" ng-if="editorOpen" type="'arrowDown'" size="'s'"></icon>
+      <icon aria-hidden="true" ng-if="!editorOpen" type="'arrowRight'" size="'s'"></icon>
 
-    <!-- drag handle -->
-    <button
-      draggable-handle
-      ng-if="stats.count > 1"
-      tooltip="{{::'common.ui.vis.editors.agg.modifyPriorityButtonTooltip' | i18n: { defaultMessage: 'Modify Priority by Dragging' } }}"
-      tooltip-append-to-body="true"
-      type="button"
-      keyboard-move="onPriorityReorder(direction)"
-      class="kuiButton kuiButton--basic kuiButton--small">
-      <i aria-hidden="true" class="fa fa-arrows-v"></i>
-      <span class="euiScreenReaderOnly"
-        i18n-id="common.ui.vis.editors.howToModifyScreenReaderPriorityDescription"
-        i18n-default-message="Use up and down key on this button to move this aggregation up and down in the priority order."
-      >
+      <!-- title -->
+      <span class="visEditorSidebar__collapsibleTitleText">
+        {{ agg.schema.title }}
       </span>
+
     </button>
 
-    <!-- remove button -->
-    <button
-      ng-if="canRemove(agg)"
-      aria-label="{{::'common.ui.vis.editors.agg.removeDimensionButtonAriaLabel' | i18n: { defaultMessage: 'Remove Dimension' } }}"
-      ng-if="stats.count > stats.min"
-      ng-click="remove(agg)"
-      tooltip="{{::'common.ui.vis.editors.agg.removeDimensionButtonTooltip' | i18n: { defaultMessage: 'Remove Dimension' } }}"
-      tooltip-append-to-body="true"
-      type="button"
-      class="kuiButton kuiButton--danger kuiButton--small">
-      <i aria-hidden="true" class="fa fa-times"></i>
-    </button>
+    <!-- description -->
+    <span ng-if="!editorOpen && aggForm.$valid" class="visEditorSidebar__collapsibleTitleDescription" title="{{describe()}}">
+      {{ describe() }}
+    </span>
+
+    <!-- error -->
+    <span ng-if="!editorOpen && aggForm.$invalid" class="visEditorSidebar__collapsibleTitleDescription visEditorSidebar__collapsibleTitleDescription--danger" title="{{aggForm.describeErrors()}}">
+      {{ aggForm.describeErrors() }}
+    </span>
+
+    <!-- controls !!!actually disabling buttons will break tooltips¡¡¡ -->
+    <div class="visEditorAggHeader__controls kuiButtonGroup kuiButtonGroup--united">
+      <!-- disable aggregation -->
+      <button
+        ng-if="agg.enabled && canRemove(agg)"
+        ng-click="agg.enabled = false"
+        aria-label="{{::'common.ui.vis.editors.agg.disableAggButtonAriaLabel' | i18n: { defaultMessage: 'Disable aggregation' } }}"
+        tooltip="{{::'common.ui.vis.editors.agg.disableAggButtonTooltip' | i18n: { defaultMessage: 'Disable aggregation' } }}"
+        tooltip-append-to-body="true"
+        data-test-subj="disableAggregationBtn"
+        type="button"
+        class="kuiButton kuiButton--basic kuiButton--small">
+        <i aria-hidden="true" class="fa fa-toggle-on"></i>
+      </button>
+
+      <!-- enable aggregation -->
+      <button
+        ng-if="!agg.enabled"
+        ng-click="agg.enabled = true"
+        aria-label="{{::'common.ui.vis.editors.agg.enableAggButtonAriaLabel' | i18n: { defaultMessage: 'Enable aggregation' } }}"
+        tooltip="{{::'common.ui.vis.editors.agg.enableAggButtonTooltip' | i18n: { defaultMessage: 'Enable aggregation' } }}"
+        tooltip-append-to-body="true"
+        data-test-subj="disableAggregationBtn"
+        type="button"
+        class="kuiButton kuiButton--basic kuiButton--small">
+        <i aria-hidden="true" class="fa fa-toggle-off"></i>
+      </button>
+
+      <!-- drag handle -->
+      <button
+        draggable-handle
+        ng-if="stats.count > 1"
+        tooltip="{{::'common.ui.vis.editors.agg.modifyPriorityButtonTooltip' | i18n: { defaultMessage: 'Modify Priority by Dragging' } }}"
+        tooltip-append-to-body="true"
+        type="button"
+        keyboard-move="onPriorityReorder(direction)"
+        class="kuiButton kuiButton--basic kuiButton--small">
+        <i aria-hidden="true" class="fa fa-arrows-v"></i>
+        <span class="euiScreenReaderOnly"
+          i18n-id="common.ui.vis.editors.howToModifyScreenReaderPriorityDescription"
+          i18n-default-message="Use up and down key on this button to move this aggregation up and down in the priority order."
+        >
+        </span>
+      </button>
+
+      <!-- remove button -->
+      <button
+        ng-if="canRemove(agg)"
+        aria-label="{{::'common.ui.vis.editors.agg.removeDimensionButtonAriaLabel' | i18n: { defaultMessage: 'Remove Dimension' } }}"
+        ng-if="stats.count > stats.min"
+        ng-click="remove(agg)"
+        tooltip="{{::'common.ui.vis.editors.agg.removeDimensionButtonTooltip' | i18n: { defaultMessage: 'Remove Dimension' } }}"
+        tooltip-append-to-body="true"
+        type="button"
+        class="kuiButton kuiButton--basic kuiButton--small">
+        <icon aria-hidden="true" color="'danger'" type="'cross'" size="'m'"></icon>
+      </button>
+
+    </div>
 
   </div>
 
+  <vis-editor-agg-params
+    id="visAggEditorParams{{agg.id}}"
+    agg="agg"
+    group-name="groupName"
+    ng-show="editorOpen"
+    index-pattern="vis.indexPattern">
+  </vis-editor-agg-params>
 </div>
 
-<vis-editor-agg-params
-  id="visAggEditorParams{{agg.id}}"
-  agg="agg"
-  group-name="groupName"
-  ng-show="editorOpen"
-  index-pattern="vis.indexPattern">
-</vis-editor-agg-params>
-
 <vis-editor-agg-add
   ng-if="$index + 1 === stats.count"
   ng-hide="dragging">

src/ui/public/vis/editors/default/agg_group.html

@@ -1,14 +1,16 @@
-<div class="sidebar-item visEditorAggGroup__wrapper">
-  <div class="sidebar-item-title visEditorAggGroup__title">
+<div class="visEditorSidebar__section">
+  <div class="visEditorSidebar__sectionTitle">
     {{ groupNameLabel }}
   </div>
 
-  <div ng-class="groupName" draggable-container="group" class="visEditorAggGroup">
+  <div ng-class="groupName" draggable-container="group">
     <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="visEditorAgg"></ng-form>
+      <ng-form vis-editor-agg name="aggForm"></ng-form>
     </div>
 
     <vis-editor-agg-add ng-if="stats.count === 0" data-test-subj="addAggregationButton"></vis-editor-agg-add>
   </div>
 </div>
+
+<br>

src/ui/public/vis/editors/default/agg_params.js

@@ -89,7 +89,7 @@ uiModules
         addAggSelector();
 
         function addSchemaEditor() {
-          const $schemaEditor = $('<div>').addClass('schemaEditors').appendTo($el);
+          const $schemaEditor = $('<div>').addClass('schemaEditors form-group').appendTo($el);
 
           if ($scope.agg.schema.editor) {
             $schemaEditor.append($scope.agg.schema.editor);

src/ui/public/vis/editors/default/agg_select.html

@@ -17,7 +17,7 @@
     <a
       ng-if="aggHelpLink"
       href="{{aggHelpLink}}"
-      class="pull-right"
+      class="pull-right visEditorAggSelect__helpLink"
       target="_blank"
       rel="noopener noreferrer"
       i18n-id="common.ui.vis.editors.aggSelect.helpLinkLabel"

src/ui/public/vis/editors/default/sidebar.html

@@ -1,6 +1,6 @@
-<div class="sidebar-container visEditorSidebar__container">
+<div class="visEditorSidebar__container">
   <form
-    class="sidebar-list visEditorSidebar__form"
+    class="visEditorSidebar__form"
     ng-submit="visualizeEditor.$invalid ? stageEditableVis(false) : stageEditableVis()"
     name="visualizeEditor"
     novalidate
@@ -17,14 +17,14 @@
         }
       }}"
       ng-if="vis.type.requiresSearch && vis.type.options.showIndexSelection"
-      class="index-pattern visEditorSidebar__indexPattern"
+      class="visEditorSidebar__indexPattern"
       tabindex="0"
       id="sidebarIndexPatternTitle"
     >
       {{ vis.indexPattern.title }}
     </div>
 
-    <nav class="navbar navbar-default subnav visEditorSidebar__nav">
+    <nav class="navbar visEditorSidebar__nav">
       <div class="container-fluid">
 
         <!-- tabs -->
@@ -115,7 +115,7 @@
             tooltip="{{::'common.ui.vis.editors.sidebar.applyChangesTooltip' | i18n: { defaultMessage: 'Apply changes' } }}"
             tooltip-placement="bottom"
             tooltip-popup-delay="400" tooltip-append-to-body="1"
-            ng-hide="autoApplyEnabled"
+            ng-hide="autoApplyEnabled || visualizeEditor.softErrorCount() > 0"
           >
             <button
               data-test-subj="visualizeEditorRenderButton"

src/ui/public/vis/map/_leaflet_overrides.scss

@@ -99,7 +99,7 @@ $visMapLeafletSprite: "data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/s
   display: none !important;
 }
 
-.leaflet-control-attribution {
+.leaflet-container .leaflet-control-attribution {
   background-color: transparentize($euiColorEmptyShade, .7);
   color: $euiColorDarkShade;
 

test/functional/page_objects/point_series_page.js

@@ -40,12 +40,12 @@ export function PointSeriesPageProvider({ getService }) {
     }
 
     async getValueAxesCount() {
-      const axes = await find.allByCssSelector('.kuiSideBarSection:contains("Value Axes") > .kuiSideBarSection');
+      const axes = await find.allByCssSelector('.visEditorSidebar__section:contains("Value Axes") > .visEditorSidebar__section');
       return axes.length;
     }
 
     async getSeriesCount() {
-      const series = await find.allByCssSelector('.kuiSideBarSection:contains("Series") > .kuiSideBarSection');
+      const series = await find.allByCssSelector('.visEditorSidebar__section:contains("Series") > .visEditorSidebar__section');
       return series.length;
     }
 
@@ -82,7 +82,7 @@ export function PointSeriesPageProvider({ getService }) {
     }
 
     async toggleCollapsibleTitle(title) {
-      const sidebarTitles = await find.allByCssSelector('.kuiSideBarCollapsibleTitle .kuiSideBarCollapsibleTitle__text');
+      const sidebarTitles = await find.allByCssSelector('.visEditorSidebar__collapsibleTitle .visEditorSidebar__collapsibleTitleText');
       log.debug('found sidebar titles ' + sidebarTitles.length);
 
       return Promise.all(sidebarTitles.map(async (titleDiv) => {

test/functional/page_objects/visualize_page.js

@@ -440,10 +440,10 @@ export function VisualizePageProvider({ getService, getPageObjects }) {
       // it would be nice to get the correct axis by name like "LeftAxis-1"
       // instead of an incremented index, but this link isn't under the div above
       const advancedLink =
-        await find.byCssSelector(`#axisOptionsValueAxis-1 .kuiSideBarOptionsLink .kuiSideBarOptionsLink__caret`);
+        await find.byCssSelector(`#axisOptionsValueAxis-1 .visEditorSidebar__advancedLinkIcon`);
 
-      const advancedLinkState = await advancedLink.getAttribute('class');
-      if (advancedLinkState.includes('fa-caret-right')) {
+      const advancedLinkState = await advancedLink.getAttribute('type');
+      if (advancedLinkState.includes('arrowRight')) {
         await advancedLink.moveMouseTo();
         log.debug('click advancedLink');
         await advancedLink.click();

x-pack/plugins/security/webpackShims/angular-ui-select.js

@@ -9,7 +9,6 @@ require('jquery');
 require('angular');
 require('angular-sanitize');
 require('ui-select/dist/select');
-require('ui-select/dist/select.css');
 
 var uiModules = require('ui/modules').uiModules;
 uiModules.get('kibana', ['ui.select', 'ngSanitize']);