feat(list): adiciona indicatorPosition nos componentes de lista - #1253
Merged
Conversation
A tela de seleção de benefícios do PagBlu (MR-523) posiciona a tag
"%{installments}x sem acréscimo" acima do título do card. A posição do
indicator era fixa no CSS de cada componente, então a tela sairia com
layout montado por fora do DS.
ListAction, ListExpandable, ListReadOnly e ListSelectable ganham
indicatorPosition?: 'inline' | 'above' | 'below', default 'inline'.
Implementação num ponto compartilhado: os 4 já renderizam ContentList, e
.ods-content-list já é a coluna de conteúdo (flex column). O ContentList
ganha um slot opcional de indicator e o SCSS ganha __indicator com os
modificadores --above/--below. Em 'inline' nada é passado e o host mantém
o wrapper atual, byte a byte.
Os 8px do respiro vão no margin do wrapper do indicator, nunca em gap do
.ods-content-list: o container não tem gap hoje e o espaçamento entre
título, descrição e caption vem do margin-top do caption — um gap ali
regrediria os 9 componentes que usam o ContentList.
Dois detalhes que o ListSelectable exige:
- indicatorPosition entra nas deps do useMemo do internalList, senão a
posição fica obsoleta ao trocar a prop em runtime;
- a posição é repassada ao ListReadOnly no ramo isSelectableDisabled,
senão se perde exatamente no estado desabilitado.
Também exporta ListSelectableProps no barrel: a doc já instruía esse
import e ele não existia.
Testes: 35 casos novos, incluindo teste próprio do ContentList (que não
tinha), não-regressão dos 3 consumidores fora de escopo (ListSettings,
SettingsListItem, TransactionListExpandable) e clique no indicator do
ListSelectable nas 3 posições. Suíte: 781 testes, 115 snapshots, todos
inalterados — a prova de que 'inline' não mexeu em produção.
Ref: MR-553
…-> 8px) Acompanha a decisão de design de 24/07/2026: no Figma o itemSpacing do frame Main do Card List Expandable passou de 12 para 8, bound à variável spacingXxs da coleção Ocean Spacing, nas 18 variantes — inclusive nas 6 que já existiam. O gap do Content também é 8, mesmo token. MUDANÇA VISUAL EM PRODUÇÃO: toda tela que usa o ListExpandable verá o ícone 4px mais perto do texto. Raio medido por busca de código: 4 usos, todos em mfe-charge-management — drawer de uso de crédito da rede, detalhes de saldo, drawer de cobrança da rede e banner de status de portabilidade. Deixa o DS temporariamente inconsistente: 8px no ListExpandable contra 12px em ListAction, ListReadOnly e ListSettings. Isso espelha o estado do Figma, onde os outros 7 componentes ainda não foram tocados. Commit separado de propósito: é a única mudança visível a cliente da entrega, e pode ser dropado sem afetar o enabler. Ref: MR-553
![devin-ai-integration[bot]](https://avatars.githubusercontent.com/in/811515?s=60&v=4){kind=small}
Co-authored-by: devin-ai-integration[bot] <158243242+devin-ai-integration[bot]@users.noreply.github.com>
FabioRolin
approved these changes
Jul 27, 2026
…tories A story IndicatorPosition renderizava a tag fixa nas três posições, sem como desligá-la — não dava para ver o card sem indicator lado a lado. Usa a própria prop `indicator` com options/mapping (o padrão que ListReadOnly e ListExpandable já usam para indicatorOptions), com a opção withoutIndicator. Sem arg sintético, então o tipo Story segue amarrado às props do componente. Descrições das stories traduzidas para inglês, seguindo o review.
…sition O SonarCloud reprovou o quality gate com new_duplicated_lines_density de 17,5% contra limite de 3%: as quatro stories IndicatorPosition foram geradas do mesmo template e ficaram quase idênticas. Move parameters, argTypes, args, os casos e o estilo do container para src/_stories/components/indicatorPosition.tsx — pasta já reservada e excluída do build publicado (tsconfig.build.json), então o helper não vai para o pacote dos consumidores. Cada story cai para ~12 linhas, com um map sobre os casos em vez de três blocos de JSX repetidos. O toggle do indicator (options/mapping com withoutIndicator) fica definido num lugar só.
|
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
2 participants
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Contexto
A tela de seleção de benefícios do PagBlu (MR-523) posiciona a tag
%{installments}x sem acréscimoacima do título do card. Hoje a posição doindicatoré fixa no CSS de cada componente, então a tela sairia com layout montado por fora e o DS deixaria de ser a fonte da verdade.Subtarefa MR-553 de MR-552. Spec: Ledger.
São dois commits — o segundo é o único visível a cliente
1.
feat(list)— o enabler, zero mudança visualListAction,ListExpandable,ListReadOnlyeListSelectableganham:Um ponto compartilhado, não quatro. Os 4 já renderizam
ContentList, e.ods-content-listjá é a coluna de conteúdo (display:flex; flex-direction:column; flex:1) — exatamente o container que o design pede. OContentListganhou um slot opcional de indicator e o SCSS ganhou__indicatorcom--above/--below. Eminlinenada é passado e o host mantém o wrapper atual, byte a byte.Os 8px do respiro vão no
margindo wrapper, nunca emgapdo.ods-content-list: o container não temgaphoje e o espaçamento entre título, descrição e caption vem domargin-topdo caption — umgapali regrediria os 9 componentes que usam oContentList.Dois detalhes que o
ListSelectableexigia e são fáceis de passar batido:indicatorPositionentra nas deps douseMemodointernalList, senão a posição fica obsoleta ao trocar a prop em runtime (coberto por teste);ListReadOnlyno ramoisSelectableDisabled, senão se perde exatamente no estado desabilitado (coberto por teste).Também exporta
ListSelectablePropsno barrel — a doc já instruía esse import e ele não existia.2.⚠️ mudança visual em produção
fix(list-expandable)—.ods-list-expandable__main { gap }de 12px para 8px, acompanhando o Figma (itemSpacing do frame Main de 12 → 8, bound aspacingXxs, nas 18 variantes).Toda tela que usa o
ListExpandableverá o ícone 4px mais perto do texto. Raio medido por busca de código: 4 usos, todos emmfe-charge-management— drawer de uso de crédito da rede, detalhes de saldo, drawer de cobrança da rede e banner de status de portabilidade.Deixa o DS temporariamente inconsistente: 8px no
ListExpandablecontra 12px emListAction,ListReadOnlyeListSettings— espelhando o Figma, onde os outros 7 componentes ainda não foram tocados.Está isolado num commit próprio de propósito: se a mudança visual não for agora, dropa o commit e o enabler segue.
Verificação
inlinenão mexeu em produçãoContentList(que não tinha nenhum)ListSettings,SettingsListItemeTransactionListExpandable— os 3 consumidores doContentListfora deste escopoListSelectable: clicar no indicator alterna checkbox/radio nas 3 posições (não havia teste de clique nesse componente)eslintcom 0 errosCada teste referencia o cenário da spec (CT-1 a CT-14). Os de
CT-4comparamasFragment()entre o default e oinlineexplícito — se divergirem, a retrocompatibilidade quebrou.Storybook e doc
Story
IndicatorPositionnos 4 componentes com as 3 posições lado a lado (alimenta o Chromatic), e seção nova no.mdxde cada um. NoListActiona doc distingue explicitamenteindicatorPositiondeposition(timeline) emenuPosition(dropdown).Nota sobre
inlineinlinesignifica ao lado do texto, no fim do bloco de conteúdo — a posição que os quatro já produzem hoje. A estrutura interna varia (emListExpandable/ListReadOnlyo indicator vive dentro de__trailing), mas a ordem visual renderizada é texto → tag → controle nos quatro, garantida por.ods-content-list { flex: 1 }. O indicator pertence ao bloco de conteúdo, não ao slot do controle.🤖 Generated with Claude Code