# Système de design Workday Canvas ## Aperçu de l’interface du système de design Workday Canvas Filtrez les titres de cours, ajoutez chaque cours une seule fois, supprimez des sélections et comparez le temps total actualisé. ## Référence de conception du système de design Workday Canvas Source actuelle de Canvas Kit et fichier sys.json des jetons Canvas. Les noms JSON bruts ci-dessous sont des chemins de la source, et non des noms de variables CSS générés de toutes pièces. Les valeurs qui correspondent à des jetons de base sont présentées comme des alias ; la référence de migration datée est explicitement historique. ### Sémantique actuelle de l’espacement | Nom / règle | Valeur / configuration | Utilisation | | --- | --- | --- | | sys.padding.xs | {base.size.100} | Rôle du remplissage horizontal des champs de saisie. | | sys.padding.md | {base.size.200} | Remplissage par défaut des composants. | | sys.padding.xl | {base.size.300} | Remplissage des cartes. | | sys.gap.sm | {base.size.100} | Espacement réduit entre éléments voisins. | | sys.gap.md | {base.size.200} | Espacement en ligne par défaut. | | sys.gap.xl | {base.size.400} | Marge intérieure des cartes. | | sys.gap.xxl | {base.size.800} | Espacement entre les sections. | ### Typographie et formes actuelles | Nom / règle | Valeur / configuration | Utilisation | | --- | --- | --- | | sys.type.body.sm | font-size body.sm + line-height body.sm + normal weight | Rôle composite du corps de texte. | | sys.font-size.body.sm | {base.size.200} | Alias de la taille de base du corps de texte. | | sys.line-height.body.sm | {base.size.300} | Alias de l’interlignage du corps de texte. | | sys.font-weight.normal | {base.font-weight.400} | Nom actuel pour la graisse normale, et non regular. | | sys.shape.sm | {base.size.50} | Arrondi léger. | | sys.shape.md | {base.size.100} | Arrondi des champs de saisie. | | sys.shape.full | {base.size.75} × 100 | Arrondi complet. | ### Composition de FormField | Nom / règle | Valeur / configuration | Utilisation | | --- | --- | --- | | FormField.Label | Connected label element | Relation générée avec le champ de saisie. | | FormField.Input as={TextInput} | Polymorphic input slot | Ce n’est pas l’ancienne propriété de libellé API. | | FormField.Hint | Linked helper content | Décrivez le résultat attendu du champ de saisie. | | orientation | vertical / horizontalStart / horizontalEnd | Utilisez les valeurs d’alignement actuelles. | | FormField.Field | Input and hint alignment wrapper | Utile dans une disposition horizontale. | ### Implémentation de TextInput | Nom / règle | Valeur / configuration | Utilisation | | --- | --- | --- | | grow | 100% width when true | Agrandissement adaptatif du champ de saisie. | | width | number or string | Remplacement facultatif. | | minimum width fallback | px2rem(280) | Vérifiez les dispositions des conteneurs étroits. | | error | error / caution styling | La validation est fournie par l’application. | | transition | 0.2s box-shadow, 0.2s border-color | Transition réelle dans la source. | | font size role | system.legacy.fontSize.subtext.lg | Ne remplacez pas les éléments internes du composant par un type de titre sans rapport. | ### Implémentation de PrimaryButton | Nom / règle | Valeur / configuration | Utilisation | | --- | --- | --- | | Background | brand.action.base, with legacy accent fallback | Image de marque de l’espace client. | | Hover | brand.action.dark or colorSpace.hover | L’état découle de la couleur de l’action. | | Pressed | brand.action.darkest or colorSpace.pressed | Style distinct à l’appui. | | variant="inverse" | Inverse surface and foreground roles | Pour un contexte contrasté approprié. | | Border radius | system.legacy.shape.full | La source conserve actuellement la compatibilité avec l’ancienne version. | ### Référence de migration, et non noms de jetons actuels | Nom / règle | Valeur / configuration | Utilisation | | --- | --- | --- | | Former space.s → system.space.x4 | 1rem in 2023 migration table | La source actuelle distingue le remplissage de l’espacement. | | Former space.m → system.space.x6 | 1.5rem in 2023 migration table | Ne partez pas du principe que les anciens noms restent privilégiés. | | Former borderRadius.m → system.shape.x1 | 0.25rem in 2023 migration table | La source actuelle utilise des tailles de forme sémantiques. | ## Guide complet du système de design Workday Canvas Un guide pratique pour choisir, appliquer et évaluer ce système dans une interface réelle. Des conseils complets, un point de départ pour la mise en œuvre et des liens vers les sources. ## Système de design Workday Canvas : consultez la source actuelle avant de reprendre un exemple de migration ### L’espacement distingue désormais les usages > Canvas a évolué des constantes d’espacement par taille de t-shirt de canvas-kit-react/tokens aux jetons system.space numérotés, puis aux catégories de la source, telles que padding et gap. Le fichier sys.json actuel exprime leurs valeurs sous-jacentes sous forme de références aux jetons de base. Cette référence conserve les chemins réels au lieu d’inventer une variable CSS en concaténant des mots. Le tableau de migration reste utile pour convertir une ancienne application : il explique pourquoi l’ancienne valeur space.s correspondait à un rem. Il s’agit d’un repère historique, et non d’une garantie que chaque ancienne exportation constitue l’interface à privilégier aujourd’hui. L’aperçu utilise des intervalles d’application explicitement choisis de 16 et 24px ; le tableau des sources reste la référence pour connaître les noms des jetons de la bibliothèque. Consultez la spécification associée ## Système de design Workday Canvas : la couleur dépend de l’espace client et de l’état du composant ### Un bouton principal ne se résume pas à une nuance de bleu fixe PrimaryButton consulte d’abord brand.action.base et, à défaut, utilise son accent primary hérité. Les styles de survol et d’appui consultent également les rôles d’action de brand avant de dériver les états à l’aide des utilitaires colorSpace. C’est pourquoi modifier une seule couleur d’arrière-plan codée en dur ne permet pas de reproduire le contrat thématique du composant. L’aperçu d’apprentissage original utilise une palette d’application bleue et sobre, et se présente comme une interprétation HTML. Il ne reproduit ni l’espace client d’un client en particulier ni le nouveau thème Sana Canvas. L’exemple natif complet laisse les couches de jetons installées fournir les couleurs des composants. Consultez la spécification associée ## Système de design Workday Canvas : les rôles composites préservent l’interlignage et la graisse ### Un alias de taille ne suffit pas à définir le style L’objet de type body.sm actuel combine la famille de polices, le poids normal, la taille du texte courant et l’interlignage du texte courant. Les styles de titre utilisent le poids gras. Ne récupérer que la taille en pixels d’une ancienne capture d’écran ferait perdre ces relations. La source utilise le nom normal, et non la clé regular qui apparaît dans d’anciens textes de migration. Les polices ne sont pas incluses dans le package de composants Canvas Kit. Le chargement des polices reste un choix d’intégration distinct ; l’exemple hors ligne utilise une police de secours système et ne prétend pas inclure Roboto ni une police Sana. Consultez la spécification associée ## Workday Canvas Le composant FormField du système de design est un composant composé ### Laissez le champ composer son libellé, son champ de saisie et son indication La source expose FormField.Label, FormField.Input et FormField.Hint. Passer TextInput via la propriété as de Input permet au modèle de générer les associations d’accessibilité. Cette approche diffère des anciens exemples, qui définissaient une propriété label sur le champ externe et plaçaient directement à l’intérieur un champ de saisie sans enveloppe. Pour les formulaires horizontaux, horizontalStart et horizontalEnd sont les valeurs d’orientation actuelles. FormField.Field regroupe le champ de saisie et l’indication en respectant cet alignement. Notre filtre reste vertical, car son explication doit apparaître juste sous son libellé et son contrôle. - Placez un véritable libellé visible dans FormField.Label. - Passez TextInput via l’emplacement Input du composant composé. - Utilisez Hint pour préciser le périmètre du filtre. - Lors de l’ajout de contraintes, conservez la logique de validation dans l’application. Consultez la spécification associée ## Système de design Workday Canvas Un champ de saisie qui s’agrandit a tout de même besoin d’un conteneur flexible ### Tenez compte de la largeur minimale TextInput a une largeur minimale de repli de 280px, exprimée avec px2rem dans sa source. grow demande une largeur maximale ; cela ne permet pas pour autant à un conteneur rigide à deux colonnes de s’adapter à une fenêtre étroite. Dans le catalogue hors ligne, la barre latérale des plans passe sous les cartes de cours sur mobile, et chaque colonne de la mise en page peut rétrécir. La valeur de recherche est un état React ordinaire. L’application effectue une recherche de sous-chaîne sans distinction de casse dans les titres des trois cours et affiche explicitement un résultat vide. Le filtre n’efface pas les cours sélectionnés, car la visibilité et l’appartenance au plan sont des états différents. Consultez la spécification associée ## Système de design Workday Canvas La sélection persiste indépendamment des résultats visibles ### Utilisez des ID de cours stables et calculez les totaux Chaque cours d’origine possède un ID, un titre et une durée. La liste des cours sélectionnés stocke les ID, tandis que le total affiché est calculé à partir des données des cours. Filtrer le catalogue ne supprime pas un cours sélectionné. La suppression d’un cours rétablit immédiatement son action Ajouter et réduit le total. Il s’agit d’un scénario original de planification locale. Il n’appelle pas les API Workday, n’inscrit aucun employé et ne modifie aucun dossier de formation. Afficher clairement cette limite évite qu’un prototype laisse croire qu’une véritable transaction métier a eu lieu. 1. Filtrez uniquement la vue du catalogue. 2. Ajoutez chaque ID de cours une seule fois. 3. Calculez les cours sélectionnés et le total de minutes à partir de ces ID. 4. Supprimez une sélection sans réinitialiser la recherche. Consultez la spécification associée ## Système de design Workday Canvas Chargez les jetons avant d’attendre des composants thématisés ### Le provider et les couches CSS ont des responsabilités différentes L’exemple de démarrage actuel importe les styles des variables de base, de marque, de composants et de système au point d’entrée de l’application, puis enveloppe l’interface avec CanvasProvider. Un provider ne remplace pas à lui seul ces définitions CSS. Le code présenté suit cette composition et fournit une racine React complète. Sana Canvas est activable à la demande : ses variables sont chargées après les variables système, et l’attribut html data-theme documenté permet de la sélectionner. Les applications intégrées qui ne peuvent pas contrôler la racine du document disposent d’une option de thème dédiée dans le provider pour propager le thème aux fenêtres popup. N’ajoutez pas ce thème par inadvertance à un tenant existant lors de la mise à niveau des packages. Consultez la spécification associée ## Workday Canvas Exemples de composants du système de design ### Exemple interactif autonome complet Enregistrez le document complet sous le nom index.html, puis ouvrez-le dans un navigateur. Interprétation originale et hors ligne HTML des modèles d’interaction de Canvas et d’une hiérarchie d’entreprise sobre. La palette et la mise en page relèvent de choix propres à l’application ; elles ne correspondent pas au rendu d’un tenant Sana. ``` Canvas learning plan interpretation
Learning workspacePersonal development · Local plan

