Filter Bar

A barra persistente de filtros da index — visões salvas, critérios ativos e ações. Sempre visível, nunca overlay; abre o Filter Search para compor critérios.

Componente EletroDS em internalização. Chama-se Filter Bar no guide — no código, MeFilterBar. Combina visões salvas + um CriterionInput por critério + a ButtonBar das ações. A entrada que compõe e edita critérios é o Filter Search — o overlay com base no CommandPalette, documentado à parte. Nunca recrie a barra à mão.
Todos processos
Todo período
Status
Em análise
Responsável
Marina+2

A Filter Bar é a faixa persistente entre a toolbar e a listagem. Nunca abre overlay — é sempre visível e reflete em tempo real os critérios ativos. Tem CRUD inline sobre os critérios: clicar num critério edita-o direto na barra; o Filter Searchadiciona novos. O comportamento de filtrar (criar, editar, aplicar, salvar) vive no padrão Filtrar; aqui está como a barra se monta e se adapta.

Anatomia

Lê-se da esquerda para a direita, sobre o mesmo fundo da toolbar e separada da tabela por uma borda inferior. Só a área de critérios rola horizontalmente quando excede a largura.

ZonaO que contém
LeadingSlotVisões salvas — recortes prontos da listagem (ex.: "Todos os processos", "Todo período") como dropdowns de contexto; não criam critérios.
CriterionAreaOs critérios ativos, um CriterionInput por filtro (campo · operador · valor). Scroll horizontal quando excede a largura.
ActionButtonsAreaAs ações da barra — + (abre o Filter Search) · Salvar a combinação atual · Limpar — montadas com a ButtonBar.

A barra mostra e edita; o Filter Search compõe. São peças distintas que trabalham juntas:

  • O + (ou a busca) abre o Filter Search — o overlay com base no CommandPalette — para adicionar um critério.
  • Cada critério confirmado no Filter Search vira um CriterionInput na CriterionArea.
  • Editar um critério existente é inline na barra: clicar num segmento (campo, operador ou valor) abre a edição ali mesmo — sem reabrir o Filter Search.

Responsividade

A barra é persistente em qualquer largura — não vira overlay (quem abre é o Filter Search). A régua geral está em Foundations › Breakpoints; o que é próprio da barra:

LarguraComportamento
Desktop · ≥ 1024pxTudo inline: visões salvas no início, critérios como chips editáveis e as ações à direita.
Tablet · 640–1024pxInline; os critérios excedentes recolhem num +N que abre o restante em popover.
Mobile · < 640pxA barra continua visível; a CriterionArea ganha scroll horizontal e o + abre o Filter Search como bottom-sheet. A barra em si não colapsa em modal.
A área de critérios prefere scroll horizontal a espremer os chips; o valor é o primeiro a truncar — campo e operador continuam legíveis. O único overlay é o Filter Search, nunca a barra.

No código

Enquanto não há um <MeFilterBar> internalizado, a barra é uma faixa persistente que compõe CriterionInput (um por critério) e ButtonBar (ações) sobre o layout da toolbar, e dispara o Filter Search para compor/editar critérios.

Acessibilidade

A barra deve manter cada critério como alvo editável com rótulo acessível e anunciar mudanças nos critérios ativos (aria-live) já que a listagem atualiza em tempo real. Como é sempre visível, não há foco a gerenciar na própria barra — o foco gerenciado pertence ao Filter Search quando abre.

Onde se aplica