# Sistema de design Dell ## Pré-visualização da interface sistema de design Dell Envie uma consulta local, inspecione um resultado e restaure o inventário com Limpar. ## Referência de design sistema de design Dell Fundamentos do DDS v3 e Storybook verificado do Vanilla 3.2.0. Os valores de cor são as pré-visualizações do modo claro na tabela de tokens de Text Input, não um tema universal. A pré-visualização aplica essas regras em HTML/CSS independentes; o exemplo de código carrega a versão real do CDN do DDS. ### Espaçamento | Nome / Regra | Valor / Configuração | Uso | | --- | --- | --- | | --dds-spacing-xs | 4px / 0.25rem | Proximidade entre ícone e rótulo. | | --dds-spacing-sm | 8px / 0.5rem | Ações de busca adjacentes. | | --dds-spacing-md | 12px / 0.75rem | Linhas compactas de objetos. | | --dds-spacing-lg | 16px / 1rem | Espaçamento interno do conteúdo dos resultados. | | --dds-spacing-xl | 24px / 1.5rem | Separação entre a busca e os resultados. | | --dds-spacing-2xl | 32px / 2rem | Recuo da página principal. | | --dds-spacing-3xl | 40px / 2.5rem | Espaçamento entre seções. | | --dds-spacing-4xl | 48px / 3rem | Limite entre seções principais. | | --dds-spacing-5xl | 64px / 4rem | Grande separação no layout. | | --dds-spacing-6xl | 80px / 5rem | Composição espaçosa. | | --dds-spacing-7xl | 96px / 6rem | Maior valor de espaçamento listado. | ### Exemplos de cores semânticas no modo claro | Nome / Regra | Valor / Configuração | Uso | | --- | --- | --- | | --dds-color-text-primary | #1D2C3B | Rótulos de resultados primários. | | --dds-color-background-surface-secondary | #EBF1F6 | Superfície de conteúdo secundária. | | --dds-color-border-brand-base | #00468B | Borda da entrada da marca. | | --dds-color-background-surface-inactive | #E1E1E1 | Superfície do campo inativo. | | --dds-color-border-inactive-base | #7E7E7E | Borda inativa. | | --dds-color-text-inactive | #B6B6B6 | Rótulo inativo; não usar em texto corrido. | ### Funções selecionadas da escala tipográfica | Nome / Regra | Valor / Configuração | Uso | | --- | --- | --- | | Display 1 ≥1024px | 72px / 88px; weight 300 | Título editorial grande, não uma lista densa de resultados. | | Heading 1 ≥1024px | 48px / 56px; weight 300 | Título amplo da página. | | Heading 1 <1024px | 40px / 48px; weight 300 | Título compacto da página. | | Heading 4 ≥1024px | 24px / 32px; weight 400 | Título da seção. | | Heading 4 <1024px | 20px / 28px; weight 400 | Título compacto da seção. | | Body 2 | 16px / 24px; weight 400 | Função padrão de parágrafo. | | Body 3 | 14px / 20px; weight 400 | Metadados compactos. | | Caption | 12px / 20px; weight 400 | Texto de ajuda do campo. | | Button 1 | 16px / 24px; weight 500 | Rótulo padrão de ação. | ### Composição da busca | Nome / Regra | Valor / Configuração | Uso | | --- | --- | --- | | InputGroup(element) | Initializer exported by @dds/components | Inicialize o contêiner do grupo depois que ele existir. | | dds__input-group | Input and addon wrapper | Mantenha os espaços inicial e final adjacentes à entrada. | | dds__text-input | Native input class | A aplicação controla a consulta e os resultados. | | dds__input-addon | Accessory wrapper | Ícone decorativo inicial ou ação para limpar. | | dds__button--ghost | Low-emphasis button modifier | Os exemplos de busca e limpeza usam esta variante. | | dds__button--icon-only | Icon-only button modifier | Ainda é necessário fornecer aria-label no botão. | ### Carregamento de estilos | Nome / Regra | Valor / Configuração | Uso | | --- | --- | --- | | dds-styles.css | All-in-one starter | Inclui estilos dos componentes, tokens, fontes e pacotes auxiliares. | | dds-tokens.css | Global and semantic tokens | Não inclui tokens de componentes. | | dds-components.css | All component styles and component tokens | Necessário junto com tokens e fontes na abordagem de pacotes separados. | | dds-fonts.css | CDN font definitions | Inclua para renderizar as fontes do DDS. | | dds-grid.css | Grid classes | Pacote de layout separado. | | dds-icons.css | Icon classes | Não carrega a fonte de ícones por si só; consulte a configuração dos ícones. | ## Guia completo sistema de design Dell Um guia prático para escolher, aplicar e avaliar este sistema em uma interface real. Orientações completas, um ponto de partida para a implementação e links para o código-fonte. ## DDS v3 e seus limites de implementação sistema de design Dell ### Uma composição, não um serviço de busca > O DDS separa fundamentos visuais reutilizáveis do comportamento do produto. Para este inventário, o ponto de integração mais útil é InputGroup: uma entrada nativa com espaços para elementos complementares. Não há um construtor Search a ser chamado, e o sistema de design não busca dispositivos. Nossa aplicação mantém a entrada em rascunho, a consulta aplicada e o dispositivo selecionado como valores separados. Assim, fica clara a diferença entre digitar e enviar. Consulte a especificação de apoio ### Escolha uma versão O exemplo público para desenvolvedores abaixo usa Vanilla 3.2.0. Seus pacotes CSS e JavaScript usam essa mesma versão. Integrações existentes com v2 usam um empacotamento diferente e devem seguir a documentação de migração antes de adotar estas importações. O pacote atual é interno à Dell; o CDN documentado oferece uma maneira concreta de avaliar essa composição sem inventar um registro público do npm. Consulte a especificação de apoio ## Superfícies e limites semânticos sistema de design Dell ### Use os nomes de função publicados A tabela de referência registra os valores de entrada do modo claro documentados oficialmente para o componente. O código do produto deve usar variáveis CSS semânticas após carregar os estilos DDS. O texto primário e a superfície secundária formam uma área de resultados legível; a borda da marca identifica o limite do campo de entrada. A cor do texto inativo é intencionalmente discreta e não deve ser usada como cor padrão para metadados. Consulte a especificação de apoio ### Não redefina os tokens DDS As cores primitivas globais alimentam os papéis semânticos, que, por sua vez, dão suporte às decisões específicas de cada componente. Quem desenvolve aplicações deve usar os papéis semânticos em vez de substituir a escala global. Uma aparência escura requer um modo de tokens compatível; mudar apenas o plano de fundo da página deixa inconsistentes as cores dos campos, rótulos e estados de foco. Este exemplo local permanece no modo claro. Consulte a especificação de apoio ## Sistema de design Dell Tipografia responsiva sem alterar a estrutura do documento ### Um título semântico, dois tamanhos visuais O título da página permanece como h1 em todos os tamanhos de tela. Ele usa os tamanhos documentados para Heading 1: 48/56 em layouts amplos e 40/48 abaixo de 1024px. O exemplo usa fontes alternativas do sistema por ser uma interpretação local independente; a folha de estilos nativa fornece os recursos de fonte DDS. Body 2 é usado nas descrições, enquanto Body 3 apresenta metadados compactos dos dispositivos. Consulte a especificação de apoio ### Reserve espaço para nomes reais O modelo de um dispositivo, o nome de um escritório ou o status do suporte podem ocupar mais de uma linha. Mantenha os identificadores legíveis e não trunque a única cópia de uma etiqueta de patrimônio. Um layout compacto altera a hierarquia visual e a disposição das colunas, mas mantém a associação entre cada rótulo e seu valor. Consulte a especificação de apoio ## Sistema de design Dell Ritmo de quatro pixels para uma visualização dividida ### Associe etapas da escala a cada relação Use sm entre ações relacionadas, lg dentro das linhas de resultados e xl entre a consulta e a região de resultados. Em telas mais largas, a estrutura externa pode usar 2xl. Essas são atribuições feitas pela aplicação para a escala publicada, não recomendações oficiais de que todas as páginas de pesquisa precisem exatamente desses espaçamentos internos. Consulte a especificação de apoio ### Densidade e reorganização do layout O DDS descreve grades compactas, padrão e confortáveis. Este exemplo mantém os controles de pesquisa confortáveis e permite metadados compactos em cada resultado. Em telas estreitas, o painel do dispositivo selecionado vem depois da lista de resultados, preservando a ordem de leitura. O painel de detalhes não é fixo e não pode encobrir o último resultado. - Mantenha o rótulo e o texto auxiliar da pesquisa acima do campo em todas as larguras. - Posicione a ação de envio abaixo do campo quando não houver espaço para mantê-la na mesma linha. - Mova os detalhes do dispositivo selecionado para baixo dos resultados, em vez de criar rolagem horizontal. Consulte a especificação de apoio ## Sistema de design Dell Estrutura e comportamento da pesquisa ### O envio manual é intencional O símbolo de pesquisa à esquerda é decorativo; o rótulo visível define o escopo do inventário. O controle para limpar, à direita, aparece somente quando há texto inserido. O modo manual envia a pesquisa pelo formulário, portanto Enter e o botão visível Pesquisar dispositivos têm o mesmo efeito. Alterar o texto de entrada não atualiza os resultados aplicados. Consulte a especificação de apoio ### O modo automático funciona de outra forma O DDS também descreve um modo automático que começa após a inserção do quarto caractere. Não implemente filtragem imediata a partir de um único caractere em uma interface documentada para esse modo. Se mudar para a pesquisa automática, remova o botão de envio manual e implemente deliberadamente o limite de caracteres, o cancelamento e o anúncio dos resultados. O exemplo fornecido usa o modo manual. Consulte a especificação de apoio ## Sistema de design Dell Rascunho, consulta aplicada e seleção ### Transições de estado no exemplo Limpar redefine tanto o texto de entrada quanto o filtro aplicado, restaura todo o inventário de exemplo e devolve o foco ao campo. A seleção é uma ação separada, feita por botão: ela mostra os detalhes do dispositivo sem alterar a consulta. Quando não há resultados, a interface exibe o texto aplicado e uma opção explícita para redefinir a pesquisa. Ela nunca afirma que um inventário remoto foi pesquisado. 1. Digite o nome ou a etiqueta de um dispositivo; os resultados atuais permanecem até o envio. 2. Envie o formulário e atualize a contagem de resultados com base na matriz local filtrada. 3. Inspecione um resultado ou limpe a consulta; mantenha o foco no controle que iniciou a ação. Consulte a especificação de apoio ## Sistema de design Dell Rótulos, pontos de referência e anúncios ### Indique o escopo real O formulário é um ponto de referência de pesquisa chamado Inventário de dispositivos. Um rótulo persistente e um texto auxiliar permanecem visíveis durante a digitação. O ícone para limpar é um botão com aria-label, não um span com um manipulador de clique. Símbolos decorativos ficam ocultos para tecnologias assistivas. A contagem de resultados é uma mensagem de status educada; ela muda após o envio, em vez de anunciar cada tecla digitada. Consulte a especificação de apoio ### A seleção não é navegação Cada resultado usa um botão real com estado pressionado e nome acessível completo. O título da seção de detalhes identifica o item inspecionado. Nenhum link simula a abertura de uma página de gerenciamento de dispositivos, pois este exemplo não tem integração com um sistema de gerenciamento. A seleção atual é indicada tanto por uma borda quanto por um rótulo de texto. Consulte a especificação de apoio ## Sistema de design Dell Carregue os recursos reais e inicialize o grupo ### Comece pelo pacote documentado Para uma aplicação interna autorizada, instale @dds/components do Dell Artifactory e importe dds-styles.css pela esteira de folhas de estilo do projeto. Para uma prova de conceito independente, use os links fixos da CDN pública exibidos abaixo. Inicialize InputGroup após a criação da marcação. Os manipuladores de eventos para envio, limpeza e filtragem continuam sendo código da aplicação. Consulte a especificação de apoio ### Otimize depois que a composição funcionar A folha de estilos completa é o ponto de partida mais simples. Uma integração seletiva precisa dos tokens global/semânticos e das fontes, além das folhas de estilo de cada componente utilizado. Os tokens, sozinhos, não incluem os tokens dos componentes; as classes de ícones, sozinhas, não carregam a fonte. Remover esses pacotes de suporte pode resultar em controles que parecem presentes, mas estão visualmente incompletos. Consulte a especificação de apoio ## Sistema de design Dell Teste o funcionamento da pesquisa ### Um teste local útil Digite Latitude sem enviar e confirme que a contagem de resultados anterior permanece. Envie a pesquisa e inspecione o dispositivo correspondente. Pesquise uma etiqueta inexistente, confirme o estado sem resultados e, em seguida, limpe a pesquisa e confirme que todos os dispositivos de exemplo retornam. Repita o teste usando o teclado e em uma tela estreita. Essas verificações validam este exemplo; não certificam um produto Dell subsequente nem uma integração de rede. Consulte a especificação de apoio ## Sistema de design Dell Exemplos de componentes do sistema de design ### Exemplo interativo completo e independente Salve o documento completo como index.html e abra-o em um navegador. Interpretação independente HTML/CSS do espaçamento, da tipografia e das cores documentadas para campos de entrada no DDS v3; fonte substituta do sistema. ``` Device inventory — DDS v3 study
DEVICE OPERATIONS Local sample inventory

