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

cchaos · Sep 19, 2018 · ed06a07 · ed06a07
1 parent d704b42
commit ed06a07
Show file tree

Hide file tree

Showing 42 changed files with 187 additions and 288 deletions.
diff --git a/src/core_plugins/kbn_vislib_vis_types/public/controls/gauge_options.html b/src/core_plugins/kbn_vislib_vis_types/public/controls/gauge_options.html
@@ -123,7 +123,7 @@
 
     <div id="gaugeOptionsRanges" ng-show="showColorRange" class="kuiSideBarCollapsibleSection">
       <div class="kuiSideBarSection">
-        <table class="vis-editor-agg-editor-ranges form-group" ng-show="editorState.params.gauge.colorsRange.length">
+        <table class="visEditorAgg__rangesTable form-group" ng-show="editorState.params.gauge.colorsRange.length">
           <tr>
             <th scope="col">
               <label id="gaugeOptionsCustomRangeFrom">From</label>

diff --git a/src/core_plugins/kbn_vislib_vis_types/public/controls/heatmap_options.html b/src/core_plugins/kbn_vislib_vis_types/public/controls/heatmap_options.html
@@ -118,7 +118,7 @@
       <div class="kuiSideBarSection">
         <table
           data-test-subj="heatmapCustomRangesTable"
-          class="vis-editor-agg-editor-ranges form-group"
+          class="visEditorAgg__rangesTable form-group"
           ng-show="editorState.params.colorsRange.length">
           <tr>
             <th scope="col">

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

diff --git a/src/core_plugins/metric_vis/public/metric_vis_params.html b/src/core_plugins/metric_vis/public/metric_vis_params.html
@@ -41,7 +41,7 @@
 
     <div id="metricOptionsRanges" ng-show="showColorRange" class="kuiSideBarCollapsibleSection">
       <div class="kuiSideBarSection">
-        <table class="vis-editor-agg-editor-ranges form-group" ng-show="editorState.params.metric.colorsRange.length">
+        <table class="visEditorAgg__rangesTable form-group" ng-show="editorState.params.metric.colorsRange.length">
           <tr>
             <th>
               <label id="metricOptionsCustomRangeFrom">From</label>

diff --git a/src/core_plugins/region_map/public/region_map.less b/src/core_plugins/region_map/public/region_map.less
@@ -4,4 +4,11 @@
   left: 0;
   width: 100%;
   height: 100%;
+
+}
+
+region_map-vis-params {
+  .ems-hotlink {
+    font-size: 10px;
+  }
 }
diff --git a/src/core_plugins/region_map/public/region_map_vis_params.html b/src/core_plugins/region_map/public/region_map_vis_params.html
@@ -21,15 +21,15 @@
       </div>
     </div>
 
-    <div class="kuiSideBarFormRow" ng-hide="!editorState.params.emsHotLink">
+    <div class="form-group clearfix" ng-hide="!editorState.params.emsHotLink">
         <a
-          class="ems-hotlink"
+          class="ems-hotlink pull-right"
           target="_blank"
           rel="noopener noreferrer"
           ng-href="{{editorState.params.emsHotLink}}"
           target="_blank"
           title="Preview {{editorState.params.selectedLayer.name}} on the Elastic Maps Service"
-        >Preview on EMS
+        ><icon aria-hidden size="'s'" type="'link'" /> Preview on EMS
         </a>
     </div>
 

diff --git a/src/core_plugins/tile_map/public/editors/tile_map_vis_params.html b/src/core_plugins/tile_map/public/editors/tile_map_vis_params.html
@@ -33,7 +33,7 @@
       <label>
         Cluster size
       </label>
-      <div class="vis-editor-agg-form-row">
+      <div class="visEditorAgg__formRow--flex">
         <input
           name="heatClusterSize"
           ng-model="editorState.params.heatClusterSize"
@@ -44,7 +44,7 @@
           max="3.0"
           step="0.1"
           >
-        <div class="vis-editor-agg-form-value">
+        <div class="visEditorAgg__sliderValue">
           {{editorState.params.heatClusterSize}}
         </div>
       </div>

diff --git a/src/ui/public/agg_types/controls/date_ranges.html b/src/ui/public/agg_types/controls/date_ranges.html
@@ -1,5 +1,5 @@
 <div>
