Permettre d'afficher la modale en grand

Open Beginner friendly
#513 0 comments 0 reactions 0 assignees View on GitHub

Nobody has claimed this yet.

Assessment

Difficulty
2/5
Estimated time
1-3 hours
Newbie friendliness
82/100
Issue type
Feature
Clarity
Clearly specified
Activity status
Active
Tech stack
react, typescript
Domain
design, frontend

Research direction

Start in src/Modal/Modal.tsx around the modal width calculation referenced by the issue, and inspect how the size prop is defined and used. Add support for a full-width modal alongside the existing sizes, then verify that the resulting responsive layout matches the requested DSFR columns and that existing sizes remain unchanged.

Written by the indexing model from the issue text.

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 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, 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 :

<div
    className={(() => {
        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 ?

Dominant language
TypeScript
Stars
496
Forks
99
Avg merge
15h 36m
Merged PRs (30d)
4

Contributor guide

Open the contributing guide

First steps

  1. Read the whole issue, then the project's contributing guide.
  2. Comment on the issue to say you are picking it up — it saves two people doing the same work.
  3. Fork the repository and make your change on a branch.
  4. Open a pull request that references the issue number.

More from codegouvfr/react-dsfr

All issues in codegouvfr/react-dsfr

Similar issues

More TypeScript issues

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.