Fix usage of div in CallOut

[benjlevesque]

Similar to #394, but for CallOut

NB: this issue seems to exist for many components

[ddecrulle]

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]

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]

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]

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.

[kevbarns]

@benjlevesque @ddecrulle @garronej Cette PR est à l'arrêt depuis mai 2025 et elle est aujourd'hui en conflit avec main.

Le point de blocage est une question de design, pas de code : @ddecrulle a écrit que remplacer le <div> ne corrige pas vraiment le problème, et que la bonne cible serait un CallOut qui rende soit un <p class="fr-callout__text"> pour du texte, soit les enfants sans wrapper — avec la réserve « It's tricky to improve the current component without introducing a breaking change ». @vmaubert a ensuite répondu qu'un breaking change était acceptable s'il corrige le problème pour tout le monde, et personne n'a tranché depuis.

Deux issues voisines apportent un précédent utile : #410 sur Card a été fermée avec la position de @enguerranws et @garronej selon laquelle ReactNode reste le bon typage tant qu'on n'y met que des éléments inline, via un fragment. Si cette position s'applique aussi à CallOut, alors cette PR n'a plus lieu d'être et il faut la fermer en le documentant.

@garronej @ddecrulle pouvez-vous trancher entre les trois options : (a) fermer en renvoyant vers la doctrine de #410, (b) accepter le changement minimal de cette PR, (c) demander la refonte avec breaking change ? @benjlevesque ne peut pas avancer, ni rebaser, tant que ce choix n'est pas fait.