-    <table class="vis-editor-agg-editor-ranges form-group" ng-show="agg.params.ranges.length">
+    <table class="visEditorAgg__rangesTable form-group" ng-show="agg.params.ranges.length">
       <tr>
         <th scope="col">
           <label id="visEditorDateRangeFrom{{agg.id}}">From</label>

diff --git a/src/ui/public/agg_types/controls/extended_bounds.html b/src/ui/public/agg_types/controls/extended_bounds.html
@@ -9,7 +9,7 @@
       ></icon-tip>
     </label>
   </div>
-  <div class="vis-editor-agg-form-row">
+  <div class="visEditorAgg__formRow--flex">
     <div class="form-group">
       <label
         id="extendedBoundsMinLabel{{agg.id}}"

diff --git a/src/ui/public/agg_types/controls/field.html b/src/ui/public/agg_types/controls/field.html
@@ -7,7 +7,7 @@
     title="Aggregation Field"
     name="field"
     required
-    class="vis-editor-field-ui-select field-select"
+    class="visEditorAggSelect__select field-select"
     ng-show="indexedFields.length"
     ng-model="agg.params.field"
     on-select="aggParam.onChange(agg)"
@@ -23,7 +23,7 @@
     >
       <div
         data-test-subj="{{field.displayName}}"
-        class="vis-editor-field-ui-select__field-entry"
+        class="eui-textTruncate"
         ng-bind-html="field.displayName | highlight: $select.search"
         title="{{field.displayName}}"
       ></div>

diff --git a/src/ui/public/agg_types/controls/filters.html b/src/ui/public/agg_types/controls/filters.html
@@ -1,12 +1,12 @@
 <div class="form-group">
   <div ng-repeat="filter in agg.params.filters">
-    <div class="vis-editor-agg-header">
-      <label for="visEditorFilterInput{{agg.id}}">
+    <div class="visEditorAggHeader">
+      <label class="visEditorAggHeader__title visEditorAggHeader__title--grow" for="visEditorFilterInput{{agg.id}}">
           Filter {{$index + 1}}
           <span ng-if="filter.label">- {{ filter.label }}</span>
       </label>
 
-      <div class="kuiButtonGroup kuiButtonGroup--united">
+      <div class="visEditorAggHeader__controls kuiButtonGroup kuiButtonGroup--united">
         <button
           ng-click="showConfig = !showConfig"
           type="button"

diff --git a/src/ui/public/agg_types/controls/ip_ranges.html b/src/ui/public/agg_types/controls/ip_ranges.html
@@ -8,7 +8,7 @@
   <div class="euiSpacer euiSpacer--s"></div>
 
   <div ng-show="agg.params.ipRangeType != 'mask'">
-    <table class="vis-editor-agg-editor-ranges form-group" ng-show="agg.params.ranges.fromTo.length">
+    <table class="visEditorAgg__rangesTable form-group" ng-show="agg.params.ranges.fromTo.length">
       <tr>
         <th scope="col">
           <label id="visEditorIpRangeFromLabel{{agg.id}}">From</label>
@@ -66,7 +66,7 @@
   </div>
 
   <div ng-show="agg.params.ipRangeType == 'mask'">
-    <table class="vis-editor-agg-editor-ranges form-group" ng-show="agg.params.ranges.mask.length">
+    <table class="visEditorAgg__rangesTable form-group" ng-show="agg.params.ranges.mask.length">
       <tr>
         <th scope="col">
           <label id="visEditorIpRangeCidrLabel{{agg.id}}">CIDR Mask</label>

diff --git a/src/ui/public/agg_types/controls/order_agg.html b/src/ui/public/agg_types/controls/order_agg.html
@@ -23,7 +23,7 @@
       </option>
     </select>
   </div>
-  <div ng-show="agg.params.orderAgg" class="vis-editor-agg-order-agg">
+  <div ng-show="agg.params.orderAgg" class="visEditorAgg__subAgg">
     <vis-editor-agg-params
       index-pattern="agg.getIndexPattern()"
       agg="agg.params.orderAgg"

