fix: consistência de status via Badge em todas as telas (item 3) #47

Merged

jhony75 merged 1 commit from feature/design-system-badge-consistency into develop

2026-09-09 17:35:47 -03:00

jhony75 commented

2026-09-09 15:38:25 -03:00

Owner

Item 3 do roadmap (Storybook/design system) — auditoria completa antes de qualquer mudança.

Auditado

As 13 stories existentes (todos os 7 componentes citados no roadmap já têm .stories.tsx) e quais estados cobrem.
npm run build-storybook — limpo.
Todo call site de Badge/StatusBadge/IssueSeverity/CoverageStatus no código — nenhum recebe cor crua, sempre valor de domínio. Essa parte já estava 100% correta.

Achado real: violação de "nunca cor crua" nas telas de lista

As telas de detalhe (RunDetail/IssueDetail/ReportDetail) já usam Badge com um mapa status -> variant. As telas de lista do mesmo domínio (Runs/Issues/Requirements/ReportList) nunca usavam — caíam num <span className="pill" data-status=...> resolvido em CSS com hex cru (globals.scss). O mesmo padrão também tinha vazado como "traffic light" genérico (sempre Aprovado/Reprovado) em TechnicalValidationDetail/Form/List e DevTools.

Mudança

Centraliza os 3 mapas status -> variant (antes duplicados idênticos em ReportDetail/IssueDetail/RunDetail) em frontend/src/domainStatusVariants.ts.
Aplica Badge de forma consistente nas 8 telas que ainda bypassavam (Runs, Issues, Requirements, ReportList, RequirementDetail, TechnicalValidationDetail/Form/List, DevTools). Runs.tsx também ganha um Badge por faixa de pass_rate (era inline-style com ternário).
Remove todo o CSS agora morto: .pill[data-status=...], [data-issue-status=...], [data-step-status=...] (esse último já estava morto desde o item 2 — nunca foi limpo), .pill.sev-*, e os 4 tokens --status-* em hex cru (o comentário no próprio arquivo já dizia "mantidos até a tela de Reports migrar" — a migração aconteceu agora).

Sobre cobertura de stories (loading/empty/error/texto-longo/sem-dados)

Não precisou de mudança: StatCard já cobre loading e sem-dados, EmptyState já cobre error e texto longo, ProgressBar's story "Empty" (value=0) já cobre sem-dados na prática (não achei valor em inventar um estado "sem dado" separado pra um componente que sempre recebe um número). StatusBadge/IssueSeverity/CoverageStatus são labels curtos de um enum fechado — loading/texto-longo não se aplicam a eles.

Verificação

npx tsc --noEmit / npm run lint (0 erros, 8 warnings pré-existentes) / npx vitest run (106 passed) / npm run build / npm run build-storybook — todos ok
Testado manualmente no navegador: Runs, Issues, Requirements, Reports (lista e detalhe), Technical Validation (lista e detalhe) — todos os badges renderizando com a cor certa, sem regressão visual.

