[EuiSuperDatePicker] relative tab, timestamp: Use roundUp, switch pos…

… with "Round To" btn (#1827) Add roundUp flag to displayed value of timestamp in relative tab to sync displayed value with the value displayed in the popover button Switch position of "Round to the X" button and timestamp string
elastic · Apr 26, 2019 · 87f944c · 87f944c
1 parent 0c6f4f6
commit 87f944c
Show file tree

Hide file tree

Showing 3 changed files with 15 additions and 12 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -4,6 +4,8 @@
 - Converted `EuiOverlayMask` to TS ([#1858](https://github.com/elastic/eui/pull/1858))
 - Converted `EuiStat` to TS ([#1848](https://github.com/elastic/eui/pull/1848))
 - Added `isLoading` prop to `EuiStat` ([#1848](https://github.com/elastic/eui/pull/1848))
+- Added `roundUp` prop to relative tab of `EuiSuperDatePicker` ([#1827](https://github.com/elastic/eui/pull/1827))
+- Changed position of `EuiSwitch` for date rounding used at relative tab of `EuiSuperDatePicker` ([#1827](https://github.com/elastic/eui/pull/1827))
 
 **Bug fixes**
 

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
@@ -52,6 +52,7 @@ export function EuiDatePopoverContent({ value, roundUp, onChange, dateFormat })
             dateFormat={dateFormat}
             value={value}
             onChange={onChange}
+            roundUp={roundUp}
           />
         ),
         'data-test-subj': 'superDatePickerRelativeTab',

diff --git a/src/components/date_picker/super_date_picker/date_popover/relative_tab.js b/src/components/date_picker/super_date_picker/date_popover/relative_tab.js
@@ -12,6 +12,7 @@ import {
   EuiFieldText,
   EuiSwitch
 } from '../../../form';
+import { EuiSpacer } from '../../../spacer';
 
 import { timeUnits } from '../time_units';
 import { relativeOptions } from '../relative_options';
@@ -55,7 +56,7 @@ export class EuiRelativeTab extends Component {
 
   render() {
     const isInvalid = this.state.count < 0;
-    const parsedValue = dateMath.parse(this.props.value);
+    const parsedValue = dateMath.parse(this.props.value, { roundUp: this.props.roundUp });
     const formatedValue = isInvalid || !parsedValue || !parsedValue.isValid()
       ? ''
       : parsedValue.format(this.props.dateFormat);
@@ -87,17 +88,15 @@ export class EuiRelativeTab extends Component {
             </EuiFormRow>
           </EuiFlexItem>
         </EuiFlexGroup>
-        <EuiFormRow>
-          <EuiFieldText value={formatedValue} readOnly />
-        </EuiFormRow>
-        <EuiFormRow>
-          <EuiSwitch
-            data-test-subj={`superDatePickerRelativeDateRoundSwitch`}
-            label={`Round to the ${timeUnits[this.state.unit.substring(0, 1)]}`}
-            checked={this.state.round}
-            onChange={this.onRoundChange}
-          />
-        </EuiFormRow>
+        <EuiSpacer size="s" />
+        <EuiSwitch
+          data-test-subj={`superDatePickerRelativeDateRoundSwitch`}
+          label={`Round to the ${timeUnits[this.state.unit.substring(0, 1)]}`}
+          checked={this.state.round}
+          onChange={this.onRoundChange}
+        />
+        <EuiSpacer size="m" />
+        <EuiFieldText value={formatedValue} readOnly />
       </EuiForm>
     );
   }
@@ -107,4 +106,5 @@ EuiRelativeTab.propTypes = {
   dateFormat: PropTypes.string.isRequired,
   value: PropTypes.string.isRequired,
   onChange: PropTypes.func.isRequired,
+  roundUp: PropTypes.bool,
 };