Allow CircleBadge size to be customized

[emplums]

This PR adds the width and height system props to CircleBadge in order to allow users to specify a custom size for their CircleBadge. I did this in response to @jasonlong reaching out because Launch uses 48px CircleBadges and the smallest CircleBadge in Primer is 56px. I could see the argument either way for not allowing a smaller badge but I felt this was a case were customization of size felt alright.

I also considered adding a CircleBadge--extra-small to Primer, but felt there might be more cases where a CircleBadge would need a specific size so opted for full customization instead.

Don't feel particularly strongly about this decision though so happy to be swayed another direction :) cc @broccolini @shawnbot @jonrohan

Closes #211

If development process was changed:

Description of changes:

• Updated README?

Merge Checklist:

• Changed base branch to release branch
• Updated Kit (`npm run build:docs)
• Enabled GH Pages for testing
• Tested in Chrome (BrowserStack)
• Tested in Firefox (BrowserStack)
• Tested in Safari (BrowserStack)
• Tested in Edge (BrowserStack)

[shawnbot]

You could use size here instead of width and height; that'll set both of them uniformly.

[emplums]

Ooh didn't know that!

[jasonlong]

Thanks for getting this rolling @emplums. ❤️

FWIW, I thought I'd mention that we're also using the current small size in Launch. This new smaller option is for a different context where small is still a bit too big.

[shawnbot]

Nice! I like this with size instead of having to mirror width and height.

[shawnbot]

One note from component API review yesterday:

The way this is written leaves string values for the size prop in CSS. E.g. size="small" results in emotion-generated CSS width: small; height: small, which the Primer CSS styles for our size variations take precedence over. When we're rewriting this (and other components that have named "shortcuts" for numeric sizes) we'll need to implement our own style function that maps props.size to a value in an object before it gets to the size function from styled-system.

We might even consider having named sizes ("small", "medium", "large", etc.) defined in the theme.

[shawnbot]

You should also be able to do this with:

const CircleBadge = withSystemProps(Badge, [...COMMON, sizeStyles])