Botões "texto"

Por que os botões com apenas ícones têm este texto \u200B?

Estou curioso para saber qual o propósito dele, já que atrapalha a minha estilização de botões com apenas ícones :skull_and_crossbones:

3 curtidas

Você pode ver uma descrição de pmusaraj do porquê, neste PR:

Isso adiciona dimensionamento consistente para campos de texto, menus suspensos e botões em todo o aplicativo. Isso é importante porque esses elementos são frequentemente usados juntos em formulários, e ter alturas calculadas diferentes causa muitos problemas de layout.

Código relacionado:

1 curtida

Parece que poderia haver uma maneira mais robusta de alcançar este mesmo efeito sem o uso de ZeroWidthSpace

1 curtida

Você pode estar certo! É um PR de 2021. Pode haver uma maneira moderna de garantir a consistência em 2024+.

2 curtidas

sim, já consideramos isso antes (e provavelmente consideraremos novamente), mas infelizmente algo tão simples quanto adicionar uma altura mínima a todos os botões seria mais disruptivo para os temas existentes

3 curtidas

Por que altura mínima? Os botões poderiam ter um preenchimento/fonte base que inclua a altura da linha, correspondendo ao tamanho de menus suspensos/campos de entrada?

1 curtida

Acho que estamos trabalhando para um estado onde as coisas são mais padronizadas e isso pode se tornar possível, mas a altura da linha pode variar por fonte… então qualquer coisa que façamos por padrão pode resultar em alturas inconsistentes assim que um tema mudar para uma fonte diferente.

O espaço de largura zero garante que, mesmo com alterações na altura da linha e na fonte, os botões sem texto tenham comportamentos semelhantes aos botões com texto (em outras palavras, a altura da linha do caractere de largura zero impacta a altura do botão da mesma forma que os botões com texto).

3 curtidas

Uma fonte consistente entre os elementos não utilizaria a mesma altura de linha, evitando assim alturas de linha de fonte variáveis?

1 curtida

Não, porque botões sem texto não terão sua altura afetada pela altura da linha e botões com texto terão, então é uma inconsistência entre botões com texto e botões sem.

O ícone não poderia ter sua altura vinculada à altura da linha da fonte? Imagino uma @function que receba os detalhes/token da fonte e aplique a altura da linha à altura do ícone.

1 curtida

Isso. A unidade lh do CSS é bem suportada nos navegadores modernos, então aplicar a altura de linha atual a um elemento é bem simples agora.

Mas, é claro, não conheço as complexidades de fazer alterações sem quebrar temas existentes.

3 curtidas