po-ui / po-angular

Biblioteca de componentes Angular.
https://po-ui.io
MIT License
917 stars 212 forks source link

LookupComponent: Falta de responsividade e estilização #2108

Open GuilhermeLopesTotvs opened 4 months ago

GuilhermeLopesTotvs commented 4 months ago

Passos para reproduzir:

  1. Crie um projeto que utilize o POUI
  2. Crie um componente que utilize o lookup
  3. O lookup está utilizando um serviço de busca de dados
  4. Clique na lupa para abrir o modal do lookup
  5. Espere o carregamento dos itens dentro da tabela do lookup no modal
  6. Coloque a tela que está rodando o projeto em uma tela de menor tamanho
  7. Será criado 3 scrolls, 2 da tabela tanto para a horizontal quanto para a vertical, e scroll para o modal

Qual o comportamento atual?

Ao clicar para abrir o modal, e a quantidade de dados é muito grande, ao invés do componente se tornar responsivo, ele criar um scroll enorme para que apareça a tabela, ao invés da tabela se ajustar ao tamanho do modal do lookup, sem contar a falta de estilização no texto de "Busca Avançada".

Que comportamento você esperava ver?

Esperava que o texto "Busca Avançada" tivesse uma estilização como os labels de outros campos, pois está até mesmo sem fonte, e que quando o componente fosse usado em uma tela menor ou maior, os itens dentro do modal do lookup se tornassem responsivos e que não criassem os vários scrolls ao redor do modal

Ambiente

Observações

Tempo de Resposta PO UI --> Em até 7 dias úteis. Tempo de Retorno Solicitante --> 35 dias corridos Issues sem retorno do solicitante por mais de 35 dias corridos serão encerradas.

CSimoesJr commented 4 months ago

Bom dia @GuilhermeLopesTotvs, tudo bem?

Atualmente o lookup possui os seguintes tokens que permitem customizar o input de busca e o texto de busca avançada: --color-lookup-search-background-color-text --color-lookup-search-border-text --color-lookup-search-border-text-focusable --color-lookup-advanced-search-link-color-text

De qualquer forma, agradecemos pela sugestão de estilizar outras questões e analisaremos. O font-size realmente não parece estar correto.

Sobre a responsividade, atualmente a geração de scroll dentro do modal e na tabela acaba acontecendo devido a quantidade de elementos. Isso ocorre com mais facilidades em lookups que utilizam a funcionalidade de busca avançada, pelo fato de gerar disclaimers com os filtros acima da tabela e exibir disclaimers com os itens selecionados abaixo. Uma possível solução seria diminiur o espaçamento interno da tabela utilizando p-spacing="small".

Att.