[Do not merge] SelectPanel2: Add story for "create new item" + <dialog> refactor

[siddharthkp]

• Merged SelectPanel2: Add story for "create new item" #4178 and refactor Dialog to use <dialog> internally #3840
• Mockup: Figma

Open question on keyboard navigation: Should the "Create new label" button be reachable by arrow keys (like it's part of list) or with Tab (like it's outside of list). See storybook

selectpanel-create-new-item.mov

[changeset-bot]

🦋 Changeset detected

Latest commit: 895511b

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	Patch

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
dist/browser.esm.js	113.9 KB (+0.06% 🔺)
dist/browser.umd.js	114.56 KB (+0.09% 🔺)

[siddharthkp]

@maximedegreve@ichelsea Question about focus management for you: Should the "Create new label" button be reachable by arrow keys (like it's part of list) or with Tab (like it's outside of list). See demo on storybook ↗

[maximedegreve]

@siddharthkpThis was answered here.

[ichelsea]

@maximedegreve I left a comment in the Figma; there is some confusion because the first item in the Figma is that you can't leave the listboxwith arrow down 🤔 .

I assume this is if "create a new..." was the only option with no results in the listbox, but if the button is still living outside of the listbox which it should, we'll still need only tabbing.

I thought we settled on since the button lives outside of the listbox, we shouldn't allow arrowing down to it or back up to the input (if there are no results in the listbox). The arrow controls should only work inside of the listbox and a concession to allow arrowing down to the listbox from the input (but not back up) as a carry-over from previously expected user interaction.

It's possible we had some miscommunication on the use case with no results!