diff --git a/src/ui/public/agg_types/controls/order_and_size.html b/src/ui/public/agg_types/controls/order_and_size.html
@@ -1,5 +1,5 @@
 <div>
-  <div class="vis-editor-agg-form-row">
+  <div class="visEditorAgg__formRow--flex">
     <div ng-if="agg.type.params.byName.order" class="form-group">
       <label for="visEditorOrderByOrder{{agg.id}}">Order</label>
       <select

diff --git a/src/ui/public/agg_types/controls/other_bucket.html b/src/ui/public/agg_types/controls/other_bucket.html
@@ -1,5 +1,5 @@
 <div>
-  <div class="vis-editor-agg-form-row">
+  <div class="visEditorAgg__formRow--flex">
     <div class="form-group">
       <label>
         <input
@@ -16,7 +16,7 @@
       </label>
     </div>
   </div>
-  <div class="vis-editor-agg-form-row" ng-if="agg.params.otherBucket">
+  <div class="visEditorAgg__formRow--flex" ng-if="agg.params.otherBucket">
     <div class="form-group">
       <label>
         Label for other bucket
@@ -30,7 +30,7 @@
       </div>
     </div>
   </div>
-  <div class="vis-editor-agg-form-row">
+  <div class="visEditorAgg__formRow--flex">
     <div class="form-group">
       <label>
         <input
@@ -48,7 +48,7 @@
       </label>
     </div>
   </div>
-  <div class="vis-editor-agg-form-row" ng-show="agg.params.missingBucket">
+  <div class="visEditorAgg__formRow--flex" ng-show="agg.params.missingBucket">
     <div class="form-group">
       <label>
         Label for missing values

diff --git a/src/ui/public/agg_types/controls/precision.html b/src/ui/public/agg_types/controls/precision.html
@@ -1,7 +1,7 @@
-<div class="vis-editor-agg-form-row" ng-controller="agg.type.params.byName.precision.controller">
+<div class="visEditorAgg__formRow--flex" ng-controller="agg.type.params.byName.precision.controller">
   <div ng-if="!agg.params.autoPrecision" class="form-group">
     <label for="visEditorMapPrecision{{agg.id}}">Precision</label>
-    <div class="vis-editor-agg-form-row">
+    <div class="visEditorAgg__formRow--flex">
       <input
         id="visEditorMapPrecision{{agg.id}}"
         name="precision"
@@ -12,14 +12,14 @@
         min="1"
         max="{{config.get('visualization:tileMap:maxPrecision')}}"
         >
-      <div class="form-group vis-editor-agg-form-value">
+      <div class="visEditorAgg__sliderValue">
         {{agg.params.precision}}
       </div>
     </div>
   </div>
 </div>
 
-<div class="vis-option-item">
+<div>
   <label>
     <input type="checkbox"
     name="autoPrecision"
@@ -28,7 +28,7 @@
   </label>
 </div>
 
-<div class="vis-option-item">
+<div>
   <label>
     <input type="checkbox"
            name="useGeocentroid"
@@ -37,7 +37,7 @@
   </label>
 </div>
 
-<div class="vis-option-item">
+<div>
   <label>
     <input
       type="checkbox"

diff --git a/src/ui/public/agg_types/controls/ranges.html b/src/ui/public/agg_types/controls/ranges.html
@@ -1,4 +1,4 @@
-<table class="vis-editor-agg-editor-ranges form-group" ng-show="agg.params.ranges.length">
+<table class="visEditorAgg__rangesTable form-group" ng-show="agg.params.ranges.length">
   <tr>
     <th scope="col">
       <label id="visEditorRangeFrom{{agg.id}}">From</label>

diff --git a/src/ui/public/agg_types/controls/sub_agg.html b/src/ui/public/agg_types/controls/sub_agg.html
@@ -22,7 +22,7 @@
       </option>
     </select>
   </div>
-  <div ng-if="agg.params.metricAgg === 'custom'" class="vis-editor-agg-order-agg">
+  <div ng-if="agg.params.metricAgg === 'custom'" class="visEditorAgg__subAgg">
     <ng-form name="customMetricForm">
       <vis-editor-agg-params
         index-pattern="agg.getIndexPattern()"

