Fenêtre modale
نافذة منبثقةDialog
Stable
src/dsm/components/dialog.tsxLa fenêtre modale interrompt le parcours pour demander une confirmation, afficher un formulaire court ou un récapitulatif. `AlertDialog` couvre le cas particulier d'une confirmation destructive.
Import
import { Dialog } from "@/dsm/components/dialog";Exemples
Par défaut
Titre, description et pied d'actions.
LTR
Tailles
sm, md, lg et full, selon la densité du contenu.
LTR
Confirmation destructive
AlertDialog en ton danger avant une annulation.
LTR
Formulaire dans une modale
Demande de duplicata d'acte de naissance.
LTR
Usage
Quand l'utiliser
- Utilisez `Dialog` pour un formulaire court ou un récapitulatif qui ne justifie pas de changer de page.
- Utilisez `AlertDialog` avant toute action irréversible (suppression, annulation d'un rendez-vous, abandon d'une demande).
- Passez `size="full"` pour un contenu dense (récapitulatif de dossier, historique) qui a besoin de plus d'espace.
Quand ne pas l'utiliser
- N'utilisez pas une fenêtre modale pour un contenu qui doit rester consultable pendant que l'utilisateur agit ailleurs sur la page : préférez un `Drawer` ou un `Popover`.
- N'empilez pas plusieurs fenêtres modales pour un même parcours : simplifiez en une seule étape ou revenez à une page dédiée.
Accessibilité & langues
Accessibilité
- Le focus est piégé dans la fenêtre tant qu'elle est ouverte et revient au déclencheur à la fermeture.
- `DialogContent` place toujours un bouton de fermeture avec `aria-label` traduit, y compris quand `title` n'est pas fourni.
- `AlertDialog` exige un `title` : la question posée doit toujours être explicite pour les lecteurs d'écran.
RTL & multilingue
- Le bouton de fermeture est positionné avec `end-3` : il reste dans l'angle de fin de ligne, à gauche en arabe.
- Le dialogue est centré à toutes les tailles d'écran, avec une marge de 1rem sur mobile ; aucun mirroring horizontal n'est nécessaire.
Propriétés
Dialog
| Propriété | Type | Défaut | Description |
|---|---|---|---|
| trigger | ReactElement | — | Élément déclencheur, rendu via `Dialog.Trigger` (render prop). |
| open | boolean | — | État contrôlé d'ouverture. |
| onOpenChange | (open: boolean) => void | — | Appelé à chaque changement d'état. |
| defaultOpen | boolean | false | État initial en mode non contrôlé. |
DialogContent
| Propriété | Type | Défaut | Description |
|---|---|---|---|
| size | "sm" | "md" | "lg" | "full" | md | Largeur maximale sur les écrans larges. |
| title | ReactNode | — | Titre affiché en haut, porté par `Dialog.Title`. |
| description | ReactNode | — | Texte d'appui sous le titre, porté par `Dialog.Description`. |
| footer | ReactNode | — | Emplacement pour les actions, généralement un `DialogFooter`. |
| children | ReactNode | — | Corps de la fenêtre, défilant indépendamment du pied. |
DialogFooter
| Propriété | Type | Défaut | Description |
|---|---|---|---|
| className | string | — | Classes additionnelles ; empile les actions sur mobile. |
AlertDialog
| Propriété | Type | Défaut | Description |
|---|---|---|---|
| trigger | ReactElement | — | Élément déclencheur, rendu via `AlertDialog.Trigger`. |
| title* | ReactNode | — | Question posée à l'utilisateur. |
| description | ReactNode | — | Conséquence de l'action, notamment son caractère irréversible. |
| tone | "default" | "danger" | default | `danger` applique le variant `danger` du bouton de confirmation. |
| confirmLabel | ReactNode | t.confirm | Libellé du bouton de confirmation. |
| cancelLabel | ReactNode | t.cancel | Libellé du bouton d'annulation. |
| onConfirm | () => void | — | Appelé lorsque l'utilisateur confirme. |