Add min-width to small size Button

[khiga8]

Authors: Please fill out this form carefully and completely.

Reviewers: By approving this Pull Request you are approving the code change, as well as its deployment and mitigation plans.
Please read this description carefully. If you feel there is anything unclear or missing, please ask for updates.

What are you trying to accomplish?

This PR adds guardrails to ensure a min-width of 24px for small variant of button. When inputting one character, such as I, the width of the button will be 21px which makes it fail the target size requirement.

Before:

After:

Integration

I don't believe so.

List the issues that this change affects.

Fixes: https://github.com/github/primer/issues/3073

Risk Assessment

• Low risk the change is small, highly observable, and easily rolled back.
• Medium risk changes that are isolated, reduced in scope or could impact few users. The change will not impact library availability.
• High risk changes are those that could impact customers and SLOs, low or no test coverage, low observability, or slow to rollback.

Anything you want to highlight for special attention from reviewers?

Are there any concerns with the min-width overrididing the min-width: max-content set on the base style?
I only targetted the small variant to keep the changes scoped.

Merge checklist

• Added/updated tests
• Added/updated documentation
• Added/updated previews (Lookbook)
• 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: 627b1f1

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

This PR includes changesets to release 1 package

Name	Type
@primer/view-components	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]

⚠️ Visual differences found

Our visual comparison tests found UI differences. Please review the differences by viewing the files changed tab to ensure that the changes were intentional.

Review visual differences

[langermank]

Suggested change

	min-width: 24px;
	min-width: var(--control-small-size);

[khiga8]

Ah thank you! Sorry if this is a silly q- where are these defined?

[langermank]

Not silly! You can find it in our docs: https://primer.style/foundations/primitives/size#controls. For this kind of change in particular, I would just look at what other sizing variables are used in the rest of the component CSS and try and align with that 😄

[khiga8]

TIL! Thank you! ⭐

[khiga8]

I am not authorized to merge so feel free to merge this whenever :)