WordPress · sarayourfriend · Jul 1, 2021
@@ -3,8 +3,8 @@
  */
 import { contextConnect } from '../../ui/context';
 import { Scrollable } from '../../scrollable';
-import { View } from '../../view';
 import { useCardBody } from './hook';
+import { CardBodyView } from '../styles';
 
 /**
  * @param {import('../../ui/context').PolymorphicComponentProps<import('../types').BodyProps, 'div'>} props
@@ -14,10 +14,16 @@ function CardBody( props, forwardedRef ) {
 	const { isScrollable, ...otherProps } = useCardBody( props );
 
 	if ( isScrollable ) {
-		return <Scrollable { ...otherProps } ref={ forwardedRef } />;
+		return (
+			<Scrollable
+				as={ CardBodyView }
+				{ ...otherProps }
+				ref={ forwardedRef }
+			/>
+		);
 	}
 
-	return <View { ...otherProps } ref={ forwardedRef } />;
+	return <CardBodyView { ...otherProps } ref={ forwardedRef } />;
 }
 
 /**

@@ -1,11 +1,3 @@
-/**
- * External dependencies
- */
-// Disable reason: Temporarily disable for existing usages
-// until we remove them as part of https://github.com/WordPress/gutenberg/issues/30503#deprecating-emotion-css
-// eslint-disable-next-line no-restricted-imports
-import { cx } from '@emotion/css';
-
 /**
  * WordPress dependencies
  */
@@ -15,7 +7,7 @@ import { useMemo } from '@wordpress/element';
  * Internal dependencies
  */
 import { useContextSystem } from '../../ui/context';
-import * as styles from '../styles';
+import { cx } from '../../utils';
 
 /**
  * @param {import('../../ui/context').PolymorphicComponentProps<import('../types').BodyProps, 'div'>} props
@@ -32,10 +24,6 @@ export function useCardBody( props ) {
 	const classes = useMemo(
 		() =>
 			cx(
-				styles.Body,
-				styles.borderRadius,
-				styles.cardPaddings[ size ],
-				isShady && styles.shady,
 				// This classname is added for legacy compatibility reasons.
 				'components-card__body',
 				className
@@ -47,5 +35,7 @@ export function useCardBody( props ) {
 		...otherProps,
 		className: classes,
 		isScrollable,
+		isShady,
+		size,
 	};
 }
@@ -2,8 +2,8 @@
  * Internal dependencies
  */
 import { contextConnect } from '../../ui/context';
-import { Divider } from '../../divider';
 import { useCardDivider } from './hook';
+import { CardDividerView } from '../styles';
 
 /**
  * @param {import('../../ui/context').PolymorphicComponentProps<import('../../divider').DividerProps, 'hr', false>} props
@@ -12,7 +12,7 @@ import { useCardDivider } from './hook';
 function CardDivider( props, forwardedRef ) {
 	const dividerProps = useCardDivider( props );
 
-	return <Divider { ...dividerProps } ref={ forwardedRef } />;
+	return <CardDividerView { ...dividerProps } ref={ forwardedRef } />;
 }
 
 /**

@@ -1,11 +1,3 @@
-/**
- * External dependencies
- */
-// Disable reason: Temporarily disable for existing usages
-// until we remove them as part of https://github.com/WordPress/gutenberg/issues/30503#deprecating-emotion-css
-// eslint-disable-next-line no-restricted-imports
-import { cx } from '@emotion/css';
-
 /**
  * WordPress dependencies
  */
@@ -15,7 +7,7 @@ import { useMemo } from '@wordpress/element';
  * Internal dependencies
  */
 import { useContextSystem } from '../../ui/context';
-import * as styles from '../styles';
+import { cx } from '../../utils';
 
 /**
  * @param {import('../../ui/context').PolymorphicComponentProps<import('../../divider').DividerProps, 'hr', false>} props
@@ -29,8 +21,6 @@ export function useCardDivider( props ) {
 	const classes = useMemo(
 		() =>
 			cx(
-				styles.Divider,
-				styles.borderColor,
 				// This classname is added for legacy compatibility reasons.
 				'components-card__divider',
 				className

@@ -2,8 +2,8 @@
  * Internal dependencies
  */
 import { contextConnect } from '../../ui/context';
-import { Flex } from '../../flex';
 import { useCardFooter } from './hook';
