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.

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

Create SelectBox component #123

Open
arturbien opened this issue Mar 29, 2020 · 6 comments
Open

Create SelectBox component #123

arturbien opened this issue Mar 29, 2020 · 6 comments
Assignees
Labels
enhancement New feature or request help wanted Extra attention is needed

Comments

@arturbien
Copy link
Member

SelectBox is basically a Select component, but instead of a dropdown, there is a scrollable box of specified height containing all possible options.

Screenshot 2020-03-29 at 19 41 06

@pxd3v
Copy link

pxd3v commented Oct 1, 2020

Hi Artur! Is this issue still relevant? I would like to try implementing it!

@arturbien
Copy link
Member Author

@pxd3v hey ♥️ yes, that would be great!

Things we need to implement:

  • support for width and height prop

  • initially select box should be scrolled to the currently selected option

  • accessibility and keyboard controls

  • maybe support for disabled prop? I think original Windows 95 didn't have disabled state for select box component, but if we come up with a nice way to do it, then we could implement it

It should be possible to reuse some existing styles from Select for this task.

Of course we can add features incrementally and go step by step and refactor along the way. 😊

@pxd3v
Copy link

pxd3v commented Oct 5, 2020

@arturbien Thank you so much for the guidance! I will start working on it today and i'll keep you updated.

@luizbaldi luizbaldi added enhancement New feature or request help wanted Extra attention is needed labels Oct 6, 2020
@pxd3v
Copy link

pxd3v commented Oct 9, 2020

Hi guys! Just to keep you all updated, I'm working on the component! I'm trying to figure out all the themes and css stuff so I can reuse what you guys already implemented, so the process is currently kinda slow hahah but here's a print of the work in progress!
image

@arturbien
Copy link
Member Author

Hey! you should use StyledCutout as the wrapper component to get proper double borders around the SelectBox just like in Select component:
Screenshot 2020-10-09 at 18 23 07

You can import it from here:
import { StyledCutout } from '../Cutout/Cutout';

Same approach is used in Select component and others.

Looks nice tho, keep it up! ♥️

@pxd3v
Copy link

pxd3v commented Oct 16, 2020

Hi @arturbien! I just implemented the list with the Cutout, thank you so much for the tip! I want to know, can you explain me more about the different displays? As I saw on the storybook, components have 3 different styles, default, flat and custom. Can you explain me each one please?!
Ah,I've just created a draft pull request so you guys can keep up updated, here's the url: #197

@pxd3v pxd3v mentioned this issue Oct 18, 2020
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
enhancement New feature or request help wanted Extra attention is needed
Projects
None yet
Development

No branches or pull requests

3 participants