Componentes de capricho: agrupar campos e sumarizar texto longo
Três componentes novos no DS pro problema clássico das telas de detalhe — P2FieldGroup (agrupa campos), P2FactBar (faixa de resumo) e P2LegalSummary (resume texto legal/regime longo em chips, com o íntegro num colapsável). Aplicados em 5 telas: FUP Tributária, Detalhe de Invoice, aba Geral do Detalhe do Processo, Banco de Análises e o drawer do Kanban.
Antes → Depois
Regime trib. II — Fundamentação legal
DRAWBACK - DL 37/66, ART 78,I (ISENCAO) - DL 37/66, ART. 78,II (SUSPENSAO) - LEI 8402/92, ART. 1,I
Regime trib. PIS/COFINS — Fundamentação legal
DRAWBACK - DL 37/66, ART 78,I (ISENCAO) - DL 37/66, ART. 78,II (SUSPENSAO) - LEI 8402/92, ART. 1,I
A fundamentação legal longa despejada num campo de display, estourando o layout.
Fundamentação legal
- DRAWBACK
- DL 37/66, ART 78,I (ISENÇÃO)
- DL 37/66, ART. 78,II (SUSPENSÃO)
- LEI 8402/92, ART. 1,I
Fundamentação legal
- DRAWBACK
- DL 37/66, ART 78,I (ISENÇÃO)
- DL 37/66, ART. 78,II (SUSPENSÃO)
- LEI 8402/92, ART. 1,I
O P2LegalSummary resume em chips de benefício + lei, com o texto íntegro num colapsável — reusável em qualquer tela.
O que mudou
Texto legal/regime longo (DRAWBACK - DL 37/66…) vira chips de benefício + chips de lei, com o texto íntegro num “Base legal completa” colapsável. O parser (summarizeLegal) extrai os dispositivos sozinho.
Agrupa campos densos em blocos com rótulo, e uma faixa de chips resume o essencial no topo do painel.
A aba Tributário do Detalhe do Processo: as duas fundamentações legais que estouravam a grade viraram cards de regime (II e PIS/COFINS) com chips.
O Cabeçalho fiscal ganhou faixa de resumo + dois grupos (Fornecedor & comercial / Logística & datas).
Os 13 campos chapados viraram 3 grupos (Identificação · Operação & rota · Complementar), com a ordem preservada pra manter a paridade.
As células de Fundamentação Legal que estouravam (150–180px) viraram chips compactos (benefício + lei), com o texto íntegro no tooltip.
Os três entraram no Storybook (de-para + exemplos vivos + props + acessibilidade), no padrão Atlassian.
Por que é melhor
- Texto grande para de estourar a grade — ganha um lar próprio.
- Resumo no topo acelera a leitura: bate o olho e entende.
- Reusável: um componente resolve o problema em qualquer tela de detalhe.
- Temável e dark-ready (tudo via token), sem perder a paridade no claro.
Como revisar
- 1Abrir o Storybook → Legal Summary (em “Tabela e dados”) e ver os exemplos vivos com o de-para.
- 2Na FUP Tributária (Detalhe do Processo → aba Tributário), expandir um produto e ver o bloco Regime tributário.
- 3No Detalhe de Invoice, conferir o Cabeçalho fiscal agrupado com a faixa de resumo.
- 4Na aba Geral do Detalhe do Processo, ver os 3 grupos de campos; no Banco de Análises, as colunas de Fund. Legal viram chips.
Só apresentação/estrutura — nenhum dado foi alterado. Nas telas portal-real (paridade), o componente usa tokens que no claro batem com os hexes de hoje; o texto legal íntegro fica sempre preservado no colapsável.