Added layout prop to EuiCard
#885
Conversation
There was a problem hiding this comment.
Small stuff. We might want to think about a custom PropType that checks if a certain prop exists (layout), and throws an error if an incompatible one is used (textAlign). Don't think that's necessary for this PR, but might want to make an issue for it. Would be nice to have.
| EuiFlexItem, | ||
| } from '../../../../src/components'; | ||
|
|
||
| const icons = ['Beats', 'Cloud', 'Xpack']; |
There was a problem hiding this comment.
Can we make one of these null to show that example? I think it should probably collapse if not used?
There was a problem hiding this comment.
It does collapse, the problem is you're still passing <EuiIcon type="null">.
There was a problem hiding this comment.
But I'll change one of the examples
| title={`Elastic ${item}`} | ||
| description="Example of a card's description. Stick to one or two sentences." | ||
| onClick={() => window.alert('Card clicked')} | ||
| textAlign="right" |
There was a problem hiding this comment.
Since most people will copy / paste the content, I think we probably should remove the "dead" props from the example. The callout you have is good enough.
There was a problem hiding this comment.
Oh yeah, that was actually for testing, to make sure it didn't affect it, just forgot to remove it.
|
cc @nreese. This will be an even better solution for your use case. |
|
I thought about the custom prop types too. I'll see if I can create one based on another component's custom prop type. |
src/components/card/card.js
Outdated
| @@ -12,7 +12,15 @@ const textAlignToClassNameMap = { | |||
| right: 'euiCard--rightAligned', | |||
| }; | |||
|
|
|||
| export const ALIGNMENTS = Object.keys(textAlignToClassNameMap); | |||
| export const TEXT_ALIGNMENTS = Object.keys(textAlignToClassNameMap); | |||
There was a problem hiding this comment.
Changing this export name makes this a breaking change, update changelog to reflect
There was a problem hiding this comment.
I'll just change it back, don't really need the breaking change
|
Ok, example without icon is created, custom prop type is created, and tests updated |
|
@cchaos Awesome. 🚢 |
Primarily for Kibana homepage layout
The options are "vertical" (default) or "horizontal". The caveat is that images, footers and textAlign properties are not compatible with this layout and will be ignored.
Example of a horizontal layout with badge: