Conception UI

Guide complet pour créer, styliser et utiliser des composants dans le frontend.

Références

Pour styliser des composants, utilisez packages/frontend/@n8n/design-system/src/styleguide/*.mdx
Pour les animations, utilisez rules/web-animation-guidelines.md
Lors de l'examen des modifications UI, utilisez rules/web-interface-guidelines.md

TOUJOURS utiliser les variables CSS pour les styles de packages/frontend/@n8n/design-system/src/css/_tokens.scss ou packages/frontend/@n8n/design-system/src/css/_primitives.scss. Utilisez des valeurs en dur uniquement quand aucun token n'est adapté.
TOUJOURS préférer les composants existants de packages/frontend/@n8n/design-system/src/components. Préférez les composants qui ne sont pas marqués @deprecated.
Si vous devez ajouter un comportement alpha au survol/actif sur des composants solides, préférez color-mix() avec des pourcentages explicites.
Lors du travail avec des animations ou des transitions, TOUJOURS préférer les mixins de packages/frontend/@n8n/design-system/src/css/mixins/motion.scss

Utilisez les composants design-system existants plutôt que de créer des implémentations personnalisées :

« Ajouter une boîte de dialogue modale pour confirmer la suppression du workflow » → Utilisez N8nDialog
« Ajouter une liste déroulante pour sélectionner le statut du workflow » → Utilisez N8nDropdown ou N8nSelect
« Ajouter un bouton avec l'icône + pour ajouter un nouvel élément » → Enveloppez N8nButton avec la prop iconOnly avec N8nTooltip et enveloppez dans N8nTooltip. Utilisez N8nIcon et un aria-label approprié.
« Ajouter un bouton d'action destructive » → utilisez N8nButton avec variant="destructive"
« Rendre la couleur de fond blanc/noir » → Utilisez var(--background--surface) pour blanc en mode clair et « noir » en mode sombre
« Animer le titre élégamment » → Utilisez le mixin fade-in-up de motion.scss avec var(--duration--base)