Button alignment and size bug fixes

[langermank]

Note: These are the non breaking changes from this PR

Improvements

• Add a block prop for full width
• Add alignContent prop to align content to center or start
• Use control sizing CSS variable values (not using CSS vars just yet)
• Use height over padding for more control over sizing

Visual updates

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

• 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
		invisible buttons use default text color if visuals are present, and accent blue if no visuals.

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: caf0f23

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	Patch

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	84.91 KB (+0.46% 🔺)
dist/browser.umd.js	85.52 KB (+0.42% 🔺)