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

New Select, DatePicker and Time Picker #40

Open
1 of 8 tasks
williamfeng91 opened this issue Nov 18, 2020 · 1 comment
Open
1 of 8 tasks

New Select, DatePicker and Time Picker #40

williamfeng91 opened this issue Nov 18, 2020 · 1 comment

Comments

@williamfeng91
Copy link
Member

Currently the dropdown menu of Select, DatePicker and TimePicker are blocked by a overflow: hidden container. The solution we've decided on is to use a portal to render the menu outside the DOM hierarchy of the container (under <body>).

I'm going to break this task down into reusable components and hooks that can be shared between Select, DatePicker and TimePicker.

Components from low to high level:

  • Overlay
    • Add prop color to control the background color of the overlay
  • Popover
    • New component that shows a popup next to an anchor element (e.g. popup for Select, DatePicker and TimePicker) using Overlay
  • Select
    • Rewrite (will break it down further)
  • DatePicker
    • Rewrite (will break it down further)
  • TimePicker
    • Rewrite (will break it down further)

For now we just want to get a quick implementation out for the demo so I will make PRs for the following tasks first.

  • Select: use react-select with no search bar (PR merged)
  • DatePicker: add a prop modal and use Popover for the calendar if modal is set to true
  • TimePicker: add a prop modal and use Popover for the wheels if modal is set to true
@williamfeng91
Copy link
Member Author

#41

  • Add prop color to control the background color of the overlay
  • DatePicker: add a prop modal and use Popover for the calendar if modal is set to true
  • TimePicker: add a prop modal and use Popover for the wheels if modal is set to true

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
None yet
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
1 participant
@williamfeng91