# Sistema de diseño Dell ## Vista previa de la interfaz sistema de diseño Dell Envía una consulta local, inspecciona un resultado y restaura el inventario con Borrar. ## Referencia de diseño sistema de diseño Dell Fundamentos de DDS v3 y Storybook verificado de Vanilla 3.2.0. Los valores de color son las vistas previas del modo claro de la tabla de tokens de Text Input, no un tema universal. La vista previa aplica estas reglas en una implementación independiente de HTML/CSS; el ejemplo de código carga el CDN real y versionado de DDS. ### Espaciado | Nombre / Regla | Valor / Configuración | Uso | | --- | --- | --- | | --dds-spacing-xs | 4px / 0.25rem | Proximidad entre el icono y la etiqueta. | | --dds-spacing-sm | 8px / 0.5rem | Acciones de búsqueda contiguas. | | --dds-spacing-md | 12px / 0.75rem | Filas de objetos compactas. | | --dds-spacing-lg | 16px / 1rem | Relleno del contenido de resultados. | | --dds-spacing-xl | 24px / 1.5rem | Separación entre la búsqueda y los resultados. | | --dds-spacing-2xl | 32px / 2rem | Margen interior de la página principal. | | --dds-spacing-3xl | 40px / 2.5rem | Espaciado entre secciones. | | --dds-spacing-4xl | 48px / 3rem | Límite entre secciones principales. | | --dds-spacing-5xl | 64px / 4rem | Separación amplia en el diseño. | | --dds-spacing-6xl | 80px / 5rem | Composición espaciosa. | | --dds-spacing-7xl | 96px / 6rem | El mayor incremento de espaciado indicado. | ### Ejemplos de colores semánticos del modo claro | Nombre / Regla | Valor / Configuración | Uso | | --- | --- | --- | | --dds-color-text-primary | #1D2C3B | Etiquetas principales de los resultados. | | --dds-color-background-surface-secondary | #EBF1F6 | Superficie de contenido secundaria. | | --dds-color-border-brand-base | #00468B | Borde de entrada de marca. | | --dds-color-background-surface-inactive | #E1E1E1 | Superficie del campo inactivo. | | --dds-color-border-inactive-base | #7E7E7E | Borde inactivo. | | --dds-color-text-inactive | #B6B6B6 | Etiqueta inactiva; no es texto del cuerpo. | ### Funciones seleccionadas de la escala tipográfica | Nombre / Regla | Valor / Configuración | Uso | | --- | --- | --- | | Display 1 ≥1024px | 72px / 88px; weight 300 | Título editorial grande, no una lista densa de resultados. | | Heading 1 ≥1024px | 48px / 56px; weight 300 | Título de página ancho. | | Heading 1 <1024px | 40px / 48px; weight 300 | Título de página compacto. | | Heading 4 ≥1024px | 24px / 32px; weight 400 | Título de sección. | | Heading 4 <1024px | 20px / 28px; weight 400 | Título de sección compacto. | | Body 2 | 16px / 24px; weight 400 | Estilo de párrafo predeterminado. | | Body 3 | 14px / 20px; weight 400 | Metadatos densos. | | Caption | 12px / 20px; weight 400 | Texto de ayuda del campo. | | Button 1 | 16px / 24px; weight 500 | Etiqueta de acción predeterminada. | ### Composición de búsqueda | Nombre / Regla | Valor / Configuración | Uso | | --- | --- | --- | | InputGroup(element) | Initializer exported by @dds/components | Inicializa el contenedor del grupo una vez que exista. | | dds__input-group | Input and addon wrapper | Mantén los elementos iniciales y finales junto al campo de entrada. | | dds__text-input | Native input class | La aplicación gestiona la consulta y los resultados. | | dds__input-addon | Accessory wrapper | Icono decorativo inicial o acción para borrar. | | dds__button--ghost | Low-emphasis button modifier | Los ejemplos de búsqueda y borrado usan esta variante. | | dds__button--icon-only | Icon-only button modifier | Aun así, proporciona aria-label en el botón. | ### Carga de estilos | Nombre / Regla | Valor / Configuración | Uso | | --- | --- | --- | | dds-styles.css | All-in-one starter | Incluye estilos de componentes, tokens, fuentes y paquetes auxiliares. | | dds-tokens.css | Global and semantic tokens | No incluye tokens de componentes. | | dds-components.css | All component styles and component tokens | Es necesario junto con los tokens y las fuentes para la modalidad de paquetes separados. | | dds-fonts.css | CDN font definitions | Inclúyelo para la representación tipográfica de DDS. | | dds-grid.css | Grid classes | Paquete de diseño separado. | | dds-icons.css | Icon classes | No carga por sí solo la fuente de iconos; consulta la configuración de iconos. | ## Guía completa sistema de diseño Dell Una guía práctica para elegir, aplicar y revisar este sistema en una interfaz real. Orientación completa, un punto de partida para la implementación y enlaces al código fuente. ## DDS v3 y sus límites de implementación sistema de diseño Dell ### Una composición, no un servicio de búsqueda > DDS separa los fundamentos visuales reutilizables del comportamiento del producto. Para este inventario, el punto de integración más útil es InputGroup: un campo de entrada nativo con espacios para elementos complementarios. No hay un constructor Search que debas invocar, y el sistema de diseño no obtiene dispositivos. Nuestra aplicación mantiene valores separados para el texto de entrada en borrador, la consulta aplicada y el dispositivo seleccionado. Así se distingue claramente entre escribir y enviar. Consulta la especificación complementaria ### Elige una sola versión El ejemplo público para desarrolladores que aparece a continuación está dirigido a Vanilla 3.2.0. Sus paquetes CSS y JavaScript usan esa misma versión. Las integraciones existentes con v2 emplean un empaquetado distinto y deben seguir la documentación de migración antes de adoptar estas importaciones. El paquete actual es interno de Dell; el CDN documentado ofrece una forma concreta de evaluar esta composición sin inventar un registro público de npm. Consulta la especificación complementaria ## Superficies y límites semánticos de sistema de diseño Dell ### Usa los nombres de función publicados. La tabla de referencia registra los valores de entrada del modo claro de la documentación oficial del componente. El código del producto debe usar variables semánticas CSS después de cargar los estilos DDS. El texto principal y la superficie secundaria forman el área de resultados legible; el borde de marca identifica el límite del campo. El color de primer plano inactivo tiene deliberadamente menos énfasis y no debe usarse como color predeterminado de los metadatos. Consulta la especificación complementaria ### No redefinas los tokens de DDS Las primitivas de color globales alimentan los roles semánticos, que a su vez respaldan las decisiones específicas de cada componente. Los autores de aplicaciones deben usar los roles semánticos en lugar de sobrescribir la escala global. Una apariencia oscura requiere un modo de tokens compatible; cambiar solo el fondo de la página deja incoherentes los colores de los campos, las etiquetas y el foco. El ejemplo local permanece en modo claro. Consulta la especificación complementaria ## Sistema de diseño Dell Tipografía adaptable sin cambiar la estructura del documento ### Un encabezado semántico, dos tamaños visuales El encabezado de la página sigue siendo h1 en todos los tamaños de pantalla. Usa los tamaños documentados para Encabezado 1: 48/56 en diseños amplios y 40/48 por debajo de 1024px. El ejemplo usa fuentes alternativas del sistema porque es una interpretación local independiente; la hoja de estilos nativa proporciona los recursos tipográficos de DDS. Cuerpo 2 se usa para las descripciones y Cuerpo 3 para los metadatos compactos de los dispositivos. Consulta la especificación complementaria ### Deja espacio para los nombres reales El modelo de un dispositivo, el nombre de una oficina o el estado de asistencia pueden ocupar varias líneas. Mantén los identificadores legibles y no trunques la única copia de una etiqueta de activo. Un diseño compacto cambia la jerarquía visual y la disposición de las columnas, pero mantiene la misma asociación entre etiqueta y valor. Consulta la especificación complementaria ## Sistema de diseño Dell Un ritmo de cuatro píxeles para una vista dividida ### Asigna pasos de escala según las relaciones Usa sm entre acciones relacionadas, lg dentro de las filas de resultados y xl entre la consulta y la región de resultados. La estructura exterior puede usar 2xl en pantallas más amplias. Estas son asignaciones de la escala publicada para la aplicación, no prescripciones oficiales que exijan esos márgenes exactos en todas las páginas de búsqueda. Consulta la especificación complementaria ### Densidad y reorganización DDS describe cuadrículas compactas, predeterminadas y cómodas. En este ejemplo, los controles de búsqueda tienen un espaciado cómodo y los metadatos de cada resultado pueden ser compactos. En pantallas estrechas, el panel del dispositivo seleccionado aparece después de la lista de resultados, lo que conserva el orden de lectura. El panel de detalles no está fijo y no puede ocultar el último resultado. - Mantén la etiqueta de búsqueda y el texto de ayuda encima del campo en todos los tamaños de pantalla. - Coloca la acción de envío debajo del campo cuando no quepa en la misma fila. - Muestra los detalles del dispositivo seleccionado debajo de los resultados en lugar de crear desplazamiento horizontal. Consulta la especificación complementaria ## Sistema de diseño Dell Anatomía y comportamiento de la búsqueda ### El envío manual es intencional El símbolo de búsqueda al inicio es decorativo; la etiqueta visible define el ámbito del inventario. El control para borrar al final aparece solo cuando hay texto. El modo manual envía el formulario, por lo que Enter y el botón visible Buscar dispositivos tienen el mismo efecto. Cambiar el texto de entrada por sí solo no altera el conjunto de resultados aplicado. Consulta la especificación complementaria ### El modo automático tiene un funcionamiento distinto DDS también describe un modo automático que comienza después de introducir el cuarto carácter. No añadas un filtrado inmediato desde el primer carácter a una interfaz documentada con ese modo. Si cambias a la búsqueda automática, elimina el botón de envío manual e implementa deliberadamente el umbral, la cancelación y el anuncio de resultados. El ejemplo proporcionado usa el modo manual. Consulta la especificación complementaria ## Sistema de diseño Dell Borrador, consulta aplicada y selección ### Transiciones de estado del ejemplo Borrar restablece tanto el texto de entrada como el filtro aplicado, restaura todo el inventario de ejemplo y devuelve el foco al campo. La selección es una acción independiente del botón: muestra los detalles del activo sin modificar la consulta. Si no hay resultados, se muestra la frase aplicada y una opción explícita para restablecerlos. Nunca se afirma que se haya buscado en un inventario remoto. 1. Introduce el nombre o la etiqueta de un activo; los resultados actuales se mantienen hasta que se envíe la búsqueda. 2. Envía el formulario y actualiza el recuento de resultados a partir del arreglo local filtrado. 3. Inspecciona un resultado o borra la consulta; mantén el foco en el control que inició la acción. Consulta la especificación complementaria ## Sistema de diseño Dell Etiquetas, puntos de referencia y anuncios ### Indica el ámbito real El formulario es un punto de referencia de búsqueda llamado Inventario de dispositivos. La etiqueta persistente y el texto de ayuda siguen visibles al escribir. El icono para borrar es un botón con aria-label, no un span con un controlador de clic. Los símbolos decorativos se ocultan a las tecnologías de asistencia. El recuento de resultados es un mensaje de estado cortés; cambia después del envío, en lugar de anunciar cada pulsación. Consulta la especificación complementaria ### La selección no es navegación Cada resultado usa un botón real con un estado de pulsación y un nombre accesible completo. El encabezado de detalles identifica el elemento inspeccionado. Ningún enlace simula abrir una página de administración de dispositivos, porque este ejemplo no cuenta con un backend de administración. La selección actual se distingue tanto con un borde como con una etiqueta de texto. Consulta la especificación complementaria ## Sistema de diseño Dell Carga los recursos reales e inicializa el grupo ### Empieza con el paquete documentado Para una aplicación interna autorizada, instala @dds/components desde Dell Artifactory e importa dds-styles.css mediante el flujo de hojas de estilo del proyecto. Para una prueba de concepto independiente, usa los enlaces públicos fijados de CDN que se muestran a continuación. Inicializa InputGroup cuando exista el marcado. Los controladores de eventos para el envío, el borrado y el filtrado forman parte del código de la aplicación. Consulta la especificación complementaria ### Optimiza cuando la composición funcione La hoja de estilos completa es el punto de partida más sencillo. Una integración selectiva necesita los tokens globales y semánticos y las fuentes, además de las hojas de estilo de cada componente utilizado. Los tokens por sí solos omiten los tokens de los componentes, y las clases de iconos por sí solas no cargan la fuente. Al quitar esos paquetes complementarios, los controles pueden parecer presentes, pero quedar visualmente incompletos. Consulta la especificación complementaria ## Sistema de diseño Dell Pon a prueba el funcionamiento de la búsqueda ### Una prueba local útil Escribe Latitude sin enviar la búsqueda y comprueba que se mantenga el recuento de resultados anterior. Envía la búsqueda e inspecciona el dispositivo coincidente. Busca una etiqueta inexistente, verifica el estado sin resultados y, luego, borra la búsqueda y confirma que vuelvan a aparecer todos los dispositivos de ejemplo. Repite la prueba con el teclado y en una pantalla estrecha. Estas comprobaciones validan este ejemplo, pero no certifican un producto Dell derivado ni una integración de red. Consulta la especificación complementaria ## Sistema de diseño Dell Ejemplos de componentes del sistema de diseño ### Muestra interactiva independiente completa Guarda el documento completo como index.html y ábrelo en un navegador. Interpretación independiente HTML/CSS del espaciado, la tipografía y los colores claros documentados para campos de entrada de DDS v3; fuente de reserva del sistema. ``` Device inventory — DDS v3 study
DEVICE OPERATIONS Local sample inventory