diff --git a/src/ui/public/agg_types/controls/sub_metric.html b/src/ui/public/agg_types/controls/sub_metric.html
@@ -1,7 +1,7 @@
 <div ng-controller="aggParam.controller">
   <div class="form-group" ng-if="agg.params[aggType]">
     <label>{{aggTitle}}</label>
-    <div class="vis-editor-agg-order-agg">
+    <div class="visEditorAgg__subAgg">
       <ng-form name="{{aggType}}Form">
         <vis-editor-agg-params
           agg="agg.params[aggType]"

diff --git a/src/ui/public/agg_types/controls/top_aggregate_and_size.html b/src/ui/public/agg_types/controls/top_aggregate_and_size.html
@@ -1,5 +1,5 @@
-<div ng-controller="aggParam.controller" class="vis-editor-agg-form-row">
-  <div class="form-group vis-editor-agg-form-row__even-split">
+<div ng-controller="aggParam.controller" class="visEditorAgg__formRow--flex">
+  <div class="form-group visEditorAgg__formRow--split">
     <label for="visEditorTopHitsAggregate{{agg.id}}">
       Aggregate with
       <icon-tip
@@ -16,7 +16,7 @@
       class="form-control"
     ></select>
   </div>
-  <div class="form-group vis-editor-agg-form-row__even-split">
+  <div class="form-group visEditorAgg__formRow--split">
     <label for="visEditorTopHitsSize{{agg.id}}">
       Size
       <icon-tip

diff --git a/src/ui/public/agg_types/controls/top_sort.html b/src/ui/public/agg_types/controls/top_sort.html
@@ -7,7 +7,7 @@
     name="field"
     sortField
     title="Sort on"
-    class="vis-editor-field-ui-select"
+    class="visEditorAggSelect__select"
     ng-show="sortFieldOptions.length"
     ng-model="agg.params.sortField"
     uis-open-close="limit = 100"

diff --git a/src/ui/public/vis/_index.scss b/src/ui/public/vis/_index.scss
@@ -1 +1,2 @@
+@import './editors/components/index';
 @import './editors/default/index';
diff --git a/src/ui/public/vis/editors/components/__snapshots__/editor_options_group.test.js.snap b/src/ui/public/vis/editors/components/__snapshots__/editor_options_group.test.js.snap
@@ -2,7 +2,7 @@
 
 exports[`<EditorOptionsGroup/> renders as expected 1`] = `
 <div
-  class="euiPanel euiPanel--paddingMedium euiPanel--flexGrowZero editorOptionsGroup__panel"
+  class="euiPanel euiPanel--paddingMedium euiPanel--flexGrowZero visEditorOptionsGroup__panel"
 >
   <div
     class="euiAccordion euiAccordion-isOpen"
@@ -84,7 +84,7 @@ exports[`<EditorOptionsGroup/> renders as expected 1`] = `
 
 exports[`<EditorOptionsGroup/> renders as expected with actions 1`] = `
 <div
-  class="euiPanel euiPanel--paddingMedium euiPanel--flexGrowZero editorOptionsGroup__panel"
+  class="euiPanel euiPanel--paddingMedium euiPanel--flexGrowZero visEditorOptionsGroup__panel"
 >
   <div
     class="euiAccordion euiAccordion-isOpen"
@@ -193,7 +193,7 @@ exports[`<EditorOptionsGroup/> renders as expected with actions 1`] = `
 
 exports[`<EditorOptionsGroup/> renders as expected with initial collapsed 1`] = `
 <div
-  class="euiPanel euiPanel--paddingMedium euiPanel--flexGrowZero editorOptionsGroup__panel"
+  class="euiPanel euiPanel--paddingMedium euiPanel--flexGrowZero visEditorOptionsGroup__panel"
 >
   <div
     class="euiAccordion"

diff --git a/src/ui/public/vis/editors/components/_editor_options_group.scss b/src/ui/public/vis/editors/components/_editor_options_group.scss
@@ -0,0 +1,3 @@
+.visEditorOptionsGroup__panel + .visEditorOptionsGroup__panel {
+  margin-top: $euiSizeS;
+}
diff --git a/src/ui/public/vis/editors/components/_index.scss b/src/ui/public/vis/editors/components/_index.scss
@@ -0,0 +1 @@
+@import './editor_options_group';