DSBJ - Design Système du Bénin

Taille par défaut (medium)

Sans modificateur de largeur, la boîte suit la largeur standard du design system.

<button type="button" class="bj-btn" data-bj-modal-open="id">Ouvrir</button>
<div class="bj-modal" id="id" role="dialog" aria-modal="true" aria-labelledby="id-t">
  <div class="bj-modal__overlay" data-bj-modal-close tabindex="-1"></div>
  <div class="bj-modal__dialog">
    <header class="bj-modal__header">
      <h2 class="bj-modal__title" id="id-t">Titre</h2>
      <button type="button" class="bj-modal__close" data-bj-modal-close aria-label="Fermer">
        <i class="ri-close-line" aria-hidden="true"></i>
      </button>
    </header>
    <div class="bj-modal__body">…</div>
    <footer class="bj-modal__footer">…</footer>
  </div>
</div>

<div class="bj-modal" id="id" role="dialog" aria-modal="true" aria-labelledby="id-t">…</div>

Petite (sm)

Idéal pour les confirmations courtes ou les messages légers.

<div class="bj-modal bj-modal--sm" id="ex-sm" role="dialog" aria-modal="true" aria-labelledby="ex-sm-t">…</div>

Grande (lg)

Pour formulaires ou tableaux plus larges dans le corps du dialogue.

<div class="bj-modal bj-modal--lg" id="ex-lg" role="dialog" aria-modal="true" aria-labelledby="ex-lg-t">…</div>

Plein écran (full)

Occupe presque toute la hauteur utile (visionneuse, assistant, contenu dense).

<div class="bj-modal bj-modal--full" id="ex-full" role="dialog" aria-modal="true" aria-labelledby="ex-full-t">…</div>

Attributs et état ouvert

data-bj-modal-open / data-bj-modal-close ; bj-modal-open sur le body. Le script DSBJ ouvre la modale en posant data-bj-expanded sur le conteneur bj-modal; le style affiche alors la boîte ( bj-modal--openedéquivaut à un état ouvert sans JS).

Classes CSS

Classe / attribut	Description
`bj-modal`	Conteneur plein écran ; masqué par défaut, visible avec data-bj-expanded ou bj-modal--opened.
`data-bj-expanded`	État ouvert : posé par le script sur le conteneur bj-modal. Sans JS, bj-modal--opened joue le même rôle pour l’affichage.
`bj-modal__overlay`	Fond cliquable pour fermer (souvent avec data-bj-modal-close).
`bj-modal__dialog`	Boîte de dialogue (largeur max selon la taille).
`bj-modal__header`	En-tête optionnel (titre + fermeture).
`bj-modal__title`	Titre de la modale ; cible de aria-labelledby.
`bj-modal__close`	Bouton de fermeture (icône seule ; aria-label requis).
`bj-modal__body`	Zone de contenu principale.
`bj-modal__footer`	Pied optionnel (actions).
`bj-modal--sm / bj-modal--lg / bj-modal--full`	Largeurs : petite, grande, plein écran.
`data-bj-modal-open`	Sur le bouton d’ouverture : valeur = id de la modale.
`data-bj-modal-close`	Sur un contrôle qui ferme : overlay, bouton, liens du pied.

React (BjModal)

Le paquet @flrxnt/dsbj/react exporte BjModal : états open et onClose, title, size, footer, closeLabel pour le libellé accessible du bouton fermer (icône seule), avec les mêmes comportements que le script HTML (piège de focus, restauration du focus, role="dialog", aria-modal="true", aria-labelledby="id-title").

import { useState } from 'react'
import { BjModal } from '@flrxnt/dsbj/react'

export function Example() {
  const [open, setOpen] = useState(false)

  return (
    <>
      <button type="button" onClick={() => setOpen(true)}>Ouvrir</button>
      <BjModal
        open={open}
        onClose={() => setOpen(false)}
        title="Confirmation"
        closeLabel="Fermer"
      >
        <p>Contenu de la modale.</p>
      </BjModal>
    </>
  )
}

Fenêtre modale