Crie uma busca de dispositivos com escopo definido usando o DDS v3: cores semânticas, escala tipográfica responsiva, espaçamento por tokens e uma composição InputGroup cujo comportamento de filtragem cabe à aplicação.
Interpretação independente de DDS v3 por HTML/CSS, com espaçamento, tipografia e cores documentadas de entrada clara; fonte alternativa do sistema. · Referência de implementação
02
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
Digite o nome ou a etiqueta de um dispositivo; os resultados atuais permanecem até o envio.
Envie o formulário e atualize a contagem de resultados com base na matriz local filtrada.
Inspecione um resultado ou limpe a consulta; mantenha o foco no controle que iniciou a ação.
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.
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.
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.
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.
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.
html
<!doctype html><html lang="en"><meta charset="utf-8"><meta name="viewport" content="width=device-width,initial-scale=1"><title>Device inventory — DDS v3 study</title><style>*{box-sizing:border-box}body{margin:0;font:16px/24px Arial,sans-serif;color:#1d2c3b;background:white}header{padding:16px 32px;border-bottom:1px solid #c5d4e3;color:#00468b}main{padding:32px;max-width:1200px;margin:auto}h1{font-size:48px;line-height:56px;font-weight:300;margin:16px 0}h2{font-size:24px;line-height:32px;font-weight:400}label{display:block;font-weight:bold;margin-bottom:8px}.search{display:flex;gap:8px;align-items:stretch}.input{border:1px solid #00468b;display:flex;align-items:center;flex:1;min-width:0}.input span{padding:8px 12px}input{border:0;padding:12px 0;width:100%;min-width:0;font:inherit;background:transparent;color:inherit}button{font:inherit;cursor:pointer;padding:8px 16px;background:white;color:#00468b;border:1px solid #00468b}button:hover{background:#ebf1f6}button:focus-visible,input:focus-visible{outline:3px solid #00468b;outline-offset:3px}.input button{border:0}.submit{background:#00468b;color:white}.submit:hover{background:#003567}.helper{font-size:14px;line-height:20px;color:#516478}.layout{display:grid;grid-template-columns:minmax(0,1fr) 300px;gap:32px;margin-top:24px}.result{display:flex;text-align:left;align-items:center;gap:16px;width:100%;padding:16px;margin-bottom:12px;border:1px solid #c5d4e3;color:#1d2c3b}.result[aria-pressed=true]{border:2px solid #00468b;padding:15px;background:#ebf1f6}.result strong{display:block}.result small{display:block;font-size:14px}.device{width:64px;height:40px;border:3px solid #516478;border-radius:3px;background:linear-gradient(140deg,#dcebf6,#86afce);position:relative;flex-shrink:0}.device:after{content:'';position:absolute;bottom:-8px;left:-7px;right:-7px;height:4px;background:#516478;border-radius:0 0 4px 4px}.device.desktop{width:28px;height:48px;background:#c5d4e3;margin:0 18px}.device.desktop:after{display:none}aside{background:#ebf1f6;padding:24px;align-self:start}aside h2{margin-top:0}dt{font-size:12px;color:#516478;margin-top:16px}dd{margin:4px 0 0}footer{padding:16px 32px;border-top:1px solid #c5d4e3;font-size:12px;line-height:20px;color:#516478}#empty{padding:24px;background:#ebf1f6}#count{font-size:14px;margin:24px 0 0}@media(max-width:1023px){h1{font-size:40px;line-height:48px}}@media(max-width:650px){main{padding:16px}.layout{grid-template-columns:1fr}.search{flex-wrap:wrap}.input{flex-basis:100%}.submit{width:100%}header,footer{padding:16px}}</style><header>DEVICE OPERATIONS <span style="float:right;font-size:12px">Local sample inventory</span></header><main><h1>Find a device</h1><p>Review model, location and support coverage in one place.</p><form role="search" aria-label="Device inventory" id="form"><label for="query">Search devices</label><p class="helper" id="help">Enter a model or asset tag. Results change after you submit.</p><div class="search"><div class="input"><span aria-hidden="true">⌕</span><input id="query" type="search" aria-describedby="help"><button type="button" id="clear" hidden aria-label="Clear device search">Clear</button></div><button class="submit" type="submit">Search devices</button></div></form><p id="count" role="status"></p><div class="layout"><section aria-label="Matching devices"><div id="results"></div><div id="empty" hidden>No devices match this query. Clear the search to view the sample inventory.</div></section><aside aria-label="Device details"><span class="helper">SELECTED DEVICE</span><h2 id="name"></h2><dl><dt>Asset tag</dt><dd id="tag"></dd><dt>Location</dt><dd id="location"></dd><dt>Support coverage</dt><dd id="coverage"></dd><dt>Record source</dt><dd>Local demonstration data</dd></dl></aside></div></main><footer>Independent HTML/CSS interpretation of DDS v3. Published light-mode colors, spacing and type sizes; system fallback font. No Dell services are connected.</footer><script>
const devices=[{name:'Latitude 7450',tag:'LT-104',location:'London · Design studio',coverage:'Through 30 June 2027',kind:'laptop'},{name:'Precision 5680',tag:'PR-208',location:'Berlin · Engineering lab',coverage:'Through 15 March 2028',kind:'laptop'},{name:'OptiPlex 7020',tag:'OP-316',location:'Amsterdam · Front desk',coverage:'Through 20 August 2027',kind:'desktop'}];let selected=devices[0],applied='';const $=id=>document.getElementById(id);function render(){const matches=devices.filter(d=>(d.name+' '+d.tag).toLowerCase().includes(applied.toLowerCase()));$('count').textContent=matches.length+' matching device'+(matches.length===1?'':'s')+(applied?' for “'+applied+'”':'');$('results').replaceChildren();$('empty').hidden=matches.length>0;for(const d of matches){const b=document.createElement('button');b.className='result';b.setAttribute('aria-pressed',String(d===selected));const pic=document.createElement('span');pic.className='device '+d.kind;pic.setAttribute('aria-hidden','true');const label=document.createElement('span'),strong=document.createElement('strong'),small=document.createElement('small');strong.textContent=d.name;small.textContent=d.tag+' · '+d.location.split(' · ')[0];label.append(strong,small);b.append(pic,label);b.onclick=()=>{selected=d;render()};$('results').append(b)}for(const key of ['name','tag','location','coverage'])$(key).textContent=selected[key]}
$('form').onsubmit=e=>{e.preventDefault();applied=$('query').value.trim();render()};$('query').oninput=()=>{$('clear').hidden=!$('query').value};$('clear').onclick=()=>{$('query').value='';applied='';$('clear').hidden=true;render();$('query').focus()};render();
</script></html>
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.
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.
javascript
import { InputGroup } from '@dds/components';
InputGroup(document.querySelector('#device-search'));
// Use the complete form and event handlers in the setup example.
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.
04
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.
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.
05
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.
