Why do buttons with icons only have this text ​?
Curious what purpose it serves since it throws off my btn only icon styling 
3 إعجابات
You can see a description by pmusaraj of why, from this PR:
This adds consistent sizing for text inputs, dropdowns, and buttons across the app. This is important because these elements are often used together in forms, and having different calculated heights causes many layout issues.
Related code:
إعجاب واحد (1)
Seems like there could be a more robust way to achieve this same effect without the use of ZeroWidthSpace
إعجاب واحد (1)
You may be right! It’s a PR from 2021. There might be a modern way to ensure consistency in 2024+.
إعجابَين (2)
yeah we’ve considered this before (and probably will again), but unfortunately something as simple as adding a min-height to all buttons would be more disruptive to existing themes
3 إعجابات
Why min height? Could the buttons have a base padding/font including line height that matches the size of drop downs/inputs?
إعجاب واحد (1)
I think we’re working toward a state where things are more standardized and this could become possible, but line height can vary by font… so anything we do by default could result in inconsistent heights as soon as a theme changes to a different font.
The zero width space ensures that even with line-height and font changes buttons without text have similar behaviors to buttons with text (in other words, the zero width character line height impacts the button height just like buttons with text)
3 إعجابات
Wouldn’t a consistent font across the elements utilize the same line height thus preventing varying font line heights?
إعجاب واحد (1)
No, because buttons without text won’t have their height affected by line-height and buttons with text will, so it’s an inconsistency between buttons with text and buttons without
Could the icon’s height not be tied to the font’s line height? I imagine a @function that takes in the font details/token and applies the line height to the icon’s height.
إعجاب واحد (1)
This. The CSS lh unit is well-supported in modern browsers, so applying the current line-height to an element is pretty simple now.
But of course I don’t know about the complexities of making changes without breaking existing themes.
3 إعجابات