ColorPicker
- Angular:
mds-color-picker - CSS/HTML (mds-styles): disponível
- Figma: ❌
- Tipo: Componente Angular
Definição Funcional
Seção intitulada “Definição Funcional”O ColorPicker permite ao usuário selecionar uma cor a partir de uma paleta pré-estabelecida. Ele é utilizado para personalizar elementos da interface, como identificadores de status, colunas de fluxo ou categorias de dados, facilitando a organização visual e a rápida identificação de informações. )
Diretrizes de Comportamento
Seção intitulada “Diretrizes de Comportamento”- Gatilho de Seleção: O componente deve exibir a cor atualmente selecionada no botão de ativação.
- Paleta de Cores (Swatches): As cores devem ser organizadas de forma lógica (por matriz ou tonalidade) em um painel flutuante (Popover).
- Feedback de Seleção: A cor escolhida deve ser destacada visualmente no painel (ex: ícone de check sobre o quadro da cor) para confirmar a ação.
- Acessibilidade: Garanta que as cores oferecidas na paleta possuam contraste suficiente quando utilizadas como fundo para textos ou ícones.
- Vá Direto ao Ponto: Se o campo possuir um rótulo, seja conciso.
- Certo: Cor da etapa ou Identificador visual.
Exemplos de Escrita (Contexto de Personalização)
Seção intitulada “Exemplos de Escrita (Contexto de Personalização)”| Uso do Componente | Rótulo Sugerido (Label) | Objetivo UX |
|---|---|---|
| Kanban | Cor da coluna | Diferenciar etapas do fluxo logístico. |
| Tags | Cor da etiqueta | Categorizar tipos de mercadoria (ex: Frágil). |
| Agendamento | Cor do recurso | Identificar visualmente docas ou pátios. |