Make room to grow

Choose a few focused lessons for your learning plan.

Search filters the catalog; your selected courses stay in the plan.

Independent HTML interpretation of Canvas composition patterns. Original palette, course illustrations and content; no Workday account or enrollment service is connected.

``` Référence du code - L’ajout d’un cours modifie l’exemple de plan de formation. L’exemple natif montre séparément CanvasProvider et le composant composé FormField API ; aucune inscription n’est envoyée. ### Champ composé et éléments de formation sélectionnables FormField génère l’association avec le champ de saisie, TextInput filtre les données originales des cours et chaque PrimaryButton ajoute un élément une seule fois. La suppression recalcule le total sélectionné. ``` // In a React 18+ application with a bundler: // npm install @workday/canvas-kit-react @workday/canvas-tokens-web @workday/canvas-kit-styling @emotion/react @emotion/styled import React,{useState} from 'react'; import {createRoot} from 'react-dom/client'; import {CanvasProvider} from '@workday/canvas-kit-react/common'; import {FormField} from '@workday/canvas-kit-react/form-field'; import {TextInput} from '@workday/canvas-kit-react/text-input'; import {PrimaryButton} from '@workday/canvas-kit-react/button'; import {system} from '@workday/canvas-tokens-web'; import {cssVar} from '@workday/canvas-kit-styling'; import '@workday/canvas-tokens-web/css/base/_variables.css'; import '@workday/canvas-tokens-web/css/brand/_variables.css'; import '@workday/canvas-tokens-web/css/component/_variables.css'; import '@workday/canvas-tokens-web/css/system/_variables.css'; // Default theme example; do not silently add a Sana theme to an existing tenant. const courses=[{id:'feedback',name:'Giving useful feedback',minutes:25},{id:'planning',name:'Planning a focused week',minutes:20},{id:'meetings',name:'Running inclusive meetings',minutes:30}]; function LearningPlan(){ const [query,setQuery]=useState(''),[chosen,setChosen]=useState([]); const visible=courses.filter(c=>c.name.toLowerCase().includes(query.toLowerCase())); const selected=courses.filter(c=>chosen.includes(c.id)); return

