Popover: Fix arrow color to match content border color (#24208)

WordPress · Jul 27, 2020 · 2a8872c · 2a8872c
1 parent 952ad64
commit 2a8872c
Show file tree

Hide file tree

Showing 2 changed files with 7 additions and 1 deletion.
diff --git a/packages/components/src/popover/stories/index.js b/packages/components/src/popover/stories/index.js
@@ -30,12 +30,14 @@ export const _default = () => {
 		'firstElement'
 	);
 	const noArrow = boolean( 'noArrow', false );
+	const isAlternate = boolean( 'isAlternate', false );
 
 	const props = {
 		animate,
 		children,
 		focusOnMount,
 		noArrow,
+		isAlternate,
 	};
 
 	if ( ! show ) {

diff --git a/packages/components/src/popover/style.scss b/packages/components/src/popover/style.scss
@@ -29,7 +29,11 @@ $arrow-size: 8px;
 		margin-left: 2px;
 
 		&::before {
-			border: $arrow-size solid $gray-900;
+			border: $arrow-size solid $gray-400;
+		}
+
+		&.is-alternate::before {
+			border-color: $gray-900;
 		}
 
 		&::after {