Botones "texto"

¿Por qué los botones que solo tienen iconos tienen este texto ​?

Tengo curiosidad por saber qué propósito cumple, ya que afecta mi estilo de botón solo con icono :skull_and_crossbones:

3 Me gusta

Puedes ver una descripción de pmusaraj de por qué, en este PR:

Esto añade un tamaño uniforme para las entradas de texto, los menús desplegables y los botones en toda la aplicación. Esto es importante porque estos elementos se utilizan a menudo juntos en los formularios, y tener diferentes alturas calculadas causa muchos problemas de diseño.

Código relacionado:

1 me gusta

Parece que podría haber una forma más robusta de lograr este mismo efecto sin usar ZeroWidthSpace.

1 me gusta

¡Puede que tengas razón! Es una PR de 2021. Podría haber una forma moderna de garantizar la coherencia en 2024+.

2 Me gusta

sí, lo hemos considerado antes (y probablemente lo haremos de nuevo), pero desafortunadamente algo tan simple como agregar una altura mínima a todos los botones sería más disruptivo para los temas existentes.

3 Me gusta

¿Por qué altura mínima? ¿Podrían los botones tener un relleno/fuente base que incluya una altura de línea que coincida con el tamaño de los menús desplegables/entradas?

1 me gusta

Creo que estamos trabajando hacia un estado en el que las cosas estén más estandarizadas y esto podría ser posible, pero la altura de línea puede variar según la fuente… por lo que cualquier cosa que hagamos por defecto podría resultar en alturas inconsistentes tan pronto como un tema cambie a una fuente diferente.

El espacio de ancho cero asegura que, incluso con cambios en la altura de línea y la fuente, los botones sin texto tengan comportamientos similares a los botones con texto (en otras palabras, la altura de línea del carácter de ancho cero impacta la altura del botón al igual que los botones con texto).

3 Me gusta

¿No utilizaría una fuente coherente en todos los elementos la misma altura de línea, evitando así alturas de línea de fuente variables?

1 me gusta

No, porque los botones sin texto no verán su altura afectada por la altura de línea y los botones con texto sí, por lo que es una inconsistencia entre los botones con texto y los botones sin él.

¿No se podría vincular la altura del icono a la altura de línea de la fuente? Me imagino una @function que reciba los detalles/token de la fuente y aplique la altura de línea a la altura del icono.

1 me gusta

Esto. La unidad lh de CSS está bien soportada en los navegadores modernos, por lo que aplicar la altura de línea actual a un elemento es bastante sencillo ahora.

Pero, por supuesto, desconozco las complejidades de hacer cambios sin romper los temas existentes.

3 Me gusta