[EuiCard] Various fixes & cleanup from Emotion conversion

src-docs/src/views/card/card_image.tsx

@@ -5,7 +5,7 @@ import {
   EuiCard,
   EuiFlexGroup,
   EuiFlexItem,
-  EuiIcon,
+  EuiAvatar,
 } from '../../../../src';
 
 export default () => (
@@ -46,7 +46,7 @@ export default () => (
         textAlign="left"
         href="https://elastic.github.io/eui/"
         image="https://source.unsplash.com/400x200/?City"
-        icon={<EuiIcon size="xxl" type="logoBeats" />}
+        icon={<EuiAvatar color="plain" size="xl" name="test" />}
         title={'Beats in the City'}
         description="This card has an href and should be a link."
       />

src/components/card/card.test.tsx

@@ -11,10 +11,9 @@ import { render, mount } from 'enzyme';
 import { requiredProps } from '../../test';
 import { shouldRenderCustomStyles } from '../../test/internal';
 
-import { EuiCard } from './card';
+import { EuiCard, ALIGNMENTS } from './card';
 
-import { EuiIcon } from '../icon';
-import { EuiI18n } from '../i18n';
+import { EuiIcon, EuiAvatar, EuiI18n } from '../../components';
 import { COLORS, SIZES } from '../panel/panel';
 
 describe('EuiCard', () => {
@@ -48,6 +47,18 @@ describe('EuiCard', () => {
       expect(component).toMatchSnapshot();
     });
 
+    test('an avatar icon', () => {
+      const component = render(
+        <EuiCard
+          title="Card title"
+          description="Card description"
+          icon={<EuiAvatar color="plain" size="xl" name="test" />}
+        />
+      );
+
+      expect(component).toMatchSnapshot();
+    });
+
     test('a null icon', () => {
       const component = render(
         <EuiCard
@@ -209,16 +220,20 @@ describe('EuiCard', () => {
       expect(component).toMatchSnapshot();
     });
 
-    test('textAlign', () => {
-      const component = render(
-        <EuiCard
-          title="Card title"
-          description="Card description"
-          textAlign="right"
-        />
-      );
+    describe('textAlign', () => {
+      ALIGNMENTS.forEach((textAlign) => {
+        test(textAlign, () => {
+          const component = render(
+            <EuiCard
+              title="Card title"
+              description="Card description"
+              textAlign={textAlign}
+            />
+          );
 
-      expect(component).toMatchSnapshot();
+          expect(component).toMatchSnapshot();
+        });
+      });
     });
 
     test('isDisabled', () => {

src/components/card/card.tsx

@@ -15,17 +15,14 @@ import React, {
 } from 'react';
 import classNames from 'classnames';
 
-import { CommonProps, ExclusiveUnion, keysOf } from '../common';
+import { CommonProps, ExclusiveUnion } from '../common';
 import { getSecureRelForTarget, useEuiTheme } from '../../services';
+import { cloneElementWithCss } from '../../services/theme/clone_element';
 import { EuiText } from '../text';
 import { EuiTitle } from '../title';
 import { EuiBetaBadge, EuiBetaBadgeProps } from '../badge/beta_badge';
 import { EuiIconProps } from '../icon';
-import {
-  EuiCardSelect,
-  EuiCardSelectProps,
-  euiCardSelectableColor,
-} from './card_select';
+import { EuiCardSelect, EuiCardSelectProps } from './card_select';
 import { useGeneratedHtmlId } from '../../services/accessibility';
 import { validateHref } from '../../services/security/href_validator';
 import { EuiPanel, EuiPanelProps } from '../panel';
@@ -36,24 +33,8 @@ import {
   euiCardTextStyles,
 } from './card.styles';
 
-type CardAlignment = 'left' | 'center' | 'right';
-
-const textAlignToClassNameMap: { [alignment in CardAlignment]: string } = {
-  left: 'euiCard--leftAligned',
-  center: 'euiCard--centerAligned',
-  right: 'euiCard--rightAligned',
-};
-
-export const ALIGNMENTS = keysOf(textAlignToClassNameMap);
-
-type CardLayout = 'vertical' | 'horizontal';
-
-const layoutToClassNameMap: { [layout in CardLayout]: string } = {
-  vertical: '',
-  horizontal: 'euiCard--horizontal',
-};
-
-export const LAYOUT_ALIGNMENTS = keysOf(layoutToClassNameMap);
+export const ALIGNMENTS = ['left', 'center', 'right'] as const;
+type CardAlignment = typeof ALIGNMENTS[number];
 
 /**
  * Certain props are only allowed when the layout is vertical
@@ -224,28 +205,7 @@ export const EuiCard: FunctionComponent<EuiCardProps> = ({
     }
   }
 
-  const selectableColorClass = selectable
-    ? `euiCard--isSelectable--${euiCardSelectableColor(
-        selectable.color,
-        selectable.isSelected
-      )}`
-    : undefined;
-
-  const classes = classNames(
-    'euiCard',
-    textAlignToClassNameMap[textAlign],
-    layoutToClassNameMap[layout],
-    {
-      'euiCard--isClickable': isClickable,
-      'euiCard--hasBetaBadge': betaBadgeProps?.label,
-      'euiCard--hasIcon': icon,
-      'euiCard--isSelectable': selectable,
-      'euiCard-isSelected': selectable?.isSelected,
-      'euiCard-isDisabled': isDisabled,
-    },
-    selectableColorClass,
-    className
-  );
+  const classes = classNames('euiCard', className);
 
   const ariaId = useGeneratedHtmlId();
   const ariaDesc = description ? `${ariaId}Description` : '';
@@ -278,7 +238,7 @@ export const EuiCard: FunctionComponent<EuiCardProps> = ({
       styles.icon.layout[layout],
       imageNode && styles.icon.withImage,
     ];
-    iconNode = React.cloneElement(icon, {
+    iconNode = cloneElementWithCss(icon, {
       className: classNames(icon.props.className, 'euiCard__icon'),
       css: iconStyles,
     });

src/components/card/checkable_card/checkable_card.test.tsx

@@ -9,7 +9,7 @@
 import React from 'react';
 import { render } from 'enzyme';
 import { requiredProps } from '../../../test/required_props';
-// import { shouldRenderCustomStyles } from '../../../test/internal';
+import { shouldRenderCustomStyles } from '../../../test/internal';
 
 import { EuiCheckableCard } from './checkable_card';
 
@@ -28,10 +28,10 @@ describe('EuiCheckableCard', () => {
     expect(component).toMatchSnapshot();
   });
 
-  // TODO
-  // shouldRenderCustomStyles(
-  //   <EuiCheckableCard {...checkablePanelRequiredProps} />
-  // );
+  shouldRenderCustomStyles(
+    <EuiCheckableCard {...checkablePanelRequiredProps} />,
+    { skipStyles: true } // `style` goes with ...rest onto the child check/radio input
+  );
 
   test('renders panel props', () => {
     const component = render(

src/components/card/checkable_card/checkable_card.tsx

@@ -50,6 +50,7 @@ export type EuiCheckableCardProps = Omit<
 export const EuiCheckableCard: FunctionComponent<EuiCheckableCardProps> = ({
   children,
   className,
+  css,
   checkableType = 'radio',
   label,
   checked,
@@ -63,6 +64,7 @@ export const EuiCheckableCard: FunctionComponent<EuiCheckableCardProps> = ({
   const baseStyles = [
     styles.euiCheckableCard,
     checked && !disabled && styles.isChecked,
+    css,
   ];
   const labelStyles = [
     styles.label.euiCheckableCard__label,

upcoming_changelogs/6341.md

@@ -0,0 +1,4 @@
+**Bug fixes**
+
+- Fixed `EuiCard` not correctly merging `css` on its child `icon`s
+- Fixed `EuiCheckableCard` not setting `css` on the correct DOM node