Squashed commit of the following:

commit 2eea143 Author: cchaos <[email protected]> Date: Thu Jun 28 12:56:56 2018 -0400 Get rid of terrible IE highlight when select is focused commit 66647f0 Author: cchaos <[email protected]> Date: Thu Jun 28 12:07:54 2018 -0400 Revert commit of filter_button.scss commit c2e8a73 Author: cchaos <[email protected]> Date: Thu Jun 28 12:00:54 2018 -0400 Simplifying form control styles - Made bottom colored border from linear-gradient - Allowing parameters to determine if just the borders should render - Allowing parameters to determine if all state styles should be added - Fixing variable naming schemes commit c5f0ab5 Author: Stacey Gammon <[email protected]> Date: Thu Jun 28 10:02:16 2018 -0400 add inspect to typedef file (elastic#952) * add inpsect to typedef file * use the right pr number commit c64f055 Author: Nathan Reese <[email protected]> Date: Wed Jun 27 08:52:41 2018 -0600 add MutationObserver to accordion to trigger setChildContentHeight when children change (elastic#947) * add MutationObserver to accordion to trigger setChildContentHeight when children change * remove requestAnimationFrame around MutationObserver registration and add comment to change log * set up observer in ref creation function * mock MutationObserver
cchaos · Jun 28, 2018 · d48cd3e · d48cd3e
1 parent abc855f
commit d48cd3e
Show file tree

Hide file tree

Showing 9 changed files with 128 additions and 56 deletions.
diff --git a/src-docs/src/views/accordion/accordion_grow.js b/src-docs/src/views/accordion/accordion_grow.js
@@ -1,3 +1,6 @@
+/* eslint react/no-multi-comp: 0 */
+/* eslint react/prefer-stateless-function: 0 */
+
 import React, { Component } from 'react';
 
 import {
@@ -7,49 +10,55 @@ import {
   EuiText,
 } from '../../../../src/components';
 
-
-class AccordionGrow extends Component {
+class Rows extends Component {
   state = {
     counter: 1
   }
 
+  onIncrease() {
+    this.setState(prevState => ({
+      counter: prevState.counter + 1
+    }));
+  }
+
+  onDecrease() {
+    this.setState(prevState => ({
+      counter: Math.max(0, prevState.counter - 1)
+    }));
+  }
+
   render() {
     const rows = [];
     for (let i = 1; i <= this.state.counter; i++) {
       rows.push(<p key={i}>Row {i}</p>);
     }
+    return (
+      <EuiText>
+        <EuiSpacer size="s" />
+        <p>
+          <EuiButton onClick={() => this.onIncrease()}>Increase height</EuiButton>
+          {' '}
+          <EuiButton onClick={() => this.onDecrease()}>Decrease height</EuiButton>
+        </p>
+        { rows }
+      </EuiText>
+    );
+  }
+}
 
+class AccordionGrow extends Component {
+  render() {
     return (
       <EuiAccordion
         id="accordion1"
         buttonContent="Click me to toggle close / open"
         initialIsOpen={true}
         paddingSize="l"
       >
-        <EuiText>
-          <EuiSpacer size="s" />
-          <p>
-            <EuiButton onClick={() => this.onIncrease()}>Increase height</EuiButton>
-            {' '}
-            <EuiButton onClick={() => this.onDecrease()}>Decrease height</EuiButton>
-          </p>
-          { rows }
-        </EuiText>
+        <Rows/>
       </EuiAccordion>
     );
   }
-
-  onIncrease() {
-    this.setState(prevState => ({
-      counter: prevState.counter + 1
-    }));
-  }
-
-  onDecrease() {
-    this.setState(prevState => ({
-      counter: Math.max(0, prevState.counter - 1)
-    }));
-  }
 }
 
 export default AccordionGrow;
diff --git a/src/components/accordion/accordion.js b/src/components/accordion/accordion.js
@@ -56,6 +56,20 @@ export class EuiAccordion extends Component {
     }));
   }
 
+  setChildContentRef = (node) => {
+    this.childContent = node;
+
+    if (this.observer) {
+      this.observer.disconnect();
+      this.observer = null;
+    }
+
+    if (node) {
+      this.observer = new MutationObserver(this.setChildContentHeight);
+      this.observer.observe(this.childContent, { childList: true, subtree: true });
+    }
+  }
+
   render() {
     const {
       children,
@@ -140,7 +154,7 @@ export class EuiAccordion extends Component {
           ref={node => { this.childWrapper = node; }}
           id={id}
         >
-          <div ref={node => { this.childContent = node; }}>
+          <div ref={this.setChildContentRef}>
             <div className={paddingClass}>
               {children}
             </div>

diff --git a/src/components/accordion/accordion.test.js b/src/components/accordion/accordion.test.js
@@ -81,6 +81,18 @@ describe('EuiAccordion', () => {
   });
 
   describe('behavior', () => {
+    beforeAll(() => {
+      global.MutationObserver = class {
+        constructor() {}
+        disconnect() {}
+        observe() {}
+      };
+    });
+
+    afterAll(() => {
+      delete global.MutationObserver;
+    });
+
     it('opens when clicked once', () => {
       const component = mount(
         <EuiAccordion

diff --git a/src/components/form/_mixins.scss b/src/components/form/_mixins.scss
@@ -1,16 +1,17 @@
-/*
- * 1. Ensure the icon padding remains when in readOnly mode
- */
 
 @function euiFormControlGradient($color: $euiColorPrimary) {
   @return linear-gradient(to top,
     $color,
-    $color ($euiSizeXS / 2),
-    transparent ($euiSizeXS / 2),
+    $color 2px,
+    transparent 2px,
     transparent 100%
   );
 }
 
+/**
+ * 1. Ensure the icon padding remains when in readOnly mode
+ */
+
 @mixin euiFormControlSize($height: $euiFormControlHeight) {
   max-width: $euiFormMaxWidth;
   width: 100%;
@@ -89,8 +90,8 @@
 @mixin euiFormControlDisabledStyle() {
   cursor: not-allowed;
   color: $euiFormControlDisabledColor;
-  background: $euiFormBackgroundColor--disabled;
-  box-shadow: inset 0 0 0 1px $euiFormBorderColor--disabled;
+  background: $euiFormBackgroundDisabledColor;
+  box-shadow: inset 0 0 0 1px $euiFormBorderDisabledColor;
 
   &::placeholder {
     color: $euiFormControlDisabledColor;
@@ -106,8 +107,9 @@
 }
 
 /**
- * 1. Override invalid state with focus state.
+ * 2. Override invalid state with focus state.
  */
+
 @mixin euiFormControlStyle($borderOnly: false, $includeStates: true) {
   @include euiFormControlSize;
   @include euiFormControlDefaultShadow($borderOnly);
@@ -125,17 +127,17 @@
   }
 
   &--compressed {
-    padding-top: $euiFormControlPadding--compressed;
-    padding-bottom: $euiFormControlPadding--compressed;
-    height: $euiFormControlHeight--compressed;
+    padding-top: $euiFormControlCompressedPadding;
+    padding-bottom: $euiFormControlCompressedPadding;
+    height: $euiFormControlCompressedHeight;
   }
 
   @if ($includeStates) {
-    &:invalid { /* 1 */
+    &:invalid { /* 2 */
       @include euiFormControlInvalidStyle;
     }
 
-    &:focus { /* 1 */
+    &:focus { /* 2 */
       @include euiFormControlFocusStyle($borderOnly);
     }
 
@@ -150,9 +152,7 @@
 
 }
 
-//
 // Custom styles and states for checkboxes and radios
-//
 
 @mixin euiCustomControl($type: null, $size: $euiSize){
 

diff --git a/src/components/form/_variables.scss b/src/components/form/_variables.scss
@@ -1,9 +1,9 @@
-$euiFormMaxWidth: 400px !default;
-$euiFormBackgroundColor: tintOrShade($euiColorLightestShade, 60%, 25%) !default;
-$euiFormBackgroundColor--disabled: darken($euiColorLightestShade, 2%) !default;
-$euiFormBorderColor: transparentize($euiColorFullShade, .9) !default;
-$euiFormBorderColor--disabled: transparentize($euiColorFullShade, .92) !default;
-$euiFormCustomControlDisabledIconColor: shadeOrTint($euiColorMediumShade, 38%, 48.5%) !default; // exact 508c foreground for $euiColorLightShade
+// Sizing
+$euiFormMaxWidth: $euiSizeXXL * 10 !default;
+$euiFormControlHeight: $euiSizeXXL !default;
+$euiFormControlCompressedHeight: $euiSizeXL !default;
+$euiFormControlPadding: $euiSizeM !default;
+$euiFormControlCompressedPadding: $euiSizeS !default;
 
 $euiRadioSize: $euiSize !default;
 $euiCheckBoxSize: $euiSize !default;
@@ -13,10 +13,30 @@ $euiSwitchWidth: ($euiSize * 2.5) + $euiSizeXS !default;
 $euiSwitchThumbSize: $euiSwitchHeight !default;
 $euiSwitchIconHeight: $euiSize !default;
 
-$euiFormControlHeight: $euiSizeXXL !default;
-$euiFormControlHeight--compressed: $euiSizeXL !default;
+// Coloring
+$euiFormBackgroundColor: tintOrShade($euiColorLightestShade, 60%, 25%) !default;
+$euiFormBackgroundDisabledColor: darken($euiColorLightestShade, 2%) !default;
+$euiFormBorderColor: transparentize($euiColorFullShade, .9) !default;
+$euiFormBorderDisabledColor: transparentize($euiColorFullShade, .92) !default;
+$euiFormCustomControlDisabledIconColor: shadeOrTint($euiColorMediumShade, 38%, 48.5%) !default; // exact 508c foreground for $euiColorLightShade
+$euiFormControlDisabledColor: $euiColorMediumShade !default;
 
-$euiFormControlPadding: $euiSizeM !default;
-$euiFormControlPadding--compressed: $euiSizeS !default;
+//** DEPRECATED **//
+//** DEPRECATED **//
+//** DEPRECATED **//
+//** DEPRECATED **//
 
-$euiFormControlDisabledColor: $euiColorMediumShade !default;
+@if variable-exists(euiFormControlHeight--compressed) {
+  $euiFormControlCompressedHeight: $euiFormControlHeight--compressed !global;
+  @warn '`$euiFormControlHeight--compressed` is deprecated. Please use `$euiFormControlCompressedHeight` instead';
+}
+
+@if variable-exists(euiFormControlPadding--compressed) {
+  $euiFormControlCompressedPadding: $euiFormControlPadding--compressed !global;
+  @warn '`$euiFormControlPadding--compressed` is deprecated. Please use `$euiFormControlCompressedPadding` instead';
+}
+
+@if variable-exists(euiFormBorderColor--disabled) {
+  $euiFormBorderDisabledColor: $euiFormBorderColor--disabled !global;
+  @warn '`$euiFormBorderColor--disabled` is deprecated. Please use `$euiFormBorderDisabledColor` instead';
+}
diff --git a/src/components/form/file_picker/_file_picker.scss b/src/components/form/file_picker/_file_picker.scss
@@ -55,6 +55,7 @@
    * 1. Don't block the user from dropping files onto the filepicker.
    * 2. Put prompt on top of input, so the clear button can intercept the click.
    * 3. Ensure space for import icon and clear button (only if it has files)
+   * 4. Delay focus gradient or else it will only partially transition while file chooser opens
    */
   .euiFilePicker__prompt {
     @include euiFormControlDefaultShadow;
@@ -66,10 +67,16 @@
     padding: $euiSizeL;
     text-align: center;
 
+    transition:
+      box-shadow $euiAnimSpeedFast ease-in,
+      background-color $euiAnimSpeedFast ease-in,
+      background-image $euiAnimSpeedFast ease-in,
+      background-size $euiAnimSpeedFast ease-in $euiAnimSpeedFast; /* 4 */
+
     @at-root {
       .euiFilePicker--compressed#{&} {
-        height: $euiFormControlHeight--compressed;
-        padding: $euiFormControlPadding--compressed;
+        height: $euiFormControlCompressedHeight;
+        padding: $euiFormControlCompressedPadding;
         @include euiFormControlWithIcon(); /* 3 */
         text-align: left;
       }
@@ -111,7 +118,11 @@
   // Hover and focus
   .euiFilePicker__input:hover:not(:disabled) + .euiFilePicker__prompt,
   .euiFilePicker__input:focus + .euiFilePicker__prompt {
-    text-decoration: underline;
+    .euiFilePicker__promptText {
+      // Adding the underline to the prompt text ensures the underline
+      // color is the same as the current text color
+      text-decoration: underline;
+    }
 
     .euiFilePicker__icon {
       transform: scale(1.1);

diff --git a/src/components/form/form_control_layout/_form_control_layout.scss b/src/components/form/form_control_layout/_form_control_layout.scss
@@ -35,7 +35,7 @@
     border-right: 1px solid $euiFormBorderColor;
 
     &:disabled {
-      background-color: $euiFormBackgroundColor--disabled;
+      background-color: $euiFormBackgroundDisabledColor;
       color: $euiFormControlDisabledColor; // ensures established contrast
     }
 
@@ -46,7 +46,7 @@
       margin-bottom: 0;
       padding: $euiFormControlPadding;
       border: none;
-      background-color: $euiFormBackgroundColor--disabled;
+      background-color: $euiFormBackgroundDisabledColor;
       line-height: $euiFontSize;
     }
 

diff --git a/src/components/form/select/_select.scss b/src/components/form/select/_select.scss
@@ -14,12 +14,17 @@
   padding-bottom: 0; /* 2 */
 
   &--compressed {
-    line-height: $euiFormControlHeight--compressed; /* 2 */
+    line-height: $euiFormControlCompressedHeight; /* 2 */
     padding-top: 0; /* 2 */
     padding-bottom: 0; /* 2 */
   }
 
   &::-ms-expand {
     display: none;
   }
+
+  &:focus::-ms-value {
+    color: $euiTextColor;
+    background: transparent;
+  }
 }
diff --git a/src/components/icon/index.d.ts b/src/components/icon/index.d.ts
@@ -88,6 +88,7 @@ declare module '@elastic/eui' {
     | 'indexOpen'
     | 'indexPatternApp'
     | 'indexSettings'
+    | 'inspect'
     | 'invert'
     | 'inputOutput'
     | 'kqlField'