React datepicker better responsive handling when inline #1820

snide · 2019-04-10T22:34:52Z

Summary

Also tried to make the overall EuiSuperDatePicker a little smaller so that it fits in smaller resolutions (it now matches the size of the calendar itself).

Checklist

src/components/date_picker/_date_picker.scss

src/components/date_picker/super_date_picker/date_popover/_date_popover_content.scss

snide · 2019-04-10T22:57:42Z

NM on those comments, forgot these were in the same folder, so it was easy. Cleaned them up.

snide · 2019-04-16T22:41:16Z

@cchaos This one's been sitting for awhile. Mind giving it a quick review?

cchaos · 2019-04-17T13:38:17Z

I think we need to come up with a better solution for the mobile calendar picker. I don't think we can just hide the time selects. The whole Time Selection section becomes moot because none of the inputs show a time list.

snide · 2019-04-17T20:37:49Z

@cchaos I think ultimately for me the biggest thing is that the calendar is useful in a mobile situation. The time selector is nice to have when we have the space, but honestly is going to be very, very hard to scroll decently in a mobile application given the default number of results (48?). Given that, using the pure text input works perfectly fine here and will likely be faster for most than fiddling with a skinny scroll selector.

I think if we wanted to get deeper into solving the issue, we'd likely want to replace these controls with actual input type="date" fields when in mobile, which will be pretty consistently rendered and a muuuuch better experience. I think that's a fundamental rework of how we use these things though (primarily in SDP) and would need a lot more thinking and refactoring.

Given all that. I look at this as simply a quick hotfix solution we can add today to avoid breaks (as your issue points out, it is actually broken right now, and the SDP is too wide) and make the current datepicker and super datepicker work today without too much fuss.

cchaos

Can we change the first example to now show the time in the input? I keep thinking it's an error that I don't see a time select and you can't type in the input.

I actually think turning the time display off should be default since showing the time select is off by default.

The only thing more related to this PR is it looks like the calendar is not completely centered in the panel:

cchaos · 2019-06-06T18:03:11Z

We should try to get this in. @snide Do you want me to finish up those last few items or will you have time to?

snide · 2019-06-06T18:15:03Z

@cchaos go for it.

- Right arrow position - Selected & in-range style - Default `dateFormat` doesn’t include time since `showTimeFormat` is false by default

cchaos · 2019-06-14T15:26:07Z

src-docs/src/views/horizontal_rule/horizontal_rule_example.js

-const horizontalRuleSnippet = `<EuiHorizontalRule size="quarter" />`;
-const horizontalRuleMarginSnippet = `<EuiHorizontalRule margin="xs" />`;
+const horizontalRuleSnippet = '<EuiHorizontalRule size="quarter" />';
+const horizontalRuleMarginSnippet = '<EuiHorizontalRule margin="xs" />';


Linter forced me to change these

cchaos · 2019-06-14T15:27:18Z

src/components/date_picker/_date_picker.scss

