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)
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`] = `
+
+`;
+
exports[`EuiCard is rendered 1`] = `
{
expect(component).toMatchSnapshot();
});
});
+
+ test('horizontal selectable', () => {
+ const component = render(
+ {},
+ }}
+ />
+ );
+
+ expect(component).toMatchSnapshot();
+ });
});
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 &
* 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 = ({
};
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`.'
);
}
}