Padrões de tela
Casca de tela
betaA forma que toda tela autenticada tem. O que muda entre as frentes é a navegação e o miolo, nunca a casca.
Ainda não é estável porque Pendência editorial: oQueE, quandoUsar, quandoNaoUsar; Rota não varrida pelo sensor. Ausência de medição não é aprovação. O contrato de maturidade explica o que cada requisito exige.
A regra
Quando uma tela nova revelar uma deficiência na casca, corrija a casca.
As telas são instâncias do ScreenSkeleton: uma correção na casca propaga para todas, e um contorno local vira divergência que se multiplica a cada tela. Prefira ajustar o componente quando a lacuna for limpa — por exemplo, um slot opcional desligado por padrão que cada instância liga quando precisa. Crie variante só quando a diferença for estrutural o bastante para poluir o componente base.
Anatomia
| Parte | Papel |
|---|---|
| nav | Menu da frente. É slot, não conteúdo embutido: Backoffice, Escola, Família e Terapeuta compartilham a casca sem compartilhar o menu. |
| ScreenTopbar | Barra fixa com o gatilho de colapso e a trilha de navegação (breadcrumb) da tela. Sempre visível — é o único jeito de colapsar a navegação no desktop, já que a casca não monta SidebarRail. Opcional: telas sem trilha não precisam dela. |
| ScreenHeader | Título, descrição e ações da tela. Já traz o respiro de página, para o miolo não repetir esse valor. |
| ScreenEntityHeader | Faixa de identidade quando a tela é o recorte de um registro. Preserva nome, status e ação principal enquanto se navega entre as abas. |
| ScreenContent | Miolo. Lê a régua que a casca declarou (--screen-max), a mesma do cabeçalho — nenhuma tela inventa a própria largura. |
| ScreenSection | Agrupador dentro do miolo, com rótulo de seção opcional. |
A casca montada
Lacunas conhecidas
Corrigida: ScreenHeader não tinha slot de trilha de navegação.
O Backoffice precisou de breadcrumb em toda tela e de um jeito de colapsar a navegação no desktop (a casca não monta SidebarRail, então sem isso não havia gatilho nenhum acima de md). A correção foi um componente novo na casca — ScreenTopbar (gatilho + separador + slot de breadcrumb) — e não um contorno por tela. Consumida com <ScreenSkeleton mobileBar={false}> para não duplicar a barra móvel embutida.
Corrigida: ScreenEntityHeader colava na barra superior.
O componente não tinha padding-top — a lacuna presumia que um ScreenHeader sempre viria antes, cujo pb-4 dava o respiro. Toda tela de detalhe do Backoffice pula direto do ScreenTopbar para o entity header, então o nome da entidade colava na borda da barra. Corrigido com pt-6 no próprio componente.
Corrigida: PageHeader não quebrava linha em telas estreitas.
As ações não desciam e espremiam o título numa coluna de duas ou três palavras abaixo de uns 420px. A correção foi na casca, não nas telas: flex-wrap com gap-y no PageHeader e min-w-0 no conteúdo. Fica registrada porque foi a biblioteca que encontrou o defeito, ao montar o bloco do painel do professor.