[EuiDatePicker] Fix year dropdown when using minDate or maxDate#5069
[EuiDatePicker] Fix year dropdown when using minDate or maxDate#5069cchaos merged 12 commits intoelastic:masterfrom
minDate or maxDate#5069Conversation
minDate or `maxDateminDate or maxDate
|
Preview documentation changes for this PR: https://eui.elastic.co/pr_5069/ |
cchaos
left a comment
There was a problem hiding this comment.
Oh man, if I had known I could update the react-datepicker package in #5000 ... 😆
Whelp you uncovered a style change that I didn't afford for in the Amsterdam styles. Can you update the following styles:
.react-datepicker__year-dropdown-container>div:not([class*='read-view']),
.react-datepicker__month-dropdown {
- height: 100%;
- height: 250px;
+ max-height: 250px;
}This will fix the height of the year dropdown when there are only a few options. And so may be a good case to add a specific example for?
And then I just found another stylistic issue for when a day is selected & disabled and in range & disabled.
Which, btw, should the input be showing invalid when a date is selected outside of the allowed min/max?
|
I pushed you a fix for those style issues |
|
Preview documentation changes for this PR: https://eui.elastic.co/pr_5069/ |
|
Preview documentation changes for this PR: https://eui.elastic.co/pr_5069/ |
The error state is configurable by the consumer. In that example |
|
Preview documentation changes for this PR: https://eui.elastic.co/pr_5069/ |
|
Preview documentation changes for this PR: https://eui.elastic.co/pr_5069/ |
cchaos
left a comment
There was a problem hiding this comment.
LGTM Functionally and stylistically! Thanks!
|
Preview documentation changes for this PR: https://eui.elastic.co/pr_5069/ |
Summary
Closes #5058, closes #4219, and closes #2816, all of which were caused by a
display: none;rule that accidentally targeted the wrong element whenminDateand/ormaxDatewere configured.The fix was to "remove" the elements that were hidden by custom styles, and also remove the custom styles that were having unintended consequences (i.e., hiding the min and max years in the dropdown).
See the comment about why I left some code in, but I'd be willing to delete the code now if preferred.
Checklist
- [ ] Checked in mobile- [ ] Checked in Chrome, Safari, Edge, and Firefox- [ ] Props have proper autodocs and playground toggles- [ ] Checked Code Sandbox works for the any docs examples- [ ] Added or updated jest tests