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`] = ` +
+
+ + Card title + +
+

+ Card description +

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