Button Sizing

[CGTS]

I would like to suggest changing how buttons are sized in the future. Currently we can choose a font-size in the '$button-sizes' map and set the padding to use for all the buttons in '$button-padding'.

The problem I have with this is that it doesn't give me enough control over the size of each button. One example is when using the "tiny" and "small" buttons, I may want to use the same font size for both but have "tiny" be smaller in height. Another example is when I'm trying to size all the buttons in multiples of my baseline. Currently I can set my default button as multiple of my baseline, after that I would have to chose my font-size based on my padding (originally decided for the default button) if I wanted to keep the height consistent.

I would suggest having two maps "$button-height" and "$button-font-size" and have "$button-padding" only control the left/right padding. This way you could set the height of each button independent of the font-size used. This would make it much easier to maintain a vertical rhythm.

The only real drawback I could see is buttons with multiple text lines wouldn't work. However, I think this is pretty uncommon and a separate style could be written in these cases.

What do you think? Do you see any real issues I'm missing?

[andycochran]

Hmm… Instead of setting the top/bottom padding to 0, you could have the $button-height map determine the top/bottom padding for each size. Of course, the same thing could be accomplished if $button-padding was a map; you'd just have to do the math yourself.

[andycochran]

You'd need a line-height variable too.

[CGTS]

Your right about line-height I forgot to mention that would need to be set to the what the height of the button is.

I think having the $button-height map determine the determine the padding would work as well. The main thing I want to accomplish is the ability to set the height and font-size independently.

$button-padding as map seems a bit more complicated than necessary. The same thing could be accomplished with the $button-height map and just have it subtract the font-size to get the padding as you suggested above.

[andycochran]

Right, I figured you meant line-height would define the height of the button. And as you alluded to, the problem with a line-height method comes back to multi-line button text. If button height is determined by line-height and padding:0, there's gonna be some bad type leading.

So, since the framework can't assume single-line button text, I don't think it makes sense to try to define what height the button is in a $button-height map. That height goes out the window for multi-line buttons, no matter if it's based on line-height alone or padding+line-height. That's why a $button-padding map makes more sense to me.

Setting the padding per button size makes no assumptions about the height of the button, but the method could be used to finesse heights to fit a baseline grid—which I'm not convinced is really important.

[CGTS]

I think you're right, A $button-padding map paired with button-font-size map seems to make the most sense for flexibility and control over all button sizes.