Enterprise: Barra de ferramentas: botão Fechar desalinhado no campo de pesquisa

@ rob2d está se perguntando se você poderia revisitar suas alterações nos campos de pesquisa? Parece que esse problema está surgindo em alguns deles. O campo de pesquisa dentro dos campos de pesquisa aqui tem o mesmo problema: https://master-enterprise.demo.design.infor.com/components/lookup/example-index.html

Acho que está relacionado ao uso de transform: translateY() vez de valores de pixel:

• Aqui está um ponto
• Aqui está o outro

Eu não me lembrava disso quando falamos sobre o tíquete original, mas especificamente evitamos fazer esse tipo de alinhamento com transformações no passado (não consigo lembrar o contexto do porquê) - a linha de fundo é que provavelmente deveríamos reverter isso e vá com valores de pixel para alinhamento.

@EdwardCoyle o deslocamento de y foi necessário para cerca de 5-6 casos com o último bilhete por ir muito longe nos campos / cortar visualmente o que eu não consegui obter por meio de posicionamento absoluto por causa da estrutura de como outros casos foram embrulhados no (de modo que gerou os outros problemas), e houve casos diferenciados em que isso não aconteceu, mas eu perdi.

Vou tentar olhar para isso e isolá-lo na próxima vez que verificar - talvez possa injetar uma classe com mais contexto nesses casos específicos no nível do componente, porque parece que há algumas regras conflitantes. Tentei evitá-lo, já que era meu primeiro ingresso antes e não era familiar (embora ... não o mais naquele, mas com sorte).

Consulte também https://main-enterprise.demo.design.infor.com/components/swaplist/example-search.html , além do pequeno problema com o campo sendo apenas alguns pixels abaixo. Se você digitar no campo, o X ficará totalmente invisível. Acho que pode ser o mesmo problema que aqui. Então, se você quiser revisar essa página também, isso seria ótimo.

https://github.com/infor-design/enterprise/issues/5080

Mais dois problemas foram publicados https://github.com/infor-design/enterprise/issues/5096 https://github.com/infor-design/enterprise/issues/5090

Eu acho que todos eles podem ser consertados juntos ....

@tmcconechy, o primeiro e o segundo problemas não estão relacionados.

Eu direcionei o CSS para o segundo / corrigido e testando ... mas se continuar, de forma holística, poderia ser melhor repensar esses botões de fechar, já que o alinhamento é codificado em muitas maneiras diferentes que conflitam - faz sentido / compreensível se recurso foi adicionado em retrospecto, mas parece um pouco maluco, pois não havia solução que não criasse alguns casos ruins sem posição absoluta / flexível (isso é o que causou o primeiro problema em que eles caíram em alguns casos).

Wack a mole é exatamente o que é. Mas talvez apenas faça alguns css para cada caso que funcione. Não tenho certeza do que mais você pode fazer, já que foi feito de uma forma que forçou isso. Veja o que você pode inventar ... No final do dia, não precisa ser bonito, só funcionar

@tmcconechy, este é um pouco diferente do resto; é realmente funcional e é um problema que simplesmente não percebemos até agora - que está relacionado ao estilo adequado. Há um menu que está sendo cortado, então o estilo nunca foi corrigido, mas entra / sai do fluxo. Mas também há uma classe is-open sendo removida aleatoriamente quando o fluxo muda (acho que devido a isso?). Definir o contêiner como display: inline-flex resolve a ocultação, mas, em seguida, introduz as novas regras para que possamos estilizá-lo de forma consistente.

Veja a div que está escondida aqui, na verdade, está apenas transbordando no res menor.

Isso parece uma pequena lata de vermes, mas também avisa que talvez seja necessário atualizar algumas imagens para que isso seja corrigido corretamente.

Sim - compreensível com os testes. Nós vamos conseguir. Você pode querer apenas direcionar as correções mais especificamente, visto que esse código é mais antigo.

@tmcconechy tentou examinar e não parecia viável consertar muito especificamente. Tentei olhar para o código que gerava as classes, mas havia alguns conceitos / regras esotéricos adicionados lá que exigiam compreensão / contexto, um dos quais está fazendo com que as classes gaguejem quando o fluxo muda. Portanto, tentarei restaurar o menu por meio de uma regra de layout embutido e espero que ajude a direcionar esses problemas que surgem com base em minha postagem acima.

OK, mas existem alguns casos como

https://main-enterprise.demo.design.infor.com/components/swaplist/example-search.html -> pode ter como alvo classes swaplist
https://master-enterprise.demo.design.infor.com/components/lookup/example-index.html -> poderia ter como alvo o modal de pesquisa

Alguns dos outros podem ter como alvo guias ou ect da barra de ferramentas. Não é bonito, mas se você não vier com algo melhor.

@tmcconechy sim, obrigado, no swaplist eu tenho uma correção para a classe. Estava falando sobre o que está nas telas desta página.

(há um bug completamente diferente com o layout, por exemplo, o menu simplesmente desapareceu do estouro, mas parece que era para estar lá? ** ou vice-versa, uma vez que volta e desaparece)

editar: apenas para contexto, giphy:

No entanto, vai se concentrar apenas no estilo no momento.

Aprovado no controle de qualidade. Obrigada.