Find a device

Review model, location and support coverage in one place.

``` Referência de código - Este documento implementa seu próprio comportamento de busca. Use o exemplo nativo do DDS para verificar a inicialização do InputGroup com a folha de estilos e o script fixados na versão indicada. ### Entrada da implementação nativa completa A implementação completa, desde a configuração, reunida aqui com as explicações específicas de API. Siga os pré-requisitos documentados de pacote e compilação na configuração. ``` Local device search

Find a device

``` Referência de código - Salve como index.html e sirva localmente com acesso à rede para usar a CDN documentada do DDS 3.2.0. Esta versão usa a inicialização real do InputGroup e a filtragem local; não se conecta ao backend da Dell. Alternativa pelo npm interno: npm install @dds/components --registry=https://artifacts.dell.com/artifactory/api/npm/dx-npm-prod/ . A prévia incorporada é uma interpretação offline HTML/CSS, não a execução em tempo real desta CDN. ### InputGroup com busca controlada pela aplicação A configuração combina campos de entrada e complementos nativos, inicializa o InputGroup e conecta o envio real de um formulário. O símbolo à esquerda é um caractere decorativo local; não implica dependência de uma fonte de ícones. ``` import { InputGroup } from '@dds/components'; InputGroup(document.querySelector('#device-search')); // Use the complete form and event handlers in the setup example. ``` Referência de código - Não há um componente Search API independente na documentação verificada da v3. - Use aria-label em botões que exibem somente um ícone; a filtragem é fornecida pela aplicação. ## Configuração do agente de IA sistema de design Dell ### Ponto de partida para implementação Salve como index.html e sirva localmente com acesso à rede para usar a CDN documentada do DDS 3.2.0. Esta versão usa a inicialização real do InputGroup e a filtragem local; não se conecta ao backend da Dell. Alternativa pelo npm interno: npm install @dds/components --registry=https://artifacts.dell.com/artifactory/api/npm/dx-npm-prod/ . A prévia incorporada é uma interpretação offline HTML/CSS, não a execução em tempo real desta CDN. ``` Local device search

