Services publics et administration · Nouvelle ressource
Système de design Designsystemet.
Découvrez les véritables rôles du thème Designsystemet, ses modes de taille et le comportement natif des champs grâce à un éditeur complet de brief de tâche, avec indication du nombre de caractères et préservation de l’état de présentation.
Comportement natif de Designsystemet 1.23.0, CSS et thème par défaut avec les polices Inter locales. · Référence de mise en œuvre
02
Référence de conception du système de design Designsystemet
Exports du thème par défaut et implémentation native de ds-field dans @digdir/designsystemet-css/web 1.23.0. Les lignes de couleur indiquent explicitement les valeurs du mode clair.
Designsystemet Comportement du système de design, CSS et packages de thèmes
Charger les trois parties dans le bon ordre
Designsystemet sépare le comportement indépendant du framework, les styles des composants CSS et les valeurs du thème. Cet exemple fixe designsystemet-web et designsystemet-css à la version 1.23.0, importe CSS, puis le thème par défaut, et enregistre le comportement une seule fois. Un champ stylisé sans son package de comportement ne correspond pas à la même implémentation que le ds-field connecté présenté ici.
Utiliser le contrat HTML natif actuel
L’exemple utilise ds-field autour d’éléments input, textarea et select standard dotés de classes ds-input. Les contrôles de formulaire natifs sont ainsi conservés, tandis que le package relie les libellés et les descriptions. Il ne reprend pas une ancienne implémentation de champ API limitée à React. Le code source complet contient les bons imports de packages et la logique de vérification de l’application d’origine.
Schéma de couleurs et modes de taille du système de design Designsystemet
Modifier l’apparence à l’aide d’attributs data
La page définit data-color-scheme sur light ou dark à la racine. Le thème fournit les couleurs sémantiques correspondantes, tandis que les valeurs du formulaire restent inchangées. Le tableau des paramètres indique explicitement les valeurs par défaut du mode clair ; il ne prétend pas que ces mêmes couleurs hexadécimales s’appliquent en mode sombre. Un bouton d’apparence secondaire décrit l’action qui sera effectuée ensuite.
Appliquer le mode de taille à tout le système
Le contrôle de taille de lecture fait passer data-size entre sm, md et lg. Il modifie le mode de taille du thème au lieu d’agrandir uniquement le titre. Les facteurs des modes publiés sont 1, 1.125 et 1.3125 ; ils interviennent dans les formules des jetons et ne constituent pas une consigne universelle de réglage des contrôles à ces valeurs en pixels. L’exemple teste le grand mode sur un téléphone comme sur un ordinateur de bureau.
Inter et typographie sémantique dans le système de design Designsystemet
Inclure les graisses prévues
L’aperçu inclut Inter en graisses 400, 500 et 600 et active la fonctionnalité de police cv05 documentée pour la forme de la lettre l minuscule. La page utilise les classes natives de titre et de paragraphe afin que la graisse et la hauteur de ligne suivent le thème. Une annotation fixe de 14px sert de note complémentaire rédigée, clairement en dehors de l’échelle interactive principale.
Placer les indications à proximité de leur contrôle
L’indication du titre explique l’utilité du libellé ; celle du résultat décrit le type de contenu attendu. Elles restent à côté de leurs contrôles et y sont reliées par ds-field. Les conseils complémentaires se trouvent dans une carte distincte, placée après le formulaire sur les écrans étroits. La mise en page ne dépend pas du survol pour afficher les instructions.
Relations automatiques et retour sur le nombre de caractères dans le système de design Designsystemet
Laisser ds-field relier un seul contrôle
Chaque ds-field contient un contrôle de type champ, son libellé et, éventuellement, des descriptions data-field. Le package attribue les ID et établit les relations entre le libellé et les descriptions. Regrouper des contrôles sans lien dans un même ds-field rendrait ce fonctionnement automatique ambigu. Utilisez un fieldset pour regrouper des contrôles, plutôt que de supposer que ce composant est un conteneur de formulaire générique.
Placer un seul contrôle de type champ dans chaque ds-field.
Utiliser les descriptions data-field pour le contenu complémentaire associé.
Laisser l’observateur natif gérer les ID et les relations described-by.
Comprendre ce que mesure le compteur
Validation de l’application et état de vérification dans le système de design Designsystemet
Valider séparément les exigences de la tâche
L’application exige un titre et un résultat de tâche non vides, et refuse un résultat qui dépasse la limite de l’exemple. Après avoir affiché un message indiquant la marche à suivre, elle place le focus sur le champ concerné. Le compteur natif indique la longueur, tandis que le gestionnaire de soumission applique la règle de vérification locale. Aucun attribut maxlength ne supprime silencieusement le texte collé.
Préserver les données lors d’un changement de présentation
Une vérification réussie affiche le titre et le résultat actuels sous forme de texte. Toute modification de l’un ou l’autre champ efface le résultat ; les changements d’apparence ou de taille le préservent, car ces contrôles ne modifient pas le descriptif. Cette distinction est intentionnelle et vérifiée. Aucune donnée n’est envoyée à un service de gestion de projets et l’aperçu ne prétend jamais qu’une tâche a été créée dans un service externe.
Implémentation complète des champs natifs du système de design Designsystemet
Reproduire l’exemple de la version indiquée
Créez un projet Vite vanilla, installez les deux packages Designsystemet épinglés à une version précise ainsi que Inter, puis enregistrez le fichier d’entrée complet et digdir.css. Conservez l’élément racine de montage. Le code source comprend l’enregistrement, l’ordre des thèmes, le balisage du compteur, les contrôles de présentation et toutes les transitions de validation de la vérification. L’aperçu local utilise le même observateur de champs natifs, plutôt qu’une imitation dessinée à la main.
Importer le comportement une seule fois, puis les composants CSS et le thème par défaut.
Charger Inter en graisses 400, 500 et 600, puis enregistrer le fichier d’entrée/CSS complet.
Tester le compteur au-delà de la limite et corriger le résultat.
Effectuer la vérification, changer la taille et l’apparence, puis modifier le texte pour effacer le résultat.
Tester le dépassement de limite et le retour à un état valide
Collez 150 caractères ordinaires dans le résultat et vérifiez que le compteur indique un dépassement de dix caractères. La vérification doit le refuser. Remplacez le texte par un résultat court, effectuez la vérification avec succès, puis passez en mode sombre et changez la taille de lecture sans perdre le résultat. Modifiez le titre et vérifiez que l’ancienne vérification est effacée. Contrôlez la visibilité du focus et le retour à la ligne à chaque largeur d’écran.
Exemples de composants du système de design Designsystemet
main.js — étude complète des champs natifs et du thème
Éditeur complet, balisage réel du compteur, contrôles d’apparence et de taille, et validation locale de la vérification.
javascript
import '@digdir/designsystemet-web';
import '@digdir/designsystemet-css';
import '@digdir/designsystemet-css/theme';
import '@fontsource/inter/latin-400.css';
import '@fontsource/inter/latin-500.css';
import '@fontsource/inter/latin-600.css';
import './digdir.css';
document.documentElement.dataset.colorScheme='light';document.documentElement.dataset.size='md';document.getElementById('root').innerHTML=`<main><header><div><p class="eyebrow">DESIGNSYSTEMET / NATIVE FIELD STUDY</p><h1 class="ds-heading" data-size="lg">Write a useful task brief</h1></div><button id="theme" class="ds-button" data-variant="secondary" aria-pressed="false">Dark appearance</button></header><p class="ds-paragraph lead">Describe one outcome clearly. The native field connects its label, hint and character feedback while the theme controls size and appearance.</p><div class="layout"><form id="brief-form" novalidate><ds-field class="ds-field"><label>Task title</label><input id="title" class="ds-input" type="text" value="Review the navigation"/><p data-field="description">Use a short label that identifies the work.</p></ds-field><ds-field class="ds-field"><label>Desired outcome</label><textarea id="outcome" class="ds-input" rows="4">Make the main sections easier to find without changing the accepted content.</textarea><p data-field="description">Describe the result, not a list of implementation instructions.</p><p data-field="counter" data-limit="140" data-over="%d characters over the sample limit" data-under="%d characters remaining"></p></ds-field><p id="error" class="ds-validation-message" hidden role="alert"></p><button class="ds-button" type="submit">Review brief</button></form><aside class="ds-card" data-color="neutral"><h2 class="ds-heading" data-size="sm">Reading size</h2><p class="ds-paragraph">The theme changes the complete size mode rather than scaling only a heading.</p><ds-field class="ds-field"><label for="size">Component size</label><select class="ds-input" id="size"><option value="sm">Small</option><option value="md" selected>Medium</option><option value="lg">Large</option></select></ds-field><h3 class="ds-heading" data-size="xs">A clear brief contains</h3><ul><li>One concrete outcome.</li><li>Constraints that must remain true.</li><li>A way to check the result.</li></ul><p class="small">Default theme and web behavior 1.23.0. Original local application; no task is created elsewhere.</p></aside></div><section id="review" class="ds-card" data-color="success" hidden tabindex="-1"><h2 class="ds-heading" data-size="sm">Local brief review</h2><h3 id="review-title" class="ds-heading" data-size="xs"></h3><p id="review-body" class="ds-paragraph"></p><p class="small">Editing a field clears this review. Appearance and reading size preserve it.</p></section></main>`;const $=id=>document.getElementById(id);function edit(){$('review').hidden=true;$('error').hidden=true}['title','outcome'].forEach(id=>$(id).addEventListener('input',edit));$('theme').addEventListener('click',()=>{const dark=document.documentElement.dataset.colorScheme!=='dark';document.documentElement.dataset.colorScheme=dark?'dark':'light';$('theme').setAttribute('aria-pressed',String(dark));$('theme').textContent=dark?'Light appearance':'Dark appearance'});$('size').addEventListener('change',e=>document.documentElement.dataset.size=e.target.value);$('brief-form').addEventListener('submit',e=>{e.preventDefault();let message='',focus='outcome';if(!$('title').value.trim()){message='Enter a task title.';focus='title'}else if(!$('outcome').value.trim())message='Describe the desired outcome.';else if($('outcome').value.length>140)message='Shorten the outcome to 140 characters or fewer.';if(message){$('error').textContent=message;$('error').hidden=false;$(focus).focus();return}$('review-title').textContent=$('title').value.trim();$('review-body').textContent=$('outcome').value.trim();$('review').hidden=false;$('review').focus()});
Les changements de thème et de taille préservent les valeurs ; seules les modifications du contenu invalident la vérification.
04
Configuration de l’agent du système de design Designsystemet
Point de départ de l’implémentation
Les relations natives entre libellés, l’état du compteur, le retour après validation et les changements de taille en modes clair et sombre ont été testés dans un navigateur réel.
sh
npm create vite@latest ds-brief -- --template vanilla
cd ds-brief
npm install
npm install @digdir/[email protected] @digdir/[email protected] @fontsource/inter
# Replace src/main.js and add src/digdir.css. Keep <div id="root"></div>.
npm run dev
Un prompt pour votre projet
Prompt pour l’agent IA
Créez l’éditeur de brief en respectant l’ordre du comportement de Designsystemet 1.23.0, de CSS et du thème par défaut. Utilisez ds-field avec un seul contrôle natif, de vrais attributs de compteur data-field et les graisses Inter. Conservez l’état de révision lors des changements d’apparence et de taille, effacez-le après toute modification du contenu et appliquez la limite initiale de 140 caractères sans tronquer le texte collé.
05
Sources et périmètre du système de design Designsystemet
Un éditeur local créé par OpenDesign, utilisant CSS de Designsystemet et le comportement web 1.23.0. Le thème par défaut et l’observateur de champ sont natifs ; le contenu du brief, la limite de 140 caractères et le processus de révision sont spécifiques à ce projet.
