Skip to content

feat(chips): modo de escolha única com radio e rodapé Limpar/Filtrar - #1256

Merged
igor-monteiro-almeida merged 2 commits into
masterfrom
devin/1789144442-chips-single-selection
Sep 11, 2026
Merged

igor-monteiro-almeida merged 2 commits into
masterfrom
devin/1789144442-chips-single-selection

Conversation

@devin-ai-integration

Copy link
Copy Markdown
Contributor

Description

Adiciona ao Chips o modo de escolha única com rodapé de ações, que hoje não existe: multiChoice é o único modo que expõe "Limpar"/"Filtrar", e ele vem com checkbox — forma errada para um filtro em que marcar dois não faz sentido (ex.: período da Agenda).

O novo singleSelection reaproveita o mesmo popover (e o mesmo contrato de rascunho: a seleção só é confirmada no "Filtrar"), trocando o controle por radio, que o ListSelectable já suporta nativamente:

<Chips
  label="Período"
  singleSelection
  options={[{ label: 'Próximos 7 dias', value: '7' }, ...]}
  onConfirm={(value) => applyPeriod(value)}
  onClean={clearPeriod}
/>

Semântica:

  • no máximo uma opção marcada — marcar outra substitui a anterior;
  • clicar na opção já marcada volta ao estado vazio (que é válido: não existe "Todos os períodos");
  • onChange/onConfirm recebem array ([] ou [option]), igual ao multiChoice, para o consumidor não ter que tratar duas formas;
  • sem contador no badge e sem "Selecionar todos", que só fazem sentido em multi-seleção;
  • multiChoice e o modo de menu contextual (sem nenhuma das duas flags) ficam inalterados.

Motivação: o pattern transversal de filtros da KB de UX (Pagnet/knowledge-bases#1221) define checkbox quando "nada selecionado" é estado válido e radio quando ver dois valores juntos não é um recorte possível, mantendo um único comportamento de dropdown por barra ("Limpar"/"Filtrar" em todos). Sem este modo, o preview da Agenda só conseguia chegar ao desenho aprovado sobrescrevendo o CSS do checkbox.

Types of changes

  • Bug fix (non-breaking change which fixes an issue)
  • New feature (non-breaking change which adds functionality)
  • Breaking change (fix or feature that would cause existing functionality to not work as expected)
  • This change requires a documentation update

How Has This Been Tested?

  • npx jest packages/ocean-react/src/Chips packages/ocean-react/src/ListSelectable — 60 testes verdes, incluindo os 6 novos do singleSelection (render com radio e rodapé, troca de opção, volta ao vazio, onConfirm no "Filtrar", onClean no "Limpar", selectAllOptions ignorado).
  • npx eslint packages/ocean-react/src/Chips e prettier --check limpos; tsc --noEmit sem erro em src/Chips (os erros restantes são pré-existentes em CrossSellCard/stories).
  • Story nova Components/Chips → SingleSelection no Storybook.

Screenshots (if appropriate):

Checklist:

  • I have read the CONTRIBUTING document
  • I have performed a self-review of my own code
  • My changes generate no new warnings
  • My changes work in Chrome, Edge, and Firefox
  • I have made corresponding changes to the documentation (if appropriate)
  • I have added tests that prove my fix is effective or that my feature works
  • All new and existing tests passed

Link to Devin session: https://app.devin.ai/sessions/07e212e459e943379753ff34d7298b5c
Open in Devin Desktop: https://app.devin.ai/desktop/session/07e212e459e943379753ff34d7298b5c?variant=devin
Requested by: @igor-monteiro-almeida

Co-Authored-By: igor.monteiro <igor.monteiro@useblu.com.br>
@devin-ai-integration

Copy link
Copy Markdown
Contributor Author

🤖 Devin AI Engineer

I'll be helping with this pull request! Here's what you should know:

✅ I will automatically:

  • Address comments on this PR. Add '(aside)' to your comment to have me ignore it.
  • Look at CI failures and help fix them

Note: I can only respond to comments from users who have write access to this repository.

⚙️ Control Options:

  • Disable automatic comment, CI, and merge conflict monitoring

Original prompt from igor.monteiro

Olá, vamos iniciar algumas tarefas de evolução da KB de UX. O épico é: https://useblu.atlassian.net/browse/MR-749

Vamos iniciar pelos patterns relacionados aos filtros:
https://useblu.atlassian.net/browse/MR-751
https://useblu.atlassian.net/browse/MR-754
https://useblu.atlassian.net/browse/MR-753
https://useblu.atlassian.net/browse/MR-752
https://useblu.atlassian.net/browse/MR-760

@igor-monteiro-almeida
igor-monteiro-almeida marked this pull request as ready for review September 11, 2026 16:54
@sonarqubecloud

Copy link
Copy Markdown

Quality Gate Passed Quality Gate passed

Issues
0 New issues
0 Accepted issues

Measures
0 Security Hotspots
0.0% Coverage on New Code
0.0% Duplication on New Code

See analysis details on SonarQube Cloud

@igor-monteiro-almeida
igor-monteiro-almeida merged commit ef91666 into master Sep 11, 2026
10 of 12 checks passed
@igor-monteiro-almeida
igor-monteiro-almeida deleted the devin/1789144442-chips-single-selection branch September 11, 2026 17:18
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant