[Components/Select] Expose access to container props

[alexluong]

Is your feature request related to a problem? Please describe.

I'm using the Select components and use them inline. When the component width is small, the position of the arrow down is not appropriate anymore. I'd love to have access to the container div to make changes to the overall layout of the Select component.

Describe the solution you'd like

Have a containerSx prop:

<Select containerSx={{ position: "relative", etc }} />

Describe alternatives you've considered

Currently, to solve this issue I have to create and maintain my own InlineSelect component, which is far from ideal.

---

PS: Since we're on the topic of Select, I just wonder what if users of theme-ui want to use a different arrow down icon. It seems like there is not a way to change that. Just wonder what you think about it and if you're open to adding some other prop to expose that functionality.

[jxnblk]

Thanks for bringing this up! While I'm not entirely sure how this should be implemented, I think the API for this could potentially look something like:

<Select
  sx={{
    // styles for select element
    borderRadius: 5,
    container: {
      // styles for root element
    },
    arrow: {
      // styles for arrow icon go here
    }   
  }}  
/>

[alexluong]

Can it be implemented something like this?

const Select(props) {
  <Box sx={{ ...props?.sx?.container }}>
    <Box as="select" {...props} />
    <DownArrow sx={{ ...props?.sx?.arrow }} />
  </Box>
}

See current implementation.

[dburles]

This is kinda related: #294

[lachlanjc]

Doesn’t fix this issue, but Select now supports custom arrows via #1232

[SkyBulk]

how do I include an icon for the option within the select?