Fix styling of chart component header. (https://github.com/woocommerce/woocommerce-admin/pull/7002)

* Fix styling of chart component header.

* Add changelog entries.

plugins/woocommerce-admin/packages/components/CHANGELOG.md

@@ -1,3 +1,7 @@
+# Unreleased
+
+-   Fix style regression with the Chart header. #7002
+
 # 6.2.0
 
 -   Fix `autocompleter` for custom Search in `CompareFilter` #6911

plugins/woocommerce-admin/packages/components/src/chart/index.js

@@ -242,8 +242,8 @@ class Chart extends Component {
 		};
 
 		return (
+			<div className="woocommerce-chart__interval-select">
 				<SelectControl
-				className="woocommerce-chart__interval-select"
 					value={ interval }
 					options={ allowedIntervals.map( ( allowedInterval ) => ( {
 						value: allowedInterval,
@@ -251,6 +251,7 @@ class Chart extends Component {
 					} ) ) }
 					onChange={ this.setInterval }
 				/>
+			</div>
 		);
 	}
 

plugins/woocommerce-admin/packages/components/src/chart/style.scss

@@ -87,8 +87,20 @@
 		border: 0;
 		box-shadow: none;
 
+		.components-input-control__backdrop {
+			display: none;
+		}
+
 		&:not(:disabled):not([aria-disabled='true']):focus {
 			@include button-style__focus-active();
+
+			& ~ .components-input-control__backdrop {
+				display: block;
+			}
+		}
+
+		& ~ .components-input-control__backdrop {
+			display: none;
 		}
 	}
 }

plugins/woocommerce-admin/readme.txt

@@ -112,6 +112,7 @@ Release and roadmap notes are available on the [WooCommerce Developers Blog](htt
 - Fix: Multiple preload tag output bug. #6998
 - Fix: Call existing filters for leaderboards in analytics. #6626
 - Fix: Set target to blank for the external links #6999
+- Fix style regression with the Chart header. #7002
 - Fix: Show Google Listing and Ads in installed marketing extensions section. #7029
 - Tweak: Only fetch remote payment gateway recommendations when opted in #6964
 - Tweak: Setup checklist copy revert. #7015