Build a learning plan

Find a course setQuery(e.target.value)}/> Filter the three example course titles. {!visible.length&&

No matching courses.

}

Your local plan

{selected.length} courses · {selected.reduce((sum,c)=>sum+c.minutes,0)} minutes

No enrollment is submitted.

; } createRoot(document.getElementById('root')).render(); ``` Référence du code - Chaque cours indépendant possède son propre PrimaryButton ; le plan dans son ensemble ne propose pas d’action trompeuse d’inscription. - La suppression utilise un bouton natif explicitement géré par l’application. - L’état désactivé « Ajouté » empêche les doublons, tandis qu’un compteur mis à jour en direct confirme le changement. ## Système de design Workday Canvas Configuration de l’agent ### Point de départ de l’implémentation Composition React complète pour une application intégrée. Configuration actuelle de CanvasProvider et des jetons CSS ; données de cours originales et contrôles de suppression natifs. Aucune inscription à distance. Source vérifiée, mais non compilée avec le package dans cet espace de travail. ``` // In a React 18+ application with a bundler: // npm install @workday/canvas-kit-react @workday/canvas-tokens-web @workday/canvas-kit-styling @emotion/react @emotion/styled import React,{useState} from 'react'; import {createRoot} from 'react-dom/client'; import {CanvasProvider} from '@workday/canvas-kit-react/common'; import {FormField} from '@workday/canvas-kit-react/form-field'; import {TextInput} from '@workday/canvas-kit-react/text-input'; import {PrimaryButton} from '@workday/canvas-kit-react/button'; import {system} from '@workday/canvas-tokens-web'; import {cssVar} from '@workday/canvas-kit-styling'; import '@workday/canvas-tokens-web/css/base/_variables.css'; import '@workday/canvas-tokens-web/css/brand/_variables.css'; import '@workday/canvas-tokens-web/css/component/_variables.css'; import '@workday/canvas-tokens-web/css/system/_variables.css'; // Default theme example; do not silently add a Sana theme to an existing tenant. const courses=[{id:'feedback',name:'Giving useful feedback',minutes:25},{id:'planning',name:'Planning a focused week',minutes:20},{id:'meetings',name:'Running inclusive meetings',minutes:30}]; function LearningPlan(){ const [query,setQuery]=useState(''),[chosen,setChosen]=useState([]); const visible=courses.filter(c=>c.name.toLowerCase().includes(query.toLowerCase())); const selected=courses.filter(c=>chosen.includes(c.id)); return

