Why do buttons with icons only have this text ​?
Curious what purpose it serves since it throws off my btn only icon styling 
3 Likes
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 Like
Seems like there could be a more robust way to achieve this same effect without the use of ZeroWidthSpace
1 Like
You may be right! It’s a PR from 2021. There might be a modern way to ensure consistency in 2024+.
2 Likes
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 Likes
Why min height? Could the buttons have a base padding/font including line height that matches the size of drop downs/inputs?
1 Like
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 Likes
Wouldn’t a consistent font across the elements utilize the same line height thus preventing varying font line heights?
1 Like
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.
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.
1 Like