From 1ccb10073950c75f069b42f01d1fc35cdb744cae Mon Sep 17 00:00:00 2001
From: Eric Mikula <e.e.mikula@gmail.com>
Date: Mon, 4 Apr 2016 18:22:25 -0400
Subject: [PATCH] Change legendTemplates to use separate spans for text and
 icon.

This addresses the issue in #2192 without entirely reverting #886. Note that it still may cause confusing behavior for some legends: Specifically, the example on chartjs.org styles ".doughnut-legend li span" with a fixed width, and therefore both of the new spans will be impacted by this styling. However, now two spans are generated instead. %name%-legend-icon is used for the color icon, and %name%-legend-text can be used for styling the text. This should be described in release notes.
---
 src/Chart.Bar.js       | 2 +-
 src/Chart.Doughnut.js  | 2 +-
 src/Chart.Line.js      | 2 +-
 src/Chart.PolarArea.js | 2 +-
 src/Chart.Radar.js     | 2 +-
 5 files changed, 5 insertions(+), 5 deletions(-)

diff --git a/src/Chart.Bar.js b/src/Chart.Bar.js
index 3be768bc2..407212b6a 100644
--- a/src/Chart.Bar.js
+++ b/src/Chart.Bar.js
@@ -38,7 +38,7 @@
 		barDatasetSpacing : 1,
 
 		//String - A legend template
-		legendTemplate : "<ul class=\"<%=name.toLowerCase()%>-legend\"><% for (var i=0; i<datasets.length; i++){%><li><span style=\"background-color:<%=datasets[i].fillColor%>\"><%if(datasets[i].label){%><%=datasets[i].label%><%}%></span></li><%}%></ul>"
+		legendTemplate : "<ul class=\"<%=name.toLowerCase()%>-legend\"><% for (var i=0; i<datasets.length; i++){%><li><span class=\"<%=name.toLowerCase()%>-legend-icon\" style=\"background-color:<%=datasets[i].fillColor%>\"></span><span class=\"<%=name.toLowerCase()%>-legend-text\"><%if(datasets[i].label){%><%=datasets[i].label%><%}%></span></li><%}%></ul>"
 
 	};
 
diff --git a/src/Chart.Doughnut.js b/src/Chart.Doughnut.js
index 4769305ca..87ff2dd74 100644
--- a/src/Chart.Doughnut.js
+++ b/src/Chart.Doughnut.js
@@ -32,7 +32,7 @@
 		animateScale : false,
 
 		//String - A legend template
-		legendTemplate : "<ul class=\"<%=name.toLowerCase()%>-legend\"><% for (var i=0; i<segments.length; i++){%><li><span style=\"background-color:<%=segments[i].fillColor%>\"><%if(segments[i].label){%><%=segments[i].label%><%}%></span></li><%}%></ul>"
+		legendTemplate : "<ul class=\"<%=name.toLowerCase()%>-legend\"><% for (var i=0; i<segments.length; i++){%><li><span class=\"<%=name.toLowerCase()%>-legend-icon\" style=\"background-color:<%=segments[i].fillColor%>\"></span><span class=\"<%=name.toLowerCase()%>-legend-text\"><%if(segments[i].label){%><%=segments[i].label%><%}%></span></li><%}%></ul>"
 
 	};
 
diff --git a/src/Chart.Line.js b/src/Chart.Line.js
index fdf1b0169..bbde45cf5 100644
--- a/src/Chart.Line.js
+++ b/src/Chart.Line.js
@@ -50,7 +50,7 @@
 		datasetFill : true,
 
 		//String - A legend template
-		legendTemplate : "<ul class=\"<%=name.toLowerCase()%>-legend\"><% for (var i=0; i<datasets.length; i++){%><li><span style=\"background-color:<%=datasets[i].strokeColor%>\"><%if(datasets[i].label){%><%=datasets[i].label%><%}%></span></li><%}%></ul>",
+		legendTemplate : "<ul class=\"<%=name.toLowerCase()%>-legend\"><% for (var i=0; i<datasets.length; i++){%><li><span class=\"<%=name.toLowerCase()%>-legend-icon\" style=\"background-color:<%=datasets[i].strokeColor%>\"></span><span class=\"<%=name.toLowerCase()%>-legend-text\"><%if(datasets[i].label){%><%=datasets[i].label%><%}%></span></li><%}%></ul>",
 
 		//Boolean - Whether to horizontally center the label and point dot inside the grid
 		offsetGridLines : false
diff --git a/src/Chart.PolarArea.js b/src/Chart.PolarArea.js
index bf03f102b..8b55a1cd3 100644
--- a/src/Chart.PolarArea.js
+++ b/src/Chart.PolarArea.js
@@ -47,7 +47,7 @@
 		animateScale : false,
 
 		//String - A legend template
-		legendTemplate : "<ul class=\"<%=name.toLowerCase()%>-legend\"><% for (var i=0; i<segments.length; i++){%><li><span style=\"background-color:<%=segments[i].fillColor%>\"><%if(segments[i].label){%><%=segments[i].label%><%}%></span></li><%}%></ul>"
+		legendTemplate : "<ul class=\"<%=name.toLowerCase()%>-legend\"><% for (var i=0; i<segments.length; i++){%><li><span class=\"<%=name.toLowerCase()%>-legend-icon\" style=\"background-color:<%=segments[i].fillColor%>\"></span><span class=\"<%=name.toLowerCase()%>-legend-text\"><%if(segments[i].label){%><%=segments[i].label%><%}%></span></li><%}%></ul>"
 	};
 
 
diff --git a/src/Chart.Radar.js b/src/Chart.Radar.js
index c45e09761..5b93ee911 100644
--- a/src/Chart.Radar.js
+++ b/src/Chart.Radar.js
@@ -65,7 +65,7 @@
 			datasetFill : true,
 
 			//String - A legend template
-			legendTemplate : "<ul class=\"<%=name.toLowerCase()%>-legend\"><% for (var i=0; i<datasets.length; i++){%><li><span style=\"background-color:<%=datasets[i].strokeColor%>\"><%if(datasets[i].label){%><%=datasets[i].label%><%}%></span></li><%}%></ul>"
+			legendTemplate : "<ul class=\"<%=name.toLowerCase()%>-legend\"><% for (var i=0; i<datasets.length; i++){%><li><span class=\"<%=name.toLowerCase()%>-legend-icon\" style=\"background-color:<%=datasets[i].strokeColor%>\"></span><span class=\"<%=name.toLowerCase()%>-legend-text\"><%if(datasets[i].label){%><%=datasets[i].label%><%}%></span></li><%}%></ul>"
 
 		},
 
-- 
2.47.2