[6.x] Vis public UI LESS to SASS (#25333)

src/core_plugins/kibana/public/dashboard/_index.scss

@@ -41,8 +41,7 @@
   @import 'panel/index';
   @import 'viewport/index';
 
-  // Vis imports -- will have some duplicate styling
-  // because they will be imported via ui/public as well
-  // (without .theme-[] prefix)
-  @import 'src/ui/public/vis/map/index';
+  // Vis imports
+  @import 'src/ui/public/vis/index';
+  @import 'src/ui/public/vislib/index';
 }

src/core_plugins/kibana/public/dashboard/panel/_dashboard_panel.scss

@@ -35,7 +35,7 @@
     @include euiScrollBar; /* 3 */
   }
 
-  .visualization .vis-container {
+  .visualization .visChart__container {
     overflow: visible; /* 2 */
   }
 }

src/core_plugins/kibana/public/index.scss

@@ -1,6 +1,7 @@
 @import 'ui/public/styles/styling_constants';
 
-@import 'ui/public/query_bar/index';
+// Public UI styles
+@import 'ui/public/index';
 
 // Context styles
 @import './context/index';
@@ -16,6 +17,8 @@
 
 // Visualize styles
 @import './visualize/index';
+// Has to come after visualize because of some
+// bad cascading in the Editor layout
 @import 'ui/public/vis/index';
 
 // Management styles

src/core_plugins/region_map/public/tooltip.html

@@ -1,8 +1,8 @@
 <table>
   <tbody>
     <tr ng-repeat="detail in details" >
-      <td class="tooltip-label"><b>{{detail.label}}</b></td>
-      <td class="tooltip-value">{{detail.value}}</td>
+      <td class="visTooltip__label"><b>{{detail.label}}</b></td>
+      <td class="visTooltip__value">{{detail.value}}</td>
     </tr>
   </tbody>
 </table>

src/core_plugins/tile_map/public/editors/_tooltip.html

@@ -1,8 +1,8 @@
 <table>
   <tbody>
     <tr ng-repeat="detail in details" >
-      <td class="tooltip-label">{{detail.label}}</td>
-      <td class="tooltip-value">{{detail.value}}</td>
+      <td class="visTooltip__label">{{detail.label}}</td>
+      <td class="visTooltip__value">{{detail.value}}</td>
     </tr>
   </tbody>
 </table>

src/fixtures/vislib/_vis_fixture.js

@@ -41,7 +41,7 @@ const visHeight = $visCanvas.height();
 $visCanvas.new = function () {
   count += 1;
   if (count > 1) $visCanvas.height(visHeight * count);
-  return $('<div>').addClass('visualize-chart').appendTo($visCanvas);
+  return $('<div>').addClass('visChart').appendTo($visCanvas);
 };
 
 afterEach(function () {

src/ui/public/_index.scss

@@ -0,0 +1,5 @@
+@import './query_bar/index';
+// Can't import vis folder here because of cascading issues, it's imported in core_plugins/kibana
+// @import './vis/index';
+@import './vislib/index';
+@import './visualize/index';

src/ui/public/agg_response/hierarchical/_tooltip.html

@@ -1,15 +1,15 @@
-<table>
+<table class="visTooltip__table">
   <thead>
-    <tr class="tooltip-label">
+    <tr class="eui-textLeft visTooltip__label">
       <th scope="col">field</th>
       <th scope="col">value</th>
       <th scope="col">{{metricCol.label}}</th>
     </tr>
   </thead>
   <tbody>
-    <tr class="tooltip-value" ng-repeat="row in rows track by $index">
+    <tr class="visTooltip__value" ng-repeat="row in rows track by $index">
       <td><span ng-bind-html="row.spacer"></span>{{row.field}}</td>
-      <td class="row-bucket">{{row.bucket}}</td>
+      <td>{{row.bucket}}</td>
       <td>{{row.metric}}</td>
     </tr>
   </tbody>

src/ui/public/agg_response/point_series/_tooltip.html

@@ -1,8 +1,8 @@
 <table>
   <tbody>
     <tr ng-repeat="detail in details" >
-      <td class="tooltip-label">{{detail.label}}</td>
-      <td class="tooltip-value">
+      <td class="visTooltip__label">{{detail.label}}</td>
+      <td class="visTooltip__value">
           {{detail.value}}
           <span ng-if="detail.percent"> ({{detail.percent}})</span>
       </td>

src/ui/public/styles/table.less

@@ -79,8 +79,4 @@ table {
       }
     }
   }
-
-  .slice {
-    stroke: #272727;
-  }
 }

src/ui/public/styles/variables/for-theme.less

@@ -193,32 +193,7 @@
 @alert-color: @white;
 
 
-// Truncate ====================================================================
-@truncate-color: @body-bg;
-
-
-// Typeahead ===================================================================
-@typeahead-items-border: @globalColorLightGray;
-@typeahead-items-color: @text-color;
-@typeahead-items-bg: @body-bg;
-
-@typeahead-item-color: @text-color;
-@typeahead-item-border: @globalColorLightGray;
-@typeahead-item-bg: @body-bg;
-@typeahead-item-active-bg: @globalColorBlue;
-
-
-// Alerts ======================================================================
-@alert-vis-alert-color: @white;
-@alert-vis-alert-border: @white;
-
-
-// Legend ======================================================================
-@legend-item-color: #666;
-
 // Tooltip =====================================================================
