Add action and icon prop to SelectPanel message

[liuliu-dev]

Closes #5362

Changelog

Adds optional icon and action props to SelectPanelMessage to improve UX and accessibility. The icon prop allows custom icons for all message variants, the icon will be above the title. The action prop addresses the accessibility issue where "Create new item" actions were being rendered as ActionList.Item components, causing screen readers to announce them as selectable list items.

Before	After

New

• SelectPanelMessage now accepts icon?: React.ComponentType<IconProps> prop for custom icons above the title
• SelectPanelMessage now accepts action?: React.ReactElement prop for action buttons

Changed

Removed

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

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: 1e208f7

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]

👋 Hi, this pull request contains changes to the source code that github/github depends on. If you are GitHub staff, we recommend testing these changes with github/github using the integration workflow. Thanks!

[github-actions]

size-limit report 📦

Path	Size
packages/react/dist/browser.esm.js	92.27 KB (+0.07% 🔺)
packages/react/dist/browser.umd.js	92.44 KB (+0.06% 🔺)

[Copilot]

Pull Request Overview

This PR adds optional icon and action props to the SelectPanel message feature to improve user experience and accessibility. The changes enable custom icons for all message variants and provide a proper way to render action buttons that don't confuse screen readers.

• Adds icon prop to allow custom icons above message titles with fallback to default icons
• Adds action prop to render action buttons properly instead of as selectable list items
• Updates component interfaces and adds comprehensive test coverage

Reviewed Changes

Copilot reviewed 7 out of 7 changed files in this pull request and generated 1 comment.

Show a summary per file

File	Description
SelectPanelMessage.tsx	Core component updated to support new icon and action props with conditional rendering
SelectPanel.tsx	Interface updated to include new props and pass them to message component
SelectPanel.test.tsx	Test component updated to support action testing with new test case added
SelectPanel.module.css	Added styling for message action container
SelectPanel.features.stories.tsx	Added comprehensive story demonstrating all message variants with icons and actions
SelectPanel.docs.json	Updated type documentation to reflect new props
sharp-buckets-study.md	Changeset file for minor version release

[github-actions]

👋 Hi, there are new commits since the last successful integration test. We recommend running the integration workflow once more, unless you are sure the new changes do not affect github/github. Thanks!

[github-actions]

👋 Hi, there are new commits since the last successful integration test. We recommend running the integration workflow once more, unless you are sure the new changes do not affect github/github. Thanks!

[github-actions]

👋 Hi, there are new commits since the last successful integration test. We recommend running the integration workflow once more, unless you are sure the new changes do not affect github/github. Thanks!

[primer-integration]

👋 Hi from github/github! Your integration PR is ready: https://github.com/github/github/pull/392119

[primer-integration]

🟢 golden-jobs completed with status success.

[github-actions]

👋 Hi, there are new commits since the last successful integration test. We recommend running the integration workflow once more, unless you are sure the new changes do not affect github/github. Thanks!

[francinelucca]

LGTM! small change request

[github-actions]

👋 Hi, there are new commits since the last successful integration test. We recommend running the integration workflow once more, unless you are sure the new changes do not affect github/github. Thanks!