SectionHeader: Update default font size

[alternatekev]

Currently, the SectionHeaders use a pretty small font size by default:

We discussed the possible improvement to the font size of the SectionHeader's default label (I used 14px here, 15px seemed too big), and adding a way to set a compactHeader prop to get the previous 11px sizing. This PR handles that, which looks like this:

With the combination of #2863, Stats would change to look like:

cc @rickybanister @folletto @mtias

[alternatekev]

I can add a commit here that changes all of the current SectionHeaders to use the compactHeader prop but I wanted to get a feel for if this was going to work before I went and did that. The screenshots above reflect would could happen, not 100% would should happen.

[rickybanister]

I wouldn't mind us moving to the 14px non-small-caps for all section headers. It's easier to read and doesn't change the height of the box at all.

14px is the size of our nav items in SectionNav as well—it would be good to move toward more standardization of both components. Some day SectionNav's height might not jump three times in as many breakpoints.

[folletto]

I felt that using caps there worked very well in separating the title from the content. I'm not overly attached to that idea, but I still feel that caps would work better. :)

Size wise, I think the change is good. :)

[mtias]

My vote is that whatever we do we stick to one.

[rickybanister]

No prop, let's just go with 14px non-caps! Merge it quick.

[alternatekev]

@folletto Are you saying the text should be 14px all-caps?

[alternatekev]

@mtias I can go ahead and remove the compactHeader prop that I added here.

[folletto]

Are you saying the text should be 14px all-caps?

Not sure, feels better to me.

Thinking about it, there are a couple of factors at play there:

1. The size increase is good for readability
2. It creates a nice coordination having all caps for all the items in the bar (title + buttons)

Which, now that I think of it: if we want the header bigger to make it more readable, doesn't it mean that we should make bigger also the compact buttons? In that way the coordination of the same font will still be possible.

So, if I had to choose... I would probably make bigger both compact buttons and header, both all caps.

But, it's just a preference due to the above I guess. I would be ok with either if you feel strongly about normal case. :)

[mtias]

So, if I had to choose... I would probably make bigger both compact buttons and header, both all caps.

I wouldn't touch compact-buttons because of this sue case. It's already possible to use regular buttons in section-header as well.

[folletto]

I wouldn't touch compact-buttons because of this sue case. It's already possible to use regular buttons in section-header as well.

I wouldn't either. But it's not a matter of use case: if we are saying that the font is too small, it's too small for both use cases, thus makes sense to change both. ;)

[alternatekev]

if we are saying that the font is too small, it's too small for both use cases

I'm not sure I follow the logic that the header text and the button text need to be the same size. The general gist of this PR is that for a header the font is too small. The buttons still seem actionable to me.

[folletto]

I don't get then the need for a bigger size if it's not for readability issues. It works as is for me with a nice coordination between header and buttons. :)

That said, as above, I'm ok with either choice. Just one of the two seems better in my personal opinion, but it's ok either way. :)

[rickybanister]

The buttons have their own weight due to the border or background of the button so in a way I feel that making the header text larger makes it a better match for the compact buttons. Previously it did match in size, but in a way that was the problem I think @alternatekev is trying to solve. The larger header text stands up better next to the weight of the compact buttons—I think anyway.

[folletto]

👍

[ebinnion]

Do we ever apply the header-is-compact class? I did a search for that string using Sublime, and only found this one instance above.

[ebinnion]

It looks like you removed the prop that created this class in the 3rd commit, so let's go ahead and and drop this CSS rule too.

[ebinnion]

@alternatekev - I left one comment about some code cruft. Besides that, this LGTM.

[alternatekev]

Thanks @ebinnion, I took that out.

[ebinnion]

LGTM. 🚢

[mtias]

This should be .button

[ebinnion]

Thanks for pointing that out @mtias. I created #3009 to fix that.

[mtias]

No problem! Thank you.