+import { CardFooterView } from '../styles';
 
 /**
  * @param {import('../../ui/context').PolymorphicComponentProps<import('../types').FooterProps, 'div'>} props
@@ -12,7 +12,7 @@ import { useCardFooter } from './hook';
 function CardFooter( props, forwardedRef ) {
 	const footerProps = useCardFooter( props );
 
-	return <Flex { ...footerProps } ref={ forwardedRef } />;
+	return <CardFooterView { ...footerProps } ref={ forwardedRef } />;
 }
 
 /**

@@ -1,11 +1,3 @@
-/**
- * External dependencies
- */
-// Disable reason: Temporarily disable for existing usages
-// until we remove them as part of https://github.com/WordPress/gutenberg/issues/30503#deprecating-emotion-css
-// eslint-disable-next-line no-restricted-imports
-import { cx } from '@emotion/css';
-
 /**
  * WordPress dependencies
  */
@@ -15,7 +7,7 @@ import { useMemo } from '@wordpress/element';
  * Internal dependencies
  */
 import { useContextSystem } from '../../ui/context';
-import * as styles from '../styles';
+import { cx } from '../../utils';
 
 /**
  * @param {import('../../ui/context').PolymorphicComponentProps<import('../types').FooterProps, 'div'>} props
@@ -33,22 +25,19 @@ export function useCardFooter( props ) {
 	const classes = useMemo(
 		() =>
 			cx(
-				styles.Footer,
-				styles.borderRadius,
-				styles.borderColor,
-				styles.cardPaddings[ size ],
-				isBorderless && styles.borderless,
-				isShady && styles.shady,
 				// This classname is added for legacy compatibility reasons.
 				'components-card__footer',
 				className
 			),
-		[ className, isBorderless, isShady, size ]
+		[ className ]
 	);
 
 	return {
 		...otherProps,
 		className: classes,
 		justify,
+		isBorderless,
+		isShady,
+		size,
 	};
 }
@@ -2,8 +2,8 @@
  * Internal dependencies
  */
 import { contextConnect } from '../../ui/context';
-import { Flex } from '../../flex';
 import { useCardHeader } from './hook';
+import { CardHeaderView } from '../styles';
 
 /**
  * @param {import('../../ui/context').PolymorphicComponentProps<import('../types').HeaderProps, 'div'>} props
@@ -12,7 +12,7 @@ import { useCardHeader } from './hook';
 function CardHeader( props, forwardedRef ) {
 	const headerProps = useCardHeader( props );
 
-	return <Flex { ...headerProps } ref={ forwardedRef } />;
+	return <CardHeaderView { ...headerProps } ref={ forwardedRef } />;
 }
 
 /**

@@ -1,11 +1,3 @@
-/**
- * External dependencies
- */
-// Disable reason: Temporarily disable for existing usages
-// until we remove them as part of https://github.com/WordPress/gutenberg/issues/30503#deprecating-emotion-css
-// eslint-disable-next-line no-restricted-imports
-import { cx } from '@emotion/css';
-
 /**
  * WordPress dependencies
  */
@@ -15,7 +7,7 @@ import { useMemo } from '@wordpress/element';
  * Internal dependencies
  */
 import { useContextSystem } from '../../ui/context';
-import * as styles from '../styles';
+import { cx } from '../../utils';
 
 /**
  * @param {import('../../ui/context').PolymorphicComponentProps<import('../types').HeaderProps, 'div'>} props
@@ -32,12 +24,6 @@ export function useCardHeader( props ) {
 	const classes = useMemo(
 		() =>
 			cx(
-				styles.Header,
-				styles.borderRadius,
-				styles.borderColor,
-				styles.cardPaddings[ size ],
-				isBorderless && styles.borderless,
-				isShady && styles.shady,
 				// This classname is added for legacy compatibility reasons.
 				'components-card__header',
 				className
@@ -48,5 +34,8 @@ export function useCardHeader( props ) {
 	return {
 		...otherProps,
 		className: classes,
+		isBorderless,
+		isShady,
+		size,
 	};
 }
@@ -1,9 +1,21 @@
 /**
  * Internal dependencies
  */
-import { createComponent } from '../../ui/utils';
+import { contextConnect } from '../../ui/context';
+import { CardMediaView } from '../styles';
 import { useCardMedia } from './hook';
 
+/**
+ *
+ * @param {import('../../ui/context').PolymorphicComponentProps<{ children: import('react').ReactNode }, 'div'>} props
+ * @param {import('react').Ref<any>}                                                                             forwardedRef
+ */
+function CardMedia( props, forwardedRef ) {
+	const contextProps = useCardMedia( props );
+
+	return <CardMediaView ref={ forwardedRef } { ...contextProps } />;
+}
+
 /**
  * `CardMedia` provides a container for media elements within a `Card`.
  *
@@ -21,10 +33,6 @@ import { useCardMedia } from './hook';
  * );
  * ```
  */
-const CardMedia = createComponent( {
-	as: 'div',
-	useHook: useCardMedia,
-	name: 'CardMedia',
-} );
+const ConnectedCardMedia = contextConnect( CardMedia, 'CardMedia' );
 
-export default CardMedia;
+export default ConnectedCardMedia;
@@ -1,11 +1,3 @@
-/**
- * External dependencies
- */
-// Disable reason: Temporarily disable for existing usages
-// until we remove them as part of https://github.com/WordPress/gutenberg/issues/30503#deprecating-emotion-css
-// eslint-disable-next-line no-restricted-imports
-import { cx } from '@emotion/css';
-
 /**
  * WordPress dependencies
  */
@@ -15,7 +7,7 @@ import { useMemo } from '@wordpress/element';
  * Internal dependencies
  */
 import { useContextSystem } from '../../ui/context';
-import * as styles from '../styles';
+import { cx } from '../../utils';
 
 /**
  * @param {import('../../ui/context').PolymorphicComponentProps<{ children: import('react').ReactNode }, 'div'>} props
@@ -26,8 +18,6 @@ export function useCardMedia( props ) {
 	const classes = useMemo(
 		() =>
 			cx(
-				styles.Media,
-				styles.borderRadius,
 				// This classname is added for legacy compatibility reasons.
 				'components-card__media',
 				className

@@ -1,11 +1,3 @@
-/**
- * External dependencies
- */
-// Disable reason: Temporarily disable for existing usages
-// until we remove them as part of https://github.com/WordPress/gutenberg/issues/30503#deprecating-emotion-css
-// eslint-disable-next-line no-restricted-imports
-import { css } from '@emotion/css';
-
 /**
  * WordPress dependencies
  */
@@ -16,31 +8,17 @@ import { useMemo } from '@wordpress/element';
  */
 import { contextConnect, ContextSystemProvider } from '../../ui/context';
 import { Elevation } from '../../elevation';
-import { View } from '../../view';
-import * as styles from '../styles';
+import { CardView, CardContentView } from '../styles';
 import { useCard } from './hook';
-import CONFIG from '../../utils/config-values';
 
 /**
  * @param {import('../../ui/context').PolymorphicComponentProps<import('../types').Props, 'div'>} props
  * @param {import('react').Ref<any>}                                                              forwardedRef
  */
 function Card( props, forwardedRef ) {
-	const {
-		children,
-		elevation,
-		isBorderless,
-		isRounded,
-		size,
-		...otherProps
-	} = useCard( props );
-	const elevationBorderRadius = isRounded ? CONFIG.cardBorderRadius : 0;
-
-	const elevationClassName = useMemo(
-		() => css( { borderRadius: elevationBorderRadius } ),
-		[ elevationBorderRadius ]
+	const { children, elevation, isBorderless, size, ...otherProps } = useCard(
+		props
 	);
-
 	const contextProviderValue = useMemo( () => {
 		const contextProps = {
 			size,
@@ -55,19 +33,18 @@ function Card( props, forwardedRef ) {
 
 	return (
 		<ContextSystemProvider value={ contextProviderValue }>
-			<View { ...otherProps } ref={ forwardedRef }>
-				<View className={ styles.Content }>{ children }</View>
+			<CardView
+				isBorderless={ isBorderless }
+				{ ...otherProps }
+				ref={ forwardedRef }
+			>
+				<CardContentView>{ children }</CardContentView>
 				<Elevation
-					className={ elevationClassName }
 					isInteractive={ false }
 					value={ elevation ? 1 : 0 }
 				/>
-				<Elevation
-					className={ elevationClassName }
-					isInteractive={ false }
-					value={ elevation }
-				/>
-			</View>
+				<Elevation isInteractive={ false } value={ elevation } />
+			</CardView>
 		</ContextSystemProvider>
 	);
 }