From 0ab504bb75c53ee10556f724f524e990b01e5265 Mon Sep 17 00:00:00 2001
From: Constance Chen <constance.chen.3@gmail.com>
Date: Thu, 3 Nov 2022 11:57:48 -0700
Subject: [PATCH 1/7] [REVERT ME] Repro/testing

---
 src-docs/src/views/card/card_image.tsx | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/src-docs/src/views/card/card_image.tsx b/src-docs/src/views/card/card_image.tsx
index 4f420364351..350152eb1c1 100644
--- a/src-docs/src/views/card/card_image.tsx
+++ b/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."
       />

From 2aba0776cd7a4ff47e65844c68bd695a17de4a8c Mon Sep 17 00:00:00 2001
From: Constance Chen <constance.chen.3@gmail.com>
Date: Thu, 3 Nov 2022 12:01:23 -0700
Subject: [PATCH 2/7] Example of failing cloned CSS

- note missing euiAvatar classes in `emotion-euiCard__icon`
---
 .../card/__snapshots__/card.test.tsx.snap     | 45 +++++++++++++++++++
 src/components/card/card.test.tsx             | 15 ++++++-
 2 files changed, 58 insertions(+), 2 deletions(-)

diff --git a/src/components/card/__snapshots__/card.test.tsx.snap b/src/components/card/__snapshots__/card.test.tsx.snap
index b4b0c78314b..14566327825 100644
--- a/src/components/card/__snapshots__/card.test.tsx.snap
+++ b/src/components/card/__snapshots__/card.test.tsx.snap
@@ -177,6 +177,51 @@ exports[`EuiCard props accepts div props like style 1`] = `
 </div>
 `;
 
+exports[`EuiCard props an avatar icon 1`] = `
+<div
+  class="euiPanel euiPanel--plain euiPanel--paddingMedium euiCard euiCard--centerAligned euiCard--hasIcon emotion-euiPanel-grow-m-m-plain-hasShadow-euiCard-center-vertical"
+>
+  <div
+    class="euiCard__top emotion-euiCard__top-vertical"
+  >
+    <div
+      aria-label="test"
+      class="euiAvatar euiAvatar--xl euiAvatar--user euiCard__icon emotion-euiCard__icon-vertical"
+      role="img"
+      title="test"
+    >
+      <span
+        aria-hidden="true"
+      >
+        t
+      </span>
+    </div>
+  </div>
+  <div
+    class="euiCard__content emotion-euiCard__content-vertical"
+  >
+    <p
+      class="euiTitle euiCard__title emotion-euiTitle-s"
+      id="generated-idTitle"
+    >
+      <span
+        class="emotion-euiCard__text-center"
+      >
+        Card title
+      </span>
+    </p>
+    <div
+      class="euiText emotion-euiText-s-euiCard__description"
+      id="generated-idDescription"
+    >
+      <p>
+        Card description
+      </p>
+    </div>
+  </div>
+</div>
+`;
+
 exports[`EuiCard props children 1`] = `
 <div
   class="euiPanel euiPanel--plain euiPanel--paddingMedium euiCard euiCard--centerAligned emotion-euiPanel-grow-m-m-plain-hasShadow-euiCard-center-vertical"
diff --git a/src/components/card/card.test.tsx b/src/components/card/card.test.tsx
index 775377ead78..d75192f0fa1 100644
--- a/src/components/card/card.test.tsx
+++ b/src/components/card/card.test.tsx
@@ -13,8 +13,7 @@ import { shouldRenderCustomStyles } from '../../test/internal';
 
 import { EuiCard } 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

From 267d6d4b386f933574b24bf18d9223d2211de621 Mon Sep 17 00:00:00 2001
From: Constance Chen <constance.chen.3@gmail.com>
Date: Thu, 3 Nov 2022 12:03:59 -0700
Subject: [PATCH 3/7] Fix EuiCard icons not correctly merging `css`

---
 src/components/card/__snapshots__/card.test.tsx.snap | 2 +-
 src/components/card/card.tsx                         | 3 ++-
 2 files changed, 3 insertions(+), 2 deletions(-)

diff --git a/src/components/card/__snapshots__/card.test.tsx.snap b/src/components/card/__snapshots__/card.test.tsx.snap
index 14566327825..c4c0ee1fae4 100644
--- a/src/components/card/__snapshots__/card.test.tsx.snap
+++ b/src/components/card/__snapshots__/card.test.tsx.snap
@@ -186,7 +186,7 @@ exports[`EuiCard props an avatar icon 1`] = `
   >
     <div
       aria-label="test"