Find a device

``` ### Um prompt para seu projeto ``` Crie uma busca de inventário de dispositivos com escopo definido usando a composição completa do InputGroup do DDS 3.2.0. Preserve o envio manual, o rótulo de escopo visível, o anúncio local dos resultados e a funcionalidade de limpar. Use os tokens semânticos e a tipografia responsiva do DDS; não invente um componente Search API nem substitua as importações legadas da v2. ``` ## Fontes e escopo sistema de design Dell Referência independente do DDS v3. O pacote interno exige acesso ao registro da Dell; a CDN pública com versão fixada é documentada para prototipagem. Isso não implica identidade Dell, conexão com o gerenciamento de ativos nem certificação oficial. - Instalação do DDS 3.2.0 Acesso ao pacote interno, CDN pública para protótipos e pacotes de estilos necessários. - Implementação da busca A busca é composta com o InputGroup; não há um componente Search API independente. - Design da busca Comportamentos de busca manual e automática, rótulos de escopo e pontos de referência. - Espaçamento Onze etapas semânticas de espaçamento. - Tipografia Escalas padrão e compacta. - Tokens dos campos de entrada Cores semânticas documentadas para campos de entrada. - Arquitetura de tokens Limites entre tokens globais, semânticos e de componentes. - Grade Densidade e ritmo de quatro pixels. ## Recursos relacionados sistema de design Dell ### Duet sistema de design Estude as escalas de cores e espaçamento do LocalTapiola no Duet por meio de um fluxo de seleção de intervalo de datas, com valores de data ISO, validação explícita do intervalo, métodos de foco dos componentes e a distinção em relação ao seletor de código aberto. ### Elastic UI Crie um explorador de registros do Elastic UI com escalas Borealis verificadas, controles nativos de tabela e busca, filtragem por gravidade, eventos salvos localmente e código-fonte completo de React. ### Emplifi Soul Conheça o contrato de tabela de dados do Soul junto com seu espaçamento de seis pixels, funções de cores em camadas e tipografia compacta Inter. Compare a seleção em lote, a notação de dados ausentes e as linhas de resumo; depois, examine os pontos de entrada verificados do pacote privado React. - [Referência de implementação](https://www.delldesignsystem.com/components/search) - [Fonte](https://www.delldesignsystem.com/foundations/spacing) - [Fonte](https://www.delldesignsystem.com/components/text-input/?tab=Design) - [Fonte](https://www.delldesignsystem.com/foundations/typography/) - [Fonte](https://vanilla.delldesignsystem.com/3.2.0/iframe.html?id=components-search--docs&viewMode=docs) - [Fonte](https://vanilla.delldesignsystem.com/3.2.0/iframe.html?id=getting-started-installation--docs&viewMode=docs) - [Consulte a especificação de apoio](https://vanilla.delldesignsystem.com/3.2.0/iframe.html?id=components-search--docs&viewMode=docs) - [Consulte a especificação de apoio](https://vanilla.delldesignsystem.com/3.2.0/iframe.html?id=getting-started-installation--docs&viewMode=docs) - [Consulte a especificação de apoio](https://www.delldesignsystem.com/components/text-input/?tab=Design) - [Consulte a especificação de apoio](https://www.delldesignsystem.com/getting-started/tokens) - [Consulte a especificação de apoio](https://www.delldesignsystem.com/foundations/typography/) - [Consulte a especificação de apoio](https://www.delldesignsystem.com/foundations/spacing) - [Consulte a especificação de apoio](https://www.delldesignsystem.com/foundations/grid) - [Consulte a especificação de apoio](https://www.delldesignsystem.com/components/search) - [Referência de código](https://www.delldesignsystem.com/components/search) - [Referência de código](https://vanilla.delldesignsystem.com/3.2.0/iframe.html?id=components-search--docs&viewMode=docs) - [Instalação do DDS 3.2.0 Acesso ao pacote interno, CDN pública para protótipos e pacotes de estilos necessários.](https://vanilla.delldesignsystem.com/3.2.0/iframe.html?id=getting-started-installation--docs&viewMode=docs) - [Implementação da busca A busca é composta com o InputGroup; não há um componente Search API independente.](https://vanilla.delldesignsystem.com/3.2.0/iframe.html?id=components-search--docs&viewMode=docs) - [Design da busca Comportamentos de busca manual e automática, rótulos de escopo e pontos de referência.](https://www.delldesignsystem.com/components/search) - [Espaçamento Onze etapas semânticas de espaçamento.](https://www.delldesignsystem.com/foundations/spacing) - [Tipografia Escalas padrão e compacta.](https://www.delldesignsystem.com/foundations/typography/) - [Tokens dos campos de entrada Cores semânticas documentadas para campos de entrada.](https://www.delldesignsystem.com/components/text-input/?tab=Design) - [Arquitetura de tokens Limites entre tokens globais, semânticos e de componentes.](https://www.delldesignsystem.com/getting-started/tokens) - [Grade Densidade e ritmo de quatro pixels.](https://www.delldesignsystem.com/foundations/grid)