Composants

Un composant est un bloc qu'on a déjà décidé. On le reprend, on ne le redessine pas pour une seule page.

Sur Tutorat Pro, le geste le plus fréquent est une réservation. Le bouton primaire dit cette action. Le reste de la page utilise des boutons secondaires, des champs, et des messages d'erreur lisibles.

Avant d'ajouter un bloc, on cherche ici. S'il existe, on l'utilise. S'il n'existe pas, on demande s'il manque vraiment, ou si un bouton et une phrase suffisent.

Bureau blanc avec un seul dossier bleu — Un écran utile montre peu de choses. Le composant en bleu est celui qui fait avancer.

Comment choisir

Une action dans la page, c'est un bouton. Une autre page, c'est un lien. Mélanger les deux, et la famille ne sait plus si elle envoie un formulaire ou si elle change d'écran.

Un champ a toujours un libellé visible. Une erreur se place à côté du champ, pas dans une infobulle. Un chargement dit ce qui se passe, il ne laisse pas un bouton mort.

Les groupes ci-dessous suivent ce découpage. Formulaires, images, messages, navigation, puis les briques plus petites.

Formulaires et saisie

BoutonUn bouton lance une action. Le libellé dit ce qui arrive ensuite.CalendrierUn mois visible, pour choisir une date.Case à cocherUne case pour choisir une ou plusieurs options.CommentaireUn fil court pour une remarque de tuteur ou de parent.Sélecteur de date et d'heureDate et heure dans le même champ.Menu déroulantUne liste d'actions qui s'ouvre sous un bouton.Anneau de focusAttentionL'anneau qui montre l'élément atteint au clavier.FormulaireUn groupe de champs, avec des erreurs visibles.Bouton radioUn seul choix parmi plusieurs.CurseurUn curseur pour une valeur approximative.ListeUne liste fermée, un ou plusieurs choix.Zone de texteUn champ long, sur plusieurs lignes.Champ de texteUne ligne de texte, avec un libellé visible.InterrupteurUn interrupteur entre deux états.

Images et icônes

AvatarUn visage, une initiale, ou une marque.Groupe d'avatarsPlusieurs personnes, empilées ou en grille.IcôneBêtaUn symbole Lucide, taille fixe, couleur de token.ImageBêtaUne image sur fond blanc, qui suit le thème.ObjetUne tuile pour un type de contenu Tutorat Pro.LogoLe mot-symbole, à ne pas redessiner dans les écrans.TuileUn carré arrondi qui porte une icône ou une initiale.

Étiquettes

BadgeUn compteur court, pour un nombre.Date affichéeBêtaUne date affichée, sans être un bouton.PastilleUn statut compact: en cours, terminé, à revoir.ÉtiquetteUne étiquette pour classer un élément.Groupe d'étiquettesL'alignement d'une série d'étiquettes.

Mise en page

PageAttentionLa structure d'une page: grille, colonnes, rythme.En-tête de pageLe haut d'une page: titre, et parfois des actions.PanneauBêtaUn panneau à côté du contenu principal.

Chargement

Barre de progressionUne barre pour une tâche dont on connaît l'avancement.SqueletteAccès anticipéUne forme grise pendant que le contenu arrive.Indicateur de chargementUn indicateur quand on ne peut pas encore afficher la suite.

Messages

BannièreUn message fort, en haut de l'écran.État videCe qu'on montre quand il n'y a encore rien, et quoi faire.NotificationUne confirmation brève, qui ne bloque pas la page.Message intégréUne note près du champ ou du bloc concerné.Fenêtre modaleUne couche au-dessus de la page, pour une décision.ProjecteurUn focus sur un élément, pour expliquer une étape.Message de sectionUne alerte limitée à une zone de la page.

Fil d'ArianeLe chemin parcouru, en liens courts.LienUn lien dans le texte, vers une autre page.MenuUne liste d'options ou d'actions.Système de navigationLa barre du haut et la colonne de gauche, ensemble.PaginationDécouper une longue liste en pages.OngletsDes onglets pour des vues du même sujet.

Superpositions

VoileUn voile derrière un dialogue ou un menu.TiroirAttentionUn panneau qui entre par le côté.Dialogue ancréAttentionUne petite bulle ancrée à un bouton.FenêtreUn contenu court, en superposition.InfobulleUne précision au survol ou au focus, jamais la seule info utile.

Primitives

Vue d'ensembleLes briques de mise en page, avant les composants finis.BoîteUn conteneur avec les jetons de surface.En ligneDes enfants alignés sur une ligne.PileDes enfants empilés, avec un espace régulier.FlexBêtaUn flexbox borné par les jetons.GrilleBêtaUne grille CSS bornée par les jetons.DébordUn débord contrôlé hors de la marge.XCSSAttentionDes styles locaux, à partir des jetons seulement.AdaptatifDes aides pour changer la mise en page selon la largeur.TexteBêtaLe corps de texte, branché sur Inter.Texte de mesureBêtaUn chiffre mis en avant, avec son unité.Zone cliquableLa base accessible d'un bouton sur mesure.AncreLa base accessible d'un lien sur mesure.FocalisableAjoute l'anneau de focus à un élément.

Indicateurs d'état

Indicateur de progressionOù on en est dans une suite d'étapes.Suivi des étapesLes étapes nommées, et celle qui est en cours.

Texte et données

CodeUn fragment de code dans une phrase.Tableau dynamiqueUn tableau avec tri et pages.TitreBêtaUn titre, en Poppins, à la bonne taille.Édition en placeLire un texte, puis le modifier sur place.TableauAttentionDes lignes et des colonnes, pour comparer.Tableau arborescentUn tableau dont les lignes s'ouvrent.Masqué visuellementUn texte lu par le lecteur d'écran, invisible à l'écran.

Bibliothèques

CSSBêtaLes jetons, consommés depuis les classes Tailwind.Réinitialisation CSSLa base commune avant les composants.Jetons de designLa liste des jetons utilisables dans le code.MouvementDes durées courtes, partagées.PositionneurPositionner un menu près de son bouton.PortailRendre un calque à la racine de la page.Glisser-déposerGlisser un élément, avec un retour visible.

Outillage

Fournisseur d'applicationBêtaLe fournisseur qui pose le thème sur l'application.Plugin ESLintDes règles pour rester sur les jetons.Module StorybookVoir un composant dans Clair, Sombre et Accent.Plugin StylelintBloquer les couleurs hors jetons dans le CSS.Norme de styleLe rappel: Tailwind et jetons, pas de style hors système.

Retiré

Navigation d'applicationRetiréAncienne barre horizontale. Utiliser le système de navigation.Grille de mise en pageRetiréAncienne grille. Utiliser Grille dans Fondations.Parcours guidéRetiréAncien parcours guidé. Utiliser Projecteur.Structure de pageRetiréAncien assemblage de page. Utiliser Page.Navigation latéraleRetiréAncienne colonne. Utiliser le système de navigation.