Seanapps Pro

# Dialog · SeanappsPro Library

Fichier Figma : 📖 SeanappsPro Library, page ✅ DialogElements (accès interne)
Refonte du 30/07/2026, révisée le même jour à partir de cinq écrans réellement en production.

## Les deux composants

| Composant | Rôle | Mobile | Desktop |
|---|---|---|---|
| `Dialog/Basic` | **Une action** : la faire confirmer, valider ou abandonner | 288, boutons S | 448, boutons M |
| `Dialog/FullScreen` | **Une tâche** : formulaire, sélection multiple, étapes | plein écran 360 × 744, boutons S | 640 centré, boutons M |

### Règle de choix

**« Combien d'informations distinctes l'utilisateur doit-il fournir ? »**
Zéro ou une → `Dialog/Basic`. Plusieurs → `Dialog/FullScreen`.

Le critère n'est **pas le nombre de champs**, ni la hauteur de la dialog, mais le nombre d'informations distinctes :

- « Modifier l'adresse email » = deux champs (la nouvelle adresse + sa confirmation) mais **une seule information** → Basic
- « Transférer la propriété » = une recherche qui prend beaucoup de place, mais **une seule information** (le nouveau propriétaire) → Basic
- « Nouvelle commande enregistrée » = **zéro information**, juste des réglages → Basic, avec `Show footer` off
- « Ajouter un bateau » = point de vente + modèle + numéro de série, **trois informations sans rapport** → FullScreen
- « Réglage d'une alerte » = plusieurs réglages composites non enregistrés au fil de l'eau → FullScreen

Autrement dit : une action → Basic, une tâche → FullScreen.

Le Basic accueille champs et réglages dans son slot `Content`, mais **il ne scrolle pas** : si ça déborde, passer sur FullScreen.
Le FullScreen n'est plein écran que sur mobile. Sur desktop c'est une modale large scrollable (640, volontairement plus large que le Basic à 448).
Boutons en taille S sur mobile et M à partir de la tablette, même règle sur les deux composants.

## Convention de structure

```
Header
├ Title row
│  ├ Icon (slot, Basic uniquement)
│  ├ Title
│  └ Close button
└ Description
Content         slot · Basic : bandeau, 1-2 champs ou réglages, ne scrolle pas
Body            FullScreen → Content (slot) + Scrollbar > Scrollbar handle
Footer          (masquable via Show footer)
├ Action 2
└ Action 1
```

## Propriétés

Nommage : anglais, `Show <x>` pour les booléens de visibilité, `Action 1` / `Action 2` pour les instance swaps.

**Dialog/Basic** : Title, Description, Icon, Show close button, Show content, Content, Action 1, Action 2, Show footer, Device
**Dialog/FullScreen** : Title, Description, Content, Show scrollbar, Show close button, Action 1, Action 2, Show footer, Device

Les libellés de boutons ne sont pas des props du Dialog : ils vivent sur l'instance `🔒CtaButtons-Master` imbriquée (`Label#99:0`).

### Valeurs par défaut

| Composant | Title | Description | Show close button |
|---|---|---|---|
| `Dialog/Basic` | Titre de la dialog | Ce qui va se passer, et pourquoi ça compte. Une à trois lignes. | true |
| `Dialog/FullScreen` | Nom de la tâche | Une phrase de cadrage sous le titre. Optionnelle. | true |

Les défauts texte sont rédigés comme des consignes : le designer lit la règle en remplissant le champ.

### Action 1 et Action 2

`Action 1` = ce qui se passe quand on clique. Le plus souvent le résultat (« Supprimer », « Enregistrer », « Confirmer »), mais **« Continuer » quand la dialog n'est qu'une étape d'un parcours**. Toujours la plus à droite.
**Action irréversible → variant `Destructive` de CtaButtons.** Le rouge signale la conséquence, le libellé seul ne suffit pas.

`Action 2` **n'est pas un bouton d'annulation.** C'est le bouton secondaire, sous quatre formes :

| Forme | Exemple réel |
|---|---|
| Abandon | `Annuler` : Réglage d'une alerte |
| Action alternative, ne ferme pas la dialog | `Nouveau client` : Transférer la propriété |
| Retour à l'étape précédente | `Saisir un autre numéro` : Ajouter un bateau |
| Report | `Plus tard` |

