From f1ff23257d84c2f27bfcb9ea00c898defa504e00 Mon Sep 17 00:00:00 2001
From: Varun Sharma <VarunSharma@fico.com>
Date: Mon, 2 Apr 2018 17:11:04 +0530
Subject: [PATCH 1/5] #17488 Bugfix: Legend Color Picker Pushes Visualizations
 down

---
 src/ui/public/vislib/styles/_legend.less | 15 +++++++++------
 1 file changed, 9 insertions(+), 6 deletions(-)

diff --git a/src/ui/public/vislib/styles/_legend.less b/src/ui/public/vislib/styles/_legend.less
index 50a2cbaaa9896..7438592501355 100644
--- a/src/ui/public/vislib/styles/_legend.less
+++ b/src/ui/public/vislib/styles/_legend.less
@@ -18,18 +18,18 @@ visualize-legend {
   flex-direction: row;
   padding-top: 5px;
 
-  .vislib-container--legend-left & {
+  .vis-container--legend-left & {
     flex-direction: row-reverse;
   }
-  .vislib-container--legend-right & {
+  .vis-container--legend-right & {
     flex-direction: row;
   }
-  .vislib-container--legend-top & {
+  .vis-container--legend-top & {
     flex-direction: column-reverse;
     width: 100%;
     padding-left: 25px;
   }
-  .vislib-container--legend-bottom & {
+  .vis-container--legend-bottom & {
     flex-direction: column;
     width: 100%;
     padding-left: 25px;
@@ -57,8 +57,8 @@ visualize-legend {
 
     flex-direction: column;
 
-    .vislib-container--legend-top &,
-    .vislib-container--legend-bottom & {
+    .vis-container--legend-top &,
+    .vis-container--legend-bottom & {
       width: auto;
       overflow-y: hidden;
 
@@ -106,6 +106,9 @@ visualize-legend {
   .legend-value-color-picker {
     width: 130px;
     margin: auto;
+    position: absolute;
+    background-color:  white;
+
 
     .dot {
       line-height: 14px;

From 82da4d2de23b27a2389a361c9a421053ca7ae20c Mon Sep 17 00:00:00 2001
From: Varun Sharma <VarunSharma@fico.com>
Date: Mon, 2 Apr 2018 17:14:19 +0530
Subject: [PATCH 2/5] Fixes Name Issue

---
 src/ui/public/vislib/styles/_legend.less | 12 ++++++------
 1 file changed, 6 insertions(+), 6 deletions(-)

diff --git a/src/ui/public/vislib/styles/_legend.less b/src/ui/public/vislib/styles/_legend.less
index 7438592501355..dd6723769b5c5 100644
--- a/src/ui/public/vislib/styles/_legend.less
+++ b/src/ui/public/vislib/styles/_legend.less
@@ -18,18 +18,18 @@ visualize-legend {
   flex-direction: row;
   padding-top: 5px;
 
-  .vis-container--legend-left & {
+  .vislib-containerlegend-left & {
     flex-direction: row-reverse;
   }
-  .vis-container--legend-right & {
+  .vislib-containerlegend-right & {
     flex-direction: row;
   }
-  .vis-container--legend-top & {
+  .vislib-containerlegend-top & {
     flex-direction: column-reverse;
     width: 100%;
     padding-left: 25px;
   }
-  .vis-container--legend-bottom & {
+  .vislib-containerlegend-bottom & {
     flex-direction: column;
     width: 100%;
     padding-left: 25px;
@@ -57,8 +57,8 @@ visualize-legend {
 
     flex-direction: column;
 
-    .vis-container--legend-top &,
-    .vis-container--legend-bottom & {
+    .vislib-containerlegend-top &,
+    .vislib-containerlegend-bottom & {
       width: auto;
       overflow-y: hidden;
 

From d7b42f7ed8d22dc37ca104e2467b2b74d3f45c55 Mon Sep 17 00:00:00 2001
From: Varun Sharma <VarunSharma@fico.com>
Date: Mon, 2 Apr 2018 17:16:38 +0530
Subject: [PATCH 3/5] Fixes Name Issue with master (again)

---
 src/ui/public/vislib/styles/_legend.less | 12 ++++++------
 1 file changed, 6 insertions(+), 6 deletions(-)

diff --git a/src/ui/public/vislib/styles/_legend.less b/src/ui/public/vislib/styles/_legend.less
index dd6723769b5c5..cdb0915275f8a 100644
--- a/src/ui/public/vislib/styles/_legend.less
+++ b/src/ui/public/vislib/styles/_legend.less
@@ -18,18 +18,18 @@ visualize-legend {
   flex-direction: row;
   padding-top: 5px;
 
-  .vislib-containerlegend-left & {
+  .vislib-container--legend-left & {
     flex-direction: row-reverse;
   }
-  .vislib-containerlegend-right & {
+  .vislib-container--legend-right & {
     flex-direction: row;
   }
-  .vislib-containerlegend-top & {
+  .vislib-container--legend-top & {
     flex-direction: column-reverse;
     width: 100%;
     padding-left: 25px;
   }
-  .vislib-containerlegend-bottom & {
+  .vislib-container--legend-bottom & {
     flex-direction: column;
     width: 100%;
     padding-left: 25px;
@@ -57,8 +57,8 @@ visualize-legend {
 
     flex-direction: column;
 
-    .vislib-containerlegend-top &,
-    .vislib-containerlegend-bottom & {
+    .vislib-container--legend-top &,
+    .vislib-container--legend-bottom & {
       width: auto;
       overflow-y: hidden;
 

From 372ad32efe5cda0922587415fca70e193945cc73 Mon Sep 17 00:00:00 2001
From: Varun Sharma <VarunSharma@fico.com>
Date: Fri, 13 Apr 2018 16:09:25 +0530
Subject: [PATCH 4/5] Adds special case for Top position.

---
 src/ui/public/vislib/styles/_legend.less      | 10 +++++++---
 src/ui/public/visualize/visualize_legend.html |  2 +-
 src/ui/public/visualize/visualize_legend.js   | 14 ++++++++++++++
 3 files changed, 22 insertions(+), 4 deletions(-)

diff --git a/src/ui/public/vislib/styles/_legend.less b/src/ui/public/vislib/styles/_legend.less
index cdb0915275f8a..8b0010a3de112 100644
--- a/src/ui/public/vislib/styles/_legend.less
+++ b/src/ui/public/vislib/styles/_legend.less
@@ -102,13 +102,17 @@ visualize-legend {
   .legend-value-details {
     border-bottom: 1px solid @sidebar-bg;
   }
+  
+  .legend-value-details-top {
+    border-bottom: 1px solid @sidebar-bg;
+    position: absolute;
+    background-color: white;
+
+  }
 
   .legend-value-color-picker {
     width: 130px;
     margin: auto;
-    position: absolute;
-    background-color:  white;
-
 
     .dot {
       line-height: 14px;
diff --git a/src/ui/public/visualize/visualize_legend.html b/src/ui/public/visualize/visualize_legend.html
index 9c8ac2c8c15c2..cdd3087bb073d 100644
--- a/src/ui/public/visualize/visualize_legend.html
+++ b/src/ui/public/visualize/visualize_legend.html
@@ -41,7 +41,7 @@
           {{legendData.label}}
         </div>
 
-        <div ng-if="showDetails" class="legend-value-details">
+        <div ng-if="showDetails" class="{{getLegendValueDetailsClasses()}}">
           <div
             class="kuiButtonGroup kuiButtonGroup--united kuiButtonGroup--fullWidth"
             ng-show="canFilter(legendData)"
diff --git a/src/ui/public/visualize/visualize_legend.js b/src/ui/public/visualize/visualize_legend.js
index 8420d91687e92..76dc46e3472c0 100644
--- a/src/ui/public/visualize/visualize_legend.js
+++ b/src/ui/public/visualize/visualize_legend.js
@@ -84,6 +84,20 @@ uiModules.get('kibana')
           }
         };
 
+        $scope.getLegendValueDetailsClasses = function () {
+          switch ($scope.vis.params.legendPosition) {
+            case 'top':
+              return 'legend-value-details-top';
+            case 'bottom':
+              return 'legend-value-details';
+            case 'left':
+              return 'legend-value-details';
+            case 'right':
+            default:
+              return 'legend-value-details';
+          }
+        };
+
         $scope.filter = function (legendData, negate) {
           clickHandler({ point: legendData, negate: negate });
         };

From 7ba68da89d397582259c4a0d1daa8ef45da179cc Mon Sep 17 00:00:00 2001
From: Varun Sharma <VarunSharma@fico.com>
Date: Tue, 24 Apr 2018 13:22:41 +0530
Subject: [PATCH 5/5] Adds special case for bottompositioned legend.

---
 src/ui/public/vislib/styles/_legend.less    | 9 +++++++++
 src/ui/public/visualize/visualize_legend.js | 2 +-
 2 files changed, 10 insertions(+), 1 deletion(-)

diff --git a/src/ui/public/vislib/styles/_legend.less b/src/ui/public/vislib/styles/_legend.less
index 8b0010a3de112..ce16a25e12b00 100644
--- a/src/ui/public/vislib/styles/_legend.less
+++ b/src/ui/public/vislib/styles/_legend.less
@@ -110,6 +110,15 @@ visualize-legend {
 
   }
 
+  .legend-value-details-bottom {
+    border-bottom: 1px solid @sidebar-bg;
+    position:  absolute;
+    bottom:  5%;
+    margin-bottom: 15px;
+    background-color:  white;
+
+  }
+
   .legend-value-color-picker {
     width: 130px;
     margin: auto;
diff --git a/src/ui/public/visualize/visualize_legend.js b/src/ui/public/visualize/visualize_legend.js
index 76dc46e3472c0..50a5ed1b65af2 100644
--- a/src/ui/public/visualize/visualize_legend.js
+++ b/src/ui/public/visualize/visualize_legend.js
@@ -89,7 +89,7 @@ uiModules.get('kibana')
             case 'top':
               return 'legend-value-details-top';
             case 'bottom':
-              return 'legend-value-details';
+              return 'legend-value-details-bottom';
             case 'left':
               return 'legend-value-details';
             case 'right':