Untangle Card and Popover styles

WordPress · Feb 24, 2021 · 6005924 · 6005924
1 parent b6ec840
commit 6005924
Show file tree

Hide file tree

Showing 4 changed files with 13 additions and 16 deletions.
diff --git a/packages/components/src/ui/card/body.js b/packages/components/src/ui/card/body.js
@@ -12,7 +12,6 @@ import { useMemo } from '@wordpress/element';
 /**
  * Internal dependencies
  */
-import { usePopoverContext } from '../popover';
 import { Scrollable } from '../scrollable';
 import { View } from '../view';
 import * as styles from './styles';
@@ -27,17 +26,9 @@ function CardBody( props, forwardedRef ) {
 		'CardBody'
 	);
 
-	const { popover } = usePopoverContext();
-
 	const classes = useMemo(
-		() =>
-			cx(
-				styles.Body,
-				styles.borderRadius,
-				popover && styles.popoverBody,
-				className
-			),
-		[ className, popover ]
+		() => cx( styles.Body, styles.borderRadius, className ),
+		[ className ]
 	);
 
 	if ( scrollable ) {

diff --git a/packages/components/src/ui/card/styles.js b/packages/components/src/ui/card/styles.js
@@ -56,10 +56,6 @@ export const rounded = css`
 	border-radius: ${ ui.get( 'cardBorderRadius' ) };
 `;
 
-export const popoverBody = css`
-	max-height: 80vh;
-`;
-
 export const small = css`
 	min-height: 30px;
 `;

diff --git a/packages/components/src/ui/popover/content.js b/packages/components/src/ui/popover/content.js
@@ -48,7 +48,11 @@ function PopoverContent( props, forwardedRef ) {
 			{ ...popover }
 		>
 			{ showContent && (
-				<Card elevation={ elevation } ref={ forwardedRef }>
+				<Card
+					className={ styles.cardStyle }
+					elevation={ elevation }
+					ref={ forwardedRef }
+				>
 					{ children }
 				</Card>
 			) }

diff --git a/packages/components/src/ui/popover/styles.js b/packages/components/src/ui/popover/styles.js
@@ -22,3 +22,9 @@ export const PopoverContent = css`
 		display: none;
 	}
 `;
+
+export const cardStyle = css`
+	${ ui.$( 'CardBody' ).getSelector() } {
+		max-height: 80vh;
+	}
+`;