Uma referência do Evergreen com valores reais do tema, entrada controlada de tags, correspondência de regras em tempo real, alternativa de recuperação para estados vazios e uma caixa de diálogo nativa para revisão.
Segment Evergreen Estrutura do criador de públicos do sistema de design
Mantenha as regras junto de suas consequências
O exemplo combina um painel de regras com registros fictícios correspondentes. O seletor de plano e as tags obrigatórias ficam visíveis ao mesmo tempo que a contagem de resultados, para que seja fácil entender o efeito de alterar uma regra. A pessoa não precisa salvar nem abrir uma caixa de diálogo só para descobrir se a combinação atual corresponde a alguém.
Use um conjunto de dados finito e transparente
Cinco registros de exemplo identificados por nome mostram seus planos e tags. A página não finge consultar um banco de dados de clientes nem estimar o tamanho de um público real. Nenhum resultado é uma situação útil no exemplo, e há uma ação para restaurar o conjunto completo de dados.
Segment Evergreen Valores e semântica do tema do sistema de design
Consulte o tema padrão real
Evergreen 7.1.9 oferece raios, tamanhos de fonte e alturas de linha indexados, além de cores nomeadas e estilos de componentes. A tabela mantém intactos os valores exportados. Vale a pena observar especialmente os nomes dos pesos de fonte: semibold e bold correspondem a 500 e 600, diferentemente do que se costuma presumir.
Mantenha a composição personalizada alinhada
ThemeProvider fornece os campos de entrada, as tags, os badges, os botões e o diálogo nativos. Os painéis criados usam a mesma combinação discreta de cinza frio e azul. O exemplo não substitui os componentes internos nativos por seletores CSS abrangentes, preservando os estilos de interação fornecidos.
Tipografia do sistema de design Segment Evergreen para edição de regras
Estabeleça uma hierarquia clara para a tarefa
Os níveis de título distinguem o título voltado ao público dos títulos dos painéis e dos nomes dos resultados individuais. O texto de apoio explica a inserção de tags e o escopo dos dados fictícios. Um badge com a contagem fica ao lado do título dos resultados, em vez de substituí-lo, permitindo que a pessoa identifique a seção antes de interpretar o número.
Mantenha os metadados legíveis
As informações de plano e tags ajudam a explicar a correspondência; não são meramente decorativas. O layout permite que as tags quebrem de linha e, em celulares estreitos, empilha o texto e os badges de cada registro. Reduzir todos os rótulos a textos minúsculos ocultaria as evidências necessárias para entender as regras.
Escalas major e minor do sistema de design Segment Evergreen
Use funções para espaçamentos consistentes
majorScale e minorScale representam incrementos de oito e quatro pixels. O exemplo do componente usa majorScale(3) para um espaço de 24px entre o título do painel e o conteúdo, enquanto a folha de estilos personalizada controla a composição responsiva. Mantenha essa distinção clara: um breakpoint de grade é uma decisão da aplicação, não o resultado de uma função de espaçamento.
Preserve as relações entre os campos em dispositivos móveis
Tags controladas e correspondências no sistema de design Segment Evergreen
Normalize os valores antes de aceitá-los
O manipulador onChange remove espaços no início e no fim, converte as strings para minúsculas, elimina duplicatas e rejeita mais de quatro tags distintas. Retornar false mantém o campo de entrada quando uma adição é rejeitada. Essa política pertence à aplicação de público; TagInput fornece a interação controlada, sem definir um limite de negócio.
Use a correspondência com todas as tags de forma deliberada
Um registro precisa corresponder ao plano selecionado e a todas as tags obrigatórias. Remover as tags elimina essa restrição; selecionar Qualquer um elimina a restrição de plano. A contagem atual de resultados vem da mesma lista filtrada exibida na tela, evitando divergências entre a contagem e os cartões visíveis.
Diálogo de revisão e instantâneo local no sistema de design Segment Evergreen
Revise as regras atuais antes de salvar
É necessário informar um nome de público antes de abrir o diálogo. O diálogo repete o nome, a contagem, o plano e as tags e, em seguida, oferece a opção Salvar localmente. Esta etapa extra demonstra uma sobreposição nativa em torno de um instantâneo concreto, em vez de uma confirmação vazia que pergunta apenas Tem certeza?
Invalide a confirmação anterior quando as regras mudarem
Alterar o nome, o plano ou as tags limpa o indicador de instantâneo salvo. Assim, uma confirmação local anterior não pode ser confundida com a confirmação de regras editadas recentemente. A aplicação não apresenta o instantâneo como um público do Segment nem envia uma solicitação a uma plataforma de clientes.
Entrada por teclado e recuperação do diálogo no sistema de design Segment Evergreen
Teste tags, resultados e revisão em um único fluxo
As tags podem ser adicionadas com as teclas de entrada documentadas, e o campo recebe um rótulo visível por meio de seu id. Quando o limite de tags é rejeitado, um alerta de erro nativo é exibido. A revisão usa o comportamento de foco nativo de Dialog, em vez de uma sobreposição criada manualmente com foco não gerenciado.
Adicione newsletter à tag ativa inicial e compare a contagem.
Adicione uma tag sem correspondência e, em seguida, limpe as regras para restaurar os cinco registros.
Revise e salve localmente; depois, altere uma regra e confirme que a confirmação anterior desaparece.
Mantenha a recuperação do estado vazio na tarefa atual
Limpar regras remove as restrições de plano e de tags e descarta um estado salvo desatualizado. A região de resultados volta a conter todos os cinco registros. A pessoa pode continuar editando imediatamente, sem navegação oculta nem recarregamento da página.
Integração do sistema de design Segment Evergreen com React
Use um exemplo completo e controlado
A entrada nativa importa ThemeProvider, defaultTheme e os componentes que renderiza. O estado armazena as regras, os erros, a visibilidade do diálogo e o instantâneo salvo localmente. O JSX completo e CSS abaixo incluem os dados fictícios, para que o cálculo dos resultados possa ser reproduzido sem um API externo.
ThemeProvider usa o defaultTheme fixado.
Os valores de TagInput são controlados pela aplicação.
Dialog revisa as mesmas regras usadas pela lista de resultados.
Adicione o acesso a dados em uma camada separada da aplicação
Exemplos de componentes do sistema de design Segment Evergreen
main.jsx — exemplo funcional completo
Crie e revise um público local. O código-fonte abaixo é a entrada React completa, incluindo todo o estado e a validação.
jsx
import React, { useState } from "react";
import { createRoot } from "react-dom/client";
import {
ThemeProvider,
defaultTheme,
Heading,
Text,
Paragraph,
Button,
TagInput,
TextInputField,
SelectField,
Alert,
Dialog,
Badge,
majorScale,
} from "evergreen-ui";
import "./evergreen.css";
const people = [
{ name: "Avery Stone", plan: "Pro", tags: ["active", "newsletter"] },
{ name: "Taylor Reed", plan: "Free", tags: ["newsletter"] },
{ name: "Jordan Park", plan: "Pro", tags: ["active"] },
{ name: "Morgan Lee", plan: "Team", tags: ["active", "newsletter"] },
{ name: "Casey Chen", plan: "Free", tags: ["trial"] },
];
function App() {
const [tags, setTags] = useState(["active"]),
[plan, setPlan] = useState("Any"),
[name, setName] = useState("Active customers"),
[error, setError] = useState(""),
[open, setOpen] = useState(false),
[saved, setSaved] = useState(null);
const matches = people.filter(
(p) =>
(plan === "Any" || p.plan === plan) &&
tags.every((t) => p.tags.includes(t)),
);
function changeTags(values) {
const unique = [
...new Set(values.map((v) => v.trim().toLowerCase()).filter(Boolean)),
];
if (unique.length > 4) {
setError("Use at most four tags.");
return false;
}
setTags(unique);
setError("");
setSaved(null);
}
return (
<ThemeProvider value={defaultTheme}>
<main className="audience">
<header>
<Text size={300}>WORKSPACE / AUDIENCES</Text>
<Heading size={700} marginTop={8}>
Build a focused audience
</Heading>
<Paragraph marginTop={8}>
Combine a plan and tags against five fictional records. No customer
data is loaded.
</Paragraph>
</header>
<div className="audience-grid">
<section className="rule-panel">
<Heading size={500} marginBottom={majorScale(3)}>
Audience rules
</Heading>
<TextInputField
label="Audience name"
value={name}
onChange={(e) => {
setName(e.target.value);
setSaved(null);
}}
/>
<SelectField
label="Plan"
value={plan}
onChange={(e) => {
setPlan(e.target.value);
setSaved(null);
}}
>
<option>Any</option>
<option>Free</option>
<option>Pro</option>
<option>Team</option>
</SelectField>
<label htmlFor="audience-tags">Required tags</label>
<Paragraph size={300} marginBottom={8}>
Press Enter or comma to add a tag. Every tag must match.
</Paragraph>
<TagInput
values={tags}
onChange={changeTags}
width="100%"
inputProps={{ id: "audience-tags", placeholder: "Add tag…" }}
/>
<Paragraph size={300} marginTop={8}>
Available sample tags: active, newsletter, trial.
</Paragraph>
{error && <Alert intent="danger" title={error} marginTop={16} />}
<Button
appearance="primary"
marginTop={24}
onClick={() => {
if (!name.trim()) {
setError("Name the audience before reviewing.");
return;
}
setError("");
setOpen(true);
}}
>
Review audience
</Button>
</section>
<section className="results-panel">
<div className="results-title">
<Heading size={500}>Matching sample records</Heading>
<Badge color="blue">
{matches.length} of {people.length}
</Badge>
</div>
{matches.length ? (
<div className="record-list">
{matches.map((p) => (
<article key={p.name}>
<div>
<Heading size={400}>{p.name}</Heading>
<Text size={300}>{p.plan} plan</Text>
</div>
<div className="tag-list">
{p.tags.map((t) => (
<Badge key={t} color="neutral">
{t}
</Badge>
))}
</div>
</article>
))}
</div>
) : (
<div className="empty">
<Heading size={500}>No matching sample records</Heading>
<Paragraph marginTop={8}>
Remove a tag or change the plan to broaden the selection.
</Paragraph>
<Button
marginTop={16}
onClick={() => {
setTags([]);
setPlan("Any");
setSaved(null);
}}
>
Clear rules
</Button>
</div>
)}
{saved && (
<Alert
intent="success"
title="Local audience saved"
marginTop={20}
>
{saved.name} · {saved.count} sample records. Nothing was sent to
Segment.
</Alert>
)}
</section>
</div>
<Dialog
isShown={open}
title="Review local audience"
onCloseComplete={() => setOpen(false)}
confirmLabel="Save locally"
onConfirm={() => {
setSaved({ name: name.trim(), count: matches.length });
setOpen(false);
}}
width={560}
>
<Paragraph>
<strong>{name}</strong> matches {matches.length} of {people.length}{" "}
fictional records.
</Paragraph>
<Paragraph marginTop={12}>
Plan: {plan}. Required tags: {tags.join(", ") || "none"}.
</Paragraph>
<Paragraph marginTop={12}>
This saves only a local snapshot; it does not create a Segment
audience.
</Paragraph>
</Dialog>
<footer>
Native Evergreen 7.1.9 React components. Original audience logic; no
analytics or customer service connection.
</footer>
</main>
</ThemeProvider>
);
}
createRoot(document.getElementById("root")).render(<App />);
Salve junto de main.jsx. Estas regras de composição personalizadas são distintas da referência de tokens da biblioteca.
04
Configuração do agente de design sistema de design Segment Evergreen
Ponto de partida para implementação
O exemplo nativo com versões fixadas foi empacotado e verificado localmente no navegador. O exemplo usa apenas o estado local da aplicação.
sh
npm create vite@latest evergreen-audience -- --template react
cd evergreen-audience
npm install
npm install [email protected][email protected][email protected]
# Replace src/main.jsx and add src/evergreen.css.
npm run dev
Um prompt para seu projeto
Prompt para agente de IA
Crie um editor de público do Evergreen usando o tema real e o TagInput controlado. Normalize e elimine tags duplicadas, deixe explícita a correspondência com todas as tags, mantenha resultados e contagens coerentes, faça a revisão em um Dialog nativo e limpe confirmações desatualizadas quando as regras mudarem. Não afirme que há conexão com um serviço do Segment.
05
Fontes e escopo do sistema de design Segment Evergreen
Guia da aplicação OpenDesign para o Evergreen 7.1.9. Cinco registros fictícios demonstram a filtragem local e a revisão de instantâneos. Nenhum dado de cliente do Segment nem público API está conectado.
