Guide Garden pour le support, avec de véritables alias de thème, des échelles typographiques et de rayons, un composeur de réponse complet, des brouillons locaux tenant compte de la visibilité et la récupération des champs.
Structure de l’espace de travail du système de design Zendesk Garden
Gardez la demande du client sous les yeux
Un éditeur de réponse pour le support doit afficher assez de contexte pour éviter une réponse soignée, mais hors sujet. Cet exemple place la demande du client au-dessus du brouillon, avec le demandeur, l’organisation et le sujet à côté. L’interface est suffisamment dense pour comparer le nouveau texte à la question d’origine sans changer d’écran.
Séparez l’historique du brouillon actif
Les entrées enregistrées localement apparaissent au-dessus de l’éditeur, avec une indication explicite de leur visibilité. Le brouillon actif reste dans le Textarea natif. L’enregistrement ajoute un instantané et vide ce champ, afin que les modifications ultérieures ne réécrivent pas silencieusement une note déjà enregistrée.
Rôles et palette du thème du système de design Zendesk Garden
Consultez les alias avant de copier les couleurs
Dans Garden 9 DEFAULT_THEME, les rôles sémantiques sont associés à des familles de teintes et à des valeurs numérotées de la palette. Un rôle tel que background.primaryEmphasis n’est pas une valeur hexadécimale littérale. Le tableau de référence conserve ces alias : un thème personnalisé peut ainsi changer la teinte principale sans laisser de fragments bleus codés en dur dans les contrôles natifs.
Assurez la compatibilité des zones personnalisées avec le fournisseur de thème
ThemeProvider fournit le style des composants natifs. Cet exemple utilise DEFAULT_THEME et un espace de travail personnalisé clair assorti ; il n’ajoute pas de faux bouton de mode sombre qui ne ferait que modifier l’arrière-plan environnant. Si vous ajoutez la prise en charge de color-scheme, adaptez les couleurs personnalisées des messages et de la barre latérale en même temps que celles du fournisseur.
Typographie et densité du système de design Zendesk Garden
Gardez le texte de travail en 14px lisible
Le thème par défaut propose un rôle moyen de 14px avec une hauteur de ligne moyenne de 20px, ainsi que des rôles distincts de 12px pour le texte secondaire et de 18px pour les titres. L’exemple utilise un titre de ticket de 26px et des métadonnées de contexte plus petites. Le message d’origine du client et les notes enregistrées restent en texte courant plutôt que d’être réduits à des libellés.
Laissez les longues réponses revenir naturellement à la ligne
Le texte enregistré conserve les sauts de ligne et permet aux mots longs de revenir à la ligne. Même sur un écran mobile étroit, la note complète reste visible sans défilement horizontal. L’éditeur s’agrandit verticalement grâce à son textarea, au lieu de transformer tout l’historique des messages en zone de défilement interne.
Composition des champs et des boutons du système de design Zendesk Garden
Associez le libellé, l’aide et l’erreur
Le composant Field natif regroupe Label, Hint, Textarea et le composant Message conditionnel. La propriété de validation modifie l’apparence du textarea lorsque la règle de longueur minimale définie par l’application n’est pas respectée. Cette approche suit la composition du composant, au lieu d’appliquer une couleur d’erreur à un paragraphe sans rapport situé en dehors du champ.
Prévoyez un contrôle distinct pour la visibilité
État du brouillon et historique local du système de design Zendesk Garden
Validez avant d’ajouter un message
L’application exige au moins douze caractères après suppression des espaces en début et en fin de texte. En cas d’échec, le brouillon est conservé, un message s’affiche dans le champ et le focus est placé sur le textarea. Une modification efface l’erreur devenue obsolète ; la soumission suivante vérifie à nouveau le texte actuel. Cette règle relève du comportement de l’application, et non d’une valeur par défaut non documentée de Garden.
Distinguez visuellement les notes internes
Les entrées internes ont un arrière-plan personnalisé chaleureux et portent le libellé explicite Internal note draft. Les entrées publiques utilisent la surface normale. Les deux indiquent explicitement Not sent. Cette distinction présente le contexte de visibilité sans imiter une conversation Zendesk en direct ni laisser entendre qu’une autre personne a reçu quoi que ce soit.
Zones de travail adaptatives du système de design Zendesk Garden
Placez le contexte sous la tâche principale
Au point de rupture de l’application, le contexte du ticket passe sous la conversation et l’éditeur. L’ordre des éléments dans le document reste inchangé. Sur un téléphone, le contrôle de visibilité occupe toute la largeur disponible et la rangée d’actions passe à la ligne afin que le texte des boutons ne soit pas comprimé.
Utilisez des arrondis modérés et des séparateurs fins
Les contrôles natifs utilisent l’échelle d’arrondi de 2px, 4px et 8px. Les panneaux de message personnalisés ont des angles de 4px et des bordures discrètes. Réservez l’accentuation visuelle la plus forte à l’action active et à l’état de validation, plutôt que d’ajouter des ombres autour de chaque message.
Validation et récupération au clavier du système de design Zendesk Garden
Testez l’ensemble du processus de rédaction
Un test utile commence par une soumission invalide, puis vérifie que la saisie, le changement de visibilité, l’enregistrement et l’effacement restent compréhensibles. Le code source utilise un React ref pour rétablir le focus après une erreur ou une action d’effacement. Le nombre de résultats est annoncé dans une région d’état.
Soumettez un court brouillon et observez l’erreur de champ.
Choisissez « Note interne », rédigez une note utile et enregistrez-la.
Effacez un brouillon ultérieur et vérifiez que l’instantané local enregistré est conservé.
Préserver un ordre de lecture stable
La demande précède le brouillon, et les nouveaux instantanés locaux enregistrés restent dans l’ordre chronologique. Les boutons natifs présentent leurs actions sous forme de texte. Aucun raccourci clavier ni comportement d’envoi automatique n’est dissimulé dans le composeur, et le choix de visibilité reste une liste déroulante avec libellé.
Intégration du système de design Zendesk Garden React
Installer des versions de packages compatibles
Cet exemple fixe les versions du thème, des boutons et des formulaires à 9.16.1 et utilise React 18 avec styled-components. Mélanger des versions plus anciennes des packages Garden peut créer des attentes incompatibles concernant le thème. Le fichier JSX complet comprend le fournisseur, la composition des champs et l’état local, tandis que le fichier CSS ne contient que la mise en page définie par l’application.
@zendeskgarden/react-theming 9.16.1
@zendeskgarden/react-buttons 9.16.1
@zendeskgarden/react-forms 9.16.1
Étendre uniquement la couche de service manquante
Exemples de composants du système de conception Zendesk Garden
main.jsx — exemple complet fonctionnel
Rédigez une réponse en gardant le contexte du client à l’écran. Le code source ci-dessous est le fichier React complet, avec toute la gestion de l’état et la validation.
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 />);
Créez un composeur d’assistance Garden en utilisant la composition native Field/Label/Hint/Textarea/Message. Conservez le choix de visibilité dans chaque instantané de brouillon enregistré, validez avant l’ajout, préservez le contexte du client et distinguez l’enregistrement local de l’envoi. Utilisez les rôles de thème exacts et le code source complet présent ici.
05
Sources et périmètre du système de conception Zendesk Garden
Guide de l’application OpenDesign. Les composants natifs de Garden affichent l’exemple ; le contenu fictif des tickets et les brouillons locaux ne sont pas connectés à Zendesk et n’envoient aucun message.
