Update global date picker (#1219)

Also fixes #1207

CHANGELOG.md

@@ -3,6 +3,9 @@
 - Added IBM logo in colour and mono
 ([#1321](https://github.com/elastic/eui/pull/1321))
 - Added support for nodes as "Action" column headers in `EuiBasicTable`, which was overlooked in the original change in `4.5.0` ([#1312](https://github.com/elastic/eui/pull/1312))
+- Updated `GlobalDatePicker` example to include all Kibana features ([#1219](https://github.com/elastic/eui/pull/1219))
+- Adjusted `EuiDatePickerRange` to allow for deeper customization ([#1219](https://github.com/elastic/eui/pull/1219))
+- Added `contentProps` and `textProps` to `EuiButton` and `EuiButtonEmpty` ([#1219](https://github.com/elastic/eui/pull/1219))
 
 **Bug fixes**
 

src-docs/src/theme_dark.scss

@@ -1,3 +1,4 @@
 @import '../../src/theme_dark';
 @import './components/guide_components';
 @import './views/header/global_filter_group';
+@import './views/date_picker/global_date_picker';

src-docs/src/theme_k6_dark.scss

@@ -1,3 +1,4 @@
 @import '../../src/theme_k6_dark';
 @import './components/guide_components';
 @import './views/header/global_filter_group';
+@import './views/date_picker/global_date_picker';

src-docs/src/theme_k6_light.scss

@@ -1,3 +1,4 @@
 @import '../../src/theme_k6_light';
 @import './components/guide_components';
 @import './views/header/global_filter_group';
+@import './views/date_picker/global_date_picker';

src-docs/src/theme_light.scss

@@ -1,4 +1,4 @@
 @import '../../src/theme_light';
 @import './components/guide_components';
 @import './views/header/global_filter_group';
-
+@import './views/date_picker/global_date_picker';

src-docs/src/views/date_picker/_global_date_picker.scss

@@ -0,0 +1,97 @@
+//// GLOBAL Date picker
+
+// sass-lint:disable no-important
+.euiGlobalDatePicker__quickSelectButton {
+  // Override prepend border since button already lives inside another prepend
+  border-right: none !important;
+
+  .euiGlobalDatePicker__quickSelectButtonText {
+    // Override specificity from universal and sibiling selectors
+    margin-right: $euiSizeXS !important;
+  }
+}
+
+.euiGlobalDatePicker.euiFormControlLayout {
+  max-width: 480px;
+
+  > .euiFormControlLayout__childrenWrapper {
+    flex: 1 1 100%;
+    overflow: hidden;
+
+    > .euiDatePickerRange {
+      max-width: none;
+      width: auto;
+
+      // sass-lint:disable nesting-depth
+      .euiPopover__anchor {
+        display: block;
+      }
+    }
+  }
+}
+
+.euiGlobalDatePicker__dateButton {
+  @include euiFormControlText;
+  display: block;
+  width: 100%;
+  padding: 0 $euiSizeS;
+  line-height: $euiFormControlHeight - 2px;
+  height: $euiFormControlHeight - 2px;
+  word-break: break-all;
+  transition: background $euiAnimSpeedFast ease-in;
+
+  $backgroundColor: tintOrShade($euiColorSuccess, 90%, 70%);
+  $textColor: makeHighContrastColor($euiColorSuccess, $backgroundColor);
+
+  &-isSelected,
+  &-needsUpdating,
+  &:hover,
+  &:focus {
+    background-color: $backgroundColor;
+  }
+
+  &-needsUpdating {
+    color: $textColor;
+  }
+
+  &-isInvalid {
+    $backgroundColor: tintOrShade($euiColorDanger, 90%, 70%);
+    $textColor: makeHighContrastColor($euiColorDanger, $backgroundColor);
+    background-color: $backgroundColor;
+    color: $textColor;
+  }
+
+  .euiFormControlLayout__prepend {
+    border: none;
+  }
+}
+
+.euiGlobalDatePicker__dateButton--start {
+  text-align: right;
+}
+
+.euiGlobalDatePicker__dateButton--end {
+  text-align: left;
+}
+
+.euiGlobalDatePicker__updateButton {
+  // Just wide enough for all 3 states
+  min-width: $euiButtonMinWidth + ($euiSizeXS * 1.5);
+}
+
+.euiGlobalDatePicker__popoverSection {
+  @include euiScrollBar;
+  max-height: $euiSizeM * 11;
+  overflow: hidden;
+  overflow-y: auto;
+}
+
+@include euiBreakpoint('xs', 's') {
+  .euiGlobalDatePicker__updateButton {
+    min-width: 0;
+
+    .euiGlobalDatePicker__updateButtonText {
+      display: none;
+    }
+  }
+}

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

@@ -279,9 +279,7 @@ export const DatePickerExample = {
         <EuiCallOut color="warning" title="Demo of visual pattern only">
           <p>
             This documents a <strong>visual</strong> pattern for the eventual replacement of Kibana&apos;s
-            global date/time picker. It uses all EUI components without any custom styles. However, it
-            currently depends strongly on <EuiLink href="https://reactdatepicker.com/#example-45">react-datepicker&apos;s <code>calendarContainer</code></EuiLink> option
-            which has it&apos;s own problems and limitations (like auto-focus on input stealing focus from inputs inside of popover).
+            global date/time picker. It uses all EUI components with some custom styles.
           </p>
         </EuiCallOut>
       </div>