Improvements in libraries layer semantics

[aweell]

Description

Analyse and update layer naming in the components that have incorrect or improvable layering semantics.

Tasks

• Define the list of impacted components
• Create a sub-issue for each component to slice the amount of work and facilitate reviews

Discussed in #2094

^{Originally posted by annefranca March 10, 2025}

Goal

Estabelecer uma arquitetura para as camadas e uma nomenclatura padrão para as propriedades dos componentes da biblioteca Mística e Vivo Extended para garantir consistência e escalabilidade entre os times de Design e Desenvolvimento.

Context

Padronização para arquitetura das camadas

Proposta: aplicar a estrutura spacing types para organizar as camadas, e assim criar uma padronização de construção entre os componentes.

→ Box: estrutura que envolve o componente
→ Stack: organiza os elementos na vertical
→ Inline: organiza os elementos na horizontal

Padronização para nomenclatura das propriedades

Proposta: padronizar a nomenclatura dos elementos e das propriedades dos componentes para gerar menos problemas de entendimento, governança e principalmente sobre processos de escalabilidade.

Observação: adicionamos junto à essa proposta uma melhoria para aplicação das nested Instances e da edição de text nas propriedades dos componentes.

Padronização para documentação contextual

Proposta: deixar visível as informações sobre o componente de forma resumida para consumo do time de Design.

Impact

Ao implementar a padronização nas camadas e nas propriedades, vamos conseguir ter mais consistência entre os componentes facilitando a criação e a documentação entre diferentes Designers, além de facilitar o entendimento dos Desenvolvedores ao inspecionar os componentes, tornando as bibliotecas espelhadas.

Discussion Questions

N/A

Additional considerations

No response

Do you have a visual proposal?

https://www.figma.com/design/yWcAKo0D2FpApdVq14v4hP/Arquitetura-e-propriedades-dos-componentes?node-id=0-1&t=dmuWw4C7IWPgThsG-1