Added button to EuiSuperDatePicker's “Now” tab to trigger the "now"…

… time selection (elastic#1620)
ryankeairns · Mar 8, 2019 · 255d330 · 255d330
1 parent 460b24f
commit 255d330
Show file tree

Hide file tree

Showing 3 changed files with 18 additions and 9 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -14,13 +14,11 @@ No public interface changes since `9.1.0`.
 - Added `.eui-fullWidth` utility class ([#1665](https://github.com/elastic/eui/pull/1665))
 - Added `EuiPopoverFooter` and converted `EuiPopoverTitle` to TS ([#1666](https://github.com/elastic/eui/pull/1666))
 - Converted `EuiLoadingSpinner`, `EuiLoadingKibana`, and `EuiLoadingChart` to TS ([#1683](https://github.com/elastic/eui/pull/1683))
-
-**Bug fixes**
-
-- Fixed IE11 rendering issue in `EuiLoadingKibana` ([#1683](https://github.com/elastic/eui/pull/1683))
+- Added button to `EuiSuperDatePicker`'s “Now” tab to trigger the "now" time selection ([#1620](https://github.com/elastic/eui/pull/1620))
 
 - Fixed floating point arithmetic bug in `EuiRangeTrack`'s value validation ([#1687](https://github.com/elastic/eui/pull/1687))
 - Fixed `EuiComboBox` `activeOptonIndex` error with empty search results ([#1695](https://github.com/elastic/eui/pull/1695))
+- Fixed IE11 rendering issue in `EuiLoadingKibana` ([#1683](https://github.com/elastic/eui/pull/1683))
 
 ## [`9.0.2`](https://github.com/elastic/eui/tree/v9.0.2)
 

diff --git a/src/components/date_picker/super_date_picker/date_popover/_date_popover_content.scss b/src/components/date_picker/super_date_picker/date_popover/_date_popover_content.scss
@@ -6,3 +6,7 @@
 .euiDatePopoverContent__padded {
   padding: $euiSizeS;
 }
+
+.euiDatePopoverContent__padded--large {
+  padding: $euiSize;
+}
diff --git a/src/components/date_picker/super_date_picker/date_popover/date_popover_content.js b/src/components/date_picker/super_date_picker/date_popover/date_popover_content.js
@@ -4,6 +4,7 @@ import React from 'react';
 
 import { EuiTabbedContent } from '../../../tabs';
 import { EuiText } from '../../../text';
+import { EuiButton } from '../../../button';
 
 import { EuiAbsoluteTab } from './absolute_tab';
 import { EuiRelativeTab } from './relative_tab';
@@ -25,9 +26,6 @@ export function EuiDatePopoverContent({ value, roundUp, onChange, dateFormat })
       case DATE_MODES.RELATIVE:
         onChange(toRelativeString(value));
         break;
-      case DATE_MODES.NOW:
-        onChange('now');
-        break;
     }
   };
 
@@ -62,11 +60,20 @@ export function EuiDatePopoverContent({ value, roundUp, onChange, dateFormat })
         id: DATE_MODES.NOW,
         name: 'Now',
         content: (
-          <EuiText size="s" color="subdued" className="euiDatePopoverContent__padded">
+          <EuiText size="s" color="subdued" className="euiDatePopoverContent__padded--large">
             <p>
-              Setting the time to &quot;Now&quot; means that on every refresh
+              Setting the time to &quot;now&quot; means that on every refresh
               this time will be set to the time of the refresh.
             </p>
+            <EuiButton
+              data-test-subj="superDatePickerNowButton"
+              onClick={() => onChange('now')}
+              fullWidth
+              size="s"
+              fill
+            >
+              Set date and time to now
+            </EuiButton>
           </EuiText>
         ),
         'data-test-subj': 'superDatePickerNowTab',