Global date picker #1026

cchaos · 2018-07-18T21:46:33Z

This PR sets up the pattern (building blocks) for the Global Date Picker based off of these mocks.

Using react-datepicker

I had to bump the react-datepicker version to 1.5.0 so I could have access to the new calendarContainer prop. I looked through their commits from the previous version to this, and it seems no other major changes were added.

The only issue with building it out this way, is that the datepicker's input does some force focus stuff so the form controls in the popper are hard to interact with as the input keeps stealing focus.

I'm going to leave the rest up to the engineer as the style and display of the pattern are there.

A couple other components had to be manipulated including:

EuiFlexGrid: Now accepts a responsive property like EuiFlexGroup does.
EuiTabs and EuiTabbedContent: Now accepts an expand property to expand all the child tabs to fill up the horizontal space. I purposefully did not include and extra doc example, but it is commented in the the props.

cchaos · 2018-07-18T21:54:47Z

There are a few issues in IE, that I'm working on fixing.

cchaos · 2018-07-19T14:05:55Z

Ok IE is fixed, this is ready for review.

chandlerprall

LGTM; pulled and ran the example

snide

Very nice. Some small stuff. Think we want to be really clear about how we label this. "Pattern" I think lego bricks together. Think we wanna be a little more scary about it up front.

Looks great. 🥇

snide · 2018-07-19T17:44:46Z

src-docs/src/views/date_picker/date_picker_example.js

+        <EuiSpacer />
+        <p>
+            This pattern showcases how to setup the components for Kibana&apos;s
+            global date picker. None of the functionality is actually hooked up.


I think you might want to be a little more clear here that this is a visual pattern only. I know EuiCallOut is uglier, but we need to be really blunt that this isn't for use. I think I'd specifically mention that it utilizes the DatePicker container stuff, and maybe give a line or two about what's broken in the implementation and what would need to be addressed to make it workable.

snide · 2018-07-19T17:48:05Z

src-docs/src/views/date_picker/global_date_picker.js

+        button={quickSelectButton}
+        isOpen={this.state.isPopoverOpen}
+        closePopover={this.closePopover.bind(this)}
+        anchorPosition="downLeft"


Adding ownFocus here will trap the keyboard properly (and allow you to ESC your way out immediately)

snide · 2018-07-19T18:00:55Z

src-docs/src/views/date_picker/global_date_picker.js

+      <EuiFormControlLayout
+        prepend={quickSelectPopover}
+      >
+        <EuiDatePickerRange


Might be worthwhile to figure out the clipping.

The only thing I can do is reduce the side paddings of inputs or increase the max-width of this component. The latter doesn't really help all that much because it also depends on where it's located and what size the browser width is at.

No worries.

snide · 2018-07-19T18:04:08Z

src/components/flex/_flex_item.scss

@@ -24,7 +27,7 @@
 // On mobile we force them to stack and act the same.
 @include euiBreakpoint('xs','s') {
  .euiFlexGroup--responsive > .euiFlexItem,
-  .euiFlexGrid > .euiFlexItem {
+  .euiFlexGrid--responsive > .euiFlexItem {


Funny we didn't add this till now. 👍

There's a lot of responsive stuff that we just assume that would be nice to allow for more customization.

snide · 2018-07-19T18:08:36Z

src/components/popover/_popover.scss

@@ -33,6 +35,10 @@
  visibility: hidden; /* 2 */
  transform: translateY(0) translateX(0) translateZ(0); /* 2 */

+  > * {


😈 Makes sense, but this won't save things completely. Prolly decent default though. Think it's OK for us to expect people to write their own media queries if they are overstuffing popovers.

snide · 2018-07-19T18:13:16Z

package.json

@@ -44,7 +44,7 @@
    "prop-types": "^15.6.0",
    "react-ace": "^5.5.0",
    "react-color": "^2.13.8",
-    "react-datepicker": "v1.4.1",
+    "react-datepicker": "v1.5.0",


Could you find a changelog? I did some clicking around and stuff to make sure everything still worked proper, but I couldn't find a list of changes in his lib.

I just looked here Hacker0x01/react-datepicker@v1.4.1...master up until the 1.5.0. commit

^^ Ran through this and did some pretty deep manual testing to make sure everything still worked the way we expect.

snide · 2018-07-19T18:13:50Z

src/components/popover/_popover.scss

 */
 .euiPopover__panel {
  position: absolute;
  z-index: $euiZContentMenu;
  min-width: $euiButtonMinWidth; /* 1 */
+  max-width: calc(100vw - #{$euiSizeXL}); /* 3 */


Is this for mobile? Assume content would just break if it needed a width that was set in the desktop version. This seems like a good default though.

Yes, this is for mobile. Just an extra security blanket that makes sure popovers don't go outside the browser width.

snide · 2018-07-19T18:14:39Z

src/components/tabs/tabs.js

+   * Evenly stretches each tab to fill the
+   * horizontal space
+   */
+  expand: PropTypes.bool,


This is a great addition. Nice implementation.

snide · 2018-07-19T18:17:46Z

Oh, and don't forget a changelog.

- Uses `calendarContainer` from react-datepicker v1.5.0

cchaos added the feature request label Jul 18, 2018

cchaos requested review from chandlerprall and snide July 18, 2018 21:46

chandlerprall approved these changes Jul 19, 2018

View reviewed changes

snide reviewed Jul 19, 2018

View reviewed changes

cchaos added 9 commits July 19, 2018 16:42

Created basic global time picker,

7977875

- Uses `calendarContainer` from react-datepicker v1.5.0

quick clean up

efbfc8d

Revert some unecessary items for this PR and updating others

788bbb4

Cleanup

8c4daa6

added date in relative section

775ae68

Fixed text align of date picker range

b97cbdd

Change default position of popover

aeb898a

IE fixes

74ec8fb

Addressing PR comments and changelog

7f1ceee

cchaos force-pushed the global-date-picker branch from 70d817c to 7f1ceee Compare July 19, 2018 20:43

snide approved these changes Jul 19, 2018

View reviewed changes

cchaos merged commit 567a9ed into elastic:master Jul 19, 2018

cchaos deleted the global-date-picker branch July 19, 2018 21:37

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Global date picker #1026

Global date picker #1026

cchaos commented Jul 18, 2018

cchaos commented Jul 18, 2018

cchaos commented Jul 19, 2018

chandlerprall left a comment

snide left a comment

snide Jul 19, 2018

snide Jul 19, 2018

snide Jul 19, 2018

cchaos Jul 19, 2018

snide Jul 19, 2018

snide Jul 19, 2018

cchaos Jul 19, 2018

snide Jul 19, 2018

snide Jul 19, 2018

cchaos Jul 19, 2018

snide Jul 19, 2018

snide Jul 19, 2018

cchaos Jul 19, 2018

snide Jul 19, 2018

snide commented Jul 19, 2018

Global date picker #1026

Global date picker #1026

Conversation

cchaos commented Jul 18, 2018

Using react-datepicker

A couple other components had to be manipulated including:

cchaos commented Jul 18, 2018

cchaos commented Jul 19, 2018

chandlerprall left a comment

Choose a reason for hiding this comment

snide left a comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

snide commented Jul 19, 2018