[EuiCard] Allow selectable with layout="horizontal" (#4692)

* allow selectable with layout=horizontal

* test

* CL

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)
 

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"

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();
+  });
 });

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`.'
       );
     }
   }