Enterprise: Barre d'outils : bouton de fermeture mal aligné dans le champ de recherche

@rob2d, vous vous demandez si vous pourriez revoir vos modifications dans les champs de recherche ? Il semble que ce problème se pose dans une poignée d'entre eux. Le champ de recherche à l'intérieur des champs de recherche ici présente le même problème : https://master-enterprise.demo.design.infor.com/components/lookup/example-index.html

Je pense que c'est lié à l'utilisation de transform: translateY() au lieu de valeurs de pixel :

• Voici un endroit
• voici l'autre

Je ne m'en souvenais pas lorsque nous avons parlé du ticket d'origine, mais nous avions spécifiquement évité de faire ce type d'alignement avec des transformations dans le passé (je ne me souviens pas du contexte pour expliquer pourquoi) - l'essentiel est que nous devrions probablement revenir en arrière et allez avec des valeurs de pixel pour l'alignement.

@EdwardCoyle le décalage y était nécessaire pour environ 5-6 cas avec le dernier ticket pour aller trop loin dans les champs/couper visuellement ce que je ne pouvais pas obtenir via le positionnement absolu en raison de la structure de la façon dont les autres cas étaient enveloppés dans le domaine (ce qui a engendré les autres problèmes), et il y avait des cas nuancés où ce n'était pas le cas, mais je l'ai raté.

J'essaierai de regarder cela et de l'isoler la prochaine fois que je le vérifierai - peut-être pourrai-je injecter une classe avec plus de contexte dans ces cas spécifiques au niveau du composant car il semble qu'il y ait des règles contradictoires. J'ai essayé de l'éviter car c'était mon premier billet auparavant et je n'étais pas familier (bien que... pas le plus dans celui-là mais j'espère assez).

Voir aussi https://main-enterprise.demo.design.infor.com/components/swaplist/example-search.html en plus du problème mineur avec le champ étant juste en bas de quelques pixels. Si vous tapez dans le champ, le X est entièrement invisible. Je pense que cela pourrait être le même problème qu'ici. Donc, si vous souhaitez également revoir cette page, ce serait formidable.

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

Deux autres numéros ont été publiés https://github.com/infor-design/enterprise/issues/5096 https://github.com/infor-design/enterprise/issues/5090

Je pense qu'ils peuvent tous être réparés ensemble...

@tmcconechy les premier et deuxième problèmes ne sont en fait pas liés.

J'ai ciblé le CSS pour le deuxième/réparé et testé... mais s'il continue, globalement, il pourrait être préférable de repenser ces boutons de fermeture car l'alignement est codé en dur de différentes manières qui entrent en conflit - cela a du sens/compréhensible si fonctionnalité ont été ajoutées rétrospectivement, mais cela ressemble un peu à un wack-a-mole car il n'y avait pas de solution qui ne crée

Wack une taupe est exactement ce que c'est. Mais peut-être faire juste quelques css pour chaque cas qui fonctionne. Je ne sais pas ce que vous pouvez faire d'autre car cela a été fait d'une manière qui a forcé cela. Voyez ce que vous pouvez trouver... En fin de compte, ça ne doit pas être assez juste du travail

@tmcconechy celui-ci est en fait un peu différent du reste; c'est en fait fonctionnel et c'est un problème que nous n'avions pas réalisé jusqu'à présent - qui est lié au style correctement. Il y a un menu qui est coupé, donc le style n'a jamais été corrigé mais il apparaît/sort du flux. Mais il y a aussi une classe is-open qui est supprimée au hasard lorsque le flux change (je pense à cause de cela?). Définir le conteneur sur display: inline-flex résout le masquage, mais introduit ensuite les nouvelles règles afin que nous puissions le styler de manière cohérente.

Voir le div qu'il se cache ici, il déborde en fait dans les plus petites résolutions.

Cela semble être une petite boîte de vers, mais cela indique également que nous devrons peut-être actualiser certaines captures d'écran pour que celle-ci soit corrigée correctement.

Ouais - compréhensible avec les tests. Nous l'obtiendrons. Vous voudrez peut-être simplement cibler les correctifs plus spécifiquement étant donné que ce code est plus ancien.

@tmcconechy a essayé de regarder et n'a pas semblé possible de corriger très précisément. J'ai essayé de regarder le code générant les classes, mais il y avait quelques concepts/règles ésotériques ajoutés qui nécessitaient une compréhension/un contexte, dont l'un déclenche le bégaiement des classes lorsque le flux change. J'essaierai donc de restaurer le menu via une règle de mise en page en ligne et j'espère que cela aidera à cibler ces problèmes sur la base de mon message ci-dessus.

OK mais il y a quelques cas comme

https://main-enterprise.demo.design.infor.com/components/swaplist/example-search.html -> pourrait cibler les classes de swaplist
https://master-enterprise.demo.design.infor.com/components/lookup/example-index.html -> pourrait cibler lookup-modal

Certains des autres peuvent cibler les onglets ou la barre d'outils ect. Ce n'est pas joli mais si vous ne trouvez pas quelque chose de mieux.

@tmcconechy oui merci, sur swaplist, j'ai un correctif pour la classe. Parlait juste de celui dans les écrans sur cette page.

(il y a un bug complètement différent avec la mise en page par exemple le menu est juste disparu du débordement mais on dirait qu'il était destiné à être là ? ** ou vice versa puisqu'il revient puis disparaît)

edit : juste pour le contexte, giphy :

Je me concentrerai uniquement sur le style pour le moment.

AQ réussi. Merci.