-@tooltip-space: 8px;
-@tooltip-space-tight: @tooltip-space / 2;
 
 @tooltip-bg: fadeout(darken(@globalColorBlue, 30%), 10%);
 @tooltip-color: @globalColorWhite;
@@ -227,17 +202,6 @@
 @tooltip-bold: 600;
 
 
-
-// Svg =========================================================================
-@svg-axis-color: #ddd;
-@svg-tick-text-color: #848e96;
-@svg-brush-color: @white;
-@svg-endzone-bg: @black;
-
-@vis-axis-title-color: #848e96;
-@vis-chart-title-color: #848e96;
-
-
 // Saved Object Finder =========================================================
 @saved-object-finder-link-color: @link-color;
 @saved-object-finder-icon-color: darken(@saved-object-finder-link-color, 10%);

src/ui/public/vis/_index.scss

@@ -1,3 +1,4 @@
-@import './editors/components/index';
-@import './editors/default/index';
+@import './components/index';
+@import './editors/index';
 @import './map/index';
+@import './vis_types/index';

src/ui/public/vis/components/_index.scss

@@ -0,0 +1 @@
+@import './tooltip/index';

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

@@ -0,0 +1 @@
+@import './tooltip';

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

@@ -0,0 +1,66 @@
+// EUITODO: Use EuiTooltip or create a tooltip mixin
+.visTooltip,
+.visTooltip__sizingClone {
+  @include euiBottomShadow($color: $euiColorFullShade);
+  @include euiFontSizeXS;
+  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;
+
+  > :last-child {
+    margin-bottom: $euiSizeS;
+  }
+
+  > * {
+    margin: $euiSizeS $euiSizeS 0;
+  }
+
+  table {
+    td,
+    th {
+      padding: $euiSizeXS;
+    }
+  }
+}
+
+.visTooltip__header {
+  margin: 0 0 $euiSizeS 0;
+  padding: $euiSizeXS $euiSizeS;
+  display: flex;
+  align-items: center;
+
+  &:last-child {
+    margin-bottom: 0;
+  }
+
+  + * {
+    margin-top: $euiSizeS;
+  }
+}
+
+.visTooltip__headerIcon {
+  flex: 0 0 auto;
+  padding-right: $euiSizeS;
+}
+
+.visTooltip__headerText {
+  flex: 1 1 100%;
+}
+
+.visTooltip__label {
+  // max-width: $euiSizeXL * 3;
+  font-weight: $euiFontWeightMedium;
+  color: shade($euiColorGhost, 20%);
+}
+
+.visTooltip__sizingClone {
+  top: -500px;
+  left: -500px;
+}

src/ui/public/vis/components/tooltip/tooltip.js

@@ -44,9 +44,9 @@ export function Tooltip(id, el, formatter, events) {
   this.order = 100; // higher ordered contents are rendered below the others
   this.formatter = formatter;
   this.events = events;
-  this.containerClass = 'vis-wrapper';
-  this.tooltipClass = 'vis-tooltip';
-  this.tooltipSizerClass = 'vis-tooltip-sizing-clone';
+  this.containerClass = 'visWrapper';
+  this.tooltipClass = 'visTooltip';
+  this.tooltipSizerClass = 'visTooltip__sizingClone';
   this.showCondition = _.constant(true);
 
   this.binder = new Binder();

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

@@ -0,0 +1,2 @@
+@import './components/index';
+@import './default/index';

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

@@ -106,7 +106,7 @@
     flex: 1 1 100%;
   }
 
-  .visualize-chart {
+  .visChart {
     position: relative;
   }
 }

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

@@ -18,6 +18,13 @@ $visMapLeafletSprite: "data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/s
   min-height: 1px !important;
 }
 
+.leaflet-clickable {
+  &:hover {
+    stroke-width: $euiSizeS;
+    stroke-opacity: 0.8;
+  }
+}
+
 /**
  * 1. Since Leaflet is an external library, we also have to provide EUI variables
  *    to non-override colors for darkmode.
@@ -56,7 +63,7 @@ $visMapLeafletSprite: "data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/s
   padding: 0;
   background: $temp-euiTooltipBackground;
   color: $temp-euiTooltipText;
-  border-radius: $euiBorderRadius;
+  border-radius: $euiBorderRadius !important; // Override all positions the popup might be at
 }
 
 .leaflet-popup {
@@ -82,10 +89,6 @@ $visMapLeafletSprite: "data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/s
   table {
     td,th {
       padding: $euiSizeXS;
-
-      &.row-bucket {
-        word-break: break-all;
-      }
     }
   }
 }

src/ui/public/vis/vis_types/_index.scss

@@ -0,0 +1,2 @@
+@import './vislib_vis_type';
+@import './vislib_vis_legend';