From 2d5e592a1067d782205b636715ed73eb04cfa864 Mon Sep 17 00:00:00 2001
From: Joshua T Flowers <joshuatf@gmail.com>
Date: Sat, 29 Dec 2018 01:59:05 +0800
Subject: [PATCH] Update chart button active state for dashboard charts
 (https://github.com/woocommerce/woocommerce-admin/pull/1202)

* Update chart button active state for dashboard charts

* Add default active state when no query is present
---
 .../dashboard/dashboard-charts/index.js       |  2 +-
 .../packages/components/src/chart/style.scss  | 25 ++++++++++---------
 2 files changed, 14 insertions(+), 13 deletions(-)

diff --git a/plugins/woocommerce-admin/client/dashboard/dashboard-charts/index.js b/plugins/woocommerce-admin/client/dashboard/dashboard-charts/index.js
index da602fe965f..56bb8dccdb2 100644
--- a/plugins/woocommerce-admin/client/dashboard/dashboard-charts/index.js
+++ b/plugins/woocommerce-admin/client/dashboard/dashboard-charts/index.js
@@ -80,7 +80,7 @@ class DashboardCharts extends Component {
 						>
 							<IconButton
 								className={ classNames( 'woocommerce-chart__type-button', {
-									'woocommerce-chart__type-button-selected': query.type === 'line',
+									'woocommerce-chart__type-button-selected': ! query.type || query.type === 'line',
 								} ) }
 								icon={ <Gridicon icon="line-graph" /> }
 								title={ __( 'Line chart', 'wc-admin' ) }
diff --git a/plugins/woocommerce-admin/packages/components/src/chart/style.scss b/plugins/woocommerce-admin/packages/components/src/chart/style.scss
index c040c791add..efb56da2464 100644
--- a/plugins/woocommerce-admin/packages/components/src/chart/style.scss
+++ b/plugins/woocommerce-admin/packages/components/src/chart/style.scss
@@ -33,18 +33,6 @@
 			margin-left: $gap;
 			margin-right: $gap;
 		}
-
-		.woocommerce-chart__type-button {
-			&.components-icon-button {
-				color: $core-grey-light-700;
-				&.woocommerce-chart__type-button-selected {
-					color: $core-grey-dark-500;
-				}
-				&:hover {
-					box-shadow: none;
-				}
-			}
-		}
 	}
 
 	.woocommerce-chart__body {
@@ -112,3 +100,16 @@
 .woocommerce-chart__types {
 	padding: 0 8px;
 }
+
+.woocommerce-chart__type-button {
+	background: transparent !important;
+	&.components-icon-button {
+		color: $core-grey-light-700;
+		&.woocommerce-chart__type-button-selected {
+			color: $core-grey-dark-500;
+		}
+		&:hover {
+			box-shadow: none !important;
+		}
+	}
+}
\ No newline at end of file