-      class="euiAvatar euiAvatar--xl euiAvatar--user euiCard__icon emotion-euiCard__icon-vertical"
+      class="euiAvatar euiAvatar--xl euiAvatar--user euiCard__icon emotion-euiAvatar-xl-user-plain-euiCard__icon-vertical"
       role="img"
       title="test"
     >
diff --git a/src/components/card/card.tsx b/src/components/card/card.tsx
index cc7bdad4f6a..527772ac560 100644
--- a/src/components/card/card.tsx
+++ b/src/components/card/card.tsx
@@ -17,6 +17,7 @@ import classNames from 'classnames';
 
 import { CommonProps, ExclusiveUnion, keysOf } 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';
@@ -278,7 +279,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,
     });

From 7cf8c57246db55244c53ade018575c8dd7e61128 Mon Sep 17 00:00:00 2001
From: Constance Chen <constance.chen.3@gmail.com>
Date: Thu, 3 Nov 2022 12:18:29 -0700
Subject: [PATCH 4/7] Fix `EuiCheckableCard` not sending top level `css` prop
 to the same DOM node as its `className` prop

---
 .../card/checkable_card/checkable_card.test.tsx        | 10 +++++-----
 src/components/card/checkable_card/checkable_card.tsx  |  2 ++
 2 files changed, 7 insertions(+), 5 deletions(-)

