From 75363298ccc1275ee22f6ff2aa0984feebde1a1b Mon Sep 17 00:00:00 2001
From: Greg Thompson <thompson.glowe@gmail.com>
Date: Wed, 7 Apr 2021 16:07:56 -0500
Subject: [PATCH 1/3] allow selectable with layout=horizontal

---
 src/components/card/card.tsx | 14 +++++++-------
 1 file changed, 7 insertions(+), 7 deletions(-)

diff --git a/src/components/card/card.tsx b/src/components/card/card.tsx
index 92000381268..98964edb53a 100644
--- a/src/components/card/card.tsx
+++ b/src/components/card/card.tsx
@@ -78,15 +78,11 @@ type EuiCardPropsLayout = ExclusiveUnion<
      * Accepts a url in string form or ReactElement for a custom image component
      */
     image?: string | ReactElement;
-    /**
-     * Adds a button to the bottom of the card to allow for in-place selection
-     */
-    selectable?: EuiCardSelectProps;
   },
   {
     /**
      * Change to "horizontal" if you need the icon to be left of the content.
-     * Horizontal layouts cannot be used in conjunction with `image`, `footer`, `textAlign`, or `selectable`.
+     * Horizontal layouts cannot be used in conjunction with `image`, `footer`, or `textAlign`.
      */
     layout: 'horizontal';
   }
@@ -161,6 +157,10 @@ export type EuiCardProps = Omit<CommonProps, 'aria-label'> &
      * Padding applied around the content of the card
      */
     paddingSize?: EuiPanelProps['paddingSize'];
+    /**
+     * Adds a button to the bottom of the card to allow for in-place selection
+     */
+    selectable?: EuiCardSelectProps;
   } & (
     | {
         // description becomes optional when children is present
@@ -216,9 +216,9 @@ export const EuiCard: FunctionComponent<EuiCardProps> = ({
   };
 
   if (layout === 'horizontal') {
-    if (image || footer || textAlign !== 'center' || selectable) {
+    if (image || footer || textAlign !== 'center') {
       throw new Error(
-        "EuiCard: layout = horizontal' cannot be used in conjunction with 'image', 'footer', 'textAlign', or 'selectable'."
+        'EuiCard: `layout="horizontal"` cannot be used in conjunction with `image`, `footer`, or `textAlign`.'
       );
     }
   }

From 522d39c3a54109b98cd5220f40f7f220edae6b9b Mon Sep 17 00:00:00 2001
From: Greg Thompson <thompson.glowe@gmail.com>
Date: Wed, 7 Apr 2021 16:08:05 -0500
Subject: [PATCH 2/3] test

---
 .../card/__snapshots__/card.test.tsx.snap     | 42 +++++++++++++++++++
 src/components/card/card.test.tsx             | 15 +++++++
 2 files changed, 57 insertions(+)

diff --git a/src/components/card/__snapshots__/card.test.tsx.snap b/src/components/card/__snapshots__/card.test.tsx.snap
index 31ddd3c1d64..f2597f4b472 100644
--- a/src/components/card/__snapshots__/card.test.tsx.snap
+++ b/src/components/card/__snapshots__/card.test.tsx.snap
@@ -1,5 +1,47 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
+exports[`EuiCard horizontal selectable 1`] = `
+<div
+  class="euiPanel euiPanel--paddingMedium euiPanel--borderRadiusMedium euiPanel--plain euiPanel--hasShadow euiPanel--isClickable euiCard euiCard--centerAligned euiCard--horizontal euiCard--isClickable euiCard--isSelectable euiCard--isSelectable--text"
+>
+  <div
+    class="euiCard__content"
+  >
+    <span
+      class="euiTitle euiTitle--small euiCard__title"
+      id="generated-idTitle"
+    >
+      Card title
+    </span>
+    <div
+      class="euiText euiText--small euiCard__description"
+      id="generated-idDescription"
+    >
+      <p>
+        Card description
+      </p>
+    </div>
+  </div>
+  <button
+    aria-checked="false"
+    aria-describedby="generated-idTitle generated-idDescription"
+    class="euiButtonEmpty euiButtonEmpty--text euiButtonEmpty--xSmall euiCardSelect euiCardSelect--text"
+    role="switch"
+    type="button"
+  >
+    <span
+      class="euiButtonContent euiButtonEmpty__content"
+    >
+      <span
+        class="euiButtonEmpty__text"
+      >
+        Select
+      </span>
+    </span>
+  </button>
+</div>
+`;
+
 exports[`EuiCard is rendered 1`] = `
 <div
   aria-label="aria-label"
diff --git a/src/components/card/card.test.tsx b/src/components/card/card.test.tsx
index 8dd1052cdc7..a36bb2c35f2 100644
--- a/src/components/card/card.test.tsx
+++ b/src/components/card/card.test.tsx
@@ -272,4 +272,19 @@ describe('EuiCard', () => {
       expect(component).toMatchSnapshot();
     });
   });
+
+  test('horizontal selectable', () => {
+    const component = render(
+      <EuiCard
+        title="Card title"
+        description="Card description"
+        layout="horizontal"
+        selectable={{
+          onClick: () => {},
+        }}
+      />
+    );
+
+    expect(component).toMatchSnapshot();
+  });
 });

From 4c2aad25de3c4b668017617bd94b9aa167adf843 Mon Sep 17 00:00:00 2001
From: Greg Thompson <thompson.glowe@gmail.com>
Date: Wed, 7 Apr 2021 16:19:36 -0500
Subject: [PATCH 3/3] CL

---
 CHANGELOG.md | 4 +++-
 1 file changed, 3 insertions(+), 1 deletion(-)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index 845614a5284..720c78d9a2c 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -1,6 +1,8 @@
 ## [`master`](https://github.com/elastic/eui/tree/master)
 
-No public interface changes since `32.0.3`.
+**Bug fixes**
+
+- Removed the restriction on `selectable` `EuiCard` with `layout="horizontal"` ([#4692](https://github.com/elastic/eui/pull/4692))
 
 ## [`32.0.3`](https://github.com/elastic/eui/tree/v32.0.3)