Split EuiUpdateButton from EuiSuperDatePicker so it can be used on it…

…s own (elastic#1470) * EuiUpdateButton * changelog * rename EuiUpdateButton to EuiSuperUpdateButton * change log clean up * rest * change log type * Update button/design (#5) * Refactor button’s prop names * Fixing widths
snide · Jan 24, 2019 · 6b751f4 · 6b751f4
1 parent c32d25e
commit 6b751f4
Show file tree

Hide file tree

Showing 15 changed files with 350 additions and 249 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -3,6 +3,7 @@
 - Added a new app icon for Code ([#1467](https://github.com/elastic/eui/pull/1467))
 No public interface changes since `6.6.0`.
 - Re-added EuiI18n, EuiI18nNumber, and EuiContext for localization ([#1466](https://github.com/elastic/eui/pull/1466))
+- Expose `EuiSuperUpdateButton` component from `EuiSuperDatePicker` ([#1470](https://github.com/elastic/eui/pull/1470))
 - Set `type="button"` on accordion buttons ([#1468](https://github.com/elastic/eui/pull/1468))
 
 **Bug fixes**

diff --git a/src-docs/src/views/date_picker/date_picker_example.js b/src-docs/src/views/date_picker/date_picker_example.js
@@ -12,6 +12,7 @@ import {
   EuiDatePicker,
   EuiDatePickerRange,
   EuiSuperDatePicker,
+  EuiSuperUpdateButton,
 } from '../../../../src/components';
 
 import DatePicker from './date_picker';
@@ -305,6 +306,6 @@ export const DatePickerExample = {
       </div>
     ),
     demo: <SuperDatePicker />,
-    props: { EuiSuperDatePicker },
+    props: { EuiSuperDatePicker, EuiSuperUpdateButton },
   }],
 };
diff --git a/src/components/date_picker/index.js b/src/components/date_picker/index.js
@@ -8,4 +8,5 @@ export {
 
 export {
   EuiSuperDatePicker,
+  EuiSuperUpdateButton,
 } from './super_date_picker';
diff --git a/src/components/date_picker/super_date_picker/__snapshots__/super_date_picker.test.js.snap b/src/components/date_picker/super_date_picker/__snapshots__/super_date_picker.test.js.snap
@@ -3,6 +3,7 @@
 exports[`EuiSuperDatePicker is rendered 1`] = `
 <EuiFlexGroup
   alignItems="stretch"
+  className="euiSuperDatePicker__flexWrapper"
   component="div"
   direction="row"
   gutterSize="s"
@@ -13,11 +14,6 @@ exports[`EuiSuperDatePicker is rendered 1`] = `
   <EuiFlexItem
     component="div"
     grow={true}
-    style={
-      Object {
-        "maxWidth": 480,
-      }
-    }
   >
     <EuiFormControlLayout
       className="euiSuperDatePicker"
@@ -106,163 +102,13 @@ exports[`EuiSuperDatePicker is rendered 1`] = `
     component="div"
     grow={false}
   >
-    <EuiToolTip
-      delay="regular"
-      position="bottom"
-    >
-      <EuiButton
-        className="euiSuperDatePicker__updateButton"
-        color="primary"
-        data-test-subj="superDatePickerApplyTimeButton"
-        disabled={false}
-        fill={true}
-        iconSide="left"
-        iconType="refresh"
-        onClick={[Function]}
-        textProps={
-          Object {
-            "className": "euiSuperDatePicker__updateButtonText",
-          }
-        }
-        type="button"
-      >
-        Refresh
-      </EuiButton>
-    </EuiToolTip>
-  </EuiFlexItem>
-</EuiFlexGroup>
-`;
-
-exports[`EuiSuperDatePicker isLoading 1`] = `
-<EuiFlexGroup
-  alignItems="stretch"
-  component="div"
-  direction="row"
-  gutterSize="s"
-  justifyContent="flexStart"
-  responsive={false}
-  wrap={false}
->
-  <EuiFlexItem
-    component="div"
-    grow={true}
-    style={
-      Object {
-        "maxWidth": 480,
-      }
-    }
-  >
-    <EuiFormControlLayout
-      className="euiSuperDatePicker"
-      compressed={false}
+    <EuiSuperUpdateButton
+      data-test-subj="superDatePickerApplyTimeButton"
+      isDisabled={false}
       isLoading={false}
-      prepend={
-        <EuiQuickSelectPopover
-          applyTime={[Function]}
-          commonlyUsedRanges={
-            Array [
-              Object {
-                "end": "now/d",
-                "label": "Today",
-                "start": "now/d",
-              },
-              Object {
-                "end": "now-1d/d",
-                "label": "Yesterday",
-                "start": "now-1d/d",
-              },
-              Object {
-                "end": "now/w",
-                "label": "This week",
-                "start": "now/w",
-              },
-              Object {
-                "end": "now",
-                "label": "Week to date",
-                "start": "now/w",
-              },
-              Object {
-                "end": "now/M",
-                "label": "This month",
-                "start": "now/M",
-              },
-              Object {
-                "end": "now",
-                "label": "Month to date",
-                "start": "now/M",
-              },
-              Object {
-                "end": "now/y",
-                "label": "This year",
-                "start": "now/y",
-              },
-              Object {
-                "end": "now",
-                "label": "Year to date",
-                "start": "now/y",
-              },
-            ]
-          }
-          dateFormat="MMM D, YYYY @ HH:mm:ss.SSS"
-          end="now"
-          isAutoRefreshOnly={false}
-          isPaused={true}
-          recentlyUsedRanges={Array []}
-          refreshInterval={0}
-          start="now-15m"
-        />
-      }
-    >
-      <EuiDatePickerRange
-        className="euiDatePickerRange--inGroup"
-        endDateControl={<div />}
-        iconType={false}
-        isCustom={true}
-        startDateControl={<div />}
-      >
-        <button
-          className="euiSuperDatePicker__prettyFormat"
-          data-test-subj="superDatePickerShowDatesButton"
-          onClick={[Function]}
-        >
-          Last 15 minutes
-          <span
-            className="euiSuperDatePicker__prettyFormatLink"
-          >
-            Show dates
-          </span>
-        </button>
-      </EuiDatePickerRange>
-    </EuiFormControlLayout>
-  </EuiFlexItem>
-  <EuiFlexItem
-    component="div"
-    grow={false}
-  >
-    <EuiToolTip
-      delay="regular"
-      position="bottom"
-    >
-      <EuiButton
-        className="euiSuperDatePicker__updateButton"
-        color="secondary"
-        data-test-subj="superDatePickerApplyTimeButton"
-        disabled={false}
-        fill={true}
-        iconSide="left"
-        iconType="kqlFunction"
-        isLoading={true}
-        onClick={[Function]}
-        textProps={
-          Object {
-            "className": "euiSuperDatePicker__updateButtonText",
-          }
-        }
-        type="button"
-      >
-        Updating
-      </EuiButton>
-    </EuiToolTip>
+      needsUpdate={false}
+      onClick={[Function]}
+    />
   </EuiFlexItem>
 </EuiFlexGroup>
 `;
diff --git a/src/components/date_picker/super_date_picker/__snapshots__/super_update_button.test.js.snap b/src/components/date_picker/super_date_picker/__snapshots__/super_update_button.test.js.snap
@@ -0,0 +1,107 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`EuiSuperUpdateButton is rendered 1`] = `
+<EuiToolTip
+  delay="regular"
+  position="bottom"
+>
+  <EuiButton
+    className="euiSuperUpdateButton"
+    color="primary"
+    fill={true}
+    iconSide="left"
+    iconType="refresh"
+    isDisabled={false}
+    isLoading={false}
+    onClick={[Function]}
+    textProps={
+      Object {
+        "className": "euiSuperUpdateButton__text",
+      }
+    }
+    type="button"
+  >
+    Refresh
+  </EuiButton>
+</EuiToolTip>
+`;
+
+exports[`EuiSuperUpdateButton isDisabled 1`] = `
+<EuiToolTip
+  content="Cannot update"
+  delay="regular"
+  position="bottom"
+>
+  <EuiButton
+    className="euiSuperUpdateButton"
+    color="primary"
+    fill={true}
+    iconSide="left"
+    iconType="refresh"
+    isDisabled={true}
+    isLoading={false}
+    onClick={[Function]}
+    textProps={
+      Object {
+        "className": "euiSuperUpdateButton__text",
+      }
+    }
+    type="button"
+  >
+    Refresh
+  </EuiButton>
+</EuiToolTip>
+`;
+
+exports[`EuiSuperUpdateButton isLoading 1`] = `
+<EuiToolTip
+  delay="regular"
+  position="bottom"
+>
+  <EuiButton
+    className="euiSuperUpdateButton"
+    color="secondary"
+    fill={true}
+    iconSide="left"
+    iconType="kqlFunction"
+    isDisabled={false}
+    isLoading={true}
+    onClick={[Function]}
+    textProps={
+      Object {
+        "className": "euiSuperUpdateButton__text",
+      }
+    }
+    type="button"
+  >
+    Updating
+  </EuiButton>
+</EuiToolTip>
+`;
+
+exports[`EuiSuperUpdateButton needsUpdate 1`] = `
+<EuiToolTip
+  content="Click to apply"
+  delay="regular"
+  position="bottom"
+>
+  <EuiButton
+    className="euiSuperUpdateButton"
+    color="secondary"
+    fill={true}
+    iconSide="left"
+    iconType="kqlFunction"
+    isDisabled={false}
+    isLoading={false}
+    onClick={[Function]}
+    textProps={
+      Object {
+        "className": "euiSuperUpdateButton__text",
+      }
+    }
+    type="button"
+  >
+    Update
+  </EuiButton>
+</EuiToolTip>
+`;
diff --git a/src/components/date_picker/super_date_picker/_index.scss b/src/components/date_picker/super_date_picker/_index.scss
@@ -1,5 +1,7 @@
+@import 'variables';
 @import 'mixins';
 
 @import 'date_popover/index';
 @import 'quick_select_popover/index';
 @import 'super_date_picker';
+@import 'super_update_button';
diff --git a/src/components/date_picker/super_date_picker/_super_date_picker.scss b/src/components/date_picker/super_date_picker/_super_date_picker.scss
@@ -1,5 +1,18 @@
-// sass-lint:disable no-important
+.euiSuperDatePicker__flexWrapper {
+  max-width: 100%;
+  width: $euiSuperDatePickerWidth + $euiSuperDatePickerButtonWidth + $euiSizeS;
+}
+
+.euiSuperDatePicker__flexWrapper--isAutoRefreshOnly {
+  width: $euiFormMaxWidth;
+}
+
+.euiSuperDatePicker__flexWrapper--noUpdateButton {
+  width: $euiSuperDatePickerWidth;
+}
+
 .euiSuperDatePicker {
+  // sass-lint:disable-block no-important
   // Allow it to always grow to fit the container since the default form max width is too small
   max-width: 100% !important;
 
@@ -32,19 +45,19 @@
 
 .euiSuperDatePicker__prettyFormatLink {
   color: $euiLinkColor;
-}
-
-.euiSuperDatePicker__updateButton {
-  // Just wide enough for all 3 states
-  min-width: $euiButtonMinWidth + ($euiSizeXS * 1.5);
+  padding-left: $euiSizeXS; // Adds some separation between date text and link
+  flex-shrink: 0;
 }
 
 @include euiBreakpoint('xs', 's') {
-  .euiSuperDatePicker__updateButton {
-    min-width: 0;
+  .euiSuperDatePicker__flexWrapper,
+  .euiSuperDatePicker__flexWrapper--isAutoRefreshOnly,
+  .euiSuperDatePicker__flexWrapper--noUpdateButton {
+    width: 100%;
+  }
 
-    .euiSuperDatePicker__updateButtonText {
-      display: none;
-    }
+  .euiSuperDatePicker__prettyFormatLink {
+    flex-shrink: 1;
+    min-width: 3em; // Ensures at least "Show" is always visible
   }
 }