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 ![]()
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 ![]()
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:
Parece que poderia haver uma maneira mais robusta de alcançar este mesmo efeito sem o uso de ZeroWidthSpace
Você pode estar certo! É um PR de 2021. Pode haver uma maneira moderna de garantir a consistência em 2024+.
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
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?
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).
Uma fonte consistente entre os elementos não utilizaria a mesma altura de linha, evitando assim alturas de linha de fonte variáveis?
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.
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.