[SelectPanel] Add banner variant arg to component

[jamieshark]

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?

Figma: https://www.figma.com/design/GCvY3Qv8czRgZgvl1dG6lp/Primer-Web?node-id=35402-46612&t=H5Y0UfbLW0jOsiIG-4

• Adds and passes down banner_variant to determine error banner appearance
• Adds text color depending on banner_variant value
• Reduce padding for .Banner-message

Screenshots

Integration

List the issues that this change affects.

Closes https://github.com/github/primer/issues/3935
Related: https://github.com/github/primer/issues/3936

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.

What approach did you choose and why?

Anything you want to highlight for special attention from reviewers?

Accessibility

• Fixes axe scan violation - This change fixes an existing axe scan violation.
• No new axe scan violation - This change does not introduce any new axe scan violations.
• New axe violation - This change introduces a new axe scan violation. Please describe why the violation cannot be resolved below.

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: 0cf9d81

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

[camertron]

Love it, thank you! 🎉

[maximedegreve]

Hey. I've just noticed there is a lot of spacing between the icon and the text. Could we reduce this a bit?

[jamieshark]

Hey. I've just noticed there is a lot of spacing between the icon and the text. Could we reduce this a bit?

hey @maximedegreve - i've made the spacing changes in the interest of trying to finish this component's work expeditiously but I'm wondering if whether we should continue using the Banner component with SelectPanel, if it seems the specs are extending past what is available in the component's API, especially since we are now modifying both the text color and the spacing for the Banner component.

If it seems like the spacing is too far from the content, it makes sense to me that we might reconsider the spacing altogether for the Banner component as well. Either way, I think if we continue using Banner within SelectPanel, we should try harder to respect its constraints and its styles, or we replace Banner with a custom component within SelectPanel that utilizes Banner-like styles. I would advocate for the former option for consistency and less tech debt overall.

[jamieshark]

Just to follow up for posterity, I've assessed some risk and decided on the following implementation to allow for the proper spacing:

1. Reverted the style changes on this PR
2. Open an issue to add the correct spacing attributes to Banner - https://github.com/github/primer/issues/3936
3. Come back and implement spacing for SelectPanel once Banner changes have landed.