Histórico da Página

Descrição

...

A versão 2.0.0 do produto traz mudanças estruturais e visuais importantes no frontend, com foco em modernização de bibliotecas, otimização de carregamento, reorganização de paths e introdução de novos recursos como classes helpers, variáveis CSS e modo escuro no tema responsivo.
O objetivo é melhorar desempenho, consistência visual e preparar o produto para evoluções futuras, reduzindo dependências legadas.

Migração do Rich Editor

...

Agora o componente de FLUIGC.richeditor é baseado no plugin Kendo UI.

...

Mudanças no Style Guide e CSS

Alteração geral no tamanho dos elementos

• Para atender questões de acessibilidade, os elementos foram alterados...

...

Abaixo estão listadas as principais mudanças visuais nessa nova atualização.

Alterações visuais e de acessibilidade

Como parte da implementação do Animalia Design System (Animalia DS), realizamos ajustes visuais em diversos elementos da interface. Essas alterações têm como objetivo melhorar a experiência do usuário e garantir maior aderência às práticas de acessibilidade.

• Tamanhos dos elementos: botões, campos e demais componentes foram ampliados para facilitar a interação, especialmente em dispositivos móveis e para pessoas com necessidades específicas.

• Cores e contrastes: paleta de cores revisada para assegurar legibilidade e conformidade com recomendações de acessibilidade (WCAG).

• Outros ajustes visuais: espaçamentos, ícones e tipografia foram atualizados para proporcionar uma interface mais consistente, clara e inclusiva.

Manutenção de estilos legados

Para mitigar impactos em cenários específicos, os estilos visuais da versão 1.8.2 ou inferior foram preservados em um diretório dedicado. Esses arquivos devem ser utilizados exclusivamente em formulários e apenas em casos excepcionais, quando a adoção imediata dos novos padrões do Animalia Design System não for viável.

Arquivos disponíveis em Arquivos antigos movidos para /old/*:

• /style-guide/css/old/fluig-style-guide.min.css (Classic)

• /style-guide/css/old/fluig-style-guide-flat.min.css (Flat)

Paths descontinuados

Alguns caminhos antigos foram removidos e não estão mais disponíveis, retornando erro 404Novo path recomendado (visual 2.0.0):

• /style-guide/css/fluig-style-guide

-flat

• .min.css

Paths descontinuados (erro 404):

• /portal/resources/style-guide/css/fluig-style-guide-flat.min.css

• /portal/resources/style-guide/css/fluig-style-guide-flat.min.css

Path recomendado

O caminho oficial e suportado para utilização de estilos é:

• /portal/resources/style-guide/css/fluig-style-guide-flat.min.css

Melhorias:

• Novas classes helpers no Style Guide.

• Novas classes responsivas de fonte, margin e padding.

• Novas variáveis CSS de tema.

Mudança de Fontes

• Tema Responsivo: Agora usa Lato Regular como font-family padrão.

• Impacto: Pode alterar espaçamento e alinhamento em temas customizados.

Iconografia e ícones

A utilização de ícones também passou por ajustes com a implementação do Animalia Design System no Fluig.

...

• Ícones antigos (Fluig

...

• Icons):

...

• Os ícones legados (fluigicon) foram movidos para um arquivo separado. Caso ainda sejam utilizados em formulários, é necessário importá-los manualmente:

  • /style-guide/css/fluig-icons.min.css

• Nova biblioteca de ícones (Animalia Icons): O padrão recomendado são os Animalia Icons (animaliaicon). Assim como no caso dos ícones legados, em formulários eles devem ser importados manualmente:

  • /style-guide/css/animalia-icons.min.css

Mudança nos menus:

• Menus Liquid e Responsive agora usam ícones Animalia.

Impacto: É necessário importar explicitamente os arquivos de ícones.

Melhorias Gerais

Otimização de carregamento:

Menus

...

Os menus Liquid e Responsive foram atualizados e agora utilizam ícones da biblioteca Animalia Icons.

Mudança de fonte padrão

...

No Tema Responsivo, a fonte padrão do sistema passou a ser Lato Regular (font-family).

Melhorias gerais

...

Foram aplicadas diversas melhorias de desempenho e organização do código:

• Otimização de carregamento

  • Inclusão de estilos críticos do sistema

  Estilos críticos

  • com rel="preload"

  .

  • Scripts secundários do sistema carregados com defer

• Novas utilitárias no Style Guide

  • Classes helpers adicionais adicionadas no Style Guide. Consulte a documentação para mais detalhes.

  • Classes responsivas para fontes, margens e paddings, disponível na mesma documentação.

  • Novas variáveis de CSS de tema. Consulte a documentação de temas para mais detalhes.