Componentes Compostos
Componentes compostos são aqueles construídos utilizando uma estrutura interna padronizada baseada em slots. Eles são a "cola" que une os átomos do Design System em elementos funcionais e escaláveis.
Estrutura Interna Padronizada
Para manter a consistência, quase todos os nossos componentes compostos seguem a anatomia:
- Leading: O elemento que introduz o componente (Ícone, Avatar, Checkbox).
- Content: A informação principal (Título, Descrição, Inputs).
- Trailing: A ação final ou indicador de status (Seta de navegação, Switch, Badge, Botão de deletar).
Exemplos Reais
- Tile / ListItem: Uma linha em uma lista que tem um ícone à esquerda, nome/email no centro e uma seta à direita.
- Card: Uma caixa que pode ter um avatar no topo (leading), um texto no meio e ações no rodapé.
- MenuItem: Similar ao ListItem, usado em menus suspensos ou drawers.
Como isso ajuda na escalabilidade?
Se todos os componentes seguem a mesma estrutura de Leading/Content/Trailing:
- O designer sabe exatamente onde colocar cada elemento novo.
- O desenvolvedor pode reutilizar a mesma lógica de layout (Flexbox/Stack) para diversos componentes diferentes.
- A interface ganha uma harmonia visual natural, pois os alinhamentos são consistentes em todo o sistema.
Como fazer vs Como não fazer
✅ Como fazer
- Mantenha o alinhamento vertical centralizado entre o Leading, Content e Trailing na maioria dos casos.
- Defina espaçamentos fixos (tokens) entre as áreas (ex: 16px entre leading e content).
- Permita que as áreas de Leading e Trailing sejam opcionais.
❌ Como não fazer
- Criar um componente de lista onde o ícone fica à direita em uma tela e à esquerda em outra.
- Colocar lógica de negócio dentro destes componentes. Eles devem ser puramente visuais e receber dados via props ou slots.
- Ignorar a hierarquia tipográfica dentro do slot de
Content. O título deve ser sempre mais proeminente que a descrição.