Comece aqui

Esta página é para quem nunca usou o design system. Ela explica por que todas as telas do programa seguem o mesmo padrão, qual é a regra e onde achar o que você precisa. Para instalar o pacote, veja Começar.

Por que todas as telas seguem o mesmo padrão

Quem usa os sistemas do Tribunal não usa um sistema só. A mesma fiscal de contrato abre o sistema de obras de manhã e o de imóveis à tarde. Se o botão de salvar, a mensagem de erro e a tabela forem iguais nos dois, ela não precisa reaprender nada.

Para quem usa:

• Encontra as coisas no mesmo lugar e entende as mensagens na primeira leitura.
• Quem usa leitor de tela, só o teclado ou zoom alto consegue trabalhar. Os componentes já passam no teste de acessibilidade e têm o contraste medido nos temas claro e escuro.
• Confia no sistema. Uma tela com cara de improviso passa a impressão de que o dado também pode estar errado.

Para o Tribunal:

• Os sistemas têm a identidade do portal tjes.jus.br: as cores, a fonte Roboto e o logo.
• Uma correção feita no design system chega a todas as telas que usam o componente, sem retrabalho em cada projeto.
• A STI recebe código parecido em todos os projetos, o que facilita revisar, manter e passar de uma equipe para outra.

A regra

Monte as telas só com os componentes Base* e os tokens --tj-*. Não escreva cor, espaço ou fonte soltos no CSS, nem use <button>, <input>, <select> ou <table> direto na tela.

Faça	Não faça
<BaseButton kind="danger">Excluir medição</BaseButton>	<button class="btn btn-danger">Excluir</button>
<BaseField label="Número do contrato" required><BaseInput v-model="number" /></BaseField>	<label>Número</label><input v-model="number">
<BaseDataTable :columns="columns" :rows="rows" row-key="id" label="Contratos" />	Uma <table> com estilo próprio em cada tela
gap: var(--tj-space-4) e color: var(--tj-text-helper) no CSS local	gap: 15px e color: #666

Os projetos que partem do tjes-base-web já têm um lint que recusa botão e campo soltos. Se o componente não faz o que você precisa, não contorne: peça uma mudança, como está no fim desta página.

Como achar o componente certo

1. Comece pelos Padrões de tela. Se a sua tela é uma lista, um formulário, um detalhe ou um estado como carregando e erro, o padrão diz quais componentes usar, que texto escrever e mostra o código.
2. Procure na barra lateral, por nível. Átomos são as peças pequenas (botão, selo, ícone), moléculas juntam algumas peças para uma tarefa (campo com rótulo, busca, paginação), organismos são regiões inteiras da tela (tabela, modal, avisos) e templates dão a estrutura (moldura, página, cartão). A página Níveis do sistema lista todos.
3. Na página do componente, leia as seções Uso e Faça e não faça antes de copiar o exemplo. Ali está quando usar e quando não usar.
4. Para cor, espaço e tamanho no CSS local, use os papéis de Tokens e temas. Cada token diz quando usar e quando não usar.
5. Para escrever o texto da tela, siga Como escrever as mensagens.

Se o projeto começou pelo template da STI, a página Partir do template da STI diz o que trocar.

Antes de construir, a tela passa pelo entendimento com a área, pelo mockup e pelas validações. O caminho, até a conferência, está em Como uma tela nasce.

Como pedir um componente novo ou uma mudança

1. Confira nos Padrões de tela e na barra lateral se não há um componente que já resolva. Muitas vezes a resposta é juntar dois que já existem.
2. Abra uma issue no repositório lab-inovacao-tjes/design-system dizendo o que falta, em que tela isso aparece e, se puder, com um print ou rascunho.
3. Enquanto o componente não sai, monte a tela com o que existe e anote na issue o que ficou provisório. Não crie uma versão própria do componente no projeto.

Um componente novo entra completo: código, teste, acessibilidade e página na documentação. As regras estão no CONTRIBUTING.md.