Clay: CardWithInfo can't render a ClaySticker with an image

[julien]

• [x] I have searched the issues of this repository and believe that this is not a duplicate.

Is there an example you can provide via codesandbox.com?

Yes, please see https://codesandbox.io/s/sharp-rgb-k30gg to understand the "problem"

What are the steps to reproduce?

Render a <ClayCardWithInfo /> and use stickerProps

What is the expected result?

I'd like to be able to pass an src (the name of this prop doesn't really matter as long as it makes sense) attribute to stickerProps to be able to render a card with a sticker that displays an image instead of text.

While this is probably doable in pure JSX (although I haven't found a way to do it), in my case, I'm rendering cards via a jsp tag, that accepts an stickerImageSrc attribute and I need some help to figure this out.

Thanks!

[matuzalemsteles]

@julien maybe you can do something like that.

<ClayCardWithInfo
    stickerProps={{
        content: <ClaySticker.Image alt="" src="" />
    }}
/>

[julien]

@matuzalemsteles yes that looks totally usable :+1:
Before closing, I'll just ask @carloslancha if he wants to add anything else? (i.e. @carloslancha do you think this should be done automatically by adding a new property on stickerProps)

[matuzalemsteles]

@julien I think this was a little inconsistent with the other components that do the same, in this case, the <ClayCardWithUser />, so maybe create a stickerDisplayType and stickerContent and deprecated stickerProps, since in that case, we can have a text and an image.

cc @bryceosterhaus

[bryceosterhaus]

@wincent yeah the stickerProps prop is a little odd in that we don't use it like a normal *Props. Instead of removing it and adding new props, I think we could update the source to be.

<ClaySticker
    displayType="primary"
    position="bottom-left"
    {...stickerProps}
>
    {stickerProps && stickerProps.children ? (
        stickerProps.children
    ) : (
        <ClayIcon spritemap={spritemap} symbol="document-text" />
    )}
</ClaySticker>

We could also add a check for stickerProps.content and map it to stickerProps.children to keep from a breaking change.

[julien]

@bryceosterhaus that solution looks good to me, especially if we avoid the breaking change.

I just also wanted to say that this is not urgent since I'm actually able to do what I need by changing stickerProps.content depending on the props that are passed.

[bryceosterhaus]

@julien right on. Maybe I will just mark this as a 4.x issue to come back to for when we want to make breaking changes

[bryceosterhaus]

I'm going to leave this issue open, but I made a note in our BREAKING.md doc for cards https://github.com/liferay/clay/pull/3775

[julien]

Thanks @bryceosterhaus. I think we could remove the "bug" label just we don't get confused, but I'll let you decide.