CriterionInput
O critério ativo da Filter Bar (campo · operador · valor) — props, variantes, estados e API real do EletroDS.
CriterionInput, usado no código como <MeCriterionInput>. No Figma, use o componente da Library; nunca recrie um critério avulso.Cada critério ativo é um CriterionInput. Os segmentos (campo · operador · valor) são clicáveis e reabrem o passo correspondente; o × remove. Quando a barra é desativada por outro modo (ex.: seleção em massa), os critérios ficam disabled.
O CriterionInput representa um critério de filtro — uma peça segmentada campo · operador · valor, com remoção opcional. É a unidade que compõe e edita os filtros na Filter Bar. O comportamento de filtragem (como o critério é criado, editado e aplicado) vive no padrão Filtrar; aqui está a ficha do componente.
Uso em tela
Aparece na Filter Bar, um por critério ativo. Lê-se da esquerda pra direita — campo · operador · valor — e cada segmento é clicável para editar aquele passo; o × remove na hora, sem confirmação. Use sempre que houver um filtro aplicado visível; nunca recrie um "chip de filtro" à mão.
Alinhamento (verificado na index real): na Filter Bar o
MeCriterionInputroda comsize="sm"+deletable, e os controles de filtro ao lado (Selects/filtros rápidos) usam o MESMOsize— mesma altura. Size divergente entre eles = barra desalinhada (bug recorrente).
Aplicação
O mesmo critério reaparece em três momentos do filtro de uma index:
| Onde | O critério representa |
|---|---|
| Filtros aplicados (Filter Bar) | um filtro ativo e editável (ex.: Status = Em análise) |
| Filter Search (criar critério) | o resultado dos 3 passos campo · operador · valor |
| Seleção em massa | os critérios ficam disabled enquanto a seleção está ativa — ver Ações em massa |
Variantes
A apresentação muda por modo e por tipo do campo — escolha pelo cenário:
| Quero… | Use |
|---|---|
| Critério padrão, editável e removível | deletable |
| Critério dentro de uma barra densa (tabela/index) | compact (ignora deletable) |
| Critério somente-leitura (ex.: filtros desabilitados durante seleção em massa) | disabled |
| Esconder a troca de campo/operador (critério fixo) | hideField / hideOperator |
| Ajustar densidade | size="sm" | "md" | "lg" (padrão md) |
O valor se adapta ao field.type: object → lista de opções (estática via field.options.items ou assíncrona via função que retorna Promise); date → seletor de data; number → numérico; string → texto; boolean → alternância. Operadores inativos não aparecem por padrão — para incluí-los, liste-os em operators (ex.: ['equal', 'different', 'empty']).
Valor múltiplo (vários valores num critério)
Alguns operadores aceitam mais de um valor no mesmo critério — o campo de valor vira uma entrada múltipla (várias etiquetas/opções, não um único valor):
- Texto múltiplo (
string) — operadorescontain_and·contain_or·not_contain_and·not_contain_or: digita-se vários termos separados por um delimitador. Controle porcriterion.options:delimiter(string ou RegExp que separa os valores) emaxLength(máximo de valores). - Data múltipla (
date) —between(intervalo início–fim) e os relativosafter/before/next/last. Para várias datas soltas ou vários intervalos, use o componente InputDateMultiple. - Seleção múltipla (
object) — as opções vêm defield.options.items(estáticas ouPromise); combina com os operadores de conjunto (contain_*).
// criterion.options — para operadores de valor múltiplo
{ maxLength?: number, delimiter?: string | RegExp, items?: any[] /* opções do tipo 'object' */ }
Estados
| Estado | Comportamento |
|---|---|
| Default | Editável: campo, operador e valor reabrem o passo correspondente. |
deletable | Exibe o botão de remover (emite remove). |
disabled | Impede edição — usado quando a filter-bar é desativada por outro modo (ver Ações em massa). |
compact | Layout condensado para barras densas; sem botão de remover. |
Responsividade
O critério adapta-se por densidade, não por colapso — quem lida com a falta de espaço é a barra que o contém, com scroll horizontal (ver Filter Bar). No próprio CriterionInput:
| Recurso | Efeito |
|---|---|
size — sm · md · lg | Ajusta altura e densidade ao contexto (sm em tabelas/barras densas, md padrão). |
compact | Layout condensado para barras cheias; o botão de remover não aparece (o deletable não tem efeito). |
| Valor longo | Trunca no segmento de valor, preservando campo · operador legíveis; quem some primeiro é o valor, nunca o campo. |
No código
<MeCriterionInput> é um componente EletroDS. Props, eventos e tipos completos — para quem for implementar — ficam no doc técnico do EletroDS: eletro.design/components/criterioninput. Aqui o foco é o uso em Design; o detalhe de implementação vive lá.
Acessibilidade
Cada segmento é um alvo clicável — garanta rótulo acessível para campo, operador, valor e remover. O estado disabled precisa ser percebido além da cor (opacidade + aria-disabled); não dependa só do tom para sinalizar "filtro inativo".