Um guia Garden para tarefas de suporte, com aliases de tema reais, escalas de tipografia e raio, um editor de resposta completo, rascunhos locais que levam em conta a visibilidade e recuperação de campos.
Estrutura do espaço de trabalho de suporte do sistema de design Zendesk Garden
Mantenha a solicitação do cliente à vista
Um editor de respostas de suporte precisa de contexto suficiente para evitar uma resposta bem apresentada, mas irrelevante. O exemplo exibe a solicitação do cliente acima do rascunho, com a pessoa solicitante, a organização e o assunto ao lado. A interface é compacta o bastante para permitir comparar o novo texto com a pergunta original sem trocar de tela.
Separe o histórico do rascunho ativo
As entradas locais salvas aparecem acima do editor com um rótulo explícito de visibilidade. O rascunho ativo permanece no Textarea nativo. Ao salvar, uma captura é adicionada e o campo é limpo, impedindo que edições posteriores alterem silenciosamente uma nota já salva.
Funções e paleta do tema do sistema de design Zendesk Garden
Entenda os aliases antes de copiar cores
O DEFAULT_THEME do Garden 9 mapeia funções semânticas para famílias de matizes e valores numerados da paleta. Uma função como background.primaryEmphasis não é um valor hexadecimal literal. A tabela de referência mantém esses aliases para que um tema personalizado possa alterar o matiz primário sem deixar trechos azuis codificados diretamente nos controles nativos.
Mantenha as áreas criadas compatíveis com o provider
ThemeProvider fornece a estilização dos componentes nativos. Este exemplo usa DEFAULT_THEME e um espaço de trabalho personalizado claro correspondente; não adiciona uma alternância fictícia de modo escuro que só altera o fundo ao redor. Se adicionar suporte a esquemas de cores, adapte as cores personalizadas das mensagens e da barra lateral junto com as do provider.
Tipografia e densidade do sistema de design Zendesk Garden
Mantenha legível o texto de trabalho de 14px
O tema padrão oferece uma função média de 14px e uma altura de linha média de 20px, além de funções distintas de 12px para informações auxiliares e de 18px para títulos. O exemplo usa um título de ticket de 26px e metadados contextuais menores. A mensagem original do cliente e as notas salvas permanecem no texto normal do corpo, em vez de serem reduzidas a rótulos.
Permita que respostas longas quebrem linhas naturalmente
O texto salvo preserva as quebras de linha e ajusta palavras longas à largura disponível. Assim, uma tela estreita de celular mantém a nota inteira visível sem exigir rolagem horizontal. O editor cresce verticalmente por meio do textarea, sem transformar todo o histórico de mensagens em uma área com rolagem interna.
Composição de campos e botões do sistema de design Zendesk Garden
Associe o rótulo, a orientação e o erro
O Field nativo agrupa Label, Hint, Textarea e Message condicional. A propriedade de validação altera a aparência do textarea quando a regra de comprimento mínimo definida pela aplicação não é atendida. Isso segue a composição do componente, em vez de aplicar a cor de erro a um parágrafo não relacionado fora do campo.
Use um controle próprio para a visibilidade
Estado do rascunho e histórico local do sistema de design Zendesk Garden
Valide antes de adicionar uma mensagem
A aplicação exige pelo menos doze caracteres após remover os espaços nas extremidades. Se o envio falhar, o rascunho permanece intacto, uma mensagem aparece no campo e o foco volta para o textarea. A edição limpa o erro antigo; um envio posterior verifica novamente o texto atual. Essa regra é um comportamento da aplicação, não um padrão não documentado do Garden.
Diferencie visualmente as notas internas
As entradas internas têm um fundo acolhedor e o rótulo escrito Rascunho de nota interna. As entradas públicas usam a superfície padrão. Ambas indicam explicitamente que não foram enviadas. Essa distinção demonstra o contexto de visibilidade sem imitar uma conversa ativa do Zendesk nem sugerir que outra pessoa recebeu algo.
Áreas de trabalho responsivas do sistema de design Zendesk Garden
Coloque o contexto abaixo da tarefa principal
No ponto de quebra da aplicação, o contexto do ticket passa para baixo da conversa e do editor. A ordem do documento subjacente permanece a mesma. Em um celular, o controle de visibilidade ocupa toda a largura disponível e a linha de ações quebra para que os rótulos dos botões não fiquem comprimidos.
Use raios moderados e divisórias finas
Os controles nativos usam a escala de raios de 2px, 4px e 8px. Os painéis da mensagem original usam cantos de 4px e bordas sutis. O destaque visual mais forte deve ficar na ação ativa e no estado de validação, não em sombras ao redor de cada mensagem.
Validação e recuperação pelo teclado do sistema de design Zendesk Garden
Teste todo o fluxo de criação de rascunho
Um teste útil começa com um envio inválido e, em seguida, verifica se digitar, alterar a visibilidade, salvar e limpar mantêm a interface compreensível. O código usa uma ref React para restaurar o foco após um erro ou uma ação de limpeza. A contagem de resultados é anunciada em uma região de status.
Envie um rascunho curto e verifique o erro no campo.
Selecione Nota interna, escreva uma nota útil e salve.
Limpe um rascunho posterior e confirme que a captura local salva permanece.
Mantenha uma ordem de leitura estável
A solicitação vem antes do rascunho, e as novas capturas locais salvas permanecem em ordem cronológica. Os botões nativos apresentam suas ações como texto. Não há atalhos de teclado nem envio automático ocultos no editor, e a escolha de visibilidade permanece em um select com rótulo.
Integração React do sistema de design Zendesk Garden
Instale versões compatíveis dos pacotes
O exemplo fixa a tematização, os botões e os formulários na versão 9.16.1 e usa React 18 com styled-components. Misturar versões mais antigas dos pacotes Garden pode gerar expectativas incompatíveis em relação ao tema. A entrada JSX completa inclui o provider, a composição do campo e o estado local, enquanto o arquivo CSS contém somente o layout definido aqui.
@zendeskgarden/react-theming 9.16.1
@zendeskgarden/react-buttons 9.16.1
@zendeskgarden/react-forms 9.16.1
Estenda somente a camada de serviço ausente
Exemplos de componentes do sistema de design Zendesk Garden
main.jsx — exemplo funcional completo
Escreva uma resposta com o contexto do cliente à vista. O código abaixo é a entrada React completa, incluindo todos os estados e a validação.
jsx
import React, { useState, useRef } from "react";
import { createRoot } from "react-dom/client";
import { ThemeProvider, DEFAULT_THEME } from "@zendeskgarden/react-theming";
import { Button } from "@zendeskgarden/react-buttons";
import {
Field,
Label,
Textarea,
Hint,
Message,
Select,
} from "@zendeskgarden/react-forms";
import "./garden.css";
function App() {
const [mode, setMode] = useState("public"),
[text, setText] = useState(""),
[error, setError] = useState(false),
[items, setItems] = useState([]);
const ref = useRef();
function submit(e) {
e.preventDefault();
if (text.trim().length < 12) {
setError(true);
ref.current.focus();
return;
}
setItems([...items, { mode, text: text.trim() }]);
setText("");
setError(false);
}
return (
<ThemeProvider theme={DEFAULT_THEME}>
<main className="garden-workspace">
<header>
<span>SUPPORT WORKSPACE / FICTIONAL TICKET</span>
<h1>Help with an invoice address</h1>
<p>Ticket #1028 · Nadia Walker · Email channel</p>
</header>
<div className="garden-grid">
<section>
<div className="message customer">
<strong>Nadia Walker</strong>
<small>Customer · example message</small>
<p>
Could you update the company address on our next invoice? The
billing contact has changed.
</p>
</div>
{items.map((i, n) => (
<article className={"message " + i.mode} key={n}>
<strong>
{i.mode === "public"
? "Public reply draft"
: "Internal note draft"}
</strong>
<small>Saved locally · not sent</small>
<p>{i.text}</p>
</article>
))}
<form onSubmit={submit} noValidate>
<div className="composer-head">
<h2>Compose a draft</h2>
<Field>
<Label>Visibility</Label>
<Select
value={mode}
onChange={(e) => setMode(e.target.value)}
>
<option value="public">Public reply</option>
<option value="internal">Internal note</option>
</Select>
</Field>
</div>
<Field>
<Label>
{mode === "public" ? "Reply text" : "Internal note"}
</Label>
<Hint>
{mode === "public"
? "Prepared for the customer; this demo will not send it."
: "Internal context for the support team; saved only in this page."}
</Hint>
<Textarea
ref={ref}
value={text}
rows={5}
validation={error ? "error" : undefined}
onChange={(e) => {
setText(e.target.value);
setError(false);
}}
/>
{error && (
<Message validation="error">
Write at least 12 characters.
</Message>
)}
</Field>
<div className="composer-actions">
<span>{text.length} characters</span>
<Button
type="button"
onClick={() => {
setText("");
setError(false);
ref.current.focus();
}}
>
Clear draft
</Button>
<Button isPrimary type="submit">
Save local draft
</Button>
</div>
</form>
<p role="status">
{items.length > 0
? `${items.length} draft${items.length === 1 ? "" : "s"} saved locally. No message sent.`
: ""}
</p>
</section>
<aside>
<h2>Ticket context</h2>
<dl>
<dt>Requester</dt>
<dd>Nadia Walker</dd>
<dt>Organization</dt>
<dd>Northstar Studio</dd>
<dt>Priority</dt>
<dd>Normal</dd>
<dt>Topic</dt>
<dd>Billing details</dd>
</dl>
<div className="context-note">
<h3>Before replying</h3>
<ul>
<li>Confirm the billing contact.</li>
<li>Keep invoice identifiers out of public examples.</li>
<li>State whether the change affects future invoices.</li>
</ul>
</div>
</aside>
</div>
<footer>
Native Garden 9.16.1 React components. Original local drafting
workflow; no Zendesk connection.
</footer>
</main>
</ThemeProvider>
);
}
createRoot(document.getElementById("root")).render(<App />);
Crie um editor de respostas de suporte Garden com a composição nativa de Field/Label/Hint/Textarea/Message. Mantenha a visibilidade em cada captura de rascunho salva, valide antes de adicionar, preserve o contexto do cliente e diferencie salvar localmente de enviar. Use as funções exatas do tema e o código-fonte completo disponíveis aqui.
05
Fontes e escopo do sistema de design Zendesk Garden
Guia da aplicação OpenDesign. Os componentes nativos do Garden renderizam o exemplo; o conteúdo fictício do ticket e os rascunhos locais não se conectam ao Zendesk nem enviam mensagens.
