From 1c708fb2a3e3a0d6e1a7060a2ceff383134a602e Mon Sep 17 00:00:00 2001
From: cchaos <caroline.horn@elastic.co>
Date: Wed, 19 Dec 2018 14:51:59 -0500
Subject: [PATCH 1/4] Better classnames and breaking up styles

---
 .../super_date_picker.test.js.snap            |  8 +--
 .../date_picker/super_date_picker/_index.scss |  4 ++
 .../super_date_picker/_mixins.scss            | 10 +++
 .../super_date_picker/_super_date_picker.scss | 72 ++-----------------
 .../date_popover/_date_popover_button.scss    | 36 ++++++++++
 .../date_popover/_index.scss                  |  1 +
 .../date_popover/date_popover_button.js       | 13 ++--
 .../quick_select_popover/_index.scss          |  1 +
 .../_quick_select_popover.scss                | 12 ++++
 .../commonly_used_time_ranges.js              |  2 +-
 .../quick_select_popover.js                   |  4 +-
 .../quick_select_popover/recently_used.js     |  2 +-
 .../super_date_picker/super_date_picker.js    |  2 +-
 13 files changed, 85 insertions(+), 82 deletions(-)
 create mode 100644 src/components/date_picker/super_date_picker/_mixins.scss
 create mode 100644 src/components/date_picker/super_date_picker/date_popover/_date_popover_button.scss
 create mode 100644 src/components/date_picker/super_date_picker/date_popover/_index.scss
 create mode 100644 src/components/date_picker/super_date_picker/quick_select_popover/_index.scss
 create mode 100644 src/components/date_picker/super_date_picker/quick_select_popover/_quick_select_popover.scss

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
index 5147c25d067..0609a241254 100644
--- 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
@@ -98,9 +98,7 @@ exports[`EuiSuperDatePicker is rendered 1`] = `
           }
           textProps={
             Object {
-              "style": Object {
-                "width": "100%",
-              },
+              "className": "euiSuperDatePicker__dateInnerText",
             }
           }
           type="button"
@@ -254,9 +252,7 @@ exports[`EuiSuperDatePicker isLoading 1`] = `
           }
           textProps={
             Object {
-              "style": Object {
-                "width": "100%",
-              },
+              "className": "euiSuperDatePicker__dateInnerText",
             }
           }
           type="button"
diff --git a/src/components/date_picker/super_date_picker/_index.scss b/src/components/date_picker/super_date_picker/_index.scss
index 6382670c4bf..87d6056d51a 100644
--- a/src/components/date_picker/super_date_picker/_index.scss
+++ b/src/components/date_picker/super_date_picker/_index.scss
@@ -1 +1,5 @@
+@import 'mixins';
+
+@import 'date_popover/index';
+@import 'quick_select_popover/index';
 @import 'super_date_picker';
diff --git a/src/components/date_picker/super_date_picker/_mixins.scss b/src/components/date_picker/super_date_picker/_mixins.scss
new file mode 100644
index 00000000000..02db2c4fd55
--- /dev/null
+++ b/src/components/date_picker/super_date_picker/_mixins.scss
@@ -0,0 +1,10 @@
+@mixin euiSuperDatePickerText {
+  @include euiFormControlText;
+  display: block;
+  width: 100%;
+  padding: 0 $euiSizeS;
+  line-height: $euiFormControlHeight - 2px;
+  height: $euiFormControlHeight - 2px;
+  word-break: break-all;
+  transition: background $euiAnimSpeedFast ease-in;
+}
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
index 16bdde5cf33..85563fe369b 100644
--- 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,16 +1,7 @@
 // sass-lint:disable no-important
-.euiSuperDatePicker__quickSelectButton {
-  // Override prepend border since button already lives inside another prepend
-  border-right: none !important;
-
-  .euiSuperDatePicker__quickSelectButtonText {
-    // Override specificity from universal and sibiling selectors
-    margin-right: $euiSizeXS !important;
-  }
-}
-
-.euiSuperDatePicker.euiFormControlLayout {
-  max-width: 480px;
+.euiSuperDatePicker {
+  // Allow it to always grow to fit the container since the default form max width is too small
+  max-width: 100% !important;
 
   > .euiFormControlLayout__childrenWrapper {
     flex: 1 1 100%;
@@ -19,59 +10,17 @@
     > .euiDatePickerRange {
       max-width: none;
       width: auto;
-
-      // sass-lint:disable nesting-depth
-      .euiPopover__anchor {
-        display: block;
-      }
     }
   }
 }
 
 .euiSuperDatePicker__dateText {
-  @include euiFormControlText;
-  display: block;
-  width: 100%;
-  padding: 0 $euiSizeS;
-  line-height: $euiFormControlHeight - 2px;
-  height: $euiFormControlHeight - 2px;
-  word-break: break-all;
-  transition: background $euiAnimSpeedFast ease-in;
-}
-
-.euiSuperDatePicker__dateButton {
-  $backgroundColor: tintOrShade($euiColorSuccess, 90%, 70%);
-  $textColor: makeHighContrastColor($euiColorSuccess, $backgroundColor);
-
-  &-isSelected,
-  &-needsUpdating,
-  &:hover,
-  &:focus {
-    background-color: $backgroundColor;
-  }
-
-  &-needsUpdating {
-    color: $textColor;
-  }
-
-  &-isInvalid {
-    $backgroundColor: tintOrShade($euiColorDanger, 90%, 70%);
-    $textColor: makeHighContrastColor($euiColorDanger, $backgroundColor);
-    background-color: $backgroundColor;
-    color: $textColor;
-  }
-
-  .euiFormControlLayout__prepend {
-    border: none;
-  }
-}
-
-.euiSuperDatePicker__dateButton--start {
-  text-align: right;
+  @include euiSuperDatePickerText;
+  text-align: left;
 }
 
-.euiSuperDatePicker__dateButton--end {
-  text-align: left;
+.euiSuperDatePicker__dateInnerText {
+  width: 100%;
 }
 
 .euiSuperDatePicker__updateButton {
@@ -79,13 +28,6 @@
   min-width: $euiButtonMinWidth + ($euiSizeXS * 1.5);
 }
 
-.euiSuperDatePicker__popoverSection {
-  @include euiScrollBar;
-  max-height: $euiSizeM * 11;
-  overflow: hidden;
-  overflow-y: auto;
-}
-
 @include euiBreakpoint('xs', 's') {
   .euiSuperDatePicker__updateButton {
     min-width: 0;
diff --git a/src/components/date_picker/super_date_picker/date_popover/_date_popover_button.scss b/src/components/date_picker/super_date_picker/date_popover/_date_popover_button.scss
new file mode 100644
index 00000000000..b779c68eccf
--- /dev/null
+++ b/src/components/date_picker/super_date_picker/date_popover/_date_popover_button.scss
@@ -0,0 +1,36 @@
+.euiDatePopoverButton__popover .euiDatePopoverButton__popoverAnchor {
+  display: block;
+}
+
+.euiDatePopoverButton {
+  @include euiSuperDatePickerText;
+
+  $backgroundColor: tintOrShade($euiColorSuccess, 90%, 70%);
+  $textColor: makeHighContrastColor($euiColorSuccess, $backgroundColor);
+
+  &-isSelected,
+  &-needsUpdating,
+  &:hover,
+  &:focus {
+    background-color: $backgroundColor;
+  }
+
+  &-needsUpdating {
+    color: $textColor;
+  }
+
+  &-isInvalid {
+    $backgroundColor: tintOrShade($euiColorDanger, 90%, 70%);
+    $textColor: makeHighContrastColor($euiColorDanger, $backgroundColor);
+    background-color: $backgroundColor;
+    color: $textColor;
+  }
+}
+
+.euiDatePopoverButton--start {
+  text-align: right;
+}
+
+.euiDatePopoverButton--end {
+  text-align: left;
+}
diff --git a/src/components/date_picker/super_date_picker/date_popover/_index.scss b/src/components/date_picker/super_date_picker/date_popover/_index.scss
new file mode 100644
index 00000000000..64fbb2d5b96
--- /dev/null
+++ b/src/components/date_picker/super_date_picker/date_popover/_index.scss
@@ -0,0 +1 @@
+@import 'date_popover_button';
diff --git a/src/components/date_picker/super_date_picker/date_popover/date_popover_button.js b/src/components/date_picker/super_date_picker/date_popover/date_popover_button.js
index 6619aa81333..5080e931696 100644
--- a/src/components/date_picker/super_date_picker/date_popover/date_popover_button.js
+++ b/src/components/date_picker/super_date_picker/date_popover/date_popover_button.js
@@ -48,13 +48,12 @@ export class EuiDatePopoverButton extends Component {
     } = this.props;
 
     const classes = classNames([
-      'euiSuperDatePicker__dateText',
-      'euiSuperDatePicker__dateButton',
-      `euiSuperDatePicker__dateButton--${position}`,
+      'euiDatePopoverButton',
+      `euiDatePopoverButton--${position}`,
       {
-        'euiSuperDatePicker__dateButton-isSelected': this.state.isOpen,
-        'euiSuperDatePicker__dateButton-isInvalid': isInvalid,
-        'euiSuperDatePicker__dateButton-needsUpdating': needsUpdating
+        'euiDatePopoverButton-isSelected': this.state.isOpen,
+        'euiDatePopoverButton-isInvalid': isInvalid,
+        'euiDatePopoverButton-needsUpdating': needsUpdating
       }
     ]);
 
@@ -79,10 +78,12 @@ export class EuiDatePopoverButton extends Component {
 
     return (
       <EuiPopover
+        className="euiDatePopoverButton__popover"
         button={button}
         isOpen={this.state.isOpen}
         closePopover={this.closePopover}
         anchorPosition={this.props.position === 'start' ? 'downLeft' : 'downRight'}
+        anchorClassName="euiDatePopoverButton__popoverAnchor"
         panelPaddingSize="none"
         ownFocus
         {...rest}
diff --git a/src/components/date_picker/super_date_picker/quick_select_popover/_index.scss b/src/components/date_picker/super_date_picker/quick_select_popover/_index.scss
new file mode 100644
index 00000000000..bc0d52e530e
--- /dev/null
+++ b/src/components/date_picker/super_date_picker/quick_select_popover/_index.scss
@@ -0,0 +1 @@
+@import 'quick_select_popover';
diff --git a/src/components/date_picker/super_date_picker/quick_select_popover/_quick_select_popover.scss b/src/components/date_picker/super_date_picker/quick_select_popover/_quick_select_popover.scss
new file mode 100644
index 00000000000..87875b058f8
--- /dev/null
+++ b/src/components/date_picker/super_date_picker/quick_select_popover/_quick_select_popover.scss
@@ -0,0 +1,12 @@
+.euiQuickSelectPopover__section {
+  @include euiScrollBar;
+  max-height: $euiSizeM * 11;
+  overflow: hidden;
+  overflow-y: auto;
+}
+
+// sass-lint:disable no-important
+.euiQuickSelectPopover__buttonText {
+  // Override specificity from universal and sibiling selectors
+  margin-right: $euiSizeXS !important;
+}
diff --git a/src/components/date_picker/super_date_picker/quick_select_popover/commonly_used_time_ranges.js b/src/components/date_picker/super_date_picker/quick_select_popover/commonly_used_time_ranges.js
index a80774719e4..5cd9a1edc07 100644
--- a/src/components/date_picker/super_date_picker/quick_select_popover/commonly_used_time_ranges.js
+++ b/src/components/date_picker/super_date_picker/quick_select_popover/commonly_used_time_ranges.js
@@ -31,7 +31,7 @@ export function EuiCommonlyUsedTimeRanges({ applyTime, commonlyUsedRanges }) {
     <Fragment>
       <EuiTitle size="xxxs"><span>Commonly used</span></EuiTitle>
       <EuiSpacer size="s" />
-      <EuiText size="s" className="euiSuperDatePicker__popoverSection">
+      <EuiText size="s" className="euiQuickSelectPopover__section">
         <EuiFlexGrid gutterSize="s" columns={2} responsive={false}>
           {links}
         </EuiFlexGrid>
diff --git a/src/components/date_picker/super_date_picker/quick_select_popover/quick_select_popover.js b/src/components/date_picker/super_date_picker/quick_select_popover/quick_select_popover.js
index 889f5ba3f34..ffdfd56a154 100644
--- a/src/components/date_picker/super_date_picker/quick_select_popover/quick_select_popover.js
+++ b/src/components/date_picker/super_date_picker/quick_select_popover/quick_select_popover.js
@@ -52,8 +52,8 @@ export class EuiQuickSelectPopover extends Component {
   render() {
     const quickSelectButton = (
       <EuiButtonEmpty
-        className="euiFormControlLayout__prepend euiSuperDatePicker__quickSelectButton"
-        textProps={{ className: 'euiSuperDatePicker__quickSelectButtonText' }}
+        className="euiFormControlLayout__prepend"
+        textProps={{ className: 'euiQuickSelectPopover__buttonText' }}
         onClick={this.togglePopover}
         aria-label="Date quick select"
         size="xs"
diff --git a/src/components/date_picker/super_date_picker/quick_select_popover/recently_used.js b/src/components/date_picker/super_date_picker/quick_select_popover/recently_used.js
index ab3afc75de5..021fe1ff492 100644
--- a/src/components/date_picker/super_date_picker/quick_select_popover/recently_used.js
+++ b/src/components/date_picker/super_date_picker/quick_select_popover/recently_used.js
@@ -33,7 +33,7 @@ export function EuiRecentlyUsed({ applyTime, commonlyUsedRanges, dateFormat, rec
     <Fragment>
       <EuiTitle size="xxxs"><span>Recently used date ranges</span></EuiTitle>
       <EuiSpacer size="s" />
-      <EuiText size="s" className="euiSuperDatePicker__popoverSection">
+      <EuiText size="s" className="euiQuickSelectPopover__section">
         <EuiFlexGroup gutterSize="s" direction="column">
           {links}
         </EuiFlexGroup>
diff --git a/src/components/date_picker/super_date_picker/super_date_picker.js b/src/components/date_picker/super_date_picker/super_date_picker.js
index 97756ccd20b..1c900a3f6d5 100644
--- a/src/components/date_picker/super_date_picker/super_date_picker.js
+++ b/src/components/date_picker/super_date_picker/super_date_picker.js
@@ -196,7 +196,7 @@ export class EuiSuperDatePicker extends Component {
           <EuiButtonEmpty
             className="euiSuperDatePicker__dateText"
             style={{ textAlign: 'left' }}
-            textProps={{ style: { width: '100%' } }}
+            textProps={{ className: 'euiSuperDatePicker__dateInnerText' }}
             onClick={this.hidePrettyDuration}
           >
             {prettyDuration(start, end, this.props.commonlyUsedRanges, this.props.dateFormat)}

From 605563fad95a845a23dd5c169e8d890aaa0b72c1 Mon Sep 17 00:00:00 2001
From: cchaos <caroline.horn@elastic.co>
Date: Wed, 19 Dec 2018 15:22:46 -0500
Subject: [PATCH 2/4] Fixing pretty format

---
 .../super_date_picker.test.js.snap            | 80 +++++--------------
 .../super_date_picker/_super_date_picker.scss | 17 +++-
 .../super_date_picker/super_date_picker.js    | 30 +++----
 3 files changed, 47 insertions(+), 80 deletions(-)

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
index 0609a241254..ef2a7b9e8fd 100644
--- 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
@@ -86,40 +86,18 @@ exports[`EuiSuperDatePicker is rendered 1`] = `
         isCustom={true}
         startDateControl={<div />}
       >
-        <EuiButtonEmpty
-          className="euiSuperDatePicker__dateText"
-          color="primary"
-          iconSide="left"
-          onClick={[Function]}
-          style={
-            Object {
-              "textAlign": "left",
-            }
-          }
-          textProps={
-            Object {
-              "className": "euiSuperDatePicker__dateInnerText",
-            }
-          }
-          type="button"
-        >
-          Last 15 minutes
-        </EuiButtonEmpty>
-        <EuiButtonEmpty
-          color="primary"
+        <button
+          className="euiSuperDatePicker__prettyFormat"
           data-test-subj="superDatePickerShowDatesButton"
-          iconSide="left"
           onClick={[Function]}
-          size="xs"
-          style={
-            Object {
-              "flexGrow": 0,
-            }
-          }
-          type="button"
         >
-          Show dates
-        </EuiButtonEmpty>
+          Last 15 minutes
+          <span
+            className="euiSuperDatePicker__prettyFormatLink"
+          >
+            Show dates
+          </span>
+        </button>
       </EuiDatePickerRange>
     </EuiFormControlLayout>
   </EuiFlexItem>
@@ -240,40 +218,18 @@ exports[`EuiSuperDatePicker isLoading 1`] = `
         isCustom={true}
         startDateControl={<div />}
       >
-        <EuiButtonEmpty
-          className="euiSuperDatePicker__dateText"
-          color="primary"
-          iconSide="left"
-          onClick={[Function]}
-          style={
-            Object {
-              "textAlign": "left",
-            }
-          }
-          textProps={
-            Object {
-              "className": "euiSuperDatePicker__dateInnerText",
-            }
-          }
-          type="button"
-        >
-          Last 15 minutes
-        </EuiButtonEmpty>
-        <EuiButtonEmpty
-          color="primary"
+        <button
+          className="euiSuperDatePicker__prettyFormat"
           data-test-subj="superDatePickerShowDatesButton"
-          iconSide="left"
           onClick={[Function]}
-          size="xs"
-          style={
-            Object {
-              "flexGrow": 0,
-            }
-          }
-          type="button"
         >
-          Show dates
-        </EuiButtonEmpty>
+          Last 15 minutes
+          <span
+            className="euiSuperDatePicker__prettyFormatLink"
+          >
+            Show dates
+          </span>
+        </button>
       </EuiDatePickerRange>
     </EuiFormControlLayout>
   </EuiFlexItem>
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
index 85563fe369b..cd9c89b5c5b 100644
--- a/src/components/date_picker/super_date_picker/_super_date_picker.scss
+++ b/src/components/date_picker/super_date_picker/_super_date_picker.scss
@@ -14,13 +14,24 @@
   }
 }
 
-.euiSuperDatePicker__dateText {
+.euiSuperDatePicker__prettyFormat {
   @include euiSuperDatePickerText;
+  display: flex;
+  justify-content: space-between;
   text-align: left;
+
+  &:hover,
+  &:focus {
+    text-decoration: none;
+
+    .euiSuperDatePicker__prettyFormatLink {
+      text-decoration: underline;
+    }
+  }
 }
 
-.euiSuperDatePicker__dateInnerText {
-  width: 100%;
+.euiSuperDatePicker__prettyFormatLink {
+  color: $euiLinkColor;
 }
 
 .euiSuperDatePicker__updateButton {
diff --git a/src/components/date_picker/super_date_picker/super_date_picker.js b/src/components/date_picker/super_date_picker/super_date_picker.js
index 1c900a3f6d5..641eb0d8bce 100644
--- a/src/components/date_picker/super_date_picker/super_date_picker.js
+++ b/src/components/date_picker/super_date_picker/super_date_picker.js
@@ -11,7 +11,7 @@ import { EuiDatePopoverButton } from './date_popover/date_popover_button';
 
 import { EuiDatePickerRange } from '../date_picker_range';
 import { EuiFormControlLayout } from '../../form';
-import { EuiButton, EuiButtonEmpty } from '../../button';
+import { EuiButton } from '../../button';
 import { EuiFlexGroup, EuiFlexItem } from '../../flex';
 import { EuiToolTip } from '../../tool_tip';
 
@@ -193,22 +193,14 @@ export class EuiSuperDatePicker extends Component {
           startDateControl={<div/>}
           endDateControl={<div/>}
         >
-          <EuiButtonEmpty
-            className="euiSuperDatePicker__dateText"
-            style={{ textAlign: 'left' }}
-            textProps={{ className: 'euiSuperDatePicker__dateInnerText' }}
+          <button
+            className="euiSuperDatePicker__prettyFormat"
+            data-test-subj="superDatePickerShowDatesButton"
             onClick={this.hidePrettyDuration}
           >
             {prettyDuration(start, end, this.props.commonlyUsedRanges, this.props.dateFormat)}
-          </EuiButtonEmpty>
-          <EuiButtonEmpty
-            size="xs"
-            style={{ flexGrow: 0 }}
-            onClick={this.hidePrettyDuration}
-            data-test-subj="superDatePickerShowDatesButton"
-          >
-            Show dates
-          </EuiButtonEmpty>
+            <span className="euiSuperDatePicker__prettyFormatLink">Show dates</span>
+          </button>
         </EuiDatePickerRange>
       );
     }
@@ -248,10 +240,18 @@ export class EuiSuperDatePicker extends Component {
     if (this.state.hasChanged || this.props.isLoading) {
       buttonText = this.props.isLoading ? 'Updating' : 'Update';
     }
+
+    let tooltipContent;
+    if (this.state.isInvalid) {
+      tooltipContent = 'Can\'t update, dates are invalid';
+    } else if (this.state.hasChanged && !this.props.isLoading) {
+      tooltipContent = 'Click to apply';
+    }
+
     return (
       <EuiToolTip
         ref={this.setTootipRef}
-        content={this.state.hasChanged && !this.props.isLoading ? 'Click to apply' : undefined}
+        content={tooltipContent}
         position="bottom"
       >
         <EuiButton

From 0165a965b8bff2eb49bf35c33516f3fe59b6afc2 Mon Sep 17 00:00:00 2001
From: cchaos <caroline.horn@elastic.co>
Date: Wed, 19 Dec 2018 17:03:39 -0500
Subject: [PATCH 3/4] Got rid of style tag

---
 .../date_popover/_date_popover_content.scss          |  8 ++++++++
 .../super_date_picker/date_popover/_index.scss       |  1 +
 .../super_date_picker/date_popover/absolute_tab.js   |  4 ++--
 .../date_popover/date_popover_content.js             |  3 ++-
 .../super_date_picker/date_popover/relative_tab.js   |  2 +-
 .../__snapshots__/quick_select.test.js.snap          | 12 ++----------
 .../quick_select_popover/_index.scss                 |  2 ++
 .../quick_select_popover/_quick_select.scss          |  5 +++++
 .../quick_select_popover/_quick_select_popover.scss  |  5 +++++
 .../quick_select_popover/_refresh_interval.scss      |  4 ++++
 .../quick_select_popover/quick_select.js             |  2 +-
 .../quick_select_popover/quick_select_popover.js     |  2 +-
 .../quick_select_popover/refresh_interval.js         |  2 +-
 13 files changed, 35 insertions(+), 17 deletions(-)
 create mode 100644 src/components/date_picker/super_date_picker/date_popover/_date_popover_content.scss
 create mode 100644 src/components/date_picker/super_date_picker/quick_select_popover/_quick_select.scss
 create mode 100644 src/components/date_picker/super_date_picker/quick_select_popover/_refresh_interval.scss

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
new file mode 100644
index 00000000000..ca1f42ecb23
--- /dev/null
+++ b/src/components/date_picker/super_date_picker/date_popover/_date_popover_content.scss
@@ -0,0 +1,8 @@
+.euiDatePopoverContent {
+  width: $euiFormMaxWidth;
+  max-width: 100%;
+}
+
+.euiDatePopoverContent__padded {
+  padding: $euiSizeS;
+}
diff --git a/src/components/date_picker/super_date_picker/date_popover/_index.scss b/src/components/date_picker/super_date_picker/date_popover/_index.scss
index 64fbb2d5b96..d8a2dc7d5a5 100644
--- a/src/components/date_picker/super_date_picker/date_popover/_index.scss
+++ b/src/components/date_picker/super_date_picker/date_popover/_index.scss
@@ -1 +1,2 @@
 @import 'date_popover_button';
+@import 'date_popover_content';
diff --git a/src/components/date_picker/super_date_picker/date_popover/absolute_tab.js b/src/components/date_picker/super_date_picker/date_popover/absolute_tab.js
index cd3c78fe4d4..352ca015852 100644
--- a/src/components/date_picker/super_date_picker/date_popover/absolute_tab.js
+++ b/src/components/date_picker/super_date_picker/date_popover/absolute_tab.js
@@ -48,7 +48,7 @@ export class EuiAbsoluteTab extends Component {
 
   render() {
     return (
-      <div style={{ width: 390, padding: 0 }}>
+      <div>
         <EuiDatePicker
           inline
           showTimeSelect
@@ -57,7 +57,7 @@ export class EuiAbsoluteTab extends Component {
           onChange={this.handleChange}
         />
         <EuiFormRow
-          style={{ padding: '0 8px 8px' }}
+          className="euiDatePopoverContent__padded"
           isInvalid={this.state.isTextInvalid}
           error={this.state.isTextInvalid ? `Expected format ${INPUT_DATE_FORMAT}` : undefined}
         >
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
index f5733e64811..1e13662bae3 100644
--- 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
@@ -62,7 +62,7 @@ export function EuiDatePopoverContent({ value, roundUp, onChange, dateFormat })
         id: DATE_MODES.NOW,
         name: 'Now',
         content: (
-          <EuiText size="s" color="subdued" style={{ width: 390, padding: 16 }}>
+          <EuiText size="s" color="subdued" className="euiDatePopoverContent__padded">
             <p>
               Setting the time to &quot;Now&quot; means that on every refresh
               this time will be set to the time of the refresh.
@@ -76,6 +76,7 @@ export function EuiDatePopoverContent({ value, roundUp, onChange, dateFormat })
 
   return (
     <EuiTabbedContent
+      className="euiDatePopoverContent"
       tabs={renderTabs()}
       initialSelectedTab={{ id: getDateMode(value) }}
       onTabClick={onTabClick}
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
index 13de817a720..253587dd041 100644
--- 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
@@ -56,7 +56,7 @@ export class EuiRelativeTab extends Component {
   render() {
     const formatedValue = dateMath.parse(this.props.value).format(this.props.dateFormat);
     return (
-      <EuiForm style={{ width: 390, padding: 16 }}>
+      <EuiForm className="euiDatePopoverContent__padded">
         <EuiFlexGroup gutterSize="s" responsive={false}>
           <EuiFlexItem>
             <EuiFormRow>
diff --git a/src/components/date_picker/super_date_picker/quick_select_popover/__snapshots__/quick_select.test.js.snap b/src/components/date_picker/super_date_picker/quick_select_popover/__snapshots__/quick_select.test.js.snap
index 95e30574a8e..12d0b8b97f2 100644
--- a/src/components/date_picker/super_date_picker/quick_select_popover/__snapshots__/quick_select.test.js.snap
+++ b/src/components/date_picker/super_date_picker/quick_select_popover/__snapshots__/quick_select.test.js.snap
@@ -191,17 +191,13 @@ exports[`EuiSuperDatePicker is rendered 1`] = `
         hasEmptyLabelSpace={false}
       >
         <EuiButton
+          className="euiQuickSelect__applyButton"
           color="primary"
           disabled={false}
           fill={false}
           iconSide="left"
           onClick={[Function]}
           size="s"
-          style={
-            Object {
-              "minWidth": 0,
-            }
-          }
           type="button"
         >
           Apply
@@ -407,17 +403,13 @@ exports[`EuiSuperDatePicker prevQuickSelect 1`] = `
         hasEmptyLabelSpace={false}
       >
         <EuiButton
+          className="euiQuickSelect__applyButton"
           color="primary"
           disabled={false}
           fill={false}
           iconSide="left"
           onClick={[Function]}
           size="s"
-          style={
-            Object {
-              "minWidth": 0,
-            }
-          }
           type="button"
         >
           Apply
diff --git a/src/components/date_picker/super_date_picker/quick_select_popover/_index.scss b/src/components/date_picker/super_date_picker/quick_select_popover/_index.scss
index bc0d52e530e..4fc081c561d 100644
--- a/src/components/date_picker/super_date_picker/quick_select_popover/_index.scss
+++ b/src/components/date_picker/super_date_picker/quick_select_popover/_index.scss
@@ -1 +1,3 @@
 @import 'quick_select_popover';
+@import 'quick_select';
+@import 'refresh_interval';
diff --git a/src/components/date_picker/super_date_picker/quick_select_popover/_quick_select.scss b/src/components/date_picker/super_date_picker/quick_select_popover/_quick_select.scss
new file mode 100644
index 00000000000..4a5b8ed06f6
--- /dev/null
+++ b/src/components/date_picker/super_date_picker/quick_select_popover/_quick_select.scss
@@ -0,0 +1,5 @@
+
+.euiQuickSelect__applyButton {
+  // Allow the button to shrink
+ min-width: 0;
+}
diff --git a/src/components/date_picker/super_date_picker/quick_select_popover/_quick_select_popover.scss b/src/components/date_picker/super_date_picker/quick_select_popover/_quick_select_popover.scss
index 87875b058f8..cbf1e8ee1ee 100644
--- a/src/components/date_picker/super_date_picker/quick_select_popover/_quick_select_popover.scss
+++ b/src/components/date_picker/super_date_picker/quick_select_popover/_quick_select_popover.scss
@@ -1,3 +1,8 @@
+.euiQuickSelectPopover__content {
+  width: $euiFormMaxWidth;
+  max-width: 100%;
+}
+
 .euiQuickSelectPopover__section {
   @include euiScrollBar;
   max-height: $euiSizeM * 11;
diff --git a/src/components/date_picker/super_date_picker/quick_select_popover/_refresh_interval.scss b/src/components/date_picker/super_date_picker/quick_select_popover/_refresh_interval.scss
new file mode 100644
index 00000000000..e002eddc4ca
--- /dev/null
+++ b/src/components/date_picker/super_date_picker/quick_select_popover/_refresh_interval.scss
@@ -0,0 +1,4 @@
+.euiRefreshInterval__startButton {
+  // Just enough to keep it the same size for "Start" and "Stop"
+  min-width: 90px;
+}
diff --git a/src/components/date_picker/super_date_picker/quick_select_popover/quick_select.js b/src/components/date_picker/super_date_picker/quick_select_popover/quick_select.js
index 3d06c1dfa9b..95462ff963e 100644
--- a/src/components/date_picker/super_date_picker/quick_select_popover/quick_select.js
+++ b/src/components/date_picker/super_date_picker/quick_select_popover/quick_select.js
@@ -166,9 +166,9 @@ export class EuiQuickSelect extends Component {
           <EuiFlexItem grow={false}>
             <EuiFormRow>
               <EuiButton
+                className="euiQuickSelect__applyButton"
                 size="s"
                 onClick={this.applyQuickSelect}
-                style={{ minWidth: 0 }}
                 disabled={this.state.timeValue === '' || this.state.timeValue <= 0}
               >
                 Apply
diff --git a/src/components/date_picker/super_date_picker/quick_select_popover/quick_select_popover.js b/src/components/date_picker/super_date_picker/quick_select_popover/quick_select_popover.js
index ffdfd56a154..d4899d372da 100644
--- a/src/components/date_picker/super_date_picker/quick_select_popover/quick_select_popover.js
+++ b/src/components/date_picker/super_date_picker/quick_select_popover/quick_select_popover.js
@@ -75,7 +75,7 @@ export class EuiQuickSelectPopover extends Component {
         ownFocus
       >
         <div
-          style={{ width: 400, maxWidth: '100%' }}
+          className="euiQuickSelectPopover__content"
           data-test-subj="superDatePickerQuickMenu"
         >
           <EuiQuickSelect
diff --git a/src/components/date_picker/super_date_picker/quick_select_popover/refresh_interval.js b/src/components/date_picker/super_date_picker/quick_select_popover/refresh_interval.js
index 59f741b060c..92ffa01bc8a 100644
--- a/src/components/date_picker/super_date_picker/quick_select_popover/refresh_interval.js
+++ b/src/components/date_picker/super_date_picker/quick_select_popover/refresh_interval.js
@@ -113,10 +113,10 @@ export class EuiRefreshInterval extends Component {
           <EuiFlexItem grow={false}>
             <EuiFormRow>
               <EuiButton
+                className="euiRefreshInterval__startButton"
                 iconType={this.props.isPaused ? 'play' : 'stop'}
                 size="s"
                 onClick={this.toogleRefresh}
-                style={{ minWidth: 90 }}
                 disabled={this.state.value === '' || this.state.value <= 0}
                 data-test-subj="superDatePickerToggleRefreshButton"
               >

From af8ccf9d2aa3890aa2eed56e14f23b44afba40bb Mon Sep 17 00:00:00 2001
From: cchaos <caroline.horn@elastic.co>
Date: Wed, 19 Dec 2018 17:17:01 -0500
Subject: [PATCH 4/4] cl

---
 CHANGELOG.md | 1 +
 1 file changed, 1 insertion(+)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index 9c9cacc7047..376c6055d15 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -3,6 +3,7 @@
 - Added `onFocus` prop to `EuiComboBox` ([#1375](https://github.com/elastic/eui/pull/1375))
 - Added `DisambiguateSet` and `ExclusiveUnion` utility types ([#1368](https://github.com/elastic/eui/pull/1368))
 - Added `EuiSuperDatePicker` component ([#1351](https://github.com/elastic/eui/pull/1351))
+- Fixed up styles for `EuiSuperDatePicker` ([#1389](https://github.com/elastic/eui/pull/1389))
 - Altered a few icons and added more: `crossInACircleFilled`, `editorRedo`, `editorUndo`, `grabHorizontal`, `minusInCircleFilled`, `plusInCircleFilled`, `sortable`, `starEmptySpace`, `starFilledSpace`, `starFilled`, `starMinusEmpty`, `starMinusFilled`, `starPlusEmpty`, `pinFilled` ([#1374](https://github.com/elastic/eui/pull/1374))
 
 **Bug fixes**