# Système de design Dell ## Aperçu de l’interface système de design Dell Envoyez une requête locale, examinez un résultat et rétablissez l’inventaire avec « Effacer ». ## Référence de conception système de design Dell Fondations de DDS v3 et Storybook vérifié de Vanilla 3.2.0. Les valeurs de couleur correspondent aux aperçus en mode clair du tableau des jetons Text Input, et non à un thème universel. L’aperçu applique ces règles avec une implémentation indépendante HTML/CSS ; l’exemple de code charge la version réelle de DDS depuis le CDN. ### Espacement | Nom / règle | Valeur / configuration | Utilisation | | --- | --- | --- | | --dds-spacing-xs | 4px / 0.25rem | Proximité de l’icône et de son libellé. | | --dds-spacing-sm | 8px / 0.5rem | Actions de recherche adjacentes. | | --dds-spacing-md | 12px / 0.75rem | Lignes d’objets compactes. | | --dds-spacing-lg | 16px / 1rem | Marge intérieure du contenu des résultats. | | --dds-spacing-xl | 24px / 1.5rem | Espacement entre la recherche et les résultats. | | --dds-spacing-2xl | 32px / 2rem | Marge intérieure de la page principale. | | --dds-spacing-3xl | 40px / 2.5rem | Espacement des sections. | | --dds-spacing-4xl | 48px / 3rem | Séparation entre sections principales. | | --dds-spacing-5xl | 64px / 4rem | Grand espacement de mise en page. | | --dds-spacing-6xl | 80px / 5rem | Composition aérée. | | --dds-spacing-7xl | 96px / 6rem | Plus grand espacement indiqué. | ### Exemples de couleurs sémantiques en mode clair | Nom / règle | Valeur / configuration | Utilisation | | --- | --- | --- | | --dds-color-text-primary | #1D2C3B | Libellés principaux des résultats. | | --dds-color-background-surface-secondary | #EBF1F6 | Surface secondaire du contenu. | | --dds-color-border-brand-base | #00468B | Bordure de marque du champ de saisie. | | --dds-color-background-surface-inactive | #E1E1E1 | Surface du champ inactif. | | --dds-color-border-inactive-base | #7E7E7E | Bordure inactive. | | --dds-color-text-inactive | #B6B6B6 | Libellé inactif ; ne convient pas au texte courant. | ### Rôles sélectionnés dans l’échelle typographique | Nom / règle | Valeur / configuration | Utilisation | | --- | --- | --- | | Display 1 ≥1024px | 72px / 88px; weight 300 | Grand titre éditorial, pas une liste de résultats dense. | | Heading 1 ≥1024px | 48px / 56px; weight 300 | Titre de page large. | | Heading 1 <1024px | 40px / 48px; weight 300 | Titre de page compact. | | Heading 4 ≥1024px | 24px / 32px; weight 400 | Titre de section. | | Heading 4 <1024px | 20px / 28px; weight 400 | Titre de section compact. | | Body 2 | 16px / 24px; weight 400 | Rôle par défaut des paragraphes. | | Body 3 | 14px / 20px; weight 400 | Métadonnées denses. | | Caption | 12px / 20px; weight 400 | Texte d’aide du champ. | | Button 1 | 16px / 24px; weight 500 | Libellé d’action par défaut. | ### Composition de la recherche | Nom / règle | Valeur / configuration | Utilisation | | --- | --- | --- | | InputGroup(element) | Initializer exported by @dds/components | Initialisez le conteneur de groupe une fois qu’il existe. | | dds__input-group | Input and addon wrapper | Gardez les éléments de début et de fin adjacents au champ de saisie. | | dds__text-input | Native input class | L’application gère la requête et les résultats. | | dds__input-addon | Accessory wrapper | Icône décorative en début de champ ou action d’effacement. | | dds__button--ghost | Low-emphasis button modifier | Les exemples de recherche et d’effacement utilisent cette variante. | | dds__button--icon-only | Icon-only button modifier | Fournissez tout de même un aria-label au bouton. | ### Chargement des styles | Nom / règle | Valeur / configuration | Utilisation | | --- | --- | --- | | dds-styles.css | All-in-one starter | Inclut les styles des composants, les jetons, les polices et les bundles d’utilitaires. | | dds-tokens.css | Global and semantic tokens | N’inclut pas les jetons des composants. | | dds-components.css | All component styles and component tokens | À inclure avec les jetons et les polices dans une approche à bundles séparés. | | dds-fonts.css | CDN font definitions | À inclure pour le rendu des polices DDS. | | dds-grid.css | Grid classes | Bundle de mise en page séparé. | | dds-icons.css | Icon classes | Ne charge pas à lui seul la police d’icônes ; consultez la configuration des icônes. | ## Guide complet système de design Dell 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. ## DDS v3 et ses limites d’implémentation système de design Dell ### Une composition, pas un service de recherche > DDS sépare les fondations visuelles réutilisables du comportement du produit. Pour cet inventaire, le point d’intégration utile est InputGroup : un champ de saisie natif avec des emplacements accessoires. Aucun constructeur Search n’est à appeler, et le système de design ne récupère pas les appareils. Notre application conserve séparément la saisie en brouillon, la requête appliquée et l’appareil sélectionné. La différence entre la saisie et l’envoi de la requête devient ainsi visible. Consultez la spécification associée ### Choisissez une version L’exemple public destiné aux développeurs ci-dessous utilise Vanilla 3.2.0. Ses CSS et JavaScript partagent cette version. Les intégrations v2 existantes utilisent un conditionnement différent : consultez la documentation de migration avant d’adopter ces imports. Le package actuel est réservé à Dell ; le CDN documenté permet d’évaluer concrètement cette composition sans inventer de registre npm public. Consultez la spécification associée ## Système de design Dell Surfaces et limites sémantiques ### Utiliser les noms de rôles publiés Le tableau de référence consigne les valeurs d’entrée en mode clair issues de la documentation officielle des composants. Après le chargement des styles DDS, le code produit doit utiliser les variables CSS sémantiques. Le texte principal et la surface secondaire forment une zone de résultats lisible ; la bordure de marque délimite le champ. La couleur de premier plan inactive est volontairement atténuée et ne doit pas servir de couleur par défaut aux métadonnées. Consultez la spécification associée ### Ne pas redéfinir les jetons DDS Les primitives de couleur globales alimentent les rôles sémantiques, qui guident ensuite les choix propres à chaque composant. Les auteurs d’applications doivent utiliser les rôles sémantiques plutôt que de remplacer l’échelle globale. Un thème sombre nécessite un mode de jetons réellement pris en charge ; modifier uniquement l’arrière-plan de la page rend les couleurs des champs, des libellés et du focus incohérentes. Cet exemple local reste en mode clair. Consultez la spécification associée ## Système de design Dell Typographie adaptative sans modifier la structure du document ### Un titre sémantique, deux tailles visuelles Le titre de la page reste un h1 sur toutes les tailles d’écran. Il utilise les tailles documentées pour Heading 1 : 48/56 sur les écrans larges et 40/48 sous 1024px. Cet exemple utilise les polices système de remplacement, car il s’agit d’une interprétation locale indépendante ; la feuille de style native fournit les ressources de polices DDS. Body 2 convient aux descriptions, tandis que Body 3 sert aux métadonnées compactes des appareils. Consultez la spécification associée ### Prévoir de la place pour les noms réels Un modèle d’appareil, un nom de bureau ou un état d’assistance peut passer sur plusieurs lignes. Gardez les identifiants lisibles et ne tronquez pas l’unique copie d’une étiquette d’actif. Une mise en page compacte modifie la hiérarchie visuelle et l’organisation des colonnes, tout en conservant l’association entre chaque libellé et sa valeur. Consultez la spécification associée ## Système de design Dell Un rythme de quatre pixels pour une vue fractionnée ### Associer les niveaux de l’échelle aux relations entre éléments Utilisez sm entre les actions associées, lg dans les lignes de résultats et xl entre la recherche et la zone de résultats. Sur les écrans plus larges, l’enveloppe extérieure peut utiliser 2xl. Il s’agit d’affectations propres à l’application pour l’échelle publiée, et non de prescriptions officielles imposant ces espacements à chaque page de recherche. Consultez la spécification associée ### Densité et réorganisation DDS décrit les grilles compactes, par défaut et confortables. Cet exemple conserve des commandes de recherche confortables tout en utilisant des métadonnées compactes dans chaque résultat. Sur les écrans étroits, le panneau de l’appareil sélectionné suit la liste de résultats, ce qui préserve l’ordre de lecture. Le panneau de détails n’est pas fixe et ne peut pas masquer le dernier résultat. - Garder le libellé de recherche et le texte d’aide au-dessus du champ, quelle que soit la largeur. - Placer l’action de validation sous le champ si la ligne ne tient pas. - Afficher les détails de l’appareil sélectionné sous les résultats plutôt que de créer un défilement horizontal. Consultez la spécification associée ## Système de design Dell Structure et comportement de la recherche ### La validation manuelle est intentionnelle Le symbole de recherche en début de champ est décoratif ; le libellé visible définit le périmètre de l’inventaire. Le bouton d’effacement à droite apparaît uniquement si le champ contient du texte. Le mode manuel valide le formulaire : la touche Entrée et le bouton visible « Rechercher des appareils » produisent donc le même résultat. Modifier le champ seul ne change pas la liste de résultats appliquée. Consultez la spécification associée ### Le mode automatique suit des règles différentes DDS décrit également un mode automatique qui se déclenche après la saisie du quatrième caractère. N’appliquez pas un filtrage immédiat dès le premier caractère à une interface documentée comme utilisant ce mode. Pour passer à la recherche automatique, supprimez le bouton de validation manuelle et implémentez explicitement le seuil, l’annulation et l’annonce des résultats. L’exemple fourni utilise le mode manuel. Consultez la spécification associée ## Système de design Dell Brouillon, requête appliquée et sélection ### Transitions d’état dans l’exemple Effacer réinitialise le champ et le filtre appliqué, rétablit l’inventaire complet de l’exemple et redonne le focus au champ. La sélection est une action distincte : elle affiche les détails de l’actif sans modifier la requête. Si aucun résultat ne correspond, un état dédié affiche l’expression appliquée et propose une action explicite de réinitialisation. Il ne prétend jamais qu’un inventaire distant a été interrogé. 1. Saisissez le nom ou l’étiquette d’un actif ; les résultats actuels restent inchangés jusqu’à la validation. 2. Validez le formulaire et mettez à jour le nombre de résultats à partir du tableau local filtré. 3. Consultez un résultat ou effacez la requête ; conservez le focus sur la commande utilisée. Consultez la spécification associée ## Système de design Dell Libellés, repères et annonces ### Indiquer clairement le périmètre Le formulaire constitue un repère de recherche nommé « Inventaire des appareils ». Le libellé permanent et le texte d’aide restent visibles pendant la saisie. L’icône d’effacement est un bouton doté d’un aria-label, et non un span auquel est associé un gestionnaire de clic. Les symboles décoratifs sont masqués aux technologies d’assistance. Le nombre de résultats est un message d’état poli ; il est mis à jour après la validation, et non annoncé à chaque frappe. Consultez la spécification associée ### La sélection n’est pas une navigation Chaque résultat utilise un véritable bouton avec un état activé et un nom accessible complet. Le titre de détail identifie l’élément examiné. Aucun lien ne prétend ouvrir une page de gestion des appareils, car cet exemple ne dispose pas de système de gestion. La sélection actuelle est indiquée par une bordure et un libellé textuel. Consultez la spécification associée ## Système de design Dell Charger les ressources réelles et initialiser le groupe ### Commencer par le bundle documenté Pour une application interne autorisée, installez @dds/components depuis Dell Artifactory et importez son dds-styles.css dans la chaîne de traitement des feuilles de style du projet. Pour une preuve de concept autonome, utilisez les liens CDN publics épinglés ci-dessous. Initialisez InputGroup une fois le balisage créé. La validation, l’effacement et le filtrage restent à la charge du code de l’application. Consultez la spécification associée ### Optimiser une fois la composition fonctionnelle La feuille de style complète est le point de départ le plus simple. Une intégration sélective nécessite les jetons global/semantic et les polices, ainsi que la feuille de style de chaque composant utilisé. Les jetons seuls n’incluent pas les jetons des composants, et les classes d’icônes ne chargent pas à elles seules la police. La suppression de ces bundles complémentaires peut donner l’impression que les commandes sont présentes alors qu’elles sont visuellement incomplètes. Consultez la spécification associée ## Système de design Dell Tester le fonctionnement de la recherche ### Un test local utile Saisissez Latitude sans valider et vérifiez que l’ancien nombre de résultats reste affiché. Validez, puis examinez l’appareil correspondant. Recherchez une étiquette inexistante, vérifiez l’état vide, puis effacez la recherche et confirmez que tous les appareils d’exemple réapparaissent. Répétez ces vérifications au clavier et à une largeur réduite. Elles valident cet exemple, mais ne certifient ni un produit Dell en aval ni une intégration réseau. Consultez la spécification associée ## Exemples de composants du système de design système de design Dell ### Exemple interactif autonome complet Enregistrez le document complet sous le nom index.html et ouvrez-le dans un navigateur. Interprétation indépendante HTML/CSS de l’espacement, de la typographie et des couleurs claires documentées des champs de saisie dans DDS v3 ; police de remplacement du système. ``` Device inventory — DDS v3 study
DEVICE OPERATIONS Local sample inventory

Find a device

Review model, location and support coverage in one place.

``` Référence du code - Ce document fournit son propre comportement de recherche. Utilisez l’exemple natif de DDS pour vérifier l’initialisation d’InputGroup avec la feuille de style et le script épinglés. ### Entrée complète de l’implémentation native L’implémentation complète présentée dans la configuration, réunie ici avec les explications ciblées sur API. Suivez les prérequis documentés concernant les packages et la compilation dans la section de configuration. ``` Local device search

Find a device

``` Référence du code - Enregistrez sous index.html et servez le fichier localement avec un accès réseau au CDN DDS 3.2.0 documenté. Cette version utilise l’initialisation réelle d’InputGroup et un filtrage local ; aucun système dorsal Dell n’est utilisé. Autre possibilité avec npm interne : npm install @dds/components --registry=https://artifacts.dell.com/artifactory/api/npm/dx-npm-prod/ . L’aperçu intégré est une interprétation hors ligne HTML/CSS, et non l’exécution de ce CDN. ### InputGroup avec recherche gérée par l’application La configuration combine des champs de saisie et des extensions natifs, initialise InputGroup et relie le tout à l’envoi réel d’un formulaire. Le symbole de tête est un caractère décoratif local ; aucune dépendance à une police d’icônes n’est impliquée. ``` import { InputGroup } from '@dds/components'; InputGroup(document.querySelector('#device-search')); // Use the complete form and event handlers in the setup example. ``` Référence du code - La documentation v3 vérifiée ne présente aucun composant Search API autonome. - Utilisez aria-label sur les boutons contenant uniquement une icône ; le filtrage est géré par l’application. ## Configuration de l’agent IA système de design Dell ### Point de départ de l’implémentation Enregistrez sous index.html et servez le fichier localement avec un accès réseau au CDN DDS 3.2.0 documenté. Cette version utilise l’initialisation réelle d’InputGroup et un filtrage local ; aucun système dorsal Dell n’est utilisé. Autre possibilité avec npm interne : npm install @dds/components --registry=https://artifacts.dell.com/artifactory/api/npm/dx-npm-prod/ . L’aperçu intégré est une interprétation hors ligne HTML/CSS, et non l’exécution de ce CDN. ``` Local device search

Find a device

``` ### Un prompt pour votre projet ``` Créez une recherche dans un inventaire d’appareils avec une portée définie, en utilisant la composition complète d’InputGroup de DDS 3.2.0. Conservez la validation manuelle, un libellé de portée visible, l’annonce des résultats locaux et la possibilité d’effacer la recherche. Utilisez les jetons sémantiques de DDS et la typographie adaptative ; n’inventez pas de composant Search API et ne le remplacez pas par des imports hérités de la v2. ``` ## Sources et périmètre système de design Dell Référence indépendante de DDS v3. Le package interne nécessite un accès au registre Dell ; le CDN public avec version est documenté pour le prototypage. Cela n’implique aucune identité Dell, connexion à la gestion des ressources ni certification officielle. - Installation de DDS 3.2.0 Accès au package interne, CDN public pour les prototypes et bundles de styles requis. - Implémentation de la recherche La recherche est composée à partir d’InputGroup ; il n’existe pas de composant Search API autonome. - Conception de la recherche Comportement de recherche manuel et automatique, libellés de portée et repères de navigation. - Espacement Onze niveaux d’espacement sémantiques. - Typographie Échelles par défaut et compacte. - Jetons des champs de saisie Couleurs sémantiques documentées utilisées par les champs de saisie. - Architecture des jetons Limites entre les jetons globaux, sémantiques et propres aux composants. - Grille Densité et rythme de quatre pixels. ## Ressources associées système de design Dell ### Duet système de design Étudiez les échelles de couleurs et d’espacement de Duet et LocalTapiola à travers un parcours de sélection de dates, avec valeurs de date ISO, validation explicite de la plage, méthodes de focus du composant et distinction claire avec le sélecteur open source. ### Elastic UI Créez un explorateur de journaux Elastic UI avec les échelles Borealis vérifiées, des commandes natives de tableau et de recherche, un filtre de gravité, des événements enregistrés localement et le code source complet de React. ### Emplifi Soul Découvrez le contrat de tableau de données de Soul, son espacement de six pixels, ses rôles de couleurs en couches et sa typographie Inter compacte. Comparez la sélection multiple, la représentation des données manquantes et les lignes de synthèse, puis examinez les points d’entrée vérifiés du paquet privé React. - [Référence de mise en œuvre](https://www.delldesignsystem.com/components/search) - [Source](https://www.delldesignsystem.com/foundations/spacing) - [Source](https://www.delldesignsystem.com/components/text-input/?tab=Design) - [Source](https://www.delldesignsystem.com/foundations/typography/) - [Source](https://vanilla.delldesignsystem.com/3.2.0/iframe.html?id=components-search--docs&viewMode=docs) - [Source](https://vanilla.delldesignsystem.com/3.2.0/iframe.html?id=getting-started-installation--docs&viewMode=docs) - [Consultez la spécification associée](https://vanilla.delldesignsystem.com/3.2.0/iframe.html?id=components-search--docs&viewMode=docs) - [Consultez la spécification associée](https://vanilla.delldesignsystem.com/3.2.0/iframe.html?id=getting-started-installation--docs&viewMode=docs) - [Consultez la spécification associée](https://www.delldesignsystem.com/components/text-input/?tab=Design) - [Consultez la spécification associée](https://www.delldesignsystem.com/getting-started/tokens) - [Consultez la spécification associée](https://www.delldesignsystem.com/foundations/typography/) - [Consultez la spécification associée](https://www.delldesignsystem.com/foundations/spacing) - [Consultez la spécification associée](https://www.delldesignsystem.com/foundations/grid) - [Consultez la spécification associée](https://www.delldesignsystem.com/components/search) - [Référence du code](https://www.delldesignsystem.com/components/search) - [Référence du code](https://vanilla.delldesignsystem.com/3.2.0/iframe.html?id=components-search--docs&viewMode=docs) - [Installation de DDS 3.2.0 Accès au package interne, CDN public pour les prototypes et bundles de styles requis.](https://vanilla.delldesignsystem.com/3.2.0/iframe.html?id=getting-started-installation--docs&viewMode=docs) - [Implémentation de la recherche La recherche est composée à partir d’InputGroup ; il n’existe pas de composant Search API autonome.](https://vanilla.delldesignsystem.com/3.2.0/iframe.html?id=components-search--docs&viewMode=docs) - [Conception de la recherche Comportement de recherche manuel et automatique, libellés de portée et repères de navigation.](https://www.delldesignsystem.com/components/search) - [Espacement Onze niveaux d’espacement sémantiques.](https://www.delldesignsystem.com/foundations/spacing) - [Typographie Échelles par défaut et compacte.](https://www.delldesignsystem.com/foundations/typography/) - [Jetons des champs de saisie Couleurs sémantiques documentées utilisées par les champs de saisie.](https://www.delldesignsystem.com/components/text-input/?tab=Design) - [Architecture des jetons Limites entre les jetons globaux, sémantiques et propres aux composants.](https://www.delldesignsystem.com/getting-started/tokens) - [Grille Densité et rythme de quatre pixels.](https://www.delldesignsystem.com/foundations/grid)