StateLabel modernization

[BinaryMuse]

This builds on the great work by @tiaanduplessis in #752 (thank you @tiaanduplessis!) and pulls in all the changes from #789 (pending merge into release-19.0.0, will update this PR base branch when that lands).

I opted for this style for defining variants based on the variant docs and notes on the deprecated API. This style should allow us to set values based on the theme but also allow overriding the variant definitions when a user passes their own theme.

Closes #752
Closes #696

Release notes

• StateLabel's small prop is deprecated in favor of a new variant prop. Use variant="small" to achieve the same result. We plan to remove the small prop in version 20.

Merge checklist

• Added or updated TypeScript definitions (index.d.ts) if necessary
• Added/updated tests
• Added/updated documentation
• Tested in Chrome
• Tested in Firefox
• Tested in Safari
• Tested in Edge

[vercel]

This pull request is being automatically deployed with Vercel (learn more).
To see the status of your deployment, click below or on the icon next to each commit.

🔍 Inspect: https://vercel.com/primer/primer-components/gwpng274w
✅ Preview: https://primer-components-git-mkt-more-state-label-work.primer.now.sh

[BinaryMuse]

This is ready for review 👀

[BinaryMuse]

It looks like there's an issue with Octicon; this code in StateLabel:

  const octiconProps = variant === 'small' ? {width: '1em'} : {}
  return (
      // ...
      {status && <StyledOcticon mr={1} {...octiconProps} icon={octiconMap[status] || Question} />}

causes Octicon to fail prop type validation because "1em", a string, is not expected. As a result, the Octicon sets its height to NaN.

/cc @colebemis

[emplums]

Left a few suggestions for how to deal with the theme!