codegouvfr / codegouvfr/react-dsfr

Permettre d'afficher la modale en grand

Open
#513 0 comments 0 reactions 0 assignees View on GitHub
Dominant language
TypeScript
Stars
496
Forks
99
Avg merge
15h 36m
Merged PRs (30d)
4

Description

# Permettre d'afficher la modale en grand

En jetant un œil au code de la modale, je constate que [la largeur de celle-ci](https://github.com/codegouvfr/react-dsfr/blob/main/src/Modal/Modal.tsx#L83) est limitée.

Et je me pose la question de ce choix : rien n'empêche d'appliquer un `fr-col-lg-12` sur la modale dans le DSFR, me semble-t-il ?

J'ai par ailleurs des cas d'usage, sur [Mon Indemnisation Justice](https://mon-indemnisation.justice.gouv.fr/), où on veut permettre à l'usager de prévisualiser un document avant de le téléverser et y ajouter du contexte (montant de la facture, infos bancaires liées au RIB / à l'IBAN). Une modale en mode "full", sur la largeur du contenu de la page, aurait du sens dans ce contexte.

Aussi je proposerais de rajouter, PR à l'appui, une taille :

```tsx

{
switch (size) {
case "full":
return fr.cx("fr-col-12", "fr-col-md-12", "fr-col-lg-12");
case "large":
return fr.cx("fr-col-12", "fr-col-md-10", "fr-col-lg-8");
case "small":
return fr.cx("fr-col-12", "fr-col-md-6", "fr-col-lg-4");
case "medium":
return fr.cx("fr-col-12", "fr-col-md-8", "fr-col-lg-6");
}
})()}
>
```

Qu'en pensez-vous ?

Contributor guide

Open the contributing guide

Assessment

This issue has not been assessed yet.

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.