Item 3 do roadmap (Storybook/design system) — auditoria completa antes de qualquer mudança. ## Auditado - As 13 stories existentes (todos os 7 componentes citados no roadmap já têm `.stories.tsx`) e quais estados cobrem. - `npm run build-storybook` — limpo. - Todo call site de `Badge`/`StatusBadge`/`IssueSeverity`/`CoverageStatus` no código — **nenhum recebe cor crua, sempre valor de domínio**. Essa parte já estava 100% correta. ## Achado real: violação de "nunca cor crua" nas telas de lista As telas de **detalhe** (RunDetail/IssueDetail/ReportDetail) já usam `Badge` com um mapa `status -> variant`. As telas de **lista** do mesmo domínio (Runs/Issues/Requirements/ReportList) nunca usavam — caíam num `<span className="pill" data-status=...>` resolvido em CSS com **hex cru** (`globals.scss`). O mesmo padrão também tinha vazado como "traffic light" genérico (sempre Aprovado/Reprovado) em `TechnicalValidationDetail`/`Form`/`List` e `DevTools`. ## Mudança - Centraliza os 3 mapas `status -> variant` (antes duplicados idênticos em ReportDetail/IssueDetail/RunDetail) em `frontend/src/domainStatusVariants.ts`. - Aplica `Badge` de forma consistente nas 8 telas que ainda bypassavam (Runs, Issues, Requirements, ReportList, RequirementDetail, TechnicalValidationDetail/Form/List, DevTools). `Runs.tsx` também ganha um `Badge` por faixa de `pass_rate` (era inline-style com ternário). - Remove todo o CSS agora morto: `.pill[data-status=...]`, `[data-issue-status=...]`, `[data-step-status=...]` (esse último já estava morto desde o item 2 — nunca foi limpo), `.pill.sev-*`, e os 4 tokens `--status-*` em hex cru (o comentário no próprio arquivo já dizia "mantidos até a tela de Reports migrar" — a migração aconteceu agora). ## Sobre cobertura de stories (loading/empty/error/texto-longo/sem-dados) Não precisou de mudança: `StatCard` já cobre loading e sem-dados, `EmptyState` já cobre error e texto longo, `ProgressBar`'s story "Empty" (value=0) já cobre sem-dados na prática (não achei valor em inventar um estado "sem dado" separado pra um componente que sempre recebe um número). `StatusBadge`/`IssueSeverity`/`CoverageStatus` são labels curtos de um enum fechado — loading/texto-longo não se aplicam a eles. ## Verificação - `npx tsc --noEmit` / `npm run lint` (0 erros, 8 warnings pré-existentes) / `npx vitest run` (106 passed) / `npm run build` / `npm run build-storybook` — todos ok - Testado manualmente no navegador: Runs, Issues, Requirements, Reports (lista e detalhe), Technical Validation (lista e detalhe) — todos os badges renderizando com a cor certa, sem regressão visual.

jhony75 added 1 commit

2026-09-09 15:38:25 -03:00

fix: consistência de status via Badge em todas as telas (item 3)

EEG QA CI / validate-and-build (pull_request) Successful in 4m16s

Details

EEG QA CI / Deploy production (pull_request) Has been skipped

Details

EEG QA CI / Deploy development (pull_request) Has been skipped

Details

e704800466

Auditoria do item 3 (Storybook/design system) achou a violação real de
"componente semântico deve receber valor de domínio, nunca cor crua":
as telas de LISTA (Runs/Issues/Requirements/ReportList) nunca usavam
Badge pra status -- caíam num <span className="pill" data-status=...>
resolvido em CSS com hex cru (globals.scss), enquanto as telas de
DETALHE do mesmo domínio (RunDetail/IssueDetail/ReportDetail) já
usavam Badge com um mapa status->variant local. Mesmo padrão reusado
sem querer como "traffic light" genérico em TechnicalValidationDetail/
Form/List e DevTools (sempre Aprovado/Reprovado, 2 estados).

Centraliza os 3 mapas status->variant (antes duplicados idênticos em
ReportDetail/IssueDetail/RunDetail) em domainStatusVariants.ts, e
aplica Badge de forma consistente nas 8 telas que ainda bypassavam.
Runs.tsx também ganha um Badge por faixa de pass_rate (era só
inline-style com var() tokens, sem componente).

Remove todo o CSS agora morto: .pill[data-status=...],
[data-issue-status=...], [data-step-status=...] (esse último já
estava morto desde o item 2, nunca foi limpo), .pill.sev-* e os 4
tokens --status-* em hex cru (o comentário no arquivo já dizia
"mantidos até a tela de Reports migrar" -- a migração aconteceu agora).

Storybook build limpo, sem mudança de cobertura (os 7 componentes
citados no roadmap já tinham stories cobrindo os estados relevantes;
StatCard já cobre loading/sem-dados, EmptyState já cobre error/texto
longo, ProgressBar's "Empty" já cobre o caso de sem-dados na prática).

jhony75 merged commit ed035abb7b into develop

2026-09-09 17:35:47 -03:00

jhony75 referenced this pull request from a commit

2026-09-09 17:35:48 -03:00

Merge pull request 'fix: consistência de status via Badge em todas as telas (item 3)' (#47) from feature/design-system-badge-consistency into develop

No reviewers

No labels

No milestone

No project

No assignees

1 participant

Notifications

Due date

The due date is invalid or out of range. Please use the format "yyyy-mm-dd".

No due date set.

Dependencies

No dependencies set

Reference

jhony75/eeg-qa!47

No description provided.

Rows
Columns