Add a leading spinner to the TextField component

[camertron]

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 a leading spinner to Primer::Alpha::TextField. Currently, the component itself does not make use of the spinner, but the component's auto-check functionality could eventually use it. I decided not to implement such functionality at this time, since my work is currently focused on implementing our new SelectPanel component in dotcom. The spinner will come in handy over there to indicate a loading state when results are being fetched from the sever.

The spinner can be shown via the showLeadingSpinner() method in JavaScript, and hidden via hideLeadingSpinner().

Screenshots

Here's a video showing the text field with a magnifying glass as its leading visual, which is eventually replaced with a spinner, then replaced with the magnifying glass again.

text_field_spinner.mov

Integration

No changes necessary in production.

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.

Accessibility

• No new axe scan violation - This change does not introduce any new axe scan violations.

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: 35c9ee4

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	Minor

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