diff --git a/src/components/card/checkable_card/checkable_card.test.tsx b/src/components/card/checkable_card/checkable_card.test.tsx
index 601f12eb970..e5cd8d51815 100644
--- a/src/components/card/checkable_card/checkable_card.test.tsx
+++ b/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(
diff --git a/src/components/card/checkable_card/checkable_card.tsx b/src/components/card/checkable_card/checkable_card.tsx
index f956a4a9dc2..764b18746ce 100644
--- a/src/components/card/checkable_card/checkable_card.tsx
+++ b/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,

From 1c3a421f6fab6465a2691b5814f91f5d74066110 Mon Sep 17 00:00:00 2001
From: Constance Chen <constance.chen.3@gmail.com>
Date: Thu, 3 Nov 2022 12:37:35 -0700
Subject: [PATCH 5/7] [opinionated] Remove unused euiCard modifier classNames

no results in Kibana for `euiCard-` whatsoever, so feels safe to remove

+ clean up types

+ add unit tests for each text alignment
---
 .../card/__snapshots__/card.test.tsx.snap     | 128 +++++++++++++-----
 src/components/card/card.test.tsx             |  24 ++--
 src/components/card/card.tsx                  |  51 +------
 3 files changed, 112 insertions(+), 91 deletions(-)

diff --git a/src/components/card/__snapshots__/card.test.tsx.snap b/src/components/card/__snapshots__/card.test.tsx.snap
index c4c0ee1fae4..c307eb88bdc 100644
--- a/src/components/card/__snapshots__/card.test.tsx.snap
+++ b/src/components/card/__snapshots__/card.test.tsx.snap
@@ -2,7 +2,7 @@
 
 exports[`EuiCard betaBadgeProps renders href 1`] = `
 <div
-  class="euiPanel euiPanel--plain euiPanel--paddingMedium euiCard euiCard--centerAligned euiCard--hasBetaBadge emotion-euiPanel-grow-m-m-plain-hasShadow-euiCard-center-vertical-hasBetaBadge"
+  class="euiPanel euiPanel--plain euiPanel--paddingMedium euiCard emotion-euiPanel-grow-m-m-plain-hasShadow-euiCard-center-vertical-hasBetaBadge"
 >
   <div
     class="euiCard__content emotion-euiCard__content-vertical"
@@ -44,7 +44,7 @@ exports[`EuiCard betaBadgeProps renders href 1`] = `
 
 exports[`EuiCard horizontal selectable 1`] = `
 <div
-  class="euiPanel euiPanel--plain euiPanel--paddingMedium euiCard euiCard--centerAligned euiCard--horizontal euiCard--isClickable euiCard--isSelectable euiCard--isSelectable--text emotion-euiPanel-grow-m-m-plain-hasShadow-isClickable-euiCard-left-horizontal"
+  class="euiPanel euiPanel--plain euiPanel--paddingMedium euiCard emotion-euiPanel-grow-m-m-plain-hasShadow-isClickable-euiCard-left-horizontal"
 >
   <div
     class="euiCard__content emotion-euiCard__content-horizontal"
@@ -90,7 +90,7 @@ exports[`EuiCard horizontal selectable 1`] = `
 exports[`EuiCard is rendered 1`] = `
 <div
   aria-label="aria-label"
-  class="euiPanel euiPanel--plain euiPanel--paddingMedium euiCard euiCard--centerAligned testClass1 testClass2 emotion-euiPanel-grow-m-m-plain-hasShadow-euiCard-center-vertical"
+  class="euiPanel euiPanel--plain euiPanel--paddingMedium euiCard testClass1 testClass2 emotion-euiPanel-grow-m-m-plain-hasShadow-euiCard-center-vertical"
   data-test-subj="test subject string"
 >
   <div
@@ -120,7 +120,7 @@ exports[`EuiCard is rendered 1`] = `
 
 exports[`EuiCard props a null icon 1`] = `
 <div
-  class="euiPanel euiPanel--plain euiPanel--paddingMedium euiCard euiCard--centerAligned emotion-euiPanel-grow-m-m-plain-hasShadow-euiCard-center-vertical"
+  class="euiPanel euiPanel--plain euiPanel--paddingMedium euiCard emotion-euiPanel-grow-m-m-plain-hasShadow-euiCard-center-vertical"
 >
   <div
     class="euiCard__content emotion-euiCard__content-vertical"
@@ -149,7 +149,7 @@ exports[`EuiCard props a null icon 1`] = `
 
 exports[`EuiCard props accepts div props like style 1`] = `
 <div
-  class="euiPanel euiPanel--plain euiPanel--paddingMedium euiCard euiCard--centerAligned emotion-euiPanel-grow-m-m-plain-hasShadow-euiCard-center-vertical"
+  class="euiPanel euiPanel--plain euiPanel--paddingMedium euiCard emotion-euiPanel-grow-m-m-plain-hasShadow-euiCard-center-vertical"
   style="min-width:0"
 >
   <div
@@ -179,7 +179,7 @@ exports[`EuiCard props accepts div props like style 1`] = `
 
 exports[`EuiCard props an avatar icon 1`] = `
 <div
-  class="euiPanel euiPanel--plain euiPanel--paddingMedium euiCard euiCard--centerAligned euiCard--hasIcon emotion-euiPanel-grow-m-m-plain-hasShadow-euiCard-center-vertical"
+  class="euiPanel euiPanel--plain euiPanel--paddingMedium euiCard emotion-euiPanel-grow-m-m-plain-hasShadow-euiCard-center-vertical"
 >
   <div
     class="euiCard__top emotion-euiCard__top-vertical"
@@ -224,7 +224,7 @@ exports[`EuiCard props an avatar icon 1`] = `
 
 exports[`EuiCard props children 1`] = `
 <div
-  class="euiPanel euiPanel--plain euiPanel--paddingMedium euiCard euiCard--centerAligned emotion-euiPanel-grow-m-m-plain-hasShadow-euiCard-center-vertical"
+  class="euiPanel euiPanel--plain euiPanel--paddingMedium euiCard emotion-euiPanel-grow-m-m-plain-hasShadow-euiCard-center-vertical"
 >
   <div
     class="euiCard__content emotion-euiCard__content-vertical"
@@ -250,7 +250,7 @@ exports[`EuiCard props children 1`] = `
 
 exports[`EuiCard props children with description 1`] = `
 <div
-  class="euiPanel euiPanel--plain euiPanel--paddingMedium euiCard euiCard--centerAligned emotion-euiPanel-grow-m-m-plain-hasShadow-euiCard-center-vertical"
+  class="euiPanel euiPanel--plain euiPanel--paddingMedium euiCard emotion-euiPanel-grow-m-m-plain-hasShadow-euiCard-center-vertical"
 >
   <div
     class="euiCard__content emotion-euiCard__content-vertical"
@@ -284,7 +284,7 @@ exports[`EuiCard props children with description 1`] = `
 
 exports[`EuiCard props display accent is rendered 1`] = `
 <div
-  class="euiPanel euiPanel--accent euiPanel--paddingMedium euiCard euiCard--centerAligned emotion-euiPanel-grow-m-m-accent-euiCard-center-vertical"
+  class="euiPanel euiPanel--accent euiPanel--paddingMedium euiCard emotion-euiPanel-grow-m-m-accent-euiCard-center-vertical"
 >
   <div
     class="euiCard__content emotion-euiCard__content-vertical"
@@ -313,7 +313,7 @@ exports[`EuiCard props display accent is rendered 1`] = `
 
 exports[`EuiCard props display danger is rendered 1`] = `
 <div
-  class="euiPanel euiPanel--danger euiPanel--paddingMedium euiCard euiCard--centerAligned emotion-euiPanel-grow-m-m-danger-euiCard-center-vertical"
+  class="euiPanel euiPanel--danger euiPanel--paddingMedium euiCard emotion-euiPanel-grow-m-m-danger-euiCard-center-vertical"
 >
   <div
     class="euiCard__content emotion-euiCard__content-vertical"
@@ -342,7 +342,7 @@ exports[`EuiCard props display danger is rendered 1`] = `
 
 exports[`EuiCard props display plain is rendered 1`] = `
 <div
-  class="euiPanel euiPanel--plain euiPanel--paddingMedium euiCard euiCard--centerAligned emotion-euiPanel-grow-m-m-plain-euiCard-center-vertical"
+  class="euiPanel euiPanel--plain euiPanel--paddingMedium euiCard emotion-euiPanel-grow-m-m-plain-euiCard-center-vertical"
 >
   <div
     class="euiCard__content emotion-euiCard__content-vertical"
@@ -371,7 +371,7 @@ exports[`EuiCard props display plain is rendered 1`] = `
 
 exports[`EuiCard props display primary is rendered 1`] = `
 <div
-  class="euiPanel euiPanel--primary euiPanel--paddingMedium euiCard euiCard--centerAligned emotion-euiPanel-grow-m-m-primary-euiCard-center-vertical"
+  class="euiPanel euiPanel--primary euiPanel--paddingMedium euiCard emotion-euiPanel-grow-m-m-primary-euiCard-center-vertical"
 >
   <div
     class="euiCard__content emotion-euiCard__content-vertical"
@@ -400,7 +400,7 @@ exports[`EuiCard props display primary is rendered 1`] = `
 
 exports[`EuiCard props display subdued is rendered 1`] = `
 <div
-  class="euiPanel euiPanel--subdued euiPanel--paddingMedium euiCard euiCard--centerAligned emotion-euiPanel-grow-m-m-subdued-euiCard-center-vertical"
+  class="euiPanel euiPanel--subdued euiPanel--paddingMedium euiCard emotion-euiPanel-grow-m-m-subdued-euiCard-center-vertical"
 >
   <div
     class="euiCard__content emotion-euiCard__content-vertical"
@@ -429,7 +429,7 @@ exports[`EuiCard props display subdued is rendered 1`] = `
 
 exports[`EuiCard props display success is rendered 1`] = `
 <div
-  class="euiPanel euiPanel--success euiPanel--paddingMedium euiCard euiCard--centerAligned emotion-euiPanel-grow-m-m-success-euiCard-center-vertical"
+  class="euiPanel euiPanel--success euiPanel--paddingMedium euiCard emotion-euiPanel-grow-m-m-success-euiCard-center-vertical"
 >
   <div
     class="euiCard__content emotion-euiCard__content-vertical"
@@ -458,7 +458,7 @@ exports[`EuiCard props display success is rendered 1`] = `
 
 exports[`EuiCard props display transparent is rendered 1`] = `
 <div
-  class="euiPanel euiPanel--transparent euiPanel--paddingMedium euiCard euiCard--centerAligned emotion-euiPanel-grow-m-m-transparent-euiCard-center-vertical"
+  class="euiPanel euiPanel--transparent euiPanel--paddingMedium euiCard emotion-euiPanel-grow-m-m-transparent-euiCard-center-vertical"
 >
   <div
     class="euiCard__content emotion-euiCard__content-vertical"
@@ -487,7 +487,7 @@ exports[`EuiCard props display transparent is rendered 1`] = `
 
 exports[`EuiCard props display warning is rendered 1`] = `
 <div
-  class="euiPanel euiPanel--warning euiPanel--paddingMedium euiCard euiCard--centerAligned emotion-euiPanel-grow-m-m-warning-euiCard-center-vertical"
+  class="euiPanel euiPanel--warning euiPanel--paddingMedium euiCard emotion-euiPanel-grow-m-m-warning-euiCard-center-vertical"
 >
   <div
     class="euiCard__content emotion-euiCard__content-vertical"
@@ -516,7 +516,7 @@ exports[`EuiCard props display warning is rendered 1`] = `
 
 exports[`EuiCard props footer 1`] = `
 <div
-  class="euiPanel euiPanel--plain euiPanel--paddingMedium euiCard euiCard--centerAligned emotion-euiPanel-grow-m-m-plain-hasShadow-euiCard-center-vertical"
+  class="euiPanel euiPanel--plain euiPanel--paddingMedium euiCard emotion-euiPanel-grow-m-m-plain-hasShadow-euiCard-center-vertical"
 >
   <div
     class="euiCard__content emotion-euiCard__content-vertical"
@@ -552,7 +552,7 @@ exports[`EuiCard props footer 1`] = `
 
 exports[`EuiCard props hasBorder 1`] = `
 <div
-  class="euiPanel euiPanel--plain euiPanel--paddingMedium euiCard euiCard--centerAligned emotion-euiPanel-grow-m-m-plain-hasBorder-euiCard-center-vertical"
+  class="euiPanel euiPanel--plain euiPanel--paddingMedium euiCard emotion-euiPanel-grow-m-m-plain-hasBorder-euiCard-center-vertical"
 >
   <div
     class="euiCard__content emotion-euiCard__content-vertical"
@@ -581,7 +581,7 @@ exports[`EuiCard props hasBorder 1`] = `
 
 exports[`EuiCard props horizontal 1`] = `
 <div
-  class="euiPanel euiPanel--plain euiPanel--paddingMedium euiCard euiCard--centerAligned euiCard--horizontal emotion-euiPanel-grow-m-m-plain-hasShadow-euiCard-left-horizontal"
+  class="euiPanel euiPanel--plain euiPanel--paddingMedium euiCard emotion-euiPanel-grow-m-m-plain-hasShadow-euiCard-left-horizontal"
 >
   <div
     class="euiCard__content emotion-euiCard__content-horizontal"
@@ -610,7 +610,7 @@ exports[`EuiCard props horizontal 1`] = `
 
 exports[`EuiCard props href supports href as a link 1`] = `
 <div
-  class="euiPanel euiPanel--plain euiPanel--paddingMedium euiCard euiCard--centerAligned euiCard--isClickable emotion-euiPanel-grow-m-m-plain-hasShadow-isClickable-euiCard-center-vertical"
+  class="euiPanel euiPanel--plain euiPanel--paddingMedium euiCard emotion-euiPanel-grow-m-m-plain-hasShadow-isClickable-euiCard-center-vertical"
 >
   <div
     class="euiCard__content emotion-euiCard__content-vertical"
@@ -642,7 +642,7 @@ exports[`EuiCard props href supports href as a link 1`] = `
 
 exports[`EuiCard props icon 1`] = `
 <div
-  class="euiPanel euiPanel--plain euiPanel--paddingMedium euiCard euiCard--centerAligned euiCard--hasIcon emotion-euiPanel-grow-m-m-plain-hasShadow-euiCard-center-vertical"
+  class="euiPanel euiPanel--plain euiPanel--paddingMedium euiCard emotion-euiPanel-grow-m-m-plain-hasShadow-euiCard-center-vertical"
 >
   <div
     class="euiCard__top emotion-euiCard__top-vertical"
@@ -679,7 +679,7 @@ exports[`EuiCard props icon 1`] = `
 
 exports[`EuiCard props image 1`] = `
 <div
-  class="euiPanel euiPanel--plain euiPanel--paddingMedium euiCard euiCard--centerAligned emotion-euiPanel-grow-m-m-plain-hasShadow-euiCard-center-vertical"
+  class="euiPanel euiPanel--plain euiPanel--paddingMedium euiCard emotion-euiPanel-grow-m-m-plain-hasShadow-euiCard-center-vertical"
 >
   <div
     class="euiCard__top emotion-euiCard__top-vertical"
@@ -722,7 +722,7 @@ exports[`EuiCard props image 1`] = `
 
 exports[`EuiCard props isDisabled 1`] = `
 <div
-  class="euiPanel euiPanel--subdued euiPanel--paddingMedium euiCard euiCard--centerAligned euiCard-isDisabled emotion-euiPanel-grow-m-m-subdued-euiCard-center-vertical-disabled"
+  class="euiPanel euiPanel--subdued euiPanel--paddingMedium euiCard emotion-euiPanel-grow-m-m-subdued-euiCard-center-vertical-disabled"
 >
   <div
     class="euiCard__content emotion-euiCard__content-vertical"
@@ -753,7 +753,7 @@ exports[`EuiCard props isDisabled 1`] = `
 
 exports[`EuiCard props paddingSize l is rendered 1`] = `
 <div
-  class="euiPanel euiPanel--plain euiPanel--paddingLarge euiCard euiCard--centerAligned emotion-euiPanel-grow-m-l-plain-hasShadow-euiCard-center-vertical"
+  class="euiPanel euiPanel--plain euiPanel--paddingLarge euiCard emotion-euiPanel-grow-m-l-plain-hasShadow-euiCard-center-vertical"
 >
   <div
     class="euiCard__content emotion-euiCard__content-vertical"
@@ -782,7 +782,7 @@ exports[`EuiCard props paddingSize l is rendered 1`] = `
 
 exports[`EuiCard props paddingSize m is rendered 1`] = `
 <div
-  class="euiPanel euiPanel--plain euiPanel--paddingMedium euiCard euiCard--centerAligned emotion-euiPanel-grow-m-m-plain-hasShadow-euiCard-center-vertical"
+  class="euiPanel euiPanel--plain euiPanel--paddingMedium euiCard emotion-euiPanel-grow-m-m-plain-hasShadow-euiCard-center-vertical"
 >
   <div
     class="euiCard__content emotion-euiCard__content-vertical"
@@ -811,7 +811,7 @@ exports[`EuiCard props paddingSize m is rendered 1`] = `
 
 exports[`EuiCard props paddingSize none is rendered 1`] = `
 <div
-  class="euiPanel euiPanel--plain euiCard euiCard--centerAligned emotion-euiPanel-grow-m-plain-hasShadow-euiCard-center-vertical"
+  class="euiPanel euiPanel--plain euiCard emotion-euiPanel-grow-m-plain-hasShadow-euiCard-center-vertical"
 >
   <div
     class="euiCard__content emotion-euiCard__content-vertical"
@@ -840,7 +840,7 @@ exports[`EuiCard props paddingSize none is rendered 1`] = `
 
 exports[`EuiCard props paddingSize s is rendered 1`] = `
 <div
-  class="euiPanel euiPanel--plain euiPanel--paddingSmall euiCard euiCard--centerAligned emotion-euiPanel-grow-m-s-plain-hasShadow-euiCard-center-vertical"
+  class="euiPanel euiPanel--plain euiPanel--paddingSmall euiCard emotion-euiPanel-grow-m-s-plain-hasShadow-euiCard-center-vertical"
 >
   <div
     class="euiCard__content emotion-euiCard__content-vertical"
@@ -869,7 +869,7 @@ exports[`EuiCard props paddingSize s is rendered 1`] = `
 
 exports[`EuiCard props paddingSize xl is rendered 1`] = `
 <div
-  class="euiPanel euiPanel--plain euiCard euiCard--centerAligned emotion-euiPanel-grow-m-xl-plain-hasShadow-euiCard-center-vertical"
+  class="euiPanel euiPanel--plain euiCard emotion-euiPanel-grow-m-xl-plain-hasShadow-euiCard-center-vertical"
 >
   <div
     class="euiCard__content emotion-euiCard__content-vertical"
@@ -898,7 +898,7 @@ exports[`EuiCard props paddingSize xl is rendered 1`] = `
 
 exports[`EuiCard props paddingSize xs is rendered 1`] = `
 <div
-  class="euiPanel euiPanel--plain euiCard euiCard--centerAligned emotion-euiPanel-grow-m-xs-plain-hasShadow-euiCard-center-vertical"
+  class="euiPanel euiPanel--plain euiCard emotion-euiPanel-grow-m-xs-plain-hasShadow-euiCard-center-vertical"
 >
   <div
     class="euiCard__content emotion-euiCard__content-vertical"
@@ -927,7 +927,7 @@ exports[`EuiCard props paddingSize xs is rendered 1`] = `
 
 exports[`EuiCard props selectable 1`] = `
 <div
-  class="euiPanel euiPanel--plain euiPanel--paddingMedium euiCard euiCard--centerAligned euiCard--isClickable euiCard--isSelectable euiCard--isSelectable--text emotion-euiPanel-grow-m-m-plain-hasShadow-isClickable-euiCard-center-vertical"
+  class="euiPanel euiPanel--plain euiPanel--paddingMedium euiCard emotion-euiPanel-grow-m-m-plain-hasShadow-isClickable-euiCard-center-vertical"
 >
   <div
     class="euiCard__content emotion-euiCard__content-vertical"
@@ -970,9 +970,67 @@ exports[`EuiCard props selectable 1`] = `
 </div>
 `;
 
-exports[`EuiCard props textAlign 1`] = `
+exports[`EuiCard props textAlign center 1`] = `
 <div
-  class="euiPanel euiPanel--plain euiPanel--paddingMedium euiCard euiCard--rightAligned emotion-euiPanel-grow-m-m-plain-hasShadow-euiCard-right-vertical"
+  class="euiPanel euiPanel--plain euiPanel--paddingMedium euiCard emotion-euiPanel-grow-m-m-plain-hasShadow-euiCard-center-vertical"
+>
+  <div
+    class="euiCard__content emotion-euiCard__content-vertical"
+  >
+    <p
+      class="euiTitle euiCard__title emotion-euiTitle-s"
+      id="generated-idTitle"
+    >
+      <span
+        class="emotion-euiCard__text-center"
+      >
+        Card title
+      </span>
+    </p>
+    <div
+      class="euiText emotion-euiText-s-euiCard__description"
+      id="generated-idDescription"
+    >
+      <p>
+        Card description
+      </p>
+    </div>
+  </div>
+</div>
+`;
+
+exports[`EuiCard props textAlign left 1`] = `
+<div
+  class="euiPanel euiPanel--plain euiPanel--paddingMedium euiCard emotion-euiPanel-grow-m-m-plain-hasShadow-euiCard-left-vertical"
+>
+  <div
+    class="euiCard__content emotion-euiCard__content-vertical"
+  >
+    <p
+      class="euiTitle euiCard__title emotion-euiTitle-s"
+      id="generated-idTitle"
+    >
+      <span
+        class="emotion-euiCard__text-left"
+      >
+        Card title
+      </span>
+    </p>
+    <div
+      class="euiText emotion-euiText-s-euiCard__description"
+      id="generated-idDescription"
+    >
+      <p>
+        Card description
+      </p>
+    </div>
+  </div>
+</div>
+`;
+
+exports[`EuiCard props textAlign right 1`] = `
+<div
+  class="euiPanel euiPanel--plain euiPanel--paddingMedium euiCard emotion-euiPanel-grow-m-m-plain-hasShadow-euiCard-right-vertical"
 >
   <div
     class="euiCard__content emotion-euiCard__content-vertical"
@@ -1001,7 +1059,7 @@ exports[`EuiCard props textAlign 1`] = `
 
 exports[`EuiCard props titleElement 1`] = `
 <div
-  class="euiPanel euiPanel--plain euiPanel--paddingMedium euiCard euiCard--centerAligned emotion-euiPanel-grow-m-m-plain-hasShadow-euiCard-center-vertical"
+  class="euiPanel euiPanel--plain euiPanel--paddingMedium euiCard emotion-euiPanel-grow-m-m-plain-hasShadow-euiCard-center-vertical"
 >
   <div
     class="euiCard__content emotion-euiCard__content-vertical"
@@ -1030,7 +1088,7 @@ exports[`EuiCard props titleElement 1`] = `
 
 exports[`EuiCard props titleElement with nodes 1`] = `
 <div
-  class="euiPanel euiPanel--plain euiPanel--paddingMedium euiCard euiCard--centerAligned emotion-euiPanel-grow-m-m-plain-hasShadow-euiCard-center-vertical"
+  class="euiPanel euiPanel--plain euiPanel--paddingMedium euiCard emotion-euiPanel-grow-m-m-plain-hasShadow-euiCard-center-vertical"
 >
   <div
     class="euiCard__content emotion-euiCard__content-vertical"
@@ -1059,7 +1117,7 @@ exports[`EuiCard props titleElement with nodes 1`] = `
 
 exports[`EuiCard props titleSize 1`] = `
 <div
-  class="euiPanel euiPanel--plain euiPanel--paddingMedium euiCard euiCard--centerAligned emotion-euiPanel-grow-m-m-plain-hasShadow-euiCard-center-vertical"
+  class="euiPanel euiPanel--plain euiPanel--paddingMedium euiCard emotion-euiPanel-grow-m-m-plain-hasShadow-euiCard-center-vertical"
 >
   <div
     class="euiCard__content emotion-euiCard__content-vertical"
diff --git a/src/components/card/card.test.tsx b/src/components/card/card.test.tsx
index d75192f0fa1..17a46ab3d13 100644
--- a/src/components/card/card.test.tsx
+++ b/src/components/card/card.test.tsx
@@ -11,7 +11,7 @@ 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, EuiAvatar, EuiI18n } from '../../components';
 import { COLORS, SIZES } from '../panel/panel';
@@ -220,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', () => {
diff --git a/src/components/card/card.tsx b/src/components/card/card.tsx
index 527772ac560..d48bdad6a5e 100644
--- a/src/components/card/card.tsx
+++ b/src/components/card/card.tsx
@@ -15,18 +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';
@@ -37,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
@@ -225,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` : '';

From c4463ab0eea1713007d594d98d6d3422587099fd Mon Sep 17 00:00:00 2001
From: Constance Chen <constance.chen.3@gmail.com>
Date: Thu, 3 Nov 2022 12:54:43 -0700
Subject: [PATCH 6/7] changelog

---
 upcoming_changelogs/6341.md | 4 ++++
 1 file changed, 4 insertions(+)
 create mode 100644 upcoming_changelogs/6341.md

diff --git a/upcoming_changelogs/6341.md b/upcoming_changelogs/6341.md
new file mode 100644
index 00000000000..f61234bae62
--- /dev/null
+++ b/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

From 487506c26e0517a039352b8a475b7ff9b9828017 Mon Sep 17 00:00:00 2001
From: Constance Chen <constance.chen.3@gmail.com>
Date: Thu, 3 Nov 2022 15:17:33 -0700
Subject: [PATCH 7/7] Revert "[REVERT ME] Repro/testing"

This reverts commit 0ab504bb75c53ee10556f724f524e990b01e5265.
---
 src-docs/src/views/card/card_image.tsx | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/src-docs/src/views/card/card_image.tsx b/src-docs/src/views/card/card_image.tsx
index 350152eb1c1..4f420364351 100644
--- a/src-docs/src/views/card/card_image.tsx
+++ b/src-docs/src/views/card/card_image.tsx
@@ -5,7 +5,7 @@ import {
   EuiCard,
   EuiFlexGroup,
   EuiFlexItem,
-  EuiAvatar,
+  EuiIcon,
 } 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={<EuiAvatar color="plain" size="xl" name="test" />}
+        icon={<EuiIcon size="xxl" type="logoBeats" />}
         title={'Beats in the City'}
         description="This card has an href and should be a link."
       />