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

… time selection (elastic#1620)
Shigawire · Mar 14, 2019 · af436ef · af436ef
1 parent 68f8592
commit af436ef
Show file tree

Hide file tree

Showing 3 changed files with 18 additions and 6 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -2,7 +2,8 @@
 
 **Note: this release is a backport containing changes originally made in `9.0.0`, `9.1.0`, and `9.4.0`**
 
-- Adjusted the dark theme palette to have a slight blue titn ([#1691](https://github.com/elastic/eui/pull/1691))
+- Adjusted the dark theme palette to have a slight blue tint ([#1691](https://github.com/elastic/eui/pull/1691))
+- Added button to `EuiSuperDatePicker`'s “Now” tab to trigger the "now" time selection ([#1620](https://github.com/elastic/eui/pull/1620))
 
 **Bug fixes**
 

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',