Find a device

Review model, location and support coverage in one place.

``` Referencia de código - Este documento proporciona su propio comportamiento de búsqueda. Usa el ejemplo nativo de DDS para comprobar la inicialización de InputGroup con la hoja de estilos y el script fijados. ### Entrada de implementación nativa completa La implementación completa de la configuración, reunida aquí junto con las explicaciones específicas de API. Sigue los requisitos documentados de paquetes y compilación en la sección de configuración. ``` Local device search

Find a device

``` Referencia de código - Guárdalo como index.html y sírvelo localmente con acceso a la red para usar el CDN documentado de DDS 3.2.0. Esto utiliza la inicialización real de InputGroup y el filtrado local; no hay conexión con el backend de Dell. Alternativa con npm interno: npm install @dds/components --registry=https://artifacts.dell.com/artifactory/api/npm/dx-npm-prod/ . La vista previa integrada es una interpretación sin conexión HTML/CSS, no la ejecución de este CDN. ### InputGroup con búsqueda gestionada por la aplicación La configuración combina el campo de entrada nativo con complementos, inicializa InputGroup y conecta el envío real del formulario. El símbolo inicial es un carácter decorativo local; no implica dependencia de una fuente de iconos. ``` import { InputGroup } from '@dds/components'; InputGroup(document.querySelector('#device-search')); // Use the complete form and event handlers in the setup example. ``` Referencia de código - La documentación verificada de v3 no incluye un Search API independiente. - Usa aria-label en los botones que solo muestran un icono; la aplicación proporciona el filtrado. ## Configuración del agente sistema de diseño Dell ### Punto de partida para la implementación Guárdalo como index.html y sírvelo localmente con acceso a la red para usar el CDN documentado de DDS 3.2.0. Esto utiliza la inicialización real de InputGroup y el filtrado local; no hay conexión con el backend de Dell. Alternativa con npm interno: npm install @dds/components --registry=https://artifacts.dell.com/artifactory/api/npm/dx-npm-prod/ . La vista previa integrada es una interpretación sin conexión HTML/CSS, no la ejecución de este CDN. ``` Local device search

