From 52ca4f172f2836edf798bc637115af8f6b6a3b15 Mon Sep 17 00:00:00 2001
From: Jeffrey Phillips <jephilli@redhat.com>
Date: Thu, 24 May 2018 13:36:01 -0400
Subject: [PATCH] Updates per visual review

---
 src/less/charts.less                       | 54 +++++++++++++++-------
 src/sass/converted/patternfly/_charts.scss | 54 +++++++++++++++-------
 src/sass/converted/rcue/_charts.scss       | 54 +++++++++++++++-------
 tests/pages/bullet-charts.html             |  8 ++++
 4 files changed, 122 insertions(+), 48 deletions(-)

diff --git a/src/less/charts.less b/src/less/charts.less
index 87b3bf648d..0d8eae7bc0 100644
--- a/src/less/charts.less
+++ b/src/less/charts.less
@@ -10,6 +10,7 @@
   &.bullet-chart-pf-vertical {
     height: 100%;
     width: initial;
+    flex-direction: row;
   }
 }
 
@@ -19,6 +20,7 @@
   flex-direction: row;
   width: 100%;
   .bullet-chart-pf-vertical & {
+    flex: initial;
     flex-direction: column-reverse;
     height: 100%;
     width: initial;
@@ -41,6 +43,7 @@
   padding-right: 10px;
   text-align: right;
   .bullet-chart-pf-vertical & {
+    padding-right: 0;
     text-align: center;
   }
 }
@@ -63,9 +66,6 @@
     flex-direction: row-reverse;
     flex: initial;
     margin-left: -15px;
-    &.show-axis {
-      margin-left: -40px;
-    }
   }
 }
 
@@ -224,27 +224,42 @@
 }
 
 .bullet-chart-pf-legend {
-  display: flex;
-  flex-direction: row;
-  margin-top: 10px;
+  margin-top: 7px;
+  text-align: center;
   width: 100%;
+
+  .bullet-chart-pf-vertical & {
+    display: flex;
+    flex-direction: column;
+    margin-left: 10px;
+    margin-top: 0;
+    text-align: left;
+    width: initial;
+  }
+}
+
+.bullet-chart-pf-legend-spacer {
+  display: none;
+  .bullet-chart-pf-vertical & {
+    display: inline-block;
+    flex: 1;
+  }
 }
 
 .bullet-chart-pf-legend-item {
-  flex: 1;
-  overflow: hidden;
-  position: relative;
-  text-align: center;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-  word-wrap: normal;
+  display: inline-block;
+  margin-right: 10px;
+
+  .bullet-chart-pf-vertical & {
+    margin-right: 0;
+    margin-top: 10px;
+  }
 }
 
 .bullet-chart-pf-legend-item-box {
-  border: 1px solid @color-pf-black-600;
   display: inline-block;
   height: 13px;
-  margin-right: 5px;
+  margin-right: 3px;
   width: 13px;
   &.range-1 {
     background-color: @color-pf-black-150;
@@ -258,8 +273,15 @@
 }
 
 .bullet-chart-pf-legend-item-text {
+  display: inline-block;
+  line-height: 14px;
+  max-width: 150px;
+  overflow: hidden;
   position: relative;
-  top: -2px;
+  text-overflow: ellipsis;
+  top: 1px;
+  white-space: nowrap;
+  word-wrap: normal;
 }
 
 .c3 {
diff --git a/src/sass/converted/patternfly/_charts.scss b/src/sass/converted/patternfly/_charts.scss
index 961ee19efe..dedae3674c 100644
--- a/src/sass/converted/patternfly/_charts.scss
+++ b/src/sass/converted/patternfly/_charts.scss
@@ -10,6 +10,7 @@
   &.bullet-chart-pf-vertical {
     height: 100%;
     width: initial;
+    flex-direction: row;
   }
 }
 
@@ -19,6 +20,7 @@
   flex-direction: row;
   width: 100%;
   .bullet-chart-pf-vertical & {
+    flex: initial;
     flex-direction: column-reverse;
     height: 100%;
     width: initial;
@@ -41,6 +43,7 @@
   padding-right: 10px;
   text-align: right;
   .bullet-chart-pf-vertical & {
+    padding-right: 0;
     text-align: center;
   }
 }
@@ -63,9 +66,6 @@
     flex-direction: row-reverse;
     flex: initial;
     margin-left: -15px;
-    &.show-axis {
-      margin-left: -40px;
-    }
   }
 }
 
