# Sistema de design Zendesk Garden ## Zendesk Garden Prévia da interface do sistema de design Alterne a visibilidade da resposta, valide um rascunho curto, salve uma captura local e limpe o próximo rascunho. ## Referência do sistema de design Zendesk Garden Garden nativo 9.16.1 React ThemeProvider, Buttons e Forms; fluxo original de criação de rascunho local. ### Raio dos cantos | Nome / Regra | Valor / Configuração | Uso | | --- | --- | --- | | borderRadii.sm | 2px | Escolha o formato conforme a função do componente; o canto médio padrão não é um formato de pílula. | | borderRadii.md | 4px | Escolha o formato conforme a função do componente; o canto médio padrão não é um formato de pílula. | | borderRadii.lg | 8px | Escolha o formato conforme a função do componente; o canto médio padrão não é um formato de pílula. | ### Pontos de quebra responsivos | Nome / Regra | Valor / Configuração | Uso | | --- | --- | --- | | breakpoints.xs | 0px | Pontos de quebra do tema, não uma garantia de que a aplicação alterne todas as regiões em cada etapa. | | breakpoints.sm | 576px | Pontos de quebra do tema, não uma garantia de que a aplicação alterne todas as regiões em cada etapa. | | breakpoints.md | 768px | Pontos de quebra do tema, não uma garantia de que a aplicação alterne todas as regiões em cada etapa. | | breakpoints.lg | 992px | Pontos de quebra do tema, não uma garantia de que a aplicação alterne todas as regiões em cada etapa. | | breakpoints.xl | 1200px | Pontos de quebra do tema, não uma garantia de que a aplicação alterne todas as regiões em cada etapa. | ### Tamanhos de fonte | Nome / Regra | Valor / Configuração | Uso | | --- | --- | --- | | fontSizes.xs | 10px | Mantenha distintas as funções de corpo, rótulo, metadados e título. | | fontSizes.sm | 12px | Mantenha distintas as funções de corpo, rótulo, metadados e título. | | fontSizes.md | 14px | Mantenha distintas as funções de corpo, rótulo, metadados e título. | | fontSizes.lg | 18px | Mantenha distintas as funções de corpo, rótulo, metadados e título. | | fontSizes.xl | 22px | Mantenha distintas as funções de corpo, rótulo, metadados e título. | | fontSizes.xxl | 26px | Mantenha distintas as funções de corpo, rótulo, metadados e título. | | fontSizes.xxxl | 36px | Mantenha distintas as funções de corpo, rótulo, metadados e título. | ### Alturas de linha | Nome / Regra | Valor / Configuração | Uso | | --- | --- | --- | | lineHeights.sm | 16px | Use em conjunto com a função de texto; não derive todas as alturas de linha do tamanho da fonte. | | lineHeights.md | 20px | Use em conjunto com a função de texto; não derive todas as alturas de linha do tamanho da fonte. | | lineHeights.lg | 24px | Use em conjunto com a função de texto; não derive todas as alturas de linha do tamanho da fonte. | | lineHeights.xl | 28px | Use em conjunto com a função de texto; não derive todas as alturas de linha do tamanho da fonte. | | lineHeights.xxl | 32px | Use em conjunto com a função de texto; não derive todas as alturas de linha do tamanho da fonte. | | lineHeights.xxxl | 44px | Use em conjunto com a função de texto; não derive todas as alturas de linha do tamanho da fonte. | ### Escala de espaçamento | Nome / Regra | Valor / Configuração | Uso | | --- | --- | --- | | space.base | 4 | Valores de espaçamento do tema para manter um ritmo previsível. | | space.xxs | 4px | Valores de espaçamento do tema para manter um ritmo previsível. | | space.xs | 8px | Valores de espaçamento do tema para manter um ritmo previsível. | | space.sm | 12px | Valores de espaçamento do tema para manter um ritmo previsível. | | space.md | 20px | Valores de espaçamento do tema para manter um ritmo previsível. | | space.lg | 32px | Valores de espaçamento do tema para manter um ritmo previsível. | | space.xl | 40px | Valores de espaçamento do tema para manter um ritmo previsível. | | space.xxl | 48px | Valores de espaçamento do tema para manter um ritmo previsível. | ### Mapeamento de funções semânticas para o tema claro | Nome / Regra | Valor / Configuração | Uso | | --- | --- | --- | | colors.variables.light.background.default | palette.white | Alias de função do tema; resolva-o por meio do matiz e da paleta selecionados, em vez de tratá-lo como uma cor CSS literal. | | colors.variables.light.background.subtle | neutralHue.100 | Alias de função do tema; resolva-o por meio do matiz e da paleta selecionados, em vez de tratá-lo como uma cor CSS literal. | | colors.variables.light.background.danger | dangerHue.100 | Alias de função do tema; resolva-o por meio do matiz e da paleta selecionados, em vez de tratá-lo como uma cor CSS literal. | | colors.variables.light.background.primaryEmphasis | primaryHue.700 | Alias de função do tema; resolva-o por meio do matiz e da paleta selecionados, em vez de tratá-lo como uma cor CSS literal. | | colors.variables.light.foreground.default | neutralHue.900 | Alias de função do tema; resolva-o por meio do matiz e da paleta selecionados, em vez de tratá-lo como uma cor CSS literal. | | colors.variables.light.foreground.subtle | neutralHue.700 | Alias de função do tema; resolva-o por meio do matiz e da paleta selecionados, em vez de tratá-lo como uma cor CSS literal. | | colors.variables.light.foreground.onEmphasis | palette.white | Alias de função do tema; resolva-o por meio do matiz e da paleta selecionados, em vez de tratá-lo como uma cor CSS literal. | | colors.variables.light.foreground.primary | primaryHue.700 | Alias de função do tema; resolva-o por meio do matiz e da paleta selecionados, em vez de tratá-lo como uma cor CSS literal. | | colors.variables.light.foreground.danger | dangerHue.700 | Alias de função do tema; resolva-o por meio do matiz e da paleta selecionados, em vez de tratá-lo como uma cor CSS literal. | | colors.variables.light.border.default | neutralHue.300 | Alias de função do tema; resolva-o por meio do matiz e da paleta selecionados, em vez de tratá-lo como uma cor CSS literal. | | colors.variables.light.border.subtle | neutralHue.200 | Alias de função do tema; resolva-o por meio do matiz e da paleta selecionados, em vez de tratá-lo como uma cor CSS literal. | | colors.variables.light.border.danger | dangerHue.300 | Alias de função do tema; resolva-o por meio do matiz e da paleta selecionados, em vez de tratá-lo como uma cor CSS literal. | | colors.variables.light.border.primaryEmphasis | primaryHue.700 | Alias de função do tema; resolva-o por meio do matiz e da paleta selecionados, em vez de tratá-lo como uma cor CSS literal. | ## Guia completo do sistema de design Zendesk Garden 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. ## 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 Um Select nativo permite escolher Resposta pública ou Nota interna. O rótulo e a orientação são atualizados conforme o modo, e a captura salva mantém esse modo. A ação continua sendo Salvar rascunho local nas duas opções, deixando claro que selecionar Resposta pública não envia uma mensagem. ## 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. 1. Envie um rascunho curto e verifique o erro no campo. 2. Selecione Nota interna, escreva uma nota útil e salve. 3. 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 Para que isso se torne uma ferramenta de suporte de verdade, adicione dados de tickets autorizados, verificações de permissão e um envio ou rascunho verificado API, com estados de processamento e falha. Mantenha a semântica de captura local até que essas respostas existam. Não altere o rótulo do botão para Enviar apenas porque a validação do formulário foi aprovada. ## 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. ``` 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 (
SUPPORT WORKSPACE / FICTIONAL TICKET

Help with an invoice address

Ticket #1028 · Nadia Walker · Email channel

Nadia Walker Customer · example message

Could you update the company address on our next invoice? The billing contact has changed.

{items.map((i, n) => (
{i.mode === "public" ? "Public reply draft" : "Internal note draft"} Saved locally · not sent

{i.text}

))}

Compose a draft

{mode === "public" ? "Prepared for the customer; this demo will not send it." : "Internal context for the support team; saved only in this page."}