Build a learning plan

Find a course setQuery(e.target.value)}/> Filter the three example course titles. {!visible.length&&

No matching courses.

}

Your local plan

{selected.length} courses · {selected.reduce((sum,c)=>sum+c.minutes,0)} minutes

No enrollment is submitted.

; } createRoot(document.getElementById('root')).render(); ``` ### Un prompt pour votre projet ``` Utilisez la composition actuelle de FormField dans Canvas ainsi que les couches CSS de jetons. Séparez le filtrage des cours de l’état de sélection, empêchez les doublons et calculez le total des minutes. Préservez le thème du tenant à l’aide de rôles sémantiques ; ne confondez pas les anciens noms de catégories d’espacement numérotés avec les catégories sources actuellement recommandées. ``` ## Workday Canvas Sources et périmètre du système de design Référence OpenDesign indépendante. Aucune inscription d’employé ni intégration Workday API. Les noms actuels des sources et les anciens noms de migration sont clairement distingués. - Configuration de Canvas Kit Imports actuels, provider et limite liée à Sana. - Source actuelle des jetons système Catégories d’espacement, typographie et alias de formes. - Source de FormField Composant composé API et orientation. - Source de TextInput Dimensions et styles d’état. - Source de PrimaryButton Rôles d’état adaptés à la marque. - Source des boutons Comportement hérité et direction des icônes. - Migration historique Anciens noms conservés uniquement comme référence de migration. ## Workday Canvas Ressources associées au système de design ### Zendesk Garden Guide Garden pour le support, avec de véritables alias de thème, des échelles typographiques et de rayons, un composeur de réponse complet, des brouillons locaux tenant compte de la visibilité et la récupération des champs. ### Adeo Mozaic Créez une interface pratique de contrôle des quantités avec l’unité magique de 16 px de Mozaic, des commandes assorties de 48 px, de véritables imports SCSS et des classes BEM. Le planificateur de rayonnage permet d’observer les limites, les erreurs typées et un récapitulatif local des matériaux. ### Adobe Spectrum Étudiez React Spectrum v3 à l’aide d’un tableau de ressources créatives sélectionnables et d’un inspecteur de préréglages d’exportation. Découvrez les thèmes Provider, l’échelle des champs de saisie, les propriétés de style prises en charge, les collections indexées et les différences entre v3 et la nouvelle implémentation Spectrum 2. - [Référence de mise en œuvre](https://raw.githubusercontent.com/Workday/canvas-kit/master/modules/react/form-field/lib/FormField.tsx) - [Source](https://raw.githubusercontent.com/Workday/canvas-tokens/main/packages/canvas-tokens/tokens/web/sys.json) - [Source](https://raw.githubusercontent.com/Workday/canvas-kit/master/modules/react/form-field/lib/FormField.tsx) - [Source](https://raw.githubusercontent.com/Workday/canvas-kit/master/modules/react/text-input/lib/TextInput.tsx) - [Source](https://raw.githubusercontent.com/Workday/canvas-kit/master/modules/react/button/lib/PrimaryButton.tsx) - [Source](https://github.com/Workday/canvas-tokens/discussions/77) - [Consultez la spécification associée](https://raw.githubusercontent.com/Workday/canvas-tokens/main/packages/canvas-tokens/tokens/web/sys.json) - [Consultez la spécification associée](https://raw.githubusercontent.com/Workday/canvas-kit/master/modules/react/button/lib/PrimaryButton.tsx) - [Consultez la spécification associée](https://raw.githubusercontent.com/Workday/canvas-kit/master/modules/react/form-field/lib/FormField.tsx) - [Consultez la spécification associée](https://raw.githubusercontent.com/Workday/canvas-kit/master/modules/react/text-input/lib/TextInput.tsx) - [Consultez la spécification associée](https://raw.githubusercontent.com/Workday/canvas-kit/master/modules/react/button/lib/Button.tsx) - [Consultez la spécification associée](https://github.com/Workday/canvas-kit) - [Référence du code](https://raw.githubusercontent.com/Workday/canvas-kit/master/modules/react/form-field/lib/FormField.tsx) - [Configuration de Canvas Kit Imports actuels, provider et limite liée à Sana.](https://github.com/Workday/canvas-kit) - [Source actuelle des jetons système Catégories d’espacement, typographie et alias de formes.](https://raw.githubusercontent.com/Workday/canvas-tokens/main/packages/canvas-tokens/tokens/web/sys.json) - [Source de FormField Composant composé API et orientation.](https://raw.githubusercontent.com/Workday/canvas-kit/master/modules/react/form-field/lib/FormField.tsx) - [Source de TextInput Dimensions et styles d’état.](https://raw.githubusercontent.com/Workday/canvas-kit/master/modules/react/text-input/lib/TextInput.tsx) - [Source de PrimaryButton Rôles d’état adaptés à la marque.](https://raw.githubusercontent.com/Workday/canvas-kit/master/modules/react/button/lib/PrimaryButton.tsx) - [Source des boutons Comportement hérité et direction des icônes.](https://raw.githubusercontent.com/Workday/canvas-kit/master/modules/react/button/lib/Button.tsx) - [Migration historique Anciens noms conservés uniquement comme référence de migration.](https://github.com/Workday/canvas-tokens/discussions/77)