@@ -217,7 +217,7 @@
  &--next {
    @include datePicker__arrow;
    // Pixel value because of some padding on the icon
-    right: 10px;
+    right: 20px;


Aligned this value with the one for previous:

before:

cchaos · 2019-06-14T15:29:07Z

src/components/date_picker/_date_picker.scss

@@ -635,7 +635,7 @@
 .react-datepicker__month--accessible:focus {
  background: $euiFocusBackgroundColor;

-  .react-datepicker__day--in-range {
+  .react-datepicker__day--in-range:not(.react-datepicker__day--selected) {


Fixes this issue:

now:

cchaos · 2019-06-14T15:30:16Z

src/components/date_picker/date_picker.js

@@ -280,11 +280,12 @@ EuiDatePicker.propTypes = {

 EuiDatePicker.defaultProps = {
  adjustDateOnChange: true,
-  dateFormat: 'MM/DD/YYYY hh:mm A',
+  dateFormat: 'MM/DD/YYYY',


It didn't make sense that the default date format would show time when by default, showTimeSelect is false. So I removed the time format just from this default value.

cchaos

I approve this now with the added changes I made. 😄

cchaos · 2019-06-14T15:31:28Z

@snide I can't request you as a reviewer since you're the creator, but can do take a look at my changes?

thompsongl

📅 LGTM

cchaos · 2019-06-14T17:02:36Z

@thompsongl Can you actually check my last commit as well: 61d463e

thompsongl

Still looks good

thompsongl · 2019-07-02T17:14:01Z

This one is ready to merge after updating the CL, yeah?

snide · 2019-07-02T17:21:45Z

@thompsongl yep. ill update and get it merged.

snide · 2019-07-02T17:47:40Z

jenkins test this

snide requested a review from cchaos April 10, 2019 22:34

snide commented Apr 10, 2019

View reviewed changes

src/components/date_picker/_date_picker.scss Outdated Show resolved Hide resolved

snide commented Apr 10, 2019

View reviewed changes

src/components/date_picker/super_date_picker/date_popover/_date_popover_content.scss Outdated Show resolved Hide resolved

snide added the bug label Apr 10, 2019

cchaos suggested changes Apr 18, 2019

View reviewed changes

snide and others added 6 commits June 14, 2019 10:22

React datepicker better responsive handling when inline

8c94040

variablize

061c560

cl

c954775

es-lint fixes

3529f7b

More fixes

1c1a95f

- Right arrow position - Selected & in-range style - Default `dateFormat` doesn’t include time since `showTimeFormat` is false by default

cl

34f6559

cchaos force-pushed the bug/resp_dp branch from d3c5e56 to 34f6559 Compare June 14, 2019 15:24

cl

e866c26

cchaos reviewed Jun 14, 2019

View reviewed changes

cchaos approved these changes Jun 14, 2019

View reviewed changes

cchaos requested a review from thompsongl June 14, 2019 15:31

thompsongl approved these changes Jun 14, 2019

View reviewed changes

Ensure dateFormat includes timeFormat if dateFormat is still the default

61d463e

Merge branch 'master' into bug/resp_dp

d181c5e

thompsongl approved these changes Jun 14, 2019

View reviewed changes

Merge remote-tracking branch 'upstream/master' into bug/resp_dp

5157c2a

snide merged commit e4db15d into elastic:master Jul 2, 2019

snide deleted the bug/resp_dp branch July 2, 2019 19:28

snide restored the bug/resp_dp branch July 2, 2019 19:28

snide deleted the bug/resp_dp branch July 2, 2019 19:28

snide restored the bug/resp_dp branch July 2, 2019 19:28

snide mentioned this pull request Jul 12, 2019

EUI 12.3.1 elastic/kibana#41061

Merged

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

React datepicker better responsive handling when inline #1820

React datepicker better responsive handling when inline #1820

snide commented Apr 10, 2019 •

edited

Loading

snide commented Apr 10, 2019

snide commented Apr 16, 2019

cchaos commented Apr 17, 2019

snide commented Apr 17, 2019

cchaos left a comment

cchaos commented Jun 6, 2019

snide commented Jun 6, 2019

cchaos Jun 14, 2019

cchaos Jun 14, 2019

cchaos Jun 14, 2019

cchaos Jun 14, 2019

cchaos left a comment

cchaos commented Jun 14, 2019

thompsongl left a comment

cchaos commented Jun 14, 2019

thompsongl left a comment

thompsongl commented Jul 2, 2019

snide commented Jul 2, 2019

snide commented Jul 2, 2019

React datepicker better responsive handling when inline #1820

React datepicker better responsive handling when inline #1820

Conversation

snide commented Apr 10, 2019 • edited Loading

Summary

Checklist

snide commented Apr 10, 2019

snide commented Apr 16, 2019

cchaos commented Apr 17, 2019

snide commented Apr 17, 2019

cchaos left a comment

Choose a reason for hiding this comment

cchaos commented Jun 6, 2019

snide commented Jun 6, 2019

cchaos Jun 14, 2019

Choose a reason for hiding this comment

cchaos Jun 14, 2019

Choose a reason for hiding this comment

cchaos Jun 14, 2019

Choose a reason for hiding this comment

cchaos Jun 14, 2019

Choose a reason for hiding this comment

cchaos left a comment

Choose a reason for hiding this comment

cchaos commented Jun 14, 2019

thompsongl left a comment

Choose a reason for hiding this comment

cchaos commented Jun 14, 2019

thompsongl left a comment

Choose a reason for hiding this comment

thompsongl commented Jul 2, 2019

snide commented Jul 2, 2019

snide commented Jul 2, 2019

snide commented Apr 10, 2019 •

edited

Loading