@@ -224,27 +224,42 @@
 }
 
 .bullet-chart-pf-legend {
-  display: flex;
-  flex-direction: row;
-  margin-top: 10px;
+  margin-top: 7px;
+  text-align: center;
   width: 100%;
+
+  .bullet-chart-pf-vertical & {
+    display: flex;
+    flex-direction: column;
+    margin-left: 10px;
+    margin-top: 0;
+    text-align: left;
+    width: initial;
+  }
+}
+
+.bullet-chart-pf-legend-spacer {
+  display: none;
+  .bullet-chart-pf-vertical & {
+    display: inline-block;
+    flex: 1;
+  }
 }
 
 .bullet-chart-pf-legend-item {
-  flex: 1;
-  overflow: hidden;
-  position: relative;
-  text-align: center;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-  word-wrap: normal;
+  display: inline-block;
+  margin-right: 10px;
+
+  .bullet-chart-pf-vertical & {
+    margin-right: 0;
+    margin-top: 10px;
+  }
 }
 
 .bullet-chart-pf-legend-item-box {
-  border: 1px solid $color-pf-black-600;
   display: inline-block;
   height: 13px;
-  margin-right: 5px;
+  margin-right: 3px;
   width: 13px;
   &.range-1 {
     background-color: $color-pf-black-150;
@@ -258,8 +273,15 @@
 }
 
 .bullet-chart-pf-legend-item-text {
+  display: inline-block;
+  line-height: 14px;
+  max-width: 150px;
+  overflow: hidden;
   position: relative;
-  top: -2px;
+  text-overflow: ellipsis;
+  top: 1px;
+  white-space: nowrap;
+  word-wrap: normal;
 }
 
 .c3 {
diff --git a/src/sass/converted/rcue/_charts.scss b/src/sass/converted/rcue/_charts.scss
index 961ee19efe..dedae3674c 100644
--- a/src/sass/converted/rcue/_charts.scss
+++ b/src/sass/converted/rcue/_charts.scss
@@ -10,6 +10,7 @@
   &.bullet-chart-pf-vertical {
     height: 100%;
     width: initial;
+    flex-direction: row;
   }
 }
 
@@ -19,6 +20,7 @@
   flex-direction: row;
   width: 100%;
   .bullet-chart-pf-vertical & {
+    flex: initial;
     flex-direction: column-reverse;
     height: 100%;
     width: initial;
@@ -41,6 +43,7 @@
   padding-right: 10px;
   text-align: right;
   .bullet-chart-pf-vertical & {
+    padding-right: 0;
     text-align: center;
   }
 }
@@ -63,9 +66,6 @@
     flex-direction: row-reverse;
     flex: initial;
     margin-left: -15px;
-    &.show-axis {
-      margin-left: -40px;
-    }
   }
 }
 
@@ -224,27 +224,42 @@
 }
 
 .bullet-chart-pf-legend {
-  display: flex;
-  flex-direction: row;
-  margin-top: 10px;
+  margin-top: 7px;
+  text-align: center;
   width: 100%;
+
+  .bullet-chart-pf-vertical & {
+    display: flex;
+    flex-direction: column;
+    margin-left: 10px;
+    margin-top: 0;
+    text-align: left;
+    width: initial;
+  }
+}
+
+.bullet-chart-pf-legend-spacer {
+  display: none;
+  .bullet-chart-pf-vertical & {
+    display: inline-block;
+    flex: 1;
+  }
 }
 
 .bullet-chart-pf-legend-item {
-  flex: 1;
-  overflow: hidden;
-  position: relative;
-  text-align: center;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-  word-wrap: normal;
+  display: inline-block;
+  margin-right: 10px;
+
+  .bullet-chart-pf-vertical & {
+    margin-right: 0;
+    margin-top: 10px;
+  }
 }
 
 .bullet-chart-pf-legend-item-box {
-  border: 1px solid $color-pf-black-600;
   display: inline-block;
   height: 13px;
-  margin-right: 5px;
+  margin-right: 3px;
   width: 13px;
   &.range-1 {
     background-color: $color-pf-black-150;
@@ -258,8 +273,15 @@
 }
 
 .bullet-chart-pf-legend-item-text {
+  display: inline-block;
+  line-height: 14px;
+  max-width: 150px;
+  overflow: hidden;
   position: relative;
-  top: -2px;
+  text-overflow: ellipsis;
+  top: 1px;
+  white-space: nowrap;
+  word-wrap: normal;
 }
 
 .c3 {
diff --git a/tests/pages/bullet-charts.html b/tests/pages/bullet-charts.html
index fda1e578f2..d639c6664d 100644
--- a/tests/pages/bullet-charts.html
+++ b/tests/pages/bullet-charts.html
@@ -43,6 +43,7 @@ <h2>Bullet Chart</h2>
         <span class="bullet-chart-pf-overflow"></span>
       </div>
       <div class="bullet-chart-pf-legend">
+        <span class="bullet-chart-pf-legend-spacer"></span>
         <span class="bullet-chart-pf-legend-item">
           <span class="bullet-chart-pf-legend-item-box" style="background-color: rgb(0, 136, 206);"></span>
           <span class="bullet-chart-pf-legend-item-text">Data2</span>
@@ -63,6 +64,7 @@ <h2>Bullet Chart</h2>
           <span class="bullet-chart-pf-legend-item-box range-3"></span>
           <span class="bullet-chart-pf-legend-item-text">Range 3</span>
         </span>
+        <span class="bullet-chart-pf-legend-spacer"></span>
       </div>
     </div>
   </div>
@@ -104,6 +106,7 @@ <h2>Bullet Chart - Vertical</h2>
         <span class="bullet-chart-pf-overflow"></span>
       </div>
       <div class="bullet-chart-pf-legend">
+        <span class="bullet-chart-pf-legend-spacer"></span>
         <span class="bullet-chart-pf-legend-item">
           <span class="bullet-chart-pf-legend-item-box" style="background-color: rgb(0, 136, 206);"></span>
           <span class="bullet-chart-pf-legend-item-text">Data2</span>
@@ -124,6 +127,7 @@ <h2>Bullet Chart - Vertical</h2>
           <span class="bullet-chart-pf-legend-item-box range-3"></span>
           <span class="bullet-chart-pf-legend-item-text">Range 3</span>
         </span>
+        <span class="bullet-chart-pf-legend-spacer"></span>
       </div>
     </div>
   </div>
@@ -167,6 +171,7 @@ <h2>Bullet Chart - Dots</h2>
         <span class="bullet-chart-pf-overflow"></span>
       </div>
       <div class="bullet-chart-pf-legend">
+        <span class="bullet-chart-pf-legend-spacer"></span>
         <span class="bullet-chart-pf-legend-item">
           <span class="bullet-chart-pf-legend-item-box" style="background-color: rgb(0, 136, 206);"></span>
           <span class="bullet-chart-pf-legend-item-text">Data2</span>
@@ -187,6 +192,7 @@ <h2>Bullet Chart - Dots</h2>
           <span class="bullet-chart-pf-legend-item-box range-3"></span>
           <span class="bullet-chart-pf-legend-item-text">Range 3</span>
         </span>
+        <span class="bullet-chart-pf-legend-spacer"></span>
       </div>
     </div>
   </div>
@@ -228,6 +234,7 @@ <h2>Bullet Chart - Vertical - Dots</h2>
         <span class="bullet-chart-pf-overflow"></span>
       </div>
       <div class="bullet-chart-pf-legend">
+        <span class="bullet-chart-pf-legend-spacer"></span>
         <span class="bullet-chart-pf-legend-item">
           <span class="bullet-chart-pf-legend-item-box" style="background-color: rgb(0, 136, 206);"></span>
           <span class="bullet-chart-pf-legend-item-text">Data2</span>
@@ -248,6 +255,7 @@ <h2>Bullet Chart - Vertical - Dots</h2>
           <span class="bullet-chart-pf-legend-item-box range-3"></span>
           <span class="bullet-chart-pf-legend-item-text">Range 3</span>
         </span>
+        <span class="bullet-chart-pf-legend-spacer"></span>
       </div>
     </div>
   </div>