Some tweaks

elastic · Nov 16, 2018 · 9e44a7e · 9e44a7e
1 parent f6b4f71
commit 9e44a7e
Show file tree

Hide file tree

Showing 3 changed files with 19 additions and 24 deletions.
diff --git a/src-docs/src/views/date_picker/_global_date_picker.scss b/src-docs/src/views/date_picker/_global_date_picker.scss
@@ -1,5 +1,6 @@
 //// GLOBAL Date picker
 
+// sass-lint:disable no-important
 .euiGlobalDatePicker__quickSelectButton {
   // Override prepend border since button already lives inside another prepend
   border-right: none !important;
@@ -21,6 +22,7 @@
       max-width: none;
       width: auto;
 
+      // sass-lint:disable nesting-depth
       .euiPopover__anchor {
         display: block;
       }
@@ -75,14 +77,6 @@
 .euiGlobalDatePicker__updateButton {
   // Just wide enough for all 3 states
   min-width: $euiButtonMinWidth + ($euiSizeXS * 1.5);
-
-  @include euiBreakpoint('xs', 's') {
-    min-width: 0;
-
-    .euiGlobalDatePicker__updateButtonText {
-      display: none;
-    }
-  }
 }
 
 .euiGlobalDatePicker__popoverSection {
@@ -91,3 +85,13 @@
   overflow: hidden;
   overflow-y: auto;
 }
+
+@include euiBreakpoint('xs', 's') {
+  .euiGlobalDatePicker__updateButton {
+    min-width: 0;
+
+    .euiGlobalDatePicker__updateButtonText {
+      display: none;
+    }
+  }
+}
diff --git a/src-docs/src/views/date_picker/date_picker_example.js b/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>

diff --git a/src-docs/src/views/date_picker/global_date_picker.js b/src-docs/src/views/date_picker/global_date_picker.js
@@ -26,7 +26,6 @@ import {
   EuiTabbedContent,
   EuiForm,
   EuiSwitch,
-  EuiTextColor,
   EuiToolTip,
   EuiFieldText,
   EuiButtonIcon,
@@ -90,7 +89,7 @@ class GlobalDatePopover extends Component {
             </EuiFlexItem>
           </EuiFlexGroup>
           <EuiFormRow>
-            <EuiDatePicker selected={moment().subtract(3, 'day')} readOnly />
+            <EuiFieldText defaultValue={String(moment().subtract(3, 'day'))} readOnly />
           </EuiFormRow>
           <EuiFormRow>
             <EuiSwitch label="Round to the day" />
@@ -101,14 +100,11 @@ class GlobalDatePopover extends Component {
       id: 'now',
       name: 'Now',
       content: (
-        <EuiText textAlign="center" style={{ width: 390, padding: 16 }}>
-          <EuiTitle size="m"><span>{moment().format('MMMM Do YYYY')}</span></EuiTitle>
-          <EuiSpacer size="s" />
-          <EuiTitle size="m">
-            <EuiTextColor color="subdued">
-              <span>{moment().format('h:mm:ss a')}</span>
-            </EuiTextColor>
-          </EuiTitle>
+        <EuiText size="s" color="subdued" style={{ width: 390, padding: 16 }}>
+          <p>
+            Setting the time to &quot;Now&quot; means that on every refresh
+            this time will be set to the time of the refresh.
+          </p>
         </EuiText>
       ),
     }];
@@ -242,9 +238,6 @@ export default class extends Component {
         ['3 hours ago', '4 minutes ago'],
         'Last 6 months',
         ['06/11/2017 06:11 AM', '06/11/2017 06:11 PM'],
-        ['06/11/2017 06:11 AM', '06/11/2017 06:11 PM'],
-        ['06/11/2017 06:11 AM', '06/11/2017 06:11 PM'],
-        ['06/11/2017 06:11 AM', '06/11/2017 06:11 PM'],
       ],
     };
   }