Perché i pulsanti con solo icone hanno questo testo ​?
Sono curioso di sapere a cosa serve dato che scombussola lo stile dei miei pulsanti con solo icone 
3 Mi Piace
Puoi vedere una descrizione di pmusaraj del perché, da questo PR:
Questo aggiunge dimensioni coerenti per input di testo, menu a discesa e pulsanti in tutta l’app. Questo è importante perché questi elementi sono spesso usati insieme nei moduli e avere altezze calcolate diverse causa molti problemi di layout.
Codice correlato:
1 Mi Piace
Sembra che ci possa essere un modo più robusto per ottenere lo stesso effetto senza l’uso di ZeroWidthSpace
1 Mi Piace
Potresti avere ragione! Si tratta di una PR del 2021. Potrebbe esserci un modo moderno per garantire la coerenza nel 2024+.
2 Mi Piace
sì, l’abbiamo già considerato (e probabilmente lo faremo di nuovo), ma sfortunatamente qualcosa di semplice come aggiungere un’altezza minima a tutti i pulsanti sarebbe più dirompente per i temi esistenti
3 Mi Piace
Perché altezza minima? I pulsanti potrebbero avere un padding/font di base che include l’altezza della linea, corrispondente alle dimensioni dei menu a discesa/input?
1 Mi Piace
Penso che stiamo lavorando verso uno stato in cui le cose sono più standardizzate e questo potrebbe diventare possibile, ma l’altezza della linea può variare in base al font… quindi qualsiasi cosa facciamo per impostazione predefinita potrebbe comportare altezze incoerenti non appena un tema passa a un font diverso.
Lo spazio a larghezza zero garantisce che, anche con modifiche all’altezza della linea e al font, i pulsanti senza testo abbiano comportamenti simili ai pulsanti con testo (in altre parole, l’altezza della linea del carattere a larghezza zero influisce sull’altezza del pulsante proprio come i pulsanti con testo).
3 Mi Piace
Non utilizzerebbe un font coerente in tutti gli elementi la stessa interlinea, prevenendo così variazioni nell’interlinea dei font?
1 Mi Piace
No, perché i pulsanti senza testo non vedranno la loro altezza influenzata da line-height e i pulsanti con testo sì, quindi è un’incoerenza tra pulsanti con testo e pulsanti senza.
L’altezza dell’icona non potrebbe essere legata all’altezza della linea del font? Immagino una @function che prenda i dettagli/token del font e applichi l’altezza della linea all’altezza dell’icona.
1 Mi Piace
Questo. L’unità CSS lh è ben supportata nei browser moderni, quindi applicare l’altezza della linea corrente a un elemento è piuttosto semplice ora.
Ma ovviamente non conosco le complessità di apportare modifiche senza rompere i temi esistenti.
3 Mi Piace