Button style enhancement

[broccolinisoup]

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
• Uses correct font weight

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: 8b8cf1f

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	89.52 KB (+0.55% 🔺)
dist/browser.umd.js	90.15 KB (+0.58% 🔺)

[joshblack]

Random question, if something is currently theming/relying on btn.text would this change impact them?

[langermank]

@joshblack can you give me an example of what you're thinking?

[joshblack]

@langermank I probably should have used btn.hoverBg or btn.selectedBg as a better example 😅 It seemed like if someone created a custom theme like:

const customTheme = deepmerge(theme, {
  colors: {
    btn: {
      hoverBg: 'var(--my-custom-color)',
    },
  },
})

Based on the example here: https://primer.style/react/theming#customizing-the-theme

That this might no longer work since that btn.hoverBg token is no longer used in the hover styles. Hope that makes sense, let me know if I'm misunderstanding anything!

[langermank]

@joshblack I didn't know we offered theming options like that! That's kind of risky isn't it, and makes it near impossible for us to even rename things without any visual changes 😅 but yeah, you're right, it would break. Does that mean I need to move this to a major release?

[joshblack]

@langermank agreed, I think it brings in component tokens as part of the public API. Would an interim solution potentially be to set the value of these tokens to the new expected value? Not sure if the references work that way but wanted to throw it out there if so.

Also added this to that versioning doc under "theming": https://github.com/primer/react/blob/37cfd07fb1eef4c0655157a0c9025cec94abaed5/contributor-docs/versioning.md#changes so we can align on if this is part of semver or not for the project

[langermank]

Would an interim solution potentially be to set the value of these tokens to the new expected value?

Normally I would say yes, but this component was using generic color tokens here– not specific to Button. I think it would be weird to override accent.fg with a different color 🤔 unless I'm not understanding correctly

[joshblack]

@langermank was more-so thinking of stuff like:

• btn.hoverBg has the value actionListItem.default.hoverBg
• btn.selectedBg has the value actionListItem.default.activeBg

Note: there was one usage of btn.selectedBg going to actionListItem.default.selectedBg that I wasn't sure how to remediate

I think the big thing was just trying to see if we could keep the component tokens (btn.*) the same in the source code but change their values in the theme, if possible. Totally get if this really isn't do-able though

[langermank]

@joshblack I'm reverting these changes for now and will add them back into the followup PR for our next major release 😄