ColorPicker

Tipo: Componente Angular

• DesignersFigmaAinda não disponível
• Devs · HTML/CSSmds-stylesAinda não disponível
• Devs · Angularmds-angular ↗Storybook com inputs e outputs

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

• 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)

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.

Para desenvolvedores

Tudo abaixo é lido do código (stories, SCSS e componentes Angular) a cada npm run docs:sync — se algo estiver diferente do que você vê no projeto, o código é quem manda.

Angular (mds-angular)

Seletor

mds-color-picker

Objeto de cores: {color, value} / interface Color { color: string; value: string; name: string; } const DEFAULT_COLORS: Color[] = [ { color: ‘#001725’, value: ‘#001725’, name: ‘primary-darker’ }, { color: ‘#00456C’, value: ‘#00456C’, name: ‘blue-darker’ }, { color: ‘#306C6A’, value: ‘#306C6A’, name: ‘teal-darker’ }, { color: ‘#0F6300’, value: ‘#0F6300’, name: ‘green-darker’ }, { color: ‘#745E00’, value: ‘#745E00’, name: ‘yellow-darker’ }, { color: ‘#6C3900’, value: ‘#6C3900’, name: ‘orange-darker’ }, { color: ‘#621800’, value: ‘#621800’, name: ‘red-darker’ }, { color: ‘#636467’, value: ‘#636467’, name: ‘gray-darker’ }, { color: ‘#00253B’, value: ‘#00253B’, name: ‘primary-dark’ }, { color: ‘#006EAD’, value: ‘#006EAD’, name: ‘blue-dark’ }, { color: ‘#4DADAA’, value: ‘#4DADAA’, name: ‘teal-dark’ }, { color: ‘#189E00’, value: ‘#189E00’, name: ‘green-dark’ }, { color: ‘#BA9600’, value: ‘#BA9600’, name: ‘yellow-dark’ }, { color: ‘#AD5B00’, value: ‘#AD5B00’, name: ‘orange-dark’ }, { color: ‘#9C2600’, value: ‘#9C2600’, name: ‘red-dark’ }, { color: ‘#9EA0A5’, value: ‘#9EA0A5’, name: ‘gray-dark’ }, { color: ‘#003250’, value: ‘#003250’, name: ‘primary’ }, { color: ‘#0096ED’, value: ‘#0096ED’, name: ‘blue’ }, { color: ‘#69EDE9’, value: ‘#69EDE9’, name: ‘teal’ }, { color: ‘#20D800’, value: ‘#20D800’, name: ‘green’ }, { color: ‘#FFCE00’, value: ‘#FFCE00’, name: ‘yellow’ }, { color: ‘#ED7C00’, value: ‘#ED7C00’, name: ‘orange’ }, { color: ‘#D63300’, value: ‘#D63300’, name: ‘red’ }, { color: ‘#D8DBE2’, value: ‘#D8DBE2’, name: ‘gray’ }, { color: ‘#45697F’, value: ‘#45697F’, name: ‘primary-light’ }, { color: ‘#45B2F1’, value: ‘#45B2F1’, name: ‘blue-light’ }, { color: ‘#91F1EF’, value: ‘#91F1EF’, name: ‘teal-light’ }, { color: ‘#5CE245’, value: ‘#5CE245’, name: ‘green-light’ }, { color: ‘#FFDB45’, value: ‘#FFDB45’, name: ‘yellow-light’ }, { color: ‘#F19F45’, value: ‘#F19F45’, name: ‘orange-light’ }, { color: ‘#E16A45’, value: ‘#E16A45’, name: ‘red-light’ }, { color: ‘#E2E4E9’, value: ‘#E2E4E9’, name: ‘gray-light’ }, { color: ‘#D0D9DF’, value: ‘#D0D9DF’, name: ‘primary-lighter’ }, { color: ‘#D0EBFB’, value: ‘#D0EBFB’, name: ‘blue-lighter’ }, { color: ‘#E3FBFB’, value: ‘#E3FBFB’, name: ‘teal-lighter’ }, { color: ‘#D6F7D0’, value: ‘#D6F7D0’, name: ‘green-lighter’ }, { color: ‘#FFF6D0’, value: ‘#FFF6D0’, name: ‘yellow-lighter’ }, { color: ‘#FBE7D0’, value: ‘#FBE7D0’, name: ‘orange-lighter’ }, { color: ‘#F7D9D0’, value: ‘#F7D9D0’, name: ‘red-lighter’ }, { color: ‘#F7F8F9’, value: ‘#F7F8F9’, name: ‘gray-lighter’ }, ]; const SIMPLE_COLORS: Color[] = [ { color: ‘#001725’, value: ‘#001725’, name: ‘black’ }, { color: ‘#6C3900’, value: ‘#6C3900’, name: ‘brown’ }, { color: ‘#636467’, value: ‘#636467’, name: ‘gray’ }, { color: ‘#0096ED’, value: ‘#0096ED’, name: ‘blue’ }, { color: ‘#69EDE9’, value: ‘#69EDE9’, name: ‘light-blue’ }, { color: ‘#20D800’, value: ‘#20D800’, name: ‘light-green’ }, { color: ‘#FFCE00’, value: ‘#FFCE00’, name: ‘yellow’ }, { color: ‘#ED7C00’, value: ‘#ED7C00’, name: ‘orange’ }, { color: ‘#D63300’, value: ‘#D63300’, name: ‘red’ }, ]; /* O Color Picker permite ao usuário escolher uma cor, baseado na paleta de cores da Mobiis

Inputs

Input	Tipo	Padrão	Descrição
className	string	''	Classe CSS customizada adicionada ao host
variant	MdsColorPickerVariants	'input'	—
size	MdsSizes	'md'	—
label	string | undefined	undefined	—
icon	string | undefined	undefined	—
additionalClass	string | undefined	undefined	—
type	MdsColorPickerTypes	'hexadeximal'	—
outline	boolean	false	—
caret	boolean	true	—
disabled	boolean	false	—
loading	boolean	false	—
required	boolean	false	—
itemOption	boolean	false	—
placement	MdsPlacement	'bottom-left'	—
ariaLabel	string | undefined	undefined	—
simpleMode	boolean	false	—
disabledColors	string[]	[]	—
colors	Color[] | undefined	undefined	—
formControl	UntypedFormControl | undefined	undefined	—

Outputs

Output	Payload	Descrição
onChange	string	—

Visão ao vivo

Storybook mds-angular — components-colorpicker ↗

Componentes relacionados

• Popover