Aller plus loin dans la personnalisation de la Modal

[sneko]

Bonjour,

Curieux d'avoir vos avis mais avec la Modal actuelle je vois quelques limitations :

1. Je tente de faire une "confirmation modal" avec "oui / non", je souhaiterais cacher le "fermer" en haut à droite.
   • Un workaround possible est d'utiliser du CSS en réutilisant l'ID de modale.
2. J'ai une action d'un boutno de modale qui est asynchrone, et j'aimerais utiliser l'un de mes bouton custom qui prend en compte un "loader". Idéalement le footer de la modal devrait pouvoir être personnalisable ?
   • Un workaround serait de copier/coller le composant Modal entièrement, mais ça semble "trop"
3. J'aimerais que la callback onConceal() puisse prendre un boolean de retour pour confirmer ou non la clôture. Dans le cas de mon opération asynchrone je n'ai pas envie qu'un clic sur le backdrop ou le bouton "fermer" quitte la modale (je veux que l'action soit possible seulement quand un de mes booleans isPending est false)
   • Possible workaround : cacher avec le CSS le "fermer", et utiliser concealingBackdrop={false} pour désactiver le backdrop, et rajouter un bouton "Annuler" dans buttons par exemple afin de gérer cette logique moi-même

Merci,

[ddecrulle]

Bonjour,

Petite réponse rapide :
1. Le bouton fermer en haut à droite est obligatoire dans la modale du DSFR. Tu peux bien sûr le masquer avec du CSS, mais ce sera artificiel et aura probablement un impact sur l’accessibilité.
2. Je comprends bien ton souci. Peut-être qu’il serait utile de pouvoir personnaliser plus finement la zone d’action, mais une approche simple pourrait être d’afficher le loader directement dans le bouton (via ses children).
3. Je ne suis pas sûr qu’il existe une solution simple pour répondre exactement à ton besoin.

Je comprends que tu puisses être frustré — je l’ai été moi-même avec cette modale. Il faut toutefois garder en tête que la modale du DSFR est volontairement très simple : elle nécessite un bouton d’ouverture et ne s’adapte pas bien aux cas d’usage où il faut contrôler finement l’ouverture et la fermeture via du code et des états externes.

Si tu as besoin d’une modale qui gère l’ensemble des cas que tu mentionnes, je n’utiliserais personnellement pas le composant exporté par react-dsfr.

Bon courage !