Button bug fixes and visual updates

[langermank]

Note: These are breaking changes and should be considered for the next major release

Improvements

• Add a block prop for full width
• Add alignContent prop to align content to center or start
• Use control sizing CSS variables
• Use height over padding for more control over sizing
• Refactor Button.Counter to better align with the other visual props
• Rename visual props to better align with other Primer components

Visual updates

Addresses a few things missing from this discussion: https://github.com/github/primer/discussions/1016

• Deprecate outline variant
• Slightly more condensed padding
• Improved invisible hover states (will update these colors when new functional colors are addressed)

Closes:

• Button content grid cells are equal #1979
• https://github.com/github/primer/issues/939

Screenshots

Please refer to the comprehensive Storybook stories- this is just a small sample of some of the changes

before	after	description
		trailing action slot alignment
		default padding, font-weight
		large height
icon was blue		invisible svg color
		trailing action locks right in full width

Merge checklist

• Added/updated tests
• Added/updated documentation
• Tested in Chrome
• Tested in Firefox
• Tested in Safari
• Tested in Edge

Take a look at the What we look for in reviews section of the contributing guidelines for more information on how we review PRs.

[changeset-bot]

🦋 Changeset detected

Latest commit: 79f8967

The changes in this PR will be included in the next version bump.

This PR includes changesets to release 1 package

Name	Type
@primer/react	Major

Not sure what this means? Click here to learn what changesets are.

Click here if you're a maintainer who wants to add another changeset to this PR

[github-actions]

size-limit report 📦

Path	Size
dist/browser.esm.js	79.23 KB (+0.36% 🔺)
dist/browser.umd.js	79.88 KB (+0.38% 🔺)

[broccolinisoup]

Same question - should we add a unit test for it?

[langermank]

Closing in favor of #2714