system-ui
[Components/Select] Expose access to container props
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.
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
}
}}
/>
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>
}