Et parfois il n'y a **aucune action** : réglages appliqués instantanément → `Show footer` off.

### Règle de la croix

Croix active **par défaut sur toutes les dialogs** : `Show close button` vaut `true` sur les deux composants depuis le 30/07/2026.
Retirée uniquement quand l'utilisateur doit impérativement trancher, et dans ce cas on retire aussi la fermeture au scrim.
Sur une dialog sans Footer, `Show close button` ne se désactive jamais : c'est la seule sortie.
Croix et Action 2 ne font pas doublon : la croix sort sans rien faire, Action 2 porte une intention nommée.

⚠️ **À surveiller** : ce changement de défaut fait apparaître une croix sur toutes les instances `Dialog/Basic` des fichiers produit qui n'avaient pas surchargé la prop. C'est voulu, mais ça mérite une relecture des écrans où une réponse est obligatoire, qui doivent repasser `Show close button` à `false`.

## Décision : deux composants, pas un seul avec un variant `Type`

Décision du 30/07/2026 : **on garde deux composants séparés.**

- Figma n'a pas de propriétés conditionnelles par variant : toutes les props d'un set s'affichent sur tous les variants. Fusionner réintroduirait des propriétés inertes.
- La distinction est sémantique, pas dimensionnelle : scroll, fermeture au scrim, empilement, forme du titre diffèrent.
- Fusionner deux sets publiés est cassant : toutes les instances des fichiers produit seraient à relier à la main.

## Ce qui a été corrigé lors de la refonte

- Sets renommés : `Dialog/BasicDialog` → `Dialog/Basic`, `Dialog` → `Dialog/FullScreen`
- Axes de variants morts supprimés (`Slot Active ? = Yes`, `New Slot active = on`)
- Propriétés renommées sans casser les overrides (IDs `#xxx` préservés par `editComponentProperty`)
- `Show scrollbar` était une propriété **morte** sur FullScreen : recâblée sur la visibilité du Scrollbar
- `Description`, `Show close button`, `Action 1`, `Action 2` ajoutées sur FullScreen
- **`Show footer` ajoutée sur les deux** pour supporter les dialogs sans actions
- **`Notification` / `Show notification` renommés `Content` / `Show content`** sur Basic : slot générique, même nom sur les deux composants
- **Valeurs par défaut passées en français**, et `Show close button` passé à `true` sur Basic
- Calques par défaut renommés, noms à espace en fin supprimés
- Descriptions réécrites en français + `documentationLinks` vers la page

## Documentation

5 frames, section `📖 Dialogs · Documentation` : **Usage**, **Anatomie et propriétés**, **Comportement**, **Wording**, **Exemples**.
Anatomie et Exemples utilisent des instances vivantes des composants.
L'ancienne doc Material en anglais est dans la section `🗄️ Archive`, à supprimer une fois la nouvelle validée.

## Règles de wording retenues

- Le titre dit ce qui va se passer, la description pourquoi ça compte, les boutons ce qu'on fait. Pas de redite.
- **Titre : un nom de tâche par défaut**. La forme interrogative est réservée aux confirmations destructives. Pas de point final, 2 lignes max, pas d'« Attention ! ».
- Description : 1 à 3 lignes, nomme l'objet concerné plutôt que « cet élément ».
- Actions : 1 à 3 mots, pas de point final. Interdits : OK, Oui/Non, Terminé, Soumettre.
- « Fermer » toléré quand le bouton n'a aucun effet, ou sur une dialog sans Footer.
- Textes traduits : jamais de phrase construite par concaténation.

## Bugs produit repérés (à remonter)

- Écran « Add a boat » : titre non traduit, « innexistant » (deux N), « Concession de reception » (accent manquant), pas de croix.
- Écran « Réglage d'une alerte » : pas de croix alors que le choix n'est pas obligatoire.

## Point à trancher

L'instance de l'exemple 5 est affichée à **448 de large** alors que le variant Desktop de `Dialog/FullScreen` est spécifié à **640**. Soit la spec passe à 448, soit l'exemple doit être remis à 640.