7.7 KiB

Raw Blame History

🎯 Custom Input - Padronização Visual

📋 Resumo das Melhorias

Este documento detalha as melhorias implementadas no componente CustomInputComponent para padronizar sua aparência e comportamento com os demais inputs do projeto PraFrota.

🎯 Problemas Resolvidos

❌ Antes da Padronização:

Largura inconsistente - não ocupava 100% do container
Estilos não alinhados com padrão global do projeto
Falta de estilos básicos para border, padding, focus
Inconsistência visual com outros inputs do sistema
Label sem z-index apropriado
Tema escuro não integrado

✅ Após a Padronização:

Largura 100% seguindo padrão dos demais inputs
Estilos globais aplicados conforme app.scss
Visual consistente em todo o projeto
Focus state igual aos inputs nativos
Tema escuro totalmente integrado
Label flutuante melhorado com z-index
Cor do label padronizada igual aos selects (#6b7280)

🎨 Melhorias Implementadas

1. Estilos Base Padronizados

✅ Input Principal

input {
  width: 100%;
  padding: 0.75rem;
  border: 1px solid var(--divider);
  border-radius: 4px;
  background: var(--surface);
  color: var(--text-primary);
  font-family: var(--font-primary);
  font-size: 0.875rem;
  line-height: 1.4;
  transition: all 0.2s ease;
}

2. Focus State Consistente

✅ Efeito de Focus Global

&:focus {
  outline: none;
  border-color: var(--primary);
  box-shadow: 0 0 0 2px rgba(241, 196, 15, 0.2);
}

Mesmo efeito dos inputs nativos do projeto
Border amarelo com shadow sutil
Transição suave de 0.2s

3. Label Flutuante Melhorado

✅ Posicionamento e Estilo

label {
  position: absolute;
  left: 14px;
  top: 50%;
  transform: translateY(-50%);
  background-color: var(--surface);
  color: #6b7280; // Cinza escuro igual ao select
  font-size: 14px;
  font-weight: var(--font-weight-medium);
  transition: all 0.2s ease;
  pointer-events: none;
  padding: 0 4px;
  z-index: 1;
}

✅ Estados Ativos

input:focus + label,
input:not(:placeholder-shown) + label {
  top: 0;
  font-size: 12px;
  color: #6b7280; // Mantém cinza escuro mesmo em foco
  font-weight: var(--font-weight-semibold);
}

4. Campos Readonly Aprimorados

✅ Visual Melhorado

.custom-input-wrapper.readonly {
  input.readonly-input {
    background-color: var(--surface-disabled, #f5f5f5) !important;
    color: var(--text-secondary) !important;
    cursor: not-allowed !important;
    opacity: 0.8;
  }
}

✅ Ícone de Cadeado

Z-index apropriado para ficar acima do input
Posicionamento correto no canto direito
FontAwesome integrado

5. Tema Escuro Integrado

✅ Suporte Completo

.dark-theme {
  .custom-input-wrapper {
    input {
      background: var(--surface);
      color: var(--text-primary);
      border-color: var(--divider);
      
      &:focus {
        border-color: var(--primary);
        box-shadow: 0 0 0 2px rgba(241, 196, 15, 0.2);
      }
    }
  }
}

6. Cores Padronizadas do Label

✅ Consistência com Selects

// Tema claro
label {
  color: #6b7280; // Cinza escuro igual ao select
}

// Tema escuro  
.dark-theme label {
  color: #9ca3af; // Cinza claro para contraste
}

Motivação: Label deve ter a mesma cor visual dos selects para manter consistência no design system.

7. CSS Variables Utilizadas

Cores e Espaçamentos

var(--surface) - Background padrão
var(--divider) - Cor das bordas
var(--text-primary) - Texto principal
#6b7280 - Cor padrão do label (tema claro)
#9ca3af - Cor padrão do label (tema escuro)
var(--primary) - Cor primária (focus)
var(--font-primary) - Fonte principal
var(--font-weight-*) - Pesos da fonte

🔄 Comparação Visual

ANTES:

// ❌ Sem estilos base
.custom-input-wrapper label {
  font-weight: 900; // Muito pesado
  font-size: 14px;  // Inconsistente
}

DEPOIS:

// ✅ Seguindo padrão global
input {
  width: 100%;
  padding: 0.75rem;           // Igual aos inputs nativos
  font-size: 0.875rem;        // Consistente
  border-radius: 4px;         // Padrão do projeto
  transition: all 0.2s ease;  // Suave
}

label {
  font-weight: var(--font-weight-medium); // Apropriado
  z-index: 1;                             // Camada correta
  padding: 0 4px;                         // Respiro visual
}

📐 Especificações Técnicas

Dimensões Padrão:

Largura: 100% do container
Padding: 0.75rem (12px)
Border: 1px solid
Border-radius: 4px
Min-height: ~44px (calculado)

Tipografia:

Font-size: 0.875rem (14px)
Line-height: 1.4
Font-family: var(--font-primary)
Label size (ativo): 12px
Label size (inativo): 14px

Estados:

Normal: border var(--divider)
Focus: border var(--primary) + shadow
Disabled: opacity 0.6 + cursor not-allowed
Readonly: background disabled + lock icon

🎯 Benefícios da Padronização

✅ Consistência Visual

Mesma aparência em todo o projeto
Experiência unificada para o usuário
Design system respeitado

✅ Manutenibilidade

CSS variables centralizadas
Estilos reutilizáveis
Fácil customização global

✅ Acessibilidade

Contraste adequado em todos os temas
Focus visível e consistente
Estados claros (disabled, readonly)

✅ Performance

Transições otimizadas (transform + opacity)
CSS eficiente sem redundâncias
Carregamento rápido

🔧 Como Usar

Implementação Básica

<app-custom-input 
  [field]="{
    key: 'exemplo',
    type: 'text',
    label: 'Nome Completo',
    placeholder: 'Digite seu nome',
    required: true
  }"
  [(ngModel)]="formData.nome">
</app-custom-input>

Campo Readonly

<app-custom-input 
  [field]="{
    key: 'codigo',
    type: 'text',
    label: 'Código do Sistema',
    readOnly: true
  }"
  [(ngModel)]="formData.codigo">
</app-custom-input>

Diferentes Tipos

<!-- Texto -->
<app-custom-input [field]="{type: 'text', label: 'Nome'}">

<!-- Email -->
<app-custom-input [field]="{type: 'email', label: 'E-mail'}">

<!-- Número -->
<app-custom-input [field]="{type: 'number', label: 'Idade'}">

<!-- Data -->
<app-custom-input [field]="{type: 'date', label: 'Nascimento'}">

<!-- Telefone com máscara -->
<app-custom-input [field]="{type: 'tel', label: 'Telefone', mask: '(00) 00000-0000'}">

🧪 Testes Recomendados

Cenários de Teste:

Visual - Comparar com inputs nativos
Responsividade - Testar em diferentes telas
Temas - Verificar claro e escuro
Estados - Normal, focus, disabled, readonly
Acessibilidade - Navegação por teclado

Checklist de QA:

Largura 100% do container
Altura consistente (~44px)
Focus com border amarelo
Label flutua corretamente
Label com cor igual aos selects (#6b7280)
Placeholder visível
Readonly com ícone de cadeado
Tema escuro funcional
Transições suaves

📦 Arquivos Modificados

projects/idt_app/src/app/shared/components/inputs/custom-input/
└── custom-input.component.scss  ✅ Completamente reformulado

🔄 Integração com Design System

Este componente agora está 100% alinhado com:

✅ app.scss - Estilos globais de inputs
✅ _typography.scss - Sistema tipográfico
✅ _colors.scss - Variáveis de cor
✅ CSS Variables - Tokens de design

Autor: PraFrota Development Team
Data: $(date)
Versão: 2.0.0 - Padronização Completa

7.7 KiB Raw Blame History