Addressed feedback

elastic · Nov 7, 2018 · 3e949bd · 3e949bd
1 parent 23d5188
commit 3e949bd
Show file tree

Hide file tree

Showing 5 changed files with 65 additions and 20 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,7 +1,11 @@
 //// GLOBAL Date picker
 
 .euiGlobalDatePicker__quickSelectButton {
-  .euiButtonEmpty__text {
+  // Override prepend border since button already lives inside another prepend
+  border-right: none !important;
+
+  .euiGlobalDatePicker__quickSelectButtonText {
+    // Override specificity from universal and sibiling selectors
     margin-right: $euiSizeXS !important;
   }
 }
@@ -25,13 +29,14 @@
 }
 
 .euiGlobalDatePicker__dateButton {
+  @include euiFormControlText;
   display: block;
   width: 100%;
-  @include euiFormControlText;
   padding: 0 $euiSizeS;
   line-height: $euiFormControlHeight - 2px;
   height: $euiFormControlHeight - 2px;
   word-break: break-all;
+  transition: background $euiAnimSpeedFast ease-in;
 
   $backgroundColor: tintOrShade($euiColorSuccess, 90%, 70%);
   $textColor: makeHighContrastColor($euiColorSuccess, $backgroundColor);
@@ -68,10 +73,13 @@
 }
 
 .euiGlobalDatePicker__updateButton {
+  // Just wide enough for all 3 states
+  min-width: $euiButtonMinWidth + ($euiSizeXS * 1.5);
+
   @include euiBreakpoint('xs', 's') {
     min-width: 0;
 
-    .euiButton__text {
+    .euiGlobalDatePicker__updateButtonText {
       display: none;
     }
   }

diff --git a/src-docs/src/views/date_picker/global_date_picker.js b/src-docs/src/views/date_picker/global_date_picker.js
@@ -235,6 +235,7 @@ export default class extends Component {
       isPopoverOpen: false,
       showPrettyFormat: false,
       showNeedsUpdate: false,
+      isUpdating: false,
       timerIsOn: false,
       recentlyUsed: [
         ['11/25/2017 00:00 AM', '11/25/2017 11:59 PM'],
@@ -301,12 +302,18 @@ export default class extends Component {
     }));
   }
 
+  toggleIsUpdating = () => {
+    this.setState(prevState => ({
+      isUpdating: !prevState.isUpdating,
+    }));
+  }
+
 
   render() {
     const quickSelectButton = (
       <EuiButtonEmpty
         className="euiFormControlLayout__prepend euiGlobalDatePicker__quickSelectButton"
-        style={{ borderRight: 'none' }}
+        textProps={{ className: 'euiGlobalDatePicker__quickSelectButtonText' }}
         onClick={this.togglePopover}
         aria-label="Date quick select"
         size="xs"
@@ -327,7 +334,6 @@ export default class extends Component {
         isOpen={this.state.isPopoverOpen}
         closePopover={this.closePopover.bind(this)}
         anchorPosition="downLeft"
-        ownFocus
       >
         <div style={{ maxWidth: 400 }}>
           {this.renderQuickSelect()}
@@ -344,7 +350,8 @@ export default class extends Component {
     return (
       <Fragment>
         <EuiSwitch label="Pretty format" onChange={this.togglePrettyFormat} checked={this.state.showPrettyFormat} /> &nbsp;
-        <EuiSwitch label="Needs update" onChange={this.toggleNeedsUpdate} checked={this.state.showNeedsUpdate} />
+        <EuiSwitch label="Needs update" onChange={this.toggleNeedsUpdate} checked={this.state.showNeedsUpdate} /> &nbsp;
+        <EuiSwitch label="Is Updating" onChange={this.toggleIsUpdating} checked={this.state.isUpdating} />
         <EuiSpacer />
 
         <EuiFlexGroup gutterSize="s" responsive={false}>
@@ -398,11 +405,24 @@ export default class extends Component {
   renderUpdateButton = () => {
     const color = this.state.showNeedsUpdate ? 'secondary' : 'primary';
     const icon = this.state.showNeedsUpdate ? 'kqlFunction' : 'refresh';
-    const text = this.state.showNeedsUpdate ? 'Update' : 'Refresh';
+    let text = this.state.showNeedsUpdate ? 'Update' : 'Refresh';
+
+    if (this.state.isUpdating) {
+      text = 'Updating';
+    }
 
     return (
       <EuiToolTip ref={this.setTootipRef} content={this.state.showNeedsUpdate ? 'Click to apply' : undefined} position="bottom">
-        <EuiButton className="euiGlobalDatePicker__updateButton" color={color} fill iconType={icon}>{text}</EuiButton>
+        <EuiButton
+          isLoading={this.state.isUpdating}
+          className="euiGlobalDatePicker__updateButton"
+          color={color}
+          fill
+          iconType={icon}
+          textProps={{ className: 'euiGlobalDatePicker__updateButtonText' }}
+        >
+          {text}
+        </EuiButton>
       </EuiToolTip>
     );
   }
@@ -539,7 +559,7 @@ export default class extends Component {
                 iconType={this.state.timerIsOn ? 'stop' : 'play'}
                 size="s"
                 onClick={this.toggleTimer}
-                style={{ minWidth: 0 }}
+                style={{ minWidth: 90 }}
               >
                 {this.state.timerIsOn ? 'Stop' : 'Start'}
               </EuiButton>

diff --git a/src/components/button/button.js b/src/components/button/button.js
@@ -53,6 +53,8 @@ export const EuiButton = ({
   rel,
   type,
   buttonRef,
+  contentProps,
+  textProps,
   ...rest
 }) => {
 
@@ -105,9 +107,9 @@ export const EuiButton = ({
         ref={buttonRef}
         {...rest}
       >
-        <span className="euiButton__content">
+        <span className="euiButton__content" {...contentProps}>
           {buttonIcon}
-          <span className="euiButton__text">{children}</span>
+          <span className="euiButton__text" {...textProps}>{children}</span>
         </span>
       </a>
     );
@@ -120,9 +122,9 @@ export const EuiButton = ({
         ref={buttonRef}
         {...rest}
       >
-        <span className="euiButton__content">
+        <span className="euiButton__content" {...contentProps}>
           {buttonIcon}
-          <span className="euiButton__text">{children}</span>
+          <span className="euiButton__text" {...textProps}>{children}</span>
         </span>
       </button>
     );
@@ -165,6 +167,12 @@ EuiButton.propTypes = {
    */
   type: PropTypes.string,
   buttonRef: PropTypes.func,
+
+  /**
+   * Props passing
+   */
+  contentProps: PropTypes.object,
+  textProps: PropTypes.object,
 };
 
 EuiButton.defaultProps = {

diff --git a/src/components/button/button_empty/button_empty.js b/src/components/button/button_empty/button_empty.js
@@ -60,6 +60,8 @@ export const EuiButtonEmpty = ({
   rel,
   type,
   buttonRef,
+  contentProps,
+  textProps,
   ...rest
 }) => {
 
@@ -110,9 +112,9 @@ export const EuiButtonEmpty = ({
         ref={buttonRef}
         {...rest}
       >
-        <span className="euiButtonEmpty__content">
+        <span className="euiButtonEmpty__content" {...contentProps}>
           {buttonIcon}
-          <span className="euiButtonEmpty__text">{children}</span>
+          <span className="euiButtonEmpty__text" {...textProps}>{children}</span>
         </span>
       </a>
     );
@@ -125,9 +127,9 @@ export const EuiButtonEmpty = ({
         ref={buttonRef}
         {...rest}
       >
-        <span className="euiButtonEmpty__content">
+        <span className="euiButtonEmpty__content" {...contentProps}>
           {buttonIcon}
-          <span className="euiButtonEmpty__text">{children}</span>
+          <span className="euiButtonEmpty__text"{...textProps}>{children}</span>
         </span>
       </button>
     );
@@ -155,6 +157,12 @@ EuiButtonEmpty.propTypes = {
 
   type: PropTypes.string,
   buttonRef: PropTypes.func,
+
+  /**
+   * Props passing
+   */
+  contentProps: PropTypes.object,
+  textProps: PropTypes.object,
 };
 
 EuiButtonEmpty.defaultProps = {

diff --git a/src/components/date_picker/_date_picker_range.scss b/src/components/date_picker/_date_picker_range.scss
@@ -13,8 +13,9 @@
   align-items: center;
   padding: 1px; /* 1 */
 
+  // Allow any child to fill entire range container
   > * {
-    flex: 1 1 0%; // All values necessary for IE support
+    flex-grow: 1;
   }
 
   .euiFieldText.euiDatePicker {
@@ -48,7 +49,7 @@
   > .euiDatePickerRange__delimeter {
     line-height: 1 !important;
     flex: 0 0 auto;
-    padding-left: $euiFormControlPadding/2;
-    padding-right: $euiFormControlPadding/2;
+    padding-left: $euiFormControlPadding / 2;
+    padding-right: $euiFormControlPadding / 2;
   }
 }