From c8516e67ea92243230cc779b69437463f673cad7 Mon Sep 17 00:00:00 2001
From: Corentin Gautier <4660731+corentin-gautier@users.noreply.github.com>
Date: Mon, 5 Dec 2022 11:58:17 +0100
Subject: [PATCH] Avoid paint on popover when hovering content (#46201)

remove border on unstyled/expanded

use box-shadow instead of border

remove shadow on alternate

update changelog

Co-authored-by: Corentin Gautier <corentin.gautier@consertotech.pro>
---
 packages/components/CHANGELOG.md           |  1 +
 packages/components/src/popover/style.scss | 22 +++++++++++-----------
 2 files changed, 12 insertions(+), 11 deletions(-)

diff --git a/packages/components/CHANGELOG.md b/packages/components/CHANGELOG.md
index 2291ecb8ae8b2..bdb71d28f4810 100644
--- a/packages/components/CHANGELOG.md
+++ b/packages/components/CHANGELOG.md
@@ -21,6 +21,7 @@
 -   `BorderControl`, `ColorPicker` & `QueryControls`: Replace bottom margin overrides with `__nextHasNoMarginBottom` ([#45985](https://github.com/WordPress/gutenberg/pull/45985)).
 -   `CustomSelectControl`, `UnitControl`: Add `onFocus` and `onBlur` props ([#46096](https://github.com/WordPress/gutenberg/pull/46096)).
 -   `ResizableBox`: Prevent unnecessary paint on resize handles ([#46196](https://github.com/WordPress/gutenberg/pull/46196))
+-   `Popover`: Prevent unnecessary paint caused by using outline ([#46201](https://github.com/WordPress/gutenberg/pull/46201))
 
 ### Experimental
 
diff --git a/packages/components/src/popover/style.scss b/packages/components/src/popover/style.scss
index a557454da6f13..d595c23ae274a 100644
--- a/packages/components/src/popover/style.scss
+++ b/packages/components/src/popover/style.scss
@@ -1,5 +1,10 @@
 $arrow-triangle-base-size: 14px;
 
+$shadow-popover-border-default: 0 0 0 $border-width $gray-400;
+$shadow-popover-border-default-alternate: 0 0 0 $border-width $gray-900;
+$shadow-popover-border-top-only: 0 #{-$border-width} 0 0 $gray-400;
+$shadow-popover-border-top-only-alternate: 0 #{-$border-width} 0 $gray-900;
+
 .components-popover {
 	z-index: z-index(".components-popover");
 
@@ -15,26 +20,20 @@ $arrow-triangle-base-size: 14px;
 
 .components-popover__content {
 	background: $white;
-	// Using outline instead of border to avoid impacting
-	// popover computations.
-	outline: $border-width solid $gray-400;
-	box-shadow: $shadow-popover;
+	box-shadow: $shadow-popover-border-default, $shadow-popover;
 	border-radius: $radius-block-ui;
 	box-sizing: border-box;
 	width: min-content;
 
 	// Alternate treatment for popovers that put them at elevation zero with high contrast.
 	.is-alternate & {
-		outline: $border-width solid $gray-900;
-		box-shadow: none;
+		box-shadow: $shadow-popover-border-default-alternate;
 	}
 
 	// A style that gives the popover no visible ui.
 	.is-unstyled & {
 		background: none;
-		border: none;
 		border-radius: 0;
-		outline: none;
 		box-shadow: none;
 	}
 
@@ -43,9 +42,10 @@ $arrow-triangle-base-size: 14px;
 		height: calc(100% - #{ $panel-header-height });
 		overflow-y: visible;
 		width: auto;
-		border: none;
-		outline: none;
-		border-top: $border-width solid $gray-900;
+		box-shadow: $shadow-popover-border-top-only;
+	}
+	.components-popover.is-expanded.is-alternate & {
+		box-shadow: $shadow-popover-border-top-only-alternate;
 	}
 }