Select - support for hyperlinked options

[mkernohanbc]

Thinking about potential use case for the select component, where the user may wish to hyperlink one or more list options (for example, using a dropdown as a type of navigation.)

This case is already contemplated within RAC Select: an href prop can be passed to a ListBoxItem to make it a link, overriding onSelectionChange behaviour for the list as a whole.

The challenge is that the href prop can't be passed within an items array. Manually assembling a Select list also doesn't appear to work:

>         <Select>
>           <ListBoxItem id="1" href="https://gov.bc.ca/designsystem">
>             B.C. Design System
>           </ListBoxItem>
>           <ListBoxItem id="2">Not a link</ListBoxItem>
>         </Select>

Needs further investigation — not for 0.1.0.

[mkernohanbc]

@ty2k this one stumped me a little bit last week, could you maybe take a look at some point when you have a spare cycle or two?

[ty2k]

There are two different issues here:

1. Supporting the href field on elements in the items prop in the Select component. This piece is actually no big deal if we wanted to add it. Because that's already baked into RAC's ListBoxItemProps, we would just need to pass a new prop like href={item?.href} where we are instantiating the <ListBoxItem> here. Then when the user is using the <Select> component, they would just pass an href field on their items array element. Whether that is a good thing to do or not is another question. With React apps, the <Link> element from your router of choice should be used when navigating internally in an app for optimal page loading experience. I assume something like this is just going to be rendering a plain <a> link with no special handling, which will cause a full page reload if moving between pages within the same app. It's no big deal to add though! We would need design guidance on what the links would look like compared to the regular options.
2. Supporting a children slot in the Select component so users are able to compose their Select component with JSX children instead of props passed into <Select>. For this part, I think we can add a check for children inside Select, render a simplified ListBox with it if so, or render the current sectioned version of the component if not. At this point, I would want to break at least the ListBoxItem component out into its own component. I have a branch that does that (and the href thing above) here: example/select-component-supports-children. However, if we're breaking that ListBoxItem into its own component, maybe we also want to be doing that with the Section component, to allow people to compose sectioned Select menus with JSX children?

I don't have a strong opinion about either point above. I don't personally see the use case for a <select>-like component that has both <a> and <option> style children, but we can definitely implement it. The children slot thing is a nice to have, and it will cause the need for a new ListBoxItem component, but possibly also ListBox and Section components.

[mkernohanbc]

Moving this to the backlog and out of scope for 0.2.0, to revisit later.