Select Panel: Add built-in "No matches" item

[siddharthkp]

Without feature flag	With feature flag

• Only works for modern ActionList (feature flag on). See visual snapshot changes to see what it looks like with flag and without flag (flag: primer_react_select_panel_with_modern_action_list )
• Visual changes only, screen reader announcements are tackled in Select panel: custom screen reader announcements #4968, can be merged independently
• The design matches what teams are using in production (more context in https://github.com/github/primer/issues/3409#issuecomment-2331799508). We might want to change the design later when we work on this epic: https://github.com/github/primer/issues/3399

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)

[primer-integration]

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

[camertron]

Hey @siddharthkp, thanks for working on this 😄 However I'm not sure I understand the circumstances for using a "No matches" item. Is there a specific use-case or mockup you're working from?

EDIT: I just looked at the linked issue showing how teams are getting around the lack of a "no items" mechanism. I personally don't think we should provide both a "No matches" item and an empty state as described in https://github.com/github/primer/issues/3922. Since the empty state is officially part of the mockups design provided, I think we should avoid supporting an official "No matches" item and encourage teams to migrate.

[siddharthkp]

I agree with you. I was under the impression https://github.com/github/primer/issues/3922 was not part of the current epic and we would only work on it next quarter with https://github.com/github/primer/issues/3399:)

Happy to update the designs

Since the empty state is officially part of the mockups design provided, I think we should avoid supporting an official "No matches" item and encourage teams to migrate.

I'm not sure if I agree on the last bit about encourage teams to migrate. It would help us to have a default no-results state that matches the new design with the option to customise the message.

Update: On second thoughts, given how loading states (https://github.com/github/primer/issues/3921) is very similar design wise. I think we should address this after merging that.

Closing this PR because there isn't much in this PR that would carry through

[camertron]

I agree with you. I was under the impression https://github.com/github/primer/issues/3922 was not part of the current epic and we would only work on it next quarter with https://github.com/github/primer/issues/3399)

Ah yeah, I think this work was originally scoped under #3399 but I moved it into the group of issues due 9/27 because it's related pretty directly to accessibility.

I'm not sure if I agree on the last bit about encourage teams to migrate. It would help us to have a default no-results state that matches the new design with the option to customise the message.

The good news is that "No matches" items will continue to work, so teams can either migrate and reap the accessibility rewards or choose to stick with what they already have and maintain existing functionality.

On second thoughts, given how loading states (https://github.com/github/primer/issues/3921) is very similar design wise. I think we should address this after merging that.

Yes! That was my thinking as well.