Add optional footer prop to SelectPanel

[anleac]

Issue - https://github.com/github/issues/issues/8775

This PR now adds an optional footer that will be rendered, sticky, at the bottom of the SelectPanel if provided. This could be useful for adding in additional options to be present.

Changelog

New

New prop, footer, to SelectPanel.

Changed

N/A.

Removed

N/A.

Rollout strategy

• Patch release
• Minor release
• Major release; if selected, include a written rollout or migration plan
• None; if selected, include a brief description as to why

Testing & Reviewing

Testing via the storybook should be sufficient.

Merge checklist

• Added/updated tests
• Added/updated documentation
• Added/updated previews (Storybook)
• Changes are SSR compatible
• Tested in Chrome
• Tested in Firefox
• Tested in Safari
• Tested in Edge
• (GitHub staff only) Integration tests pass at github/github (Learn more about how to run integration tests)

[changeset-bot]

🦋 Changeset detected

Latest commit: c495eaa

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

[github-actions]

size-limit report 📦

Path	Size
packages/react/dist/browser.esm.js	89.07 KB (-0.04% 🔽)
packages/react/dist/browser.umd.js	89.29 KB (-0.08% 🔽)

[pksjce]

Since this is the old SelectPanel and does not affect existing usages in anyway, I'm fine to approve this.
But the focus does look sloppy. I guess if @anleac is ok with that and we are definitely phasing this component out asap, it should be ok?

[github-actions]

Uh oh! @pksjce, the image you shared is missing helpful alt text. Check #4353 (comment).

Alt text is an invisible description that helps screen readers describe images to blind or low-vision users. If you are using markdown to display images, add your alt text inside the brackets of the markdown image.

Learn more about alt text at Basic writing and formatting syntax: images on GitHub Docs.

[siddharthkp]

+1 the styles seem a bit sloppy here:

Can we also update the story to represent the use case we are adding a footer for. I'm guessing "Close" isn't something we want to promote?

If we want, we could take inspiration from SelectPanel v2:

Storybook: https://primer.style/react/storybook/?path=/story/drafts-components-selectpanel-features--instant-selection-variant

[anleac]

thanks both @siddharthkp and @pksjce ! I update the examples to better reflect the use-case, let's also do a follow up for the focus state later.

[siddharthkp]

Tiny update: Moved space inside the footer instead of story + Updated changelog

[siddharthkp]

Looks good now!