Um guia de referência do Lightning para trabalhar com registros densos: espaçamento, tipografia e cores semânticas reais, espaço de trabalho editável para casos, validação de campos e histórico de atividades que reflete as alterações locais.
Guia OpenDesign8 capítulos40 entradas de referênciaGuia de aplicação original
01
Prévia da interface do sistema de design Salesforce Lightning
Altere a prioridade ou o status, valide uma nota de atualização, salve um registro de atividade local e descarte um rascunho posterior sem alterar o registro salvo.
CSS nativo do SLDS 2.264.1 e recursos do pacote; implementação original e acessível de HTML e JavaScript. Sem API do Salesforce nem ambiente de execução do Lightning. · Referência de implementação
02
Referência de design do sistema de design Salesforce Lightning
CSS nativo publicado do @salesforce-ux/design-system 2.264.1 e exportação de tokens ui-force. Esta é uma referência fixada ao blueprint clássico, não uma alegação de compatibilidade com a linguagem de design mais recente do SLDS 2 nem com um ambiente de execução do Lightning Web Components. O repositório histórico upstream está arquivado.
Layout e contexto do registro no sistema de design Salesforce Lightning
Mantenha a identificação do registro acima das tarefas locais
O cabeçalho da página exibe o número do caso, o assunto, a conta e o responsável. Esses valores identificam o registro antes de o usuário alterar qualquer campo. O selo de status resume o registro local salvo, por isso muda ao salvar, e não acompanha um valor selecionado ainda não confirmado.
Separe os detalhes da atividade
A região mais ampla reúne o contexto do cliente e o formulário de edição. A região secundária contém um histórico ordenado. Essa separação permite comparar o trabalho solicitado com as alterações já registradas sem navegar para outra tela. No layout para dispositivos móveis, essas regiões são empilhadas na mesma ordem semântica.
Salesforce Lightning Cores semânticas e estados do sistema de design
Interprete os nomes dos tokens como papéis
A exportação ui-force diferencia texto padrão, texto secundário, bordas de seleção e fundos de botões da marca. O exemplo mantém o texto principal escuro, os metadados discretos e a ação principal azul. O vermelho é usado no campo inválido e na mensagem de recuperação correspondente, não em todo valor não salvo.
Não dependa apenas da cor para indicar o estado
A prioridade e o status aparecem por extenso no resumo e na nova entrada de atividade. O estado de erro combina o modificador nativo slds-has-error com aria-invalid e uma mensagem associada à área de texto. A confirmação local aparece em uma região de status; apenas um destaque verde não informaria ao usuário o que foi salvo.
Salesforce Lightning Escala tipográfica e densidade de registros do sistema de design
Use hierarquia sem títulos exagerados
A escala tipográfica numerada publicada começa em 0.625rem e vai até 2.625rem. Um espaço de trabalho de casos não precisa usar o maior tamanho de exibição em todas as regiões. O título nativo do cabeçalho da página identifica o registro, os títulos dos cartões distinguem as áreas e o texto do corpo apresenta a solicitação do cliente e a observação.
Mantenha os assuntos longos dos registros intactos
O layout personalizado permite que o título da página quebre em várias linhas, em vez de truncar o assunto em uma largura reduzida. Os metadados também podem ocupar linhas adicionais. Não reduza todo o texto para acomodar o nome longo de uma conta; teste assuntos e nomes de responsáveis com comprimentos realistas antes de decidir onde truncar com segurança e oferecer uma alternativa que exiba o texto completo.
Salesforce Lightning Espaçamento e estrutura de blueprint do sistema de design
Não misture as exportações clássica e variável de espaçamento
Este guia lista SPACING_* de ui-force. A exportação separada var-spacing contém valores compactos diferentes; VAR_SPACING_MEDIUM não equivale a SPACING_MEDIUM. Misturar valores com base apenas em nomes parecidos pode deixar o formulário irregular. Escolha o sistema de densidade desejado e mantenha a respectiva origem.
Use o contêiner do campo de maneira consistente
Salesforce Lightning Comportamento de rascunhos e registros salvos no sistema de design
Mantenha o registro salvo separado dos controles
O script mantém a última prioridade e o último status salvos em um objeto de registro. A edição dos campos de seleção altera apenas o rascunho. Ao salvar, os valores são copiados para esse objeto, o resumo é atualizado e um item de atividade é adicionado. Assim, descartar o rascunho continua fazendo sentido mesmo após várias edições salvas.
Não simule sucesso no backend
O exemplo não inclui busca por ID de registro, modelo de permissões, API nem banco de dados. O botão e a confirmação deixam explícito que a operação é local. Uma integração de produção com Salesforce precisaria das APIs de dados apropriadas e das respostas do servidor antes de atualizar o status definitivo de um registro. As classes CSS não oferecem essas garantias.
Salesforce Lightning Validação de campos e atividade do sistema de design
Faça a observação explicar a alteração
A regra definida exige dez caracteres após a remoção de espaços nas extremidades e limita a área de texto a 300 caracteres. Uma observação vazia ou curta impede qualquer alteração no registro, exibe o erro do campo e move o foco para a observação. A edição limpa o erro desatualizado; ao salvar novamente, o valor atual é validado mais uma vez.
Tente enviar sem uma observação e confirme que os valores do resumo salvo não mudam.
Digite uma observação útil, salve e confira a entrada de atividade mais recente.
Altere os campos novamente, descarte o rascunho e confirme que os últimos valores salvos foram restaurados.
Adicione uma entrada de alteração fácil de ler
Uma atualização local bem-sucedida cria um título de atividade com base no status e na prioridade salvos, seguido da observação exata como conteúdo de texto. A nova entrada é inserida no início, para que a alteração mais recente apareça primeiro. A observação nunca é interpretada como HTML, e a atividade inicial estática permanece abaixo das entradas locais do usuário.
Salesforce Lightning Formulários acessíveis e recuperação no sistema de design
Use rótulos reais e descrições explícitas
Os campos de seleção e a área de texto têm rótulos visíveis associados por meio de for e id. A observação referencia os textos de ajuda e de erro, e o indicador de campo obrigatório tem um título legível. As ações principal e de descarte são botões com os tipos submit e button apropriados, evitando um envio acidental quando o usuário descarta um rascunho.
Após descartar, retorne a um ponto previsível
Descartar restaura a prioridade e o status salvos, limpa a observação e o erro do campo e move o foco para o controle de prioridade. A ação não exclui o histórico de atividades nem redefine o registro ao estado inicial. Essa distinção é importante quando o usuário salva uma alteração, experimenta outra e cancela esse segundo rascunho.
Salesforce Lightning Integração e escopo de versão do sistema de design CSS
Instale o pacote de estilos publicado
O código-fonte completo importa a distribuição CSS com versão fixada e uma pequena folha de estilos da aplicação. O Vite resolve os URLs das fontes e imagens do pacote. Em seguida, HTML e JavaScript fornecem o comportamento do registro; esta é uma implementação de blueprint CSS, não um wrapper em torno de lightning-record-edit-form.
O pacote nativo CSS fornece a aparência dos campos, botões e cartões.
O HTML original fornece a estrutura e os rótulos do registro.
O JavaScript original controla o estado do rascunho, a validação e a atividade local.
Trate o código-fonte arquivado como uma referência versionada
Salesforce Lightning Exemplos de componentes do sistema de design
index.html — espaço de trabalho completo para casos
Resumo do registro, formulário e atividade inicial com semântica HTML.
html
<!doctype html>
<html lang="en">
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1">
<title>Local case workspace</title>
<body>
<main class="slds-example">
<header class="slds-page-header">
<p class="slds-text-title_caps">Service workspace · fictional record</p>
<div class="record-title">
<div>
<h1 class="slds-page-header__title">
Case 004218 · Delivery address update
</h1>
<p class="slds-text-body_small">
Northstar Studio · Opened today · Owner: Maya Chen
</p>
</div>
<span id="status-badge" class="slds-badge">New</span>
</div>
</header>
<div class="record-grid">
<section class="slds-card">
<div class="slds-card__header">
<h2 class="slds-card__header-title">Case details</h2>
</div>
<div class="slds-card__body slds-card__body_inner">
<div class="summary">
<div>
<span class="slds-text-title">Contact</span>
<p>Alex Morgan</p>
</div>
<div>
<span class="slds-text-title">Channel</span>
<p>Email</p>
</div>
<div>
<span class="slds-text-title">Priority</span>
<p id="read-priority">Medium</p>
</div>
<div>
<span class="slds-text-title">Status</span>
<p id="read-status">New</p>
</div>
</div>
<div class="slds-box slds-theme_shade slds-m-top_medium">
<h3 class="slds-text-heading_small">Customer request</h3>
<p class="slds-m-top_small">
Please update the delivery location for order NS-1842 before it
leaves the warehouse. The contact is available to confirm the new
address.
</p>
</div>
<form id="case-form" class="slds-m-top_large" novalidate>
<h3 class="slds-text-heading_small slds-m-bottom_medium">
Update the local case
</h3>
<div class="field-grid">
<div class="slds-form-element">
<label class="slds-form-element__label" for="priority"
>Priority</label
>
<div class="slds-form-element__control">
<div class="slds-select_container">
<select class="slds-select" id="priority">
<option>Low</option>
<option selected>Medium</option>
<option>High</option>
</select>
</div>
</div>
</div>
<div class="slds-form-element">
<label class="slds-form-element__label" for="case-status"
>Status</label
>
<div class="slds-form-element__control">
<div class="slds-select_container">
<select class="slds-select" id="case-status">
<option>New</option>
<option>Working</option>
<option>Escalated</option>
<option>Closed</option>
</select>
</div>
</div>
</div>
</div>
<div id="note-field" class="slds-form-element slds-m-top_medium">
<label class="slds-form-element__label" for="case-note"
><abbr class="slds-required" title="required">*</abbr> Update
note</label
>
<div class="slds-form-element__control">
<textarea
class="slds-textarea"
id="case-note"
rows="3"
maxlength="300"
aria-describedby="note-help note-error"
></textarea>
</div>
<p id="note-help" class="slds-form-element__help">
Explain the change in 10–300 characters. Nothing is sent to
Salesforce.
</p>
<p id="note-error" class="slds-form-element__help" hidden>
Enter an update note of at least 10 characters.
</p>
</div>
<div class="form-actions">
<button
type="button"
id="cancel"
class="slds-button slds-button_neutral"
>
Discard draft</button
><button type="submit" class="slds-button slds-button_brand">
Save local update
</button>
</div>
<p id="save-result" class="slds-m-top_small" role="status"></p>
</form>
</div>
</section>
<aside class="slds-card">
<div class="slds-card__header">
<h2 class="slds-card__header-title">Case activity</h2>
</div>
<div class="slds-card__body slds-card__body_inner">
<p class="slds-text-body_small slds-m-bottom_medium">
Newest updates first
</p>
<ol id="activity" class="activity">
<li>
<span class="activity-dot"></span>
<div>
<h3 class="slds-text-heading_small">Case opened</h3>
<p>Customer requested a delivery address change.</p>
<small>Initial example activity</small>
</div>
</li>
</ol>
</div>
</aside>
</div>
<footer>
Native SLDS 2.264.1 CSS with original HTML and JavaScript. Local
demonstration; no Salesforce record or message is created.
</footer>
</main>
<script type="module" src="/src/main.js"></script>
</body></html>
Salve como src/slds.css; os estilos do pacote permanecem separados.
04
Salesforce Lightning Configuração de agente do sistema de design
Ponto de partida para implementação
Exemplo de CSS nativo com versão fixada; não é uma implantação em uma organização Salesforce. Ao redistribuir os recursos incluídos no pacote, mantenha os avisos sobre o pacote e os recursos.
sh
npm create vite@latest slds-case -- --template vanilla
cd slds-case
npm install
npm install @salesforce-ux/[email protected]
# Replace index.html; add src/main.js and src/slds.css from the complete examples.
npm run dev
Um prompt para seu projeto
Prompt para agente de IA
Crie um espaço de trabalho focado em casos usando os blueprints CSS do SLDS com versão fixada. Mantenha distintas a identidade do registro, o contexto do cliente, o estado salvo e o rascunho em edição. Use a estrutura exata dos campos, referências reais a tokens e o código-fonte completo apresentado aqui. Valide a observação antes de alterar o resumo, preserve a atividade local após descartar e não sugira que há uma conexão com o backend do Salesforce.
05
Salesforce Lightning Fontes e escopo do sistema de design
Guia de OpenDesign para o pacote CSS do SLDS com versão fixada. A prévia usa CSS nativo com HTML e JavaScript originais, dados fictícios de casos e estado local. Ela não carrega Lightning Web Components nem se conecta ao Salesforce. O repositório upstream está arquivado; para trabalhos em produção, avalie as orientações atuais da plataforma Salesforce.
