Skip to content

Commit 82ec8ed

Browse files
vilpessoaclaude
andauthored
docs: documentar estratégia de posicionamento de alerts e toasts (#106)
Documenta a estratégia final de posicionamento dos alerts validada em produção: - Erros críticos → top-center (máxima atenção) - Feedback rápido → top-right (visível, contextualizado) - Notificações genéricas → bottom-center (neutra) Inclui guia de boas práticas e referência para implementação. Co-authored-by: Claude <noreply@anthropic.com>
1 parent 6b308f9 commit 82ec8ed

1 file changed

Lines changed: 78 additions & 0 deletions

File tree

docs/alert-positioning.md

Lines changed: 78 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,78 @@
1+
# Estratégia de Posicionamento de Alerts e Toasts
2+
3+
## Visão Geral
4+
5+
Os alerts e notificações no DAX Renderer seguem uma estratégia de posicionamento contextualizado para otimizar a experiência do usuário.
6+
7+
## Posicionamento por Tipo
8+
9+
### 1. Erros Críticos → `top-center`
10+
**Quando:** Erros de renderização, validação DAX, falhas de ação
11+
**Posição:** Centro do topo da tela
12+
**Motivo:** Máxima visibilidade e atenção imediata
13+
**Exemplos:**
14+
- "Erro ao renderizar"
15+
- "Nada para copiar — editor está vazio"
16+
- "Falha ao copiar"
17+
18+
### 2. Feedback Rápido → `top-right`
19+
**Quando:** Ações bem-sucedidas e rápidas do usuário
20+
**Posição:** Canto superior direito (acima do painel de preview)
21+
**Motivo:**
22+
- Visível sem bloquear o editor
23+
- Contextualizado com a ação executada
24+
- Fora da statusbar inferior
25+
- Bem organizado e não intrusivo
26+
27+
**Exemplos:**
28+
- "DAX copiada!" (copy)
29+
- "Rascunho 'nome' salvo" (save snippet)
30+
- "Rascunho 'nome' carregado" (load snippet)
31+
- "Código atualizado pelo assistente IA" (IA apply)
32+
33+
### 3. Notificações Genéricas → `bottom-center`
34+
**Quando:** Mensagens informativas gerais
35+
**Posição:** Centro da base da tela
36+
**Motivo:**
37+
- Neutra, não interfere com elementos principais
38+
- Não compete com statusbar
39+
- Padrão confortável para notificações
40+
41+
## Implementação
42+
43+
### Arquivos Relevantes
44+
- `src/App.tsx` - Toasts de copy, save, load snippets
45+
- `src/components/ai/AIAssistantDropdown.tsx` - Toasts do assistente IA
46+
- `src/App.tsx` - Configuração do Toaster padrão
47+
48+
### Alterações Aplicadas
49+
50+
```typescript
51+
// Erros críticos
52+
toast.error('Mensagem', { position: 'top-center' });
53+
54+
// Feedback rápido
55+
toast.success('Mensagem', { position: 'top-right' });
56+
57+
// Notificações genéricas
58+
toast.success('Mensagem'); // usa bottom-center como padrão
59+
```
60+
61+
## Validação Visual
62+
63+
✅ Posicionamento testado e validado em produção
64+
- Toast "DAX copiada!" aparece no canto superior direito
65+
- Ligeiramente abaixo da toolbar DAX
66+
- Sem interferência com editor ou preview
67+
- Bem visível e destacado
68+
69+
## Duração
70+
71+
Todos os toasts têm duração padrão de **2000ms** (2 segundos)
72+
73+
## Boas Práticas
74+
75+
1. **Use `top-center` apenas para erros** - Reserve para situações que requerem atenção imediata
76+
2. **Use `top-right` para feedback rápido** - Mantenha a consistência com ações do usuário
77+
3. **Use `bottom-center` para notificações** - Padrão seguro quando a posição não é crítica
78+
4. **Sempre especifique posição** - Não confie no padrão quando há contexto específico

0 commit comments

Comments
 (0)