Compact List

Uso

O Compact List deve ser utilizado para exibir opções ou ações dentro do Menu, com foco em manter a consistência visual e alinhamento com outros componentes que seguem o sistema de Framing. Ele é essencial em contextos como:

• Filter Chips com dropdown, garantindo alinhamento visual entre o chip e o menu aberto.

• Select Fields, assegurando que o menu aberto respeite a proporção visual do campo de seleção.

• Overflow Menus em listas ou cards, especialmente em ambientes desktop, mantendo densidade adequada e clareza visual.

O uso do Compact List dentro de menus garante alinhamento harmônico entre ícones, labels e espaçamentos quando combinado com Filter Chips, Select Fields e componentes superiores, resultando em uma interface organizada e coesa.

Anatomia

❖. Container

• Responsável por agrupar visualmente todos os elementos da lista compacta, aplicando estilos coerentes ao estado interativo (normal, hover, focus, pressed).

1. Icon Left

• Elemento opcional que exibe um ícone à esquerda do conteúdo textual.

• Deve receber um ícone compatível com o contexto da opção exibida.

• Em casos de uso sem ícone, o layout se ajusta respeitando os espaçamentos definidos pelo Framing.

2. Label Primary

• Conteúdo textual principal da lista. É obrigatório.

• Deve comunicar claramente a ação ou informação disponível, adaptando-se ao espaço disponível de acordo com o tamanho da variante.

3. Description

• Texto complementar opcional, exibido abaixo do label principal, para fornecer informações adicionais ou contexto sobre a opção.

• Recomendado apenas em casos onde a opção necessita esclarecimentos extras sem poluir visualmente o menu.

4. Icon Right

• Elemento opcional que exibe um ícone à direita da opção (ex.: ícone de navegação, submenus, status).

• Seu uso é definido pelo contexto da ação ou indicação complementar.

Variantes

Large

Indicado para menus vinculados a componentes com área de clique maior, como Filter Chips large, garantindo legibilidade e conforto visual em opções mais espaçadas.

Medium

Recomendado como padrão geral para menus em contextos desktop, equilibrando densidade e legibilidade. Exemplo: menus de overflow em listas de músicas.

Small

Utilizado em menus mais compactos, especialmente em ambientes onde o componente pai ocupa menos espaço vertical, mantendo consistência com ícones de 20px e tipografia reduzida.

Posicionamento

O Compact List é destinado exclusivamente a compor o conteúdo interno de Menus:

• Em dropdowns disparados por Filter Chips ou Select Fields, promove alinhamento preciso entre campo acionador e lista de opções.

• Em menus contextuais, como botões de overflow em listas, assegura legibilidade e consistência.

• É fundamental para cenários onde o Menu aparece logo abaixo de outro componente regido pelo Framing, mantendo continuidade visual vertical.

Referências

Histórico de Atualizações