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

Add react-datepicker as an eui package #1337

Merged
merged 12 commits into from
Dec 6, 2018

Conversation

chandlerprall
Copy link
Contributor

Bringing in react-datepicker as an internal package in EUI.

@snide
Copy link
Contributor

snide commented Nov 29, 2018

WIP. Jumping in here to fix some stylings.

@snide
Copy link
Contributor

snide commented Dec 6, 2018

@chandlerprall In styling this I noticed two bugs, one big, one small.

  1. When focused on the time selector (when in cal view), the up/down arrows change the scroll position, not the focus in the list.
  2. When you use the month/year "dropdowns", then close the selector, you can tab focus out of popup and back into the form. This is likely because one focustrap is exiting the other?

Otherwise I think we're good to go here.

@chandlerprall
Copy link
Contributor Author

When focused on the time selector (when in cal view), the up/down arrows change the scroll position, not the focus in the list.

cannot reproduce (talked with Dave, neither can he)

When you use the month/year "dropdowns", then close the selector, you can tab focus out of popup and back into the form. This is likely because one focustrap is exiting the other?

I verified this will be fixed when we upgrade focus-trap

…, set seconds to 0 when a time is selected, correct the arrow key interaction with month dropdown selection
@chandlerprall chandlerprall changed the title [WIP] Add react-datepicker as an eui package Add react-datepicker as an eui package Dec 6, 2018
@chandlerprall chandlerprall requested a review from snide December 6, 2018 21:22
@chandlerprall
Copy link
Contributor Author

@snide Pushed a couple small bug (below), everything should be ready for review.

  • using an arrow key to open the date picker when focused on the input no longer scrolls the page
  • flipped arrow keys for selecting the month in the month dropdown
  • for Support seconds in EuiDatePicker #1345 , setting seconds value to 0 when a time is selected

@snide
Copy link
Contributor

snide commented Dec 6, 2018

flipped arrow keys for selecting the month in the month dropdown

FYI this is only a problem with our implementation cuz i was doing CSS stupidity. But I'm ok with changing that here, it's just something to remember if we ever have to break it back out.

Copy link
Contributor

@snide snide left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Noticed a small issue where the global datepicker one does not seem to have the accessible class to highlight the calendar. Otherwise I ran through all my tests and your fixes and this seems to work!

This looks to be because it is missing the accessible classname. FWIW, the accessibility still works there, the class is just missing.

image

image

@chandlerprall
Copy link
Contributor Author

Pushed an update to fix that calendar class.

Copy link
Contributor

@snide snide left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

👍

@chandlerprall chandlerprall merged commit 76e9b29 into elastic:master Dec 6, 2018
@chandlerprall chandlerprall deleted the feature/react-datepicker branch December 6, 2018 22:09
@snide snide mentioned this pull request Dec 7, 2018
3 tasks
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

2 participants