EuiSuperDatePicker design followup (#1389)

elastic · Dec 20, 2018 · eb36fc9 · eb36fc9
1 parent 5a318dd
commit eb36fc9
Show file tree

Hide file tree

Showing 23 changed files with 158 additions and 169 deletions.
diff --git 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**

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
@@ -86,42 +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 {
-              "style": Object {
-                "width": "100%",
-              },
-            }
-          }
-          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>
@@ -242,42 +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 {
-              "style": Object {
-                "width": "100%",
-              },
-            }
-          }
-          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/_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
@@ -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
@@ -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,73 +10,35 @@
     > .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);
+.euiSuperDatePicker__prettyFormat {
+  @include euiSuperDatePickerText;
+  display: flex;
+  justify-content: space-between;
+  text-align: left;
 
-  &-isSelected,
-  &-needsUpdating,
   &:hover,
   &:focus {
-    background-color: $backgroundColor;
-  }
+    text-decoration: none;
 
-  &-needsUpdating {
-    color: $textColor;
-  }
-
-  &-isInvalid {
-    $backgroundColor: tintOrShade($euiColorDanger, 90%, 70%);
-    $textColor: makeHighContrastColor($euiColorDanger, $backgroundColor);
-    background-color: $backgroundColor;
-    color: $textColor;
-  }
-
-  .euiFormControlLayout__prepend {
-    border: none;
+    .euiSuperDatePicker__prettyFormatLink {
+      text-decoration: underline;
+    }
   }
 }
 
-.euiSuperDatePicker__dateButton--start {
-  text-align: right;
-}
-
-.euiSuperDatePicker__dateButton--end {
-  text-align: left;
+.euiSuperDatePicker__prettyFormatLink {
+  color: $euiLinkColor;
 }
 
 .euiSuperDatePicker__updateButton {
   // Just wide enough for all 3 states
   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
@@ -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/_date_popover_content.scss 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
@@ -0,0 +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
@@ -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_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/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
@@ -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/...ate_picker/super_date_picker/quick_select_popover/__snapshots__/quick_select.test.js.snap b/...ate_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