Boutons "texte"

Pourquoi les boutons avec uniquement des icônes ont-ils ce texte ​ ?

Je suis curieux de savoir à quoi il sert puisqu’il perturbe mon style de bouton avec icône uniquement :skull_and_crossbones:

3 « J'aime »

Vous pouvez voir une description de pmusaraj expliquant pourquoi, dans cette PR :

Ceci ajoute un dimensionnement cohérent pour les champs de texte, les listes déroulantes et les boutons dans toute l’application. C’est important car ces éléments sont souvent utilisés ensemble dans les formulaires, et avoir des hauteurs calculées différentes cause de nombreux problèmes de mise en page.

Code associé :

1 « J'aime »

Il semble qu’il pourrait y avoir une manière plus robuste d’obtenir le même effet sans utiliser ZeroWidthSpace.

1 « J'aime »

Vous avez peut-être raison ! Il s’agit d’une PR de 2021. Il existe peut-être une manière moderne d’assurer la cohérence en 2024+.

2 « J'aime »

oui, nous avons déjà envisagé cela (et nous le ferons probablement encore), mais malheureusement, quelque chose d’aussi simple que d’ajouter une hauteur minimale à tous les boutons serait plus perturbateur pour les thèmes existants.

3 « J'aime »

Pourquoi une hauteur minimale ? Les boutons pourraient-ils avoir un rembourrage de base/une police incluant une hauteur de ligne qui correspond à la taille des listes déroulantes/des champs de saisie ?

1 « J'aime »

Je pense que nous travaillons à un état où les choses sont plus standardisées et cela pourrait devenir possible, mais la hauteur de ligne peut varier selon la police… donc tout ce que nous faisons par défaut pourrait entraîner des hauteurs incohérentes dès qu’un thème passe à une police différente.

L’espace sans chasse garantit que même avec des changements de hauteur de ligne et de police, les boutons sans texte ont des comportements similaires aux boutons avec du texte (en d’autres termes, la hauteur de ligne du caractère sans chasse a un impact sur la hauteur du bouton, tout comme les boutons avec du texte).

3 « J'aime »

Une police de caractères cohérente sur tous les éléments n’utiliserait-elle pas la même hauteur de ligne, empêchant ainsi des hauteurs de ligne de police variables ?

1 « J'aime »

Non, car les boutons sans texte n’auront pas leur hauteur affectée par la hauteur de ligne et les boutons avec du texte le feront, il y a donc une incohérence entre les boutons avec du texte et les boutons sans.

La hauteur de l’icône ne pourrait-elle pas être liée à la hauteur de ligne de la police ? J’imagine une @function qui prend les détails/le jeton de la police et applique la hauteur de ligne à la hauteur de l’icône.

1 « J'aime »

Ceci. L’unité CSS lh est bien prise en charge dans les navigateurs modernes, il est donc assez simple d’appliquer la hauteur de ligne actuelle à un élément.

Mais bien sûr, je ne connais pas les complexités de faire des changements sans casser les thèmes existants.

3 « J'aime »