Skip to content

Conversation

benjlevesque
Copy link
Contributor

Similar to #394, but for CallOut

NB: this issue seems to exist for many components

@ddecrulle
Copy link
Collaborator

ddecrulle commented Mar 28, 2025

Hi,
I don’t believe this properly fixes the issue.

In my opinion, we should improve the component’s design: it should either accept a text prop and render a <p> with the appropriate className, or directly render its children without wrapping them in an extra <div>.

@benjlevesque
Copy link
Contributor Author

benjlevesque commented Mar 28, 2025

Hello @ddecrulle

do you have something like this in mind ?

{typeof children === "string" ? (
    <p className={cx(fr.cx("fr-callout__text"), classes.text)}> {children} </p>
) : (
    <div className={cx(fr.cx("fr-callout__text"), classes.text)}> {children} </div>
)}

children having the type ReactNode

@ddecrulle
Copy link
Collaborator

ddecrulle commented Mar 28, 2025

This implementation is close, but not exactly what we need.
The main issue is that it doesn’t allow us to render the HTML structure provided in the DSFR documentation, like this example:

<div id="callout-6045" class="fr-callout">
    <h3 class="fr-callout__title">Titre mise en avant</h3>
    <p class="fr-callout__text">Lorem [...] elit ut.</p>
    <button type="button" class="fr-btn">Libellé bouton</button>
</div>

It's tricky to improve the current component without introducing a breaking change.

@vmaubert
Copy link

Oh I found exactly the same issue with the Card component => #410

@ddecrulle I didn't understand your last comment.
It's not a problem to introduce a breaking change if we fix an issue for many developers.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

3 participants