Split EuiUpdateButton from EuiSuperDatePicker so it can be used on its own

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` componenent 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**

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 },
   }],
 };

src/components/date_picker/index.js

@@ -8,4 +8,5 @@ export {
 
 export {
   EuiSuperDatePicker,
+  EuiSuperUpdateButton,
 } from './super_date_picker';

src/components/date_picker/super_date_picker/__snapshots__/super_date_picker.test.js.snap

@@ -106,163 +106,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"
+      hasChanged={false}
+      isInvalid={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>
+      onApply={[Function]}
+    />
   </EuiFlexItem>
 </EuiFlexGroup>
 `;

src/components/date_picker/super_date_picker/__snapshots__/update_button.test.js.snap

@@ -0,0 +1,107 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`EuiSuperUpdateButton hasChanged 1`] = `
+<EuiToolTip
+  content="Click to apply"
+  delay="regular"
+  position="bottom"
+>
+  <EuiButton
+    className="euiSuperDatePicker__updateButton"
+    color="secondary"
+    disabled={false}
+    fill={true}
+    iconSide="left"
+    iconType="kqlFunction"
+    isLoading={false}
+    onClick={[Function]}
+    textProps={
+      Object {
+        "className": "euiSuperDatePicker__updateButtonText",
+      }
+    }
+    type="button"
+  >
+    Update
+  </EuiButton>
+</EuiToolTip>
+`;
+
+exports[`EuiSuperUpdateButton is rendered 1`] = `
+<EuiToolTip
+  delay="regular"
+  position="bottom"
+>
+  <EuiButton
+    className="euiSuperDatePicker__updateButton"
+    color="primary"
+    disabled={false}
+    fill={true}
+    iconSide="left"
+    iconType="refresh"
+    isLoading={false}
+    onClick={[Function]}
+    textProps={
+      Object {
+        "className": "euiSuperDatePicker__updateButtonText",
+      }
+    }
+    type="button"
+  >
+    Refresh
+  </EuiButton>
+</EuiToolTip>
+`;
+
+exports[`EuiSuperUpdateButton isInvalid 1`] = `
+<EuiToolTip
+  content="Can't update, values are invalid"
+  delay="regular"
+  position="bottom"
+>
+  <EuiButton
+    className="euiSuperDatePicker__updateButton"
+    color="primary"
+    disabled={true}
+    fill={true}
+    iconSide="left"
+    iconType="refresh"
+    isLoading={false}
+    onClick={[Function]}
+    textProps={
+      Object {
+        "className": "euiSuperDatePicker__updateButtonText",
+      }
+    }
+    type="button"
+  >
+    Refresh
+  </EuiButton>
+</EuiToolTip>
+`;
+
+exports[`EuiSuperUpdateButton isLoading 1`] = `
+<EuiToolTip
+  delay="regular"
+  position="bottom"
+>
+  <EuiButton
+    className="euiSuperDatePicker__updateButton"
+    color="secondary"
+    disabled={false}
+    fill={true}
+    iconSide="left"
+    iconType="kqlFunction"
+    isLoading={true}
+    onClick={[Function]}
+    textProps={
+      Object {
+        "className": "euiSuperDatePicker__updateButtonText",
+      }
+    }
+    type="button"
+  >
+    Updating
+  </EuiButton>
+</EuiToolTip>
+`;

src/components/date_picker/super_date_picker/index.js

@@ -1,3 +1,7 @@
 export {
   EuiSuperDatePicker,
 } from './super_date_picker';
+
+export {
+  EuiSuperUpdateButton,
+} from './update_button';