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 <[email protected]>
WordPress · Dec 5, 2022 · c8516e6 · c8516e6
1 parent b4c3fba
commit c8516e6
Show file tree

Hide file tree

Showing 2 changed files with 12 additions and 11 deletions.
diff --git 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
@@ -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;
 	}
 }