Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

[Components/Select] Expose access to container props #706

Open
alexluong opened this issue Feb 23, 2020 · 5 comments · May be fixed by #2326
Open

[Components/Select] Expose access to container props #706

alexluong opened this issue Feb 23, 2020 · 5 comments · May be fixed by #2326
Assignees
@hasparus
Labels
enhancement New feature or request @theme-ui/components

Comments

@alexluong
Copy link

alexluong commented Feb 23, 2020 •
edited

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
Copy link
Member

jxnblk commented Mar 3, 2020 •
edited

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
Copy link
Author

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
Copy link
Contributor

dburles commented Mar 5, 2020

This is kinda related: #294

@dburles dburles mentioned this issue Mar 26, 2020
Closed
@lachlanjc lachlanjc mentioned this issue Apr 25, 2020
Closed
@lachlanjc
Copy link
Member

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

@lachlanjc lachlanjc mentioned this issue Dec 2, 2020
Closed
@lachlanjc lachlanjc added the enhancement New feature or request label Dec 3, 2020
@lachlanjc lachlanjc mentioned this issue Dec 6, 2020
Closed
@lachlanjc lachlanjc linked a pull request Oct 6, 2022 that will close this issue
components: Remove style props #2326
Open
@SkyBulk
Copy link

SkyBulk commented May 20, 2023

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

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees

@hasparus hasparus

Labels
enhancement New feature or request @theme-ui/components
Projects
None yet
Milestone
No milestone
Development

Successfully merging a pull request may close this issue.

components: Remove style props system-ui/theme-ui
6 participants
@dburles @jxnblk @lachlanjc @hasparus @alexluong @SkyBulk