Find a device

``` ### Una instrucción para tu proyecto ``` Crea una búsqueda acotada para un inventario de dispositivos usando la composición completa de InputGroup de DDS 3.2.0. Conserva el envío manual, una etiqueta de ámbito visible, el anuncio local de resultados y la opción de borrar. Usa los tokens semánticos de DDS y la tipografía adaptable; no inventes un Search API ni sustituyas las importaciones heredadas de v2. ``` ## Fuentes y alcance sistema de diseño Dell Referencia independiente de DDS v3. El paquete interno requiere acceso al registro de Dell; el CDN público con versión fijada está documentado para prototipos. No se implica identidad de Dell, conexión con la gestión de activos ni certificación oficial. - Instalación de DDS 3.2.0 Acceso al paquete interno, CDN público para prototipos y paquetes de estilos necesarios. - Implementación de la búsqueda La búsqueda se compone con InputGroup; no hay un Search API independiente. - Diseño de búsqueda Comportamiento de búsqueda manual y automática, etiquetas de ámbito y puntos de referencia. - Espaciado Once niveles de espaciado semántico. - Tipografía Escalas predeterminada y compacta. - Tokens de campos de entrada Colores semánticos documentados para los campos de entrada. - Arquitectura de tokens Límites entre tokens globales, semánticos y de componentes. - Cuadrícula Densidad y ritmo de cuatro píxeles. ## Recursos relacionados sistema de diseño Dell ### Duet sistema de diseño Estudia las escalas de color y espaciado de LocalTapiola en Duet mediante un flujo de trabajo de intervalo de fechas, con valores de fecha ISO, validación explícita del intervalo, métodos de foco de componentes y un límite claramente diferenciado para el selector de código abierto. ### Elastic UI Crea un explorador de registros de Elastic UI con las escalas verificadas de Borealis, controles nativos de tabla y búsqueda, filtros de gravedad, eventos guardados localmente y el código fuente completo de React. ### Emplifi Soul Consulta el contrato de tabla de datos de Soul junto con su espaciado de seis píxeles, sus funciones de color por capas y su tipografía Inter compacta. Compara la selección múltiple, la notación de datos ausentes y las filas de resumen; después, examina los puntos de entrada verificados del paquete privado de React. - [Referencia de implementación](https://www.delldesignsystem.com/components/search) - [Fuente](https://www.delldesignsystem.com/foundations/spacing) - [Fuente](https://www.delldesignsystem.com/components/text-input/?tab=Design) - [Fuente](https://www.delldesignsystem.com/foundations/typography/) - [Fuente](https://vanilla.delldesignsystem.com/3.2.0/iframe.html?id=components-search--docs&viewMode=docs) - [Fuente](https://vanilla.delldesignsystem.com/3.2.0/iframe.html?id=getting-started-installation--docs&viewMode=docs) - [Consulta la especificación complementaria](https://vanilla.delldesignsystem.com/3.2.0/iframe.html?id=components-search--docs&viewMode=docs) - [Consulta la especificación complementaria](https://vanilla.delldesignsystem.com/3.2.0/iframe.html?id=getting-started-installation--docs&viewMode=docs) - [Consulta la especificación complementaria](https://www.delldesignsystem.com/components/text-input/?tab=Design) - [Consulta la especificación complementaria](https://www.delldesignsystem.com/getting-started/tokens) - [Consulta la especificación complementaria](https://www.delldesignsystem.com/foundations/typography/) - [Consulta la especificación complementaria](https://www.delldesignsystem.com/foundations/spacing) - [Consulta la especificación complementaria](https://www.delldesignsystem.com/foundations/grid) - [Consulta la especificación complementaria](https://www.delldesignsystem.com/components/search) - [Referencia de código](https://www.delldesignsystem.com/components/search) - [Referencia de código](https://vanilla.delldesignsystem.com/3.2.0/iframe.html?id=components-search--docs&viewMode=docs) - [Instalación de DDS 3.2.0 Acceso al paquete interno, CDN público para prototipos y paquetes de estilos necesarios.](https://vanilla.delldesignsystem.com/3.2.0/iframe.html?id=getting-started-installation--docs&viewMode=docs) - [Implementación de la búsqueda La búsqueda se compone con InputGroup; no hay un Search API independiente.](https://vanilla.delldesignsystem.com/3.2.0/iframe.html?id=components-search--docs&viewMode=docs) - [Diseño de búsqueda Comportamiento de búsqueda manual y automática, etiquetas de ámbito y puntos de referencia.](https://www.delldesignsystem.com/components/search) - [Espaciado Once niveles de espaciado semántico.](https://www.delldesignsystem.com/foundations/spacing) - [Tipografía Escalas predeterminada y compacta.](https://www.delldesignsystem.com/foundations/typography/) - [Tokens de campos de entrada Colores semánticos documentados para los campos de entrada.](https://www.delldesignsystem.com/components/text-input/?tab=Design) - [Arquitectura de tokens Límites entre tokens globales, semánticos y de componentes.](https://www.delldesignsystem.com/getting-started/tokens) - [Cuadrícula Densidad y ritmo de cuatro píxeles.](https://www.delldesignsystem.com/foundations/grid)