Composants

Modal & Dialog

Un adaptateur de compatibilité react-aria : le trio ModalOverlay > Modal > Dialog remappé sur le Dialog natif d'Astryx. ModalOverlay porte l'ouverture ; Modal et Dialog sont des wrappers transparents — l'API est préservée pour un simple échange d'import.

import { ModalOverlay, Modal, Dialog, Button } from "@forme-ch/ui/controls";

const [open, setOpen] = useState(false);

<Button label="Ouvrir la modale" variant="primary" onClick={() => setOpen(true)} />
<ModalOverlay isOpen={open} onOpenChange={setOpen}>
  <Modal>
    <Dialog aria-label="Confirmation de suppression">
      <h3>Supprimer la facture ?</h3>
      …
      <Button label="Supprimer" variant="destructive" onClick={() => setOpen(false)} />
    </Dialog>
  </Modal>
</ModalOverlay>

Modale d'information

Une modale simple avec une action de confirmation ; isDismissable autorise la fermeture au clic sur le fond.

<ModalOverlay isOpen={open} onOpenChange={setOpen} isDismissable>
  <Modal>
    <Dialog aria-label="Synchronisation terminée">
      <h3>Synchronisation terminée</h3>
      …
      <Button label="Compris" variant="primary" onClick={() => setOpen(false)} />
    </Dialog>
  </Modal>
</ModalOverlay>

Props — ModalOverlay

Porte l'ouverture (mappé sur le Dialog Astryx).

Prop	Type	Défaut	Description
`isOpen`	`boolean`	`true`	État d'ouverture — porte l'ouverture de la modale.
`onOpenChange`	`(isOpen: boolean) => void`	—	Notifie l'ouverture / fermeture (à brancher sur ton `useState`).
`isDismissable`	`boolean`	—	Typée sur `ModalOverlay` (compat react-aria).
`children`	`ReactNode`	—	Généralement un `<Modal>`.
`className`	`string`	—	Classe CSS additionnelle.
`style`	`CSSProperties`	—	Styles inline.

Props — Dialog

Wrapper transparent qui propage les attributs aria / role. Modal n'accepte que children, className et style.

Prop	Type	Défaut	Description
`children`	`ReactNode`	—	Contenu de la boîte de dialogue.
`aria-label`	`string`	—	Nom accessible du dialogue (ou utilise `aria-labelledby`).
`aria-labelledby`	`string`	—	id de l'élément qui titre le dialogue.
`aria-busy`	`boolean`	—	État occupé propagé sur le wrapper.
`role`	`string`	—	Rôle ARIA (propagé tel quel).
`className`	`string`	—	Classe CSS additionnelle.
`style`	`CSSProperties`	—	Styles inline.

Accessibilité

Nomme toujours le dialogue : aria-label sur Dialog, ou aria-labelledby pointant vers son titre. La modale piège le focus, se ferme sur Échap et rend le focus au déclencheur. Réserve la modale aux décisions courtes et bloquantes ; pour un contenu riche à consulter en contexte, préfère SlideOver.

Do & Don't

✓ À faire

Brancher onOpenChange sur ton état. Nommer le Dialog. L'utiliser pour confirmer une action risquée.

✕ À éviter

Empiler des modales. Y loger un long formulaire (préférer SlideOver). Oublier le nom accessible du dialogue.