fix($core): Remove hover effect and pointer on non-clickable legends

carbon-design-system#71
t-mullen · Nov 8, 2018 · dc9a2f2 · dc9a2f2
1 parent a5fffcf
commit dc9a2f2
Show file tree

Hide file tree

Showing 3 changed files with 25 additions and 22 deletions.
diff --git a/packages/core/src/base-chart.ts b/packages/core/src/base-chart.ts
@@ -311,7 +311,12 @@ export class BaseChart {
 			c.selectAll(".legend-btn.active").classed("not-allowed", true);
 		}
 
+		// Add hover effect for legend item circles
+		self.addLegendCircleHoverEffect();
+
 		c.selectAll(".legend-btn").each(function() {
+			select(this).classed('clickable', true);
+
 			select(this).on("click", function() {
 				c.selectAll(".chart-tooltip").remove();
 				c.selectAll(".label-tooltip").remove();
@@ -483,9 +488,6 @@ export class BaseChart {
 
 				return "white";
 			});
-
-		// Add hover effect for legend item circles
-		this.addLegendCircleHoverEffect();
 	}
 
 	positionLegend() {
@@ -534,7 +536,7 @@ export class BaseChart {
 	}
 
 	addLegendCircleHoverEffect() {
-		selectAll("li.legend-btn")
+		this.container.selectAll("li.legend-btn")
 			.on("mouseover", function() {
 				const circleRef = select(this).select("div.legend-circle");
 				const color = (circleRef.node() as HTMLElement).style.backgroundColor.substring(4,
@@ -707,7 +709,6 @@ export class BaseChart {
 				})
 				.style("border-style", Configuration.legend.inactive.borderStyle)
 				.style("border-width", Configuration.legend.inactive.borderWidth);
-			this.addLegendCircleHoverEffect();
 
 			legendContent.append("text")
 				.text(d => d.key);

diff --git a/packages/core/src/pie-chart.ts b/packages/core/src/pie-chart.ts
@@ -372,8 +372,6 @@ export class PieChart extends BaseChart {
 
 		legend.append("text")
 			.text(d => d);
-
-		this.addLegendCircleHoverEffect();
 	}
 
 	resizeChart() {

diff --git a/packages/core/src/style.scss b/packages/core/src/style.scss
@@ -119,8 +119,25 @@ $default_transition: all .1s ease-out;
 		font-size: 12px;
 		margin-bottom: 0;
 
-		&:hover {
-			cursor: pointer;
+		&.clickable {
+			&:hover {
+				cursor: pointer;
+			}
+
+			.legend-circle {
+				&:hover {
+					cursor: pointer;
+				}
+			}
+		}
+
+		.legend-circle {
+			display: inherit;
+			height: 12px;
+			width: 12px;
+			border-radius: 3px;
+			margin: 0 5px 5px 15px;
+			box-sizing: border-box;
 		}
 
 		span {
@@ -136,19 +153,6 @@ $default_transition: all .1s ease-out;
 			display: inherit;
 		}
 
-		.legend-circle {
-			display: inherit;
-			height: 12px;
-			width: 12px;
-			border-radius: 3px;
-			margin: 0 5px 5px 15px;
-			box-sizing: border-box;
-
-			&:hover {
-				cursor: pointer;
-			}
-		}
-
 		&.not-allowed {
 			cursor: default;