Filtros
Padrão de filtros orienta a montagem de barras de filtros, combinando uma série de componentes, como Selects, Buttons, entre outros, de forma consistente e lógica.
Posicionamento na tela
Barra de filtro deve estar posicionadas logo abaixo do título, idealmente ocupando a largura máxima disponível na página.
Ordem dos elementos
O pattern de filtros segue a ordem: busca, filtros, ordenação e botões de ajuste.
Quando os filtros extrapolam a largura máxima disponível, os campos de ordenação e botões de ajuste devem ficar abaixo do campo de busca, deixando a barra de filtros com duas ou mais linhas.
Espaçamento mínimo
A barra de filtros deve respeitar um espaçamento mínimo para outros elementos da página.
Tipos
Filtros são customizáveis. Normalmente, são usados Input ou Select, que permitem que a pessoa usuária consiga definir as regras de filtragem das informações.
Simples
Tem apenas uma opção de escolha por seletor - e não acumula tags. O item selecionado é exibido diretamente dentro do Select.
Com múltipla seleção
Filtro com múltipla seleção deve mostrar os valores selecionados por meio de tags posicionadas logo abaixo dos seletores.
É recomendado o uso de ícones idênticos nos seletores e nas suas tags, para facilitar a leitura dos filtros aplicados.
A ordem das tags deverá seguir a ordem dos seletores correspondentes, formando assim uma conversa com a pessoa e uma hierarquia dos dados.
Com função de Aplicar
Se for necessário um botão para aplicar os parâmetros dos filtros, ele deve estar posicionado ao lado do último seletor. O botão de aplicar deve ser do tipo secondary.
Avançado
Podemos ter filtros avançados acompanhando ou não filtros simples. Nesses casos, um botão de "Filtros Avançados" deve ser adicionado por último nos filtros.
O botão "Filtros Avançados" deve abrir uma Drawer com mais opções de filtragem, além daquelas já exibidas na tela. A composição dos filtros e suas funcionalidades pode ser feita de acordo com a necessidade.
Exemplos
Busca + Filtro simples
Busca + Filtro simples + Ordenação
Busca + Filtro simples + Ordenação + Botões
Busca + Filtro com múltipla seleção + Ordenação + Botões
Busca + Múltiplos Filtros + Ordenação + Botões
Busca + Filtro com múltipla seleção + filtro simples + filtro avançado + Ordenação
Busca + Filtro avançado + Ordenação + Botões
Busca + Múltiplos Filtros + Ordenação + Botões
Feedback
Para reportar algum problema, solicitar novos ícones, solicitar novos casos de uso de componentes, tirar dúvidas, enviar sugestões ou reportar bugs, entre em contato pelo nosso